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…)

Is it waves ahead of Flash?

NOTE: Stick through to the end of the article, and I’ll give you a cool link for a reward!
No, but it can still do a lot of cool crap. Today I was noodling around and somehow this idea popped into my head. Normally, at my current place of employment, we build animations using Flash. Butterflies fluttering around, fades and what-not, hell I even did a water ripple effect once. I thought, what if we could do some of the simple banners that are just plain fades and use jQuery instead of Flash to do everything. My initial idea was, what if a client has a photo of a beach, and he wants the stupid water to move. Could I do something in jQuery instead of having to rely on Flash?

The set up

My HTML for the demo is easy: a container div, 1 div with the original image, and 2 additional divs with only the water section of the image. 3 divs, 2 seperate images. The images are pretty large, because in this demo I was going for a rough effect rather than bringing the size down.

(more…)

THAT’S why we do that

There are times that we learn to do something in web development, and we do them without really knowing the reason why we do it. For instance. I learned a couple of things today about jQuery. The first thing was about return false; versus preventDefault (which I learned here). Now, I know the difference. The return false; kills event bubbling. That’s great, right? We don’t want that crap going up through the DOM. But what if you did? An example would be if you wanted to prevent a link from actually doing what the browser expects a link to do, AND have the parent div do something as well.

(more…)