Tabs With the Yahoo User Interface Library (YUI).

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!

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!

Jappler Recommends: Smooth Gallery

I have needed a good solution for a “cool” image gallery/slideshow for a few clients and have been very happy with Smooth Gallery. Why do I like this over something else from YUI or jQuery? I think this is by far the most easy to use and customize gallery/slide show. The documentation is clear and easy to read, and adding or changing parameters is extremely easy and clear. The other libraries have similar gallery/slideshow code, but if you are not a javascript fan – this is the one for you.

Dropdown CSS/Javascript Menus

If you ever need to implement drop down menus and want to use clean CSS/javascript code, check out: Son of Suckerfish Dropdown menus. I have implemented these on a few web sites now for my clients and have been very happy with the results. If you are using WordPress, you can also use to dynamically generate the drop down menus. Enjoy!

A Weekend Full of Learning

What a crazy and full weekend! Many thanks to Demitrious for helping me out this weekend with PHP. If you are a beginner, check out Demtrious’s article: Poor Man’s Debugger. This article helped me greatly over the past weekend and I feel like I now have a good handle on what to do when things go unexpectedly.

I spent Sunday working with javascript for another project and found some of the javascript articles on webmonkey to be a big help.

Go PSU and Bears!

[tags]PHP, debugging, Javascript[/tags]

ajax.

After months of reading about it, I thought I would share some of the best articles on AJAX that I have come across:

[tags]AJAX, XMLHttpRequest [/tags]

kick ass calendar.

Well. A good calendar solution is always needed for business and/or personal needs. I just happened to stumble on a really cool PHP/CSS/AJAX solution: Monket Calendar. Check out the demo. As of now, it is still in beta testing, but it looks promising. (Especially since it supports RSS and iCal…as well as used AJAX. I need some more AJAX in my life.
[tags]Monket Calendar, AJAX[/tags]

javascript help.

When creating my first Dashboard widget I had to brush up on my javascript skills. I used javascript a little bit in the late 1990s, and since then, I have found PHP or CSS to take care of most of my needs for web development. As most people know, javascript is making quite a comeback (thanks to AJAX) so I thought I better take another look. I wanted to share some of the resources I found useful:

[tags]Javascript[/tags]