The animate method

Previously in my last blog I discussed simple ways to fade in and out text or simply toggle it. However, you can use an even more powerful method called animate(). This allows you to do even more manipulation of the CSS properties of a DOM element. A sample example of the animate function is:

$('p').animate({ padding: '40px' }, 2000);

In this example the animate function is working on the paragraph tag in the DOM. This will change the padding of the paragraph tags on this page over a period of 2 seconds. The second parameter 2000 is the number of milliseconds to complete the animation, which is the equivalent of 2 seconds.

Another animation example:

$('#notice').animate({ opacity: 'hide' }, 'fast');

This simply hides the notice and does the animation quickly. There are many examples that we could continue to show but they are very similar and the power of what animate can do should convince you to use the method frequently.

A little animation

When HTML was being developed in the 1990's, I remember using the BLINK tag. It was a great way to make text have a semi-animated effect; with the text alternating between opaque and translucent text. Nowadays with javascript we can make this effect more subtle and much smoother. A simple example of this would be a button that when clicked will change a line of text inside the DOM. The change in this example is a fade similar to the effect of the BLINK tag mentioned previously. We simply use a method fadein or fadeOut. An example code:

$('#buttonThatWillFadeOutText').click( function(){  $('#textThatWillFade').fadeOut();  } );

OR

$('#buttonThatWillFadeTextBackIntoPage').click( function(){ $('#textThatWillFade').fadeIn(); } );

With the top example fading the text out of the page, and the bottom example being a button that when clicked will fade that same text back into the page. In other words, it will become invisible and then visible again. Another similar animation method that is basically another version of the BLINK tag is the toggle() method. An example of this would be through a button to activate its effect on the text:

$('#buttonThatFadesTextBackAndForth').click( function(){ $('#textThatFadesInAndOut').toggle('slow'); } );

The toggle method will take a duration of time to toggle back and forth and in addition you can include a callback function if you want to add something else to this text change.

The .css() method

One of the coolest methods in jQuery is the .css method. This allows you to get a style property based on the selector. This is convenient because different browsers have different DOM implementations of a property, but the .css() method accounts for the different implementations and produces the same result no matter which term we use. For example:

.css('backgroundColor')

and

.css('background-color')

return the correct value for both regardless of the DOM implementation.

So, that is all good but what can we actually do with it? The example above simply selects the element but by passing an extra parameter we can actually set the property. An example would look like:

.css('background-color', '#FFFFFF')

We can also pass it a function as a parameter which is a function returning the value to set, or if you really want to unleash the power of this method you can simply pass a map (property-value pairs to set). An example of this would look something like this:

.css( {'background-color' : '#FFFFFF', 'color' : '#DDDDDD' } )

More selecting in jQuery

In our last post we touched on selectors in jQuery, however we just started scratching the surface. We can select multiple elements in a jQuery statement like the example below:

$('div, h3, p')

This selects every div element, h3 heading, and paragraph tag in the DOM (Document Object Model). This is the same as the selectors we have looked at before except that we are separating them with a comma to select more than one element.

Filters

One of the more subtle tricks to use when using a selector is to use a filter. A filter simply removes certain items by using a colon : followed by the filter name. An example of a filter can be found below:

$('#someId tbody tr:first')

This selects the first table row in the table body with id someId. To illustrate a similar example:

$('#someId tbody tr:last')

This (as you might guess) selects the last table row in the table body with id someId.

Other filters that we can use are :even, :odd, :eq(), and several others....

Selecting selectors

Selectors are fairly straightforward in jQuery. Here are what some of the basic selectors look like:

$('p')
$('div')
$('tr')
$('input')

However, these selectors select all the paragraph tags, every div element, table rows, or input boxes on the page. If we want to select a specific paragraph tag or div element we must specify which one using the same methodology that CSS uses by using id and class names. The element's id can be selected by using the hash symbol # like the example below:

$('#pId p')

