Letting Google Load jQuery… The Right Way

For some time now I have been letting google load the jQuery and jQuery UI libraries for me. There are many benefits to it which I will not get into, you can read more reasons to use it elsewhere. However I did notice something worth posting.

You may be loading the jQuery library like so:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>

Well if you are then you are doing it wrong.

It was ySlow that told me why. Try changing that one line to the following and take another look at ySlow.

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

Notice the difference? Google is now gzipping the library when its called from googleapis.com instead of googlecode.com thus lowering the files size drastically.

For those of us that are to lazy to try it out here is the result with the googleapis.com loaded instead of the googlecode.com.

You can see instead of downloading 57.2kb that you would with the googlecode file the gzip compression brings it down to 19kb.

The same rule would apply for other libraries that are hosted by google. such as mootools, or even the jQuery UI.

So next time you go to include the library make sure to do it the right way.

Now I just need to switch all the sites I have that are using it.. such as this one.

Rounded Corners using jQuery

jQuery is slowly changing the way web designers and developers create web sites. Here is an extremely easy way to achieve rounded corners using jQuery.

You can view live demos on iSearchNotes.com or at the plug-in webpage.

In order to create our rounded corners you will of course first need jQuery. If you do not already have jQuery hurry up and go download it at jquery.com. I will wait.

Waiting…

Ok so now you will also need to download the rounded corners plug-in. This small jQuery script can be downloaded by saving this file jquery.corner.js

Now we have all that will will need to round those corners. On the page you wish to have the rounded corners on you must add includes to both javascript files.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>

Now we must tell jQuery which areas of the layout to round.

<script type="text/javascript">
$(function(){
$("#content").corner()
});
</script>

<div id="content">Hello this would have rounded corners</div>

This simply uses jQuery’s selectors to select the id content and rounds all 4 of that divs corners by the default amount.

This plug-in can do so much more then this example. You can pick which corners to round, how much to round by, how to round, and much, much, more. Instead of listing them all check out the plug-in page to see more uses of it. (there are some pretty cool ones near the bottom of the page)

There are many different ways to use it but some of the more common uses would be:

	$("#content").corner()
	$("#content").corner("bottom");
	$("#content").corner("top");

You could always avoid javascript altogether and do it the hard way using css.