I have a bad habit of clicking the 'view source' option on any page I find remotely interesting or flashy to take a gander at the CSS and Javascript. I am amazed how often I see so many non-compacted includes for CSS and Javascript alike, and not only non-compacted but more often than not more includes than I can count on my two hands.

I understand if you have a simple site with low traffic; you might not really care about bandwidth, or how long it takes your users to load the page, or hell you probably don't even have a test site so it's a pain in the ass to keep track of multiple versions. My issue is with large sites with thousands of visitor a day with 10 include files ranging in thousands of lines of code, non-compacted files, and not a single CDN. I would venture to guess that any site banking on its visitors probably has a test site and most likely even a development site - there really is no excuse except laziness.

How hard is it to throw all of your Javascript in one file, obfuscate and compact it, reduce the overall file size by more than 50%, and reduce the overhead that comes with downloading multiple includes for your users? Sounds like a long process but with programs such as Yahoo Compressor it's actually one simple step.

This was suppose to be a post about Google hosting most of the popular Javascript libraries, but man I suck at not ranting sometimes.

Time for the goods!

Unless you really feel the need to modify any of these libraries there really isn't a good reason why you should not be using the Goog as a free CDN for your most used content. Obviously if you already have your own CDN this post is not meant for you but for the average llamas out there go-to-this-link.

Google AJAX Libraries API

Now because I'm a JQuery fan-boy I will post the easiest way to get it rolling on your site in the compacted version, because again, your site has no real reason to be running any other version.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Ta-da! All of your beautiful plugins still work, and best of all you get the help of big brother to serve up your content.

Happy Note: I was contacted by the jQuery team and my code is being added to the core functionality; that really made my day!  You will want to remove the current code from your site if you plan on upgrading to the latest release of jQuery - can see the official landing here.

Today in my attempt at sexifying a project with a simple fade out saved message I wanted a cleaner way to delay my fade.

When the user clicks the save button an ajax call is made and the data is saved, the returning JSON data includes a savedOn property which I then place in my blank div. After 20 seconds the "Saved On [date]" gently fades away and all is good.

My current method for calling this timed-fading functionality was something along the lines of this :

setTimeout( "$('+ selector +').fadeOut('slow', function(){ $(this).html('').fadeIn(); });", 20000 );

This basically took my div and faded it out, once faded the div was made blank again, and finally faded the blank div back in so the next time the user clicked save the text would actually appear.

So while that worked great I needed to reuse the code in various other places multiple times, and after some browsing on jQuery's site I found the queue and dequeue references. *Choir singing while hands are raised to the sky*

It appears that all fx ( and well basically everything else ) functionality like .show, .addClass, .fadeIn, all are put in a queue and ran through from start to finish; using the .queue function we can modify the way we run through the list, and well I'm sure you see where I am going with this.

As soon as I read that I could add my own function to the queue of my choice the first thing that jumped into my head is a simple timer that calls the dequeue method after a time I specified. Damn, could it be that simple?

.queue accepts two arguments: name, and of course the callback. The name arguments is the queue you wish to play with, in my case it will probably be the "fx" queue 100% of the time. The callback of course is our ticket to winnersville ( not to be confused with wienersville ).

As an example, the following code will .fadeOut the div five seconds after the function is called.

$(selector).delay(5000).fadeOut('slow');

And to show how the chaining works try this one out. It should fade the element after five seconds, and five seconds later fade it back in.

$(selector).delay(5000).fadeOut('slow').delay(5000).fadeIn('slow');

The great thing about it is the placement of the function operates just like any other fx function; it is executed linearly and there is no "chaining" using callsbacks or hacky animation scripts to try and work around a timer like so many other delay functions do.

Download jQuery Delay 1.0.0
Download jQuery Delay 1.0.1 minified

Enjoy :]

On my latest searches for various ways jQuery interacts with the DOM, and more importantly forms for my recent project I've found that various sites could answer some of my questions but most focused on single form elements and not much more.

jQuery can access elements in quite a few different ways, such as by tag name and css class; I often find myself selecting elements based on ID more than anything. A function many people are probably familiar with is the $() function; aside from just looking completely awesome it is a huge time saver in terms of typing.

What I consider to be the "original" $ function was simply a quick shortcut for typing out document.getElementById(element); of course now it has grown far beyond that and many Javascript libraries use it as an entry point to their objects.

//this is not the jQuery $() - simple syntax is $('element') and from there you can 
//manipulate it how you like $('element').value, $('element').innerHTML, 
//$('element').style.cssText, etc - this function only accepts IDs

function $() {
   var elements = new Array();

     for (var x = 0; x < arguments.length; x++) {
          var element = arguments[x];

               if ('string' == typeof element){ element = document.getElementById(element); }
               if (arguments.length == 1){return element};

          elements.push(element);
     }

     return elements;
}

A simple and beautiful ( especially if you don't want to run the jQuery library ) function that will take one or many IDs and pass them back as a single result or an array. But anyways, enough with the jib-jab on with the examples!

<input type="text" id="text_1" class="HappyCow" value="" />
<input type="text" id="text_2" class="HappyCow" value="" />
<input type="text" id="text_3" class="MadCow" value="" />

//set a value for the given text box
$('#text_1').val('test');

//set a value for the given text box - traditional method
$('#text_1')[0].value = 'test';

//get a value for the given text box
var test = $('#text_1').val();

//get a value for the given text box - traditional method
var test = $('#text_1')[0].value;

//set a value for every textbox with the HappyCow class
$('.HappyCow').val('Moooo');

<input type="radio" id="radio_1" name="group_1" class="HappyCow" value="1" />
<input type="radio" id="radio_1" name="group_1" class="HappyCow" value="1" />
<input type="radio" id="radio_1" name="group_1" class="HappyCow" value="1" />

//is the element checked? - result: 1 or 0
var test = $('#radio_1:checked').length;

//is the element checked? - result: true or false
var test = $('#radio_1').is(':checked');

//is the element checked? - result: true of false
var test = $('#radio_1')[0].checked;

//check the element
$('#radio_1').attr('checked','checked');

//what is the value of the checked option in the group?
var test = $('.HappyCow:checked').val()

<select id="select_1">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>

//select the option that matches the value provided
$('#select_1 option[value=1]').attr('selected', true);

//get the selectedIndex - note the first element is 1
var test = $('#select_1 option[selected]').val();

//how about something even easier?
var test - $('#select_1').val();

//get the selectedIndex - traditional method, first element is 0
var test = $('#select_1')[0].selectedIndex;

Hope this helps someone out!