All Posts Categorized: ‘Javascript’

Jappler Recommends: jQuery TOOLS

  • 0 Comments

About a year or so back Demitrious shot me over a link to something he thought looked pretty slick: jQuery TOOLS. I took a quick look but never did anything else with it because I had my old standbys in place for most of what jQuery TOOLS offered (overlays, tabs, tooltips, etc).

What does jQuery TOOLS offer?

  • Tabs
  • Tooltips
  • Overlays
  • Expose
  • Scrollable
  • Flashembed

Last week I decided to finally step out of using what I normally used (Thickbox for overlays) and try something from jQuery TOOLS. One look at their demo and I was completely sold. The overlays were slick, easy to implement and best of all – really light weight. Demo: click on the photo.

If you have any web development projects coming up or in the mix, do yourself a favor and check out the demos at jQuery TOOLS. You can accomplish a lot with a little (and have fun doing it).

Jappler Recommends: jQuery

  • 0 Comments

If you ever wanted to do something cool (slideshow, lightbox, accordion, pagination, table sorting, drop down menus etc) – please do yourself a favor and look at jQuery and all the great jQuery plugins that are available. About a year or two ago I really liked some of the different javascript libraries (YUI, prototype, etc) but over the last several months 99% of all my projects have required some sort of functionality that made me look at and then use jQuery.

Why jQuery? Unlike some of the other libraries, jQuery is very lightweight and does not suffer from a lot of bloat. You can also find a number of well documented plugins to do just about anything. You also have a great deal of UI controls and widgets that are available by using jQuery UI. Did I mention the documentation – it is really great. The learning curve is not steep – and once you do a few smaller projects – your comfort level with jQuery will skyrocket.

So next time you decide to do something to add some extra pizazz into your web site – remember, take a look at jQuery first!

Out With the Old, In With the New

  • 4 Comments

As you might have noticed – I took a week off from blogging in order to focus on something else – cleaning up Jappler.com. Over the past few months I have learned so much more about WordPress, web site optimization, and what I really used this web site for – so I decided I needed to take some time to redo this site.

From a design perspective, I decided to darken the colors quite a bit in order to remove some of the drabness of the old design. I also added a background pattern to give some depth, and also added in some new pictures in the header that represent changes/additions in my life over the last few years. I love working with greys – so I added more grey elements. I also simplified the layout and got rid of a number of image based elements to keep everything minimal.

From a UI perspective, I decided to focus on the content I have created over the past 4-5 years instead of a few static pages here and there. I moved all of the blog content into the main navigation so it is easier to find/navigate. I also used Jappler Menus in combination with the WordPress function to list all categories/sub-categories.

From a functional perspective, I started from scratch with this new version. I created a number of custom functions that make presenting content a lot easier. I dropped the YUI library and went with all jQuery based AJAX functionality. The code is leaner, faster, and easy to modify for any future needs. The comments are now using WordPress’s threaded comment functionality, and a number of other WordPress 2.7 additions. I also went through and got rid of almost 50% of my old plugins (replaced the functionality with custom functions, WordPress built in functionality – or completely removed unused plugins.

From an optimization perspective, this site uses far less javascript, CSS, and images and will load much faster than the previous site. I also increased the use of title tags, alt tags, and other easy tricks to help with search engine optimization.

All in all – this was something fun that I enjoyed and look forward to adding even more new design/functional elements in the future.

Lava Lamp Menus

  • 0 Comments

Check out these fun lava lamp menus. Really – even though some of this stuff is a little crazy for me – I like the idea of doing cool things like this without the use of flash.

jQuery + CSS + XHTML = Jappler Menus v2

  • 6 Comments

Previously – I introduced a nice way to create drop down menus using HTML (lists), Javascript (drop down), and CSS (styling of menu). I put all of this together and called it: Jappler Menus. (See previous post about Jappler Menus).

Since writing that post – I have found a better, faster, cleaner way to work with drop down menus. I had originally seen some nice menus: http://help-developer.com and decided with some changes – that would be a much nicer way to work with menus. For this – I give you Jappler Menus version 2.

Here is an example of Jappler Menus in action: http://jappler.com/downloads/jappler-menus_v2/

There are 3 main components to the Jappler menus: HTML, Javascript (jQuery), and CSS.

  1. The HTML to generate the menu contents. All you need to use to create the menu is create a simple HTML list:
    [html]

    [/html]

  2. The javascript that makes the drop downs fade in and out. This uses jQuery and then some custom JS that takes care of our menu:
    [javascript]
    function japplerMenu(){
    $(” #navigation ul “).css({display: “none”}); // Opera Fix
    $(” #navigation li”).hover(function(){
    $(this).find(‘ul:first’).css({visibility: “visible”,display: “none”}).fadeIn(200);
    },function(){
    $(this).find(‘ul:first’).css({visibility: “hidden”});
    });
    }

    $(document).ready(function(){
    japplerMenu();
    });
    [/javascript]
    }

  3. The CSS to make things look pretty.Here is the custom CSS that is needed:
    [css]
    #mainNav {height:30px;background: url(‘images/mainNav_bg.gif’) repeat-x;width:623px;}

    #navigation, #navigation ul{position:relative;z-index:1000;list-style-type:none;list-style-position:outside;margin:0;padding:0;}

    #navigation a {display:block;padding:0 20px 0 20px;font-size:1.1em;font-weight:bold;color:#fff;text-decoration:none;line-height:30px;}

    #navigation li:hover {background: url(‘images/mainNav_bg-over.gif’) repeat-x;}
    #navigation li:hover a {color:#fff;}

    #navigation li{float:left;position:relative;}

    #navigation ul {width:165px;position:absolute;left:-1px;top:29px;display:none;background:#f1f4f2;border:1px solid #4b4d5b;border-bottom:none;}

    #navigation li:hover li a {color:#333;}

    #navigation li ul a {float:left;width:155px;line-height:normal;font-weight:normal;font-size:.95em;text-align:left;border-bottom:1px solid #4b4d5b;background:#f1f4f2;height:auto;padding:5px;}
    #navigation li ul a:hover {background:#a4a5a9;color:#000;}

    #navigation ul ul{top:auto;}

    #navigation li ul ul {left:160px;margin:0;}

    #navigation li:hover ul ul, #navigation li:hover ul ul ul, #navigation li:hover ul ul ul ul{display:none;}
    #navigation li:hover ul, #navigation li li:hover ul, #navigation li li li:hover ul, #navigation li li li li:hover ul{display:block;}

    [/css]
    There is also some additional CSS for IE 6. (See IE 6 specific CSS). You can add some conditional logic to include this for only IE 6 (See the example source above – look in the header for the conditional code.)

