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]
   • Home
   • About Us
     • Our Story
     • Our Clients
     • Our Philosophy
   • Our Products
     • WordPress Themes
     • WordPress Plugins
     • WordPress Consultation
   • HOWTOs
     • bbPress

     … [more]

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

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.

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

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!

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 … [more]

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.

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!

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]

Please bare with me as I make some changes to my comments code here on my blog. I am trying to make use of an awesome AJAX comments plugin as well as dress up the interface.
[tags]jappler.com, AJAX[/tags]

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

• Ajax: A New Approach to Web Applications
• AJAX blog
• 24 ways to impress your friends (several AJAX articles)
• AJAX Login System using XMLHttpRequest
• XMLHttpRequest and AJAX tutorials
• AJAX Magazine: AJAX Tutorials

[tags]AJAX, XMLHttpRequest [/tags]

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]

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:

• Webmonkey's javascript code library
• Javascript: The Definitive Guide (thanks to Safari Books)
• W3C School's JavaScript Tutorial
• Dev Shed's Javascript section
• Javascript.com

[tags]Javascript[/tags]