Posted by: Terry Nederveld | September 4, 2009

An Adventure in jQuery

It has been a while since my last post and I hope you all are doing well. I have been waiting for a topic to hit my like a ton of books. And as you can see one has hunted me down. So here we go…

Those of you that are not a part of the internet industry may be saying to your self, “What is jQuery?” Well jQuery is a lightweight JavaScript library that helps with the interaction between the traditional JavaScript language and HTML. It first debuted in 2006 at BarCamp NYC by John Resig. It is open-source which means its FREE!!!

Now if you just read that paragraph and said, “Huh?? What is he talking about.” Stop reading now and wait until my next post about a non-technical issue. Moving on.

Recently I was reading a post by someone or listening to a Podcast (honestly, I don’t remember) and the person said that there are many different JavaScript libraries out there and that you should pick one and learn all there is to know about it. He also said that his choice was made for him by Microsoft because they have decided to build jQuery into Visual Studio 2010. So I figured it’s about time to jump in and start learning jQuery. The next project that came on my plate was getting jQuery added to it so it would force me to learn it.

First thing I ran into, the project I am working wants an image to be the background of the site. As we all know, if you just set the background to the image it doesn’t work out the way we really want it to. So we take the image and place it in a DIV that sits behind all the other content on the screen. Only problem here is that because of the images ratio you can run in to issues with it not showing properly on all different size screens. And thus, in comes JavaScript. The old way that I would have accomplished this was like so:

function resizeImg(){
     var w = 0, h = 0;
     if( typeof( window.innerWidth ) == 'number' ) {
         //Non-IE
         w = window.innerWidth;
         h = window.innerHeight;
     } else if( document.documentElement && ( 

document.documentElement.clientWidth || 

document.documentElement.clientHeight ) ) {
         //IE 6+ in 'standards compliant mode'
         w = document.documentElement.clientWidth;
         h = document.documentElement.clientHeight;
     } else if( document.body && ( document.body.clientWidth ||

 document.body.clientHeight ) ) {
         //IE 4 compatible
         w = document.body.clientWidth;
         h = document.body.clientHeight;
     }
     document.getElementById("backgroundImage").style.width = w;
     document.getElementById("backgroundImage").style.height = h;
 }

 I would have put this JavaScript inside a script block in the head of the HTML page. Then I would set the onLoad and onResize on the body tag, just to get the image to resize to the browser. Now we will look at how to accomplish this with jQuery.

First thing that we should talk about is this ‘$’ thing that jQuery coders always seems to use. Well that ‘$’ is a critical concept for jQuery. It is the alias for the namespace. So instead of having to prefix your code with jQuery you can just use the dollar sign. Cool, I don’t have to type as much.

Next on the list of things to understand are the jQuery Selectors. It is very similar to CSS. And instead of me recreating the wheel I am going to point you to a very good cheat sheet that someone pointed me to. To get the sheet follow this link: http://refcardz.dzone.com/refcardz/jquery-selectors.

Ok, let’s move on. jQuery also has some really neat things built into it, you will see a few of them in the code below. The following code will go into a script block right before your closing body tag.

$(window).ready(function(){
     $('img#backgroundImage').css("height",$(window).height());
     $('img#backgroundImage').css("width",$(window).width());
};

$(window).bind('resize',function(){
    $('img#backgroundImage').css("height",$(window).height());
    $('img#backgroundImage').css("width",$(window).width());
};

 

That was simple. But wait, is that code optimized? No. So before continuing, think about how we could optimize this code. Got it? Good. Let’s see if you would have done it the same way I would have.

function resizeImg(){
     $('img#backgroundImage').css("height",$(window).height()).css("width",$(window).width());
}

$(document).ready(resizeImg);
$(window).bind('resize',resizeImg);

I am not saying that my way is the best, I am still learning this also. If yours was different don’t beat your self up too much, put it in the comments below and let’s see who can come up with the most optimized way of doing this.

As you noticed in the code above there we can get the height/width of the window by just calling .height() or .width() on the window. jQuery automatically figures out what browser you are using and returns the correct size. Amen to that! 

You probably also noticed how I got the correct image, I didn’t need to do any of those document.getElementBy… stuff that is needed in traditional JavaScript. Same goes for the setting the size styles, I didn’t need to use “.style.width=”.

If you are like me and didn’t jump in to jQuery when it first hit the scene don’t worry to much about it and start learning it now. You can even go back through your old projects and see if there are better ways to accomplish the JavaScript tasks in jQuery.

Until next time.

Advertisements

Responses

  1. Sweet, did you use this for that fancy website, of which we both seem to know… of?

    P.S. Don’t ask me how I found your blog, lulz.

    • Yes, this is how I got the background image to scale with the broswer window. Works well doesn’t it?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: