Get Into This

Update 10/17/2006: As requested, I've added two new arguments to the menu that will toggle the hide on page load (hideOnLoad) and also toggle the autohide (autoHide) when the mouse leaves the menu area. The 2nd argument is only useful when the triggerEvent is set to click or dblclick

Update 10/21/2008: As a request from a reader, I've modified the code a little so that setting loadHideDelay: 0 and hideOnLoad: true will cause the menu to be hidden on initial page load. Click on the menu below to see it in action.

Update 03/04/2009: Decided to upgrade to the latest version of jQuery (1.3.2) and rewrite the code using jQuery UI instead of the Interface plugin.

Here is my first jQuery plugin. It is a very simple sliding menu using the effects provided by Interface (think Script.aculo.us for Prototype). Now using jQueryUI for sliding effect.

I really like jQuery. I also really like Prototype and Script.aculo.us. I've come to learn that each one has its strengths and weaknesses and you should decide which one to use based on your needs. I use them both, depending on the project at hand.

Here's an example of the menu in action (click menu label). This particular menu has the following options set: triggerEvent: 'click', hideOnLoad: true, autoHide: false, loadHideDelay: 0

The defauly behavior of the menu is to hide after 1000ms (1 sec.) and to display when your mouse hovers over the "menu" label. The menu will also auto-hide after 1000ms when the mouse leaves the menu area. Most of these values, including the sliding effect, can be customized.

Visit this example page to view the source and see how to use the menu and customize it. I haven't provided alot of documentation on it, but the source code is pretty self explanatory.

required files:

• jquery-1.3.2.min.js
• jquery.ui-1.7.min.js
• rb_menu.js

I was recently asked by a coworker if it's possible to create the left hand menu on the following page w/o using Flash.

My first impression and response was, "Oh hell yeah, you can definitely create that using javascript!"

Libraries such as Script.aculo.us, Yahoo UI and Moo.fx immediately came to mind. A few simple event handlers for mouseover and mouseout and simple animations would do the trick. well, nothing's ever simple.

I was able to get most of the funcationality of the Flash version of the menu, except for the part where the menu collapses when you move your mouse out of the menu region. For some reason, the onmouseout that I had attached to my DIV was being fired when the mouse pointer would go over a link within the DIV. I tried for many hours to avoid this, but finally gave up and put a "close" link on the bottom right corner of the menu to close it. I'm sure someone out there can fix this. I thought about using the mouse coordinates to detect whether the mouse pointer was outside the menu, but I really didn't feel like it :-P

Anyway, here is the final example.

And here is the source zipped up (includes scriptaculous 1.6.2)

In a few days, I will be moving this domain to a new server. I will either be upgrading to WordPress 2.0.x or giving the Ruby on Rails powered Typo a shot. Haven't decided yet.

As long as we're moving things over, I think its time for a facelift on the site as well! Stay tuned.

Javascript is becoming more and more important in today's web sites. With all the hype around web 2.0 (whatever that means), AJAX and Rich User Interfaces, developers will need better tools to work with Javascript. Here are two recent tools that I found to be extremely helpful:

jQuery

jQuery is a Javascript library that takes this motto to heart: Writing Javascript code should be fun. jQuery acheives this goal by taking common, repetitive, tasks, stripping out all the unnecessary markup, and leaving them short, smart and understandable.

An example:

$("p.surprise").addClass("ohmy").show("slow");

The above code snippet looks for all paragraphs that have a class of 'surprise', adds the class 'ohmy' to them, then slowly reveals them.

FireBug Extension

FireBug is a new tool for Firefox that aids with debugging Javascript, DHTML, and Ajax. It is like a combination of the Javascript Console, DOM Inspector, and a command line Javascript interpreter.

Due to the Transit strike, I decided I should try walking to work from Brooklyn. I mean, people ride their bikes from BK to Manhattan all the time, how far can it really be? I left my house around 10:15 am, stopped at a local deli and got a nice egg, ham and cheese sandwhich and started my little journey across the Williamsburge bridge with my roommate. 20 minutes into it and my lower leg muscles were starting to hurt a little bit. I think it was because of the uphill climb to the arc of the bridge. Once we passed that part, I was totally fine. Two hours later and I finally made it to work. All in all not a bad walk.

This brings us to Wayfaring.com:

With Wayfaring.com you can explore maps created by others, or create your own personalized map. Share them with friends or the whole world.

And that is exactly what I did. I signed up, which took about 2 minutes and started to create my own custom map. This is a feature that I REALLY wish Google maps had already. Being able to plot multiple points on a map is a really nice feature. Being able to plot out a whole route and share it with the world is even cooler. I think this is a great service and very easy to use. Here is the map of my transit strike journey to work from Brooklyn.