Archives for 2010

I didn’t know what else to call this post other than “Use jQuery to create a floating navigation based on scrolling”! If this doesn’t make sense let me describe want we will be creating. Hopefully after that things will become clearer.

Have you ever seen a site where when you scroll an object on the page just seems to magically follow you? Most of the time this sort of thing is done with Ads so the ad is in your face. How do these guys do that?

We will be looking at this but instead of using ads we are going to have our navigation area so that it’s always visible. As an extra bonus we’ll make our animated when it moves and we’ll make sure that it’s animation is as smooth as glass.

Before getting into thing you will need to know about the scroll function in jquery. Basically when ever you scroll and event will be made letting the script know that you’ve scrolled. While this is good when we scroll we’ll probably set off 100 or so scrolls in a very short span. Because of the amount of events created it can slow things down and make things choppy because it has to redraw after each event.

So how do we first of all code this and secondly how do we prevent the choppiness? I thought you’d never ask! Let’s look at the code:

HTML

CSS

jQuery

Ok the HTML should be really self explanatory. I will go over the CSS and jQuery.

CSS

Because I want to use positioning I give #navigation an absolute position of top – right on the page( Naigation will have a 5px padding). I also want it to hover over anything else (if the page is made smaller) so I gave it the highest z-index on the page. All links will be aligned to the right and I applied a background color to match the example above.

jQuery

First off I make sure that the page is ready. Next I want to grab jQuery’s “Window” element. I tell jQuery that when ever the Window scrolls to send an event. Now that we know that the scroll even happens we should do some magic on #navigation

Let’s select #navigation. Stop any animation that might be going on with it. Then let’s animate it. You might be asking why I ran stop. As you are scrolling you might send 20-40 events in a second to the browser. This means that jQuery has to do a ton of math. This will make things look jerky. To avoid this I just say… Stop let the browser do what it wants when the person stops start the animation.

If you’ve read some of my previous jQuery tutorials you might remember going over how animate works. The first section basically says: Assign the element top (This refers to the CSS position element “Top”) a value of what ever the documents Top position is.

The second part basically tell the animation how long to animate things for and what animation you want to use.

Try it out! It’s amazing how smooth jQuery can actually run when the code is clean!

Well Christmas for 2010 is coming fast and I thought I’d give you an early gift. In this post I will go over how to create a funky animated menu using jQuery. This menu will be a hover drop down menu. When you hover over the button a secret picture will be displayed. To give a better visual indication of being hovered over the text will change color. When the menu drops it will do a slight bounce and slide up smoothly.

Here’s what the menu will look like:

I first show you the code and go over the most essential parts that you might get tripped up over.

HTML

CSS

jQuery

HTML

The HTML should be pretty simple to read. I use classes to assign the hidden images. We’ll see more about this in the CSS section. Please note I did load jQuery UI to get the bounce effect.

CSS

this info

• #container is the main box in which every other item will live or be positioned to.
• #navigation will be positioned in the top right corner. It will be slightly raised about the #container
• #navigation li – We will float the list items so we can get a horizontal menu. List style is removed. I gave it a height to help older browsers.
• #navigation li a – We center the text and make it a block level element so that we can give it a width,height and padding.
• #navigation li a:hover – We said that we wanted the font to turn red when we hover over the buttons.
• .jared  etc – These classes get applied to the the li elements. This allows us to have specific icons on each menu item

jQuery

I first selected the anchor tags and said when ever they are hovered do two things. One when you are hovered. One when the mouse is taken off the button. In each section we are going to apply an animation. The first animation will drop the button and bounce when it reaches the end. The second section will slide the button back up to it’s original position. The sliding effect is done using padding. I found this to work better than using height. Also for some strange reason if you use the bounce on the slide up, jQuery would throw an error in IE making it absolutely useless.

If you use this example in your code please post an example we can see how you modified things!

If you have started using jQuery you might ask the question “how to do I run multiple animations at once in jQuery?”. Well it’s much easier than you might think! jQuery is set to automatically run multiple actions at one time. I’m going to give you a code example to show you how you would do this. Here is the code broken up into sections:

HTML

Basically I have created 3 sections in the HTML.  Using CSS I will turn them into boxes and give them some annoying colors.

CSS

I wanted to do some cool things with jQuery. Box 3 will be partially hidden from view when it bounces. This happens because the CSS property overflow is set to “hidden” in Box2.

jQuery

At first when you look at this, you might think that jQuery is going to animate box1. STOP. Animate box2. STOP. Then animate box3 and then STOP. If you did think that you aren’t alone. I thought the same thing. I thought that the “$” had magical powers that only ran the jQuery that it contained. If you type this code out you will see that all the boxes run at the same time. Because I used the same duration on each line all animations would start and end at the same time. If I mixed up the times then we can have then end at different times. If you did change the duration the start time would continue to be synced!

I really hope you try this code out. I thought the animation while being simple is very smooth and kind of fun!