These menus are compatible with IE 6+, Safari 2+, Opera 9+, and FF 2+. If you want it to work in IE 6 – I have a start on some CSS that will make it work.

Quick Expandable List

  • 1 Comment

Ever need a list which you can easily show/hide the content? Check out: http://cssglobe.com/post.asp?id=940

Jappler Recommends: Lightview Plus WordPress Plugin

  • 2 Comments

I recently switched from using a gallery WordPress plugin called fGallery to something that is more elegant and updated: NextGen Gallery During this transition, I found a really cool lightbox-ish plugin called Lightview Plus which is more polished than your typical lightbox plugin.

Example:

You do not have to add in extra code to get the images to show up in the lightview – it automatically takes care of everything for you.

Add a "Pseudo" Pseudo Class Hover in Inline CSS.

  • 4 Comments

I have been busy this week with a few really cool projects – one of them to create a widget for any site that will show the latest news items from a RSS feed – while not limiting the widget to servers with PHP. After putting that together, I had to add inline CSS to style the feed output. Everything looked great but I could not figure out how to add a :hover to an inline style…until I realized I could fake it by adding some basic javascript: onmouseover and onmouseout to change the font color.

[html]
Title</a
[/html]

Tabs With the Yahoo User Interface Library (YUI).

  • 0 Comments

I have recently been asked to create a tabbed interface for a few projects which does not require any page reloading. I am familiar with working with the Yahoo! User Interface Library (YUI) and decided to use their tabview component to make this happen.

What you need:

  1. Yahoo User Interface Library
  2. CSS
  3. HTML (View Source)

A simple example:
Check this code out in action (reusing the tabs I created from the jappler menus).

You can easily “View Source” and use that as an example. The possibilities of customizing the “tabview” component are endless and can also be seen on jappler.com’s home page.

Moral of the story
Check out the YUI library, look at the examples and start using and reusing the code! This speeds up development and will make your life easier!

Sliding Doors + Sons of Suckerfish = Jappler Menus!

  • 26 Comments

There have been two great menu and navigation techniques I have used over the last few years:

  1. Sliding Doors of CSS
  2. Sons of Suckerfish (for drop down menus)

I have used both of these techniques on several web sites, but crazily not together…until a week ago when a client decided they wanted to move away from their antiquated menus that relied on hundreds of lines of javascript, HTML tables, and over 40 image files (for seven tabs). This technique works in IE 6, IE 7, Firefox, and Safari.

After I had put the code into place I thought it might be helpful for others to see exactly how it is done. These techniques give you a lot of flexibility with very lightweight code.

Code/Files Needed

  1. Two tab images (left and right, with both an active and hover (highligted) option
  2. Sub-menu arrow (not required)
  3. Sons of Suckerfish javascript
  4. CSS for both the drop downs and the sliding doors techniques
  5. Menu list code (your menu items)

Two tab images
The sliding door technique is great because you do not need to make tab specific images, nor do you need to worry about the tab length – it is all taken care of by two images and some CSS. For this example, I am going to use two basic tab images that I quickly created for this example:

  1. Left
  2. Right

Sub-menu arrow (not required)
If you want to easily let your visitors know you have a sub-menu within your menus, add in a sub-menu arrow.

Sons of Suckerfish javascript
After years of using nasty javascript – it is refreshing to see that this technique only requires a few lines of javascript (check out the javascript).

CSS for both the drop downs and the sliding doors techniques
The CSS for the drop down menus and the tabbed navigation is pretty slick (check out the CSS).

Menu list code (your menu items)
The menu list code is the actual menus/tabs. The code can be dynamically created by using something like wp_list_pages() in WordPress, or you can create the code yourself. I have created some sample code for this example.

Everything put together
Now that you have an understanding of all the files and code involved, let’s see everything put together This is a very good way to have sustainable code/files for a small or large web site when dealing with navigation.

Questions, comments? Contact me!