Which search's the current DOM (Document Object Model) and looks for a paragraph tag containing the id pId. So in this case the above example would select a paragraph tag that looks like this:

<p id="pId">some text here</p>

It is important in your coding to try to make id's unique. In other words, hopefully you will only have one paragraph tag on your page with this id. If you have another id named pId it will still work but you may confuse the two so it is better to name your id's and classes uniquely to avoid naming conflixts.

Just like id's you can select class elements in the DOM by passing a string consisting of a period symbol . like the example below:

$('.someClass') or if you want to me more specific $('table.someClass')

By specifying the element type before the period symbol you are narrowing down your selection to only the element with class "someClass" rather than all elements with class "someClass". Similar to CSS you can add parent container selectors to narrow the selection even further. An example of this would be:

$('div.testClass span')

Which, if you can guess selects all span elements inside of div elements with class "testClass".

Basic jQuery Scripts

The real trick to understanding jQuery is just getting the basics down. One thing that surprised me is how everything goes through a single function. The one function you use is called (drumroll please...) jQuery. This surprised me when I first started using this language. It kind of reminds me how in JAVA, everything descends from OBJECT.

Basically everything that is used within this jQuery function exists within what we call a NAMESPACE. This is a sandbox approach to handling code and makes sure that everybody plays fair and doesn't do things like overriding other people's functions.

Typically when you see a jQuery statement you will simply see the dollar sign: $. This is an alias that we can conveniently use to help shorten the length of our code. You can still use the full jQuery function like the example below:

jQuery('p').html('Basic jQuery statement');

$('p').html('Basic jQuery statement');

are both the same statement. However the later example saves us roughly 5 keystrokes so I prefer to just use the dollar sign $.

BASIC STATEMENT

$('p').html('Basic jQuery statement');

The example above is a basic jQuery statement. It has three components: a selector, action, and parameters. In this example the selector is $('p') which is selecting the paragraph tag <p></p> in the DOM (Document Object Model). The .html is the action which is applied to the element we selected (in this case the paragraph tag). In this example the action .html gets the HTML contents of the first element in the set of matched elements. The last part of the statement are the parameters which in this example is ('Basic jQuery statement'); which tells jQuery how to apply the action.

To summarize,  the statement above applies to the first paragraph tag and includes the text 'Basic jQuery statement' to it. Our example only passes one parameter but we can pass many more if we need to, depending on the type of action we use.

Google Libraries API

So I have been trying out Google's API libraries and I have to admit it is worth taking a look at. Basically you just need to sign up for an API key through http://code.google.com/ and once you have your own API key you can include at the top of your webpage the following script tag:

<script type="text/javascript" src="http://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>




where INSERT-YOUR-KEY is the API key you get when you sign up. Once you have included this script you can just simply use google.load() like this:

google.load("jquery", "1.3.5");

if you want a specific version. If you just want to use the most recent version you can use something similar to

google.load("jquery", "1.4");

Some of the more popular libraries that are out there are:
Dojo, jQuery, MooTools, script.aculo.us, and YUI.

That's it! It really makes managing the more popular libraries so much easier than having to keep track of the recent version on your server. The only word of caution is to remember that these are case-sensitive so make sure that you pay attention to the case of your text.

JQuery DOM modeling

Well thank you for coming to visit this blog. My name is Noah McCollam from Indianapolis, Indiana. Mainly I am here to discuss my ramblings on JavaScript and what we can do with it. I am looking forward to explaining some of the curious aspects of writing code in this environment that I have found or noticed from others. I hope that you enjoy it as much as I do. :-)

So for my first blog I figured I would go into my thoughts on the Document Object Model (DOM). It seems to me that this is the container that most medium will go through in the next 10 years. In order to effectively understand what a webpage is requires a very in depth understanding of the DOM. Basically from what I can tell it is a interface that allows intraction with HTML and XML By having an API that allows for PC users to develop pages and sites that can be viewed on non-PC machines and vice versa we have created a true neutral platform that we can develop collaboratively.