Take this bit of CSS:

• Make sure that you create a folder in the folder where the CSS file is located. Call it images.
• Create a new file inside of images and called it: “header-background.jpg”

If you make the CSS relative to the page you will be in a world of hurt!

Page Example:

Code Example:

copy and paste:

font-family: "Yanone Kaffeesatz","Arial Narrow",Arial,sans-serif;

Up until now I would just write something like:

• <a href=”#”>Click me</a>

While doing this isn’t an issue if the jquery animation happens at the top of the page, if you want to run an animation somewhere down the page the jumping result is really unwanted.

Thanks to http://corpocrat.com/2009/07/12/fix-jquery-onclick-browser-jumps-to-top-of-page/ I realized I need to change the code so that it looks like this:

• <a href=”javascript:void(0);” onclick=”dofunc()”>Click me</a>

Hope this helps you if you are experiencing the issue where clicking on a hyperlink causes the page to jump to the top of the screen.

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!

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!

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!

One thing I have found that helps me is I build out the shell of what I want to do and then fill in the details later. While this might seem like a waste of time or slower I find with the auto complete in Netbeans that I spend much less time later troubleshooting things when I make a mistake typing.

The first thing I do with animate is start with the basic by programming out the shell of the code.

First hit “$” and then “(“. Netbeans will automatically fill in the “)”. Great!. Now hit ‘ and a second ‘ will be entered automatically for you in Netbeans. Keep typing. Enter your jQuery Selector which is normally the DOM element that you want to select. Hit the “right arrow twice and hit the “.” key. Great you are on your way.

You should have something that looks like this:

You really want to see this drop down box as it will save you a lot of time. You can either manually go through it or keep typing to narrow your results. In our case we are wanting to use animate. Let’s type animate and see what happens.

As you can see I’ve only typed “ani” and Netbeans is smart enough to grab the functions from the jQuery file. Just hit enter and Netbeans will start to build out the template for you. You will see something like this:

Netbeans is smart enough to tell you were the parameters go and where the option go. At this time I recommend just typing “{“ in both the params section as well as the options section. When you hit “{“ the right “}” will automatically be entered. After entering the “{“ just hit enter to move on to the “options section”. Hit “{“ and again the second “}” will auto complete. Hit Enter and the cursor will automatically move to the end of the line. Hit “;” and you are now done making the shell of the animate function. It should look like this:

Now some people might not agree with this next step. WHEN programing I like making my code easy to read even if it means that the file that the code is in is larger! When I am done everything I normally run a minifier on all my code that goes up to the server.

Let’s make the code more readable. Doesn’t this look more like something you see in other languages?

Let’s go and enter the code that will actually do something.

In the above code example notice how I entered what I want the animate to do. jQuery is VERY tied to CSS. If you don’t know CSS then you should really become a CSS Ninja before heading in jQuery. One thing to note on line 3. If the CSS element has “-“ in it you should use camelCase. If you aren’t sure what that is search my site for “camelCase”. Notice on line 3 that there is NO trailing “;”. With so much of jQuery requiring a trailing “;” I like to point that out since I find I get in such a habit of close everything off. If we needed to do a second animation we would hover end the line with a “’,”. You will see in the next section called “options”.

In the above code example I have added two options to the command. I have put them on separate lines for easy reading and put a “,” at the end of the duration. This code is now very easy to read, the chances for error has gone down dramatically which means you have more time to code.

I mentioned about minifying the code so once that is done it might look more like this:

1. Height and width not set. This really seems to slow things down in all the browsers.
2. Margin set on element above the element that is sliding open/shut.

Always keeps these things in mind and you should always experience super slick jQuery animation. Don’t you just hate jerky jQuery animations?

Here’s an example to try (I am using jQuery and jQuery UI:

xhtml

CSS

jQuery

If you remove the height and width from the “p” tag then the animation will be really sluggish/jerky.

jQuery

Please note lines  3 and 4. The CSS values “margin-left” and “margin-top” are surrounded by ‘s. Most people don’t know that there is a shorthand method that I think looks much better (IMO) and saves you a few keystrokes. Using “camelCased” coding you can change the jQuery code into this:

jQuery

As you can see you can remove the ‘ and the – but you HAVE to uppercase the second word’s first initial. I like using this because not only does it save keystrokes I also find it also helps me with closing the ‘s! Hopefully this trick will help you with jQuery’s most versatile function.

As a bonus I figured I through in another example:

jQuery

This time you cane see that I used “paddingLeft” instead of “padding-left”. This code basically will take the paragraph element and slide it to the right 200px when you hover over it. It will slide back to it’s original spot when you take the mouse off.

*NOTE* – Before I go any further you might be asking why I didn’t just us a background color using CSS for each item. I couldn’t use the easy way because I eventually I wanted to slide the “highlight” from the left to where ever the person was holding their mouse.

Here’s an example of what I wanted to make:

Unfortunately I kept getting something like this:

Let’s look at the code to see how this issue can be resolved quite simply.

XHTML

CSS (That didn’t work)

CSS (That did work. I’ve highlighted the line that fixed the issue)

So basically I always thought the z-index on HTML elements was “0”/Or not set. This doesn’t seem to be the case. It looks like they are always set to 1. Another really important thing to include is the “position: relative”. If you were to excluded that from the code it wouldn’t work either.