I haven’t made a post about jQuery in a while

Which is what made me decide to write my first post of 2011 on it. First, thank you to the people who commented here on The Web Machine in 2010. Also thanks to the over 730 RSS subscribers I have and the 25 or so followers on Twitter. This blog has been up for about a year now, and I look forward to this one. I hate all of you comment spammers though! So huge thanks to Akismet.

Anyway…a while ago I had thought about creating WordPress themes and try my hand at selling them, but it soon became apparent that the market was saturated. I don’t feel like wasting my time right now on putting effort into that. On one of those themes though, while I am not happy with the look, I created a fly-out menu using jQuery that I really liked. I thought I would share that with you since it takes less than 8 lines of code. So take a look at the demo, and then we’ll jump right in.

UPDATE 5/17/11: Removed the position:relative from the li style. It now gets the position:relative in the hover function in jQuery by adding/removing a class ‘addPosition’. This fixes the submenu appearing underneath the main menu in IE7/8. This was only noticable if you started changing the position of the submenu to be overlapping the main menu. My code here assumes you don’t do that, but with the fix it works great in IE7/8.

NOTE: In IE6, only the first level of the fly-out works. The second is cut off, but since most of us our on our way to not supporting it, I didn’t care. If you have the simple solution to fix that, let me know.

Original:
View Demo

More stripped down version (asked for in comments and the CSS now shown in sample code below):
View Demo

(more…)

Lock and Load that HTML

A co-worker had asked me for some help the other day on the jQuery running his gallery. Of course, I was more than happy to help. He ran into other issues later (which he cleared up) involving a plugin, but that doesn’t really matter in this demo/tutorial. What he wanted was to have a navigation at the top, each item pertaining to a different part of his portfolio (websites, flash work, graphic design…). Each section though had a ton of information that would increase the page load significantly if they were all loaded on the page at the same time. That ruled out putting a simple hide/show on some divs. My thought was, why don’t we put the HTML into separate files, and load them when a user clicks on one of the nav items. You can check out the gist of what was trying to be accomplished by check out the demo below.

View Demo

(more…)