Willy P's Blog

Yet another jQuery plugin ;-)

A designer friend of mine was working on his portfolio and was searching for a way to animate his horizontal navigation bar so that the sub-navs would drop down smoothly. In helping him implement a couple of scripts he found online, I decided to write a simple one myself. Turned out to not be quite as ’simple’ as I had hoped, but I like how this one is coming along. Again using the powerful magic known as jQuery, I was able to animate a nested list and make it all work nice. I decided to go ahead and make it a plugin. I also had the help of the hoverIntent plugin to make it all smooth. Check it out…

If you are looking for a regular vertical drop down menu for jQuery use superFish.

See example page
Download plugin
Download sample project

You simply apply this plugin to a nested list, and style it up and you have a nice animated sub-nav. » Continue reading “Horizontal Nav with “animated sub-navs””

See the live example in the sidebar of the Navigenics blog.

Today I cleaned up a huge category list on the sidebar of Navigenics’ blog. Since the main problem we were trying to solve was to free up some side bar real estate, I was asked ‘is it hard to put those into a drop down thing?’ We decided on having main category headers and then nesting sub-categories within them. I gave it a shot using the power of jQuery and I am happy with the results. » Continue reading “jQuery ‘drop down’ sub-menus for Expression Engine’s category module”

View Demo

I saw this little widget being used on a couple of sites lately, and decided to try building one myself. Turned out to be pretty simple using jQuery and some css foo.

Check out the demo of the effect or you can skip the bs and go right to the js.

Basic concept

The basic concept is to have a div hidden off the side of the page using position:absolute and a negative left value,

.feedback-panel {
    position:absolute;
    top:200px;
    left:-291px;
}

and then ‘animate’ the css left value back to zero using jQuery.

$('.feedback-panel').animate({left:'0'},  300)

That is the basic idea, now I will walk through how it all works… » Continue reading “jQuery animated feedback tab thingy”

When I first rediscovered Shells again last year, I was amazed at how it had evolved. The gaps between the jumps looked basically undoable. 20-30 foot gaps with very unforgiving consequences.
The idea of actually hitting one of these gaps became almost a silly obsession in my mind. Every visit to the spot with my co-worker Zane, I would look at it thinking ’someday ill have the balls to hit that’.
» Continue reading “Mid 30s crisis birthday jump!”