Tuesday, February 1, 2011

First dive into jQuery

Alright so learning new stuff never ends, and it is always exiting to learn cool animation stuff using AJAX. Well, this time around its jQuery.

What I wanted was an animation to pop up a "content box" at a specific scroll position. And jQuery did this thing very well.

Ok for beginners like me, this is where you can get all the documentation for learning jQuery:


Easy enough.

I am using version 1.4.4 but you can download the latest version (v 1.5) from the website. There are various CDNs that you can point to if you dont like to have a local copy.

Google CDN

Microsoft CDN

Now here's the thing. I am using the $(window).scroll event which triggers when the scroll position is changed. You can have this event on a window or any element with style applied as "overflow:scroll" or "overflow:auto" where the height of the element is less than its content.

The code goes here:

It comes out to be that browsers with webkits(Chrome, safari) have a different behavior with scrollTop, so please keep in mind that you make it compatible with all browsers.

Way to go jQuery. Hope to do a lot of good stuff with you in the future