jQuery and jQuery UI

Over the last few weeks I've been developing some websites and web applications both for the company I work for Brain Media and for some of my own projects (including The Game Portal for facebook).

I thought over my next few posts I'd introduce the jQuery javascript library, which is a massively powerful tool for interacting with html pages on the fly. It really is a cool tool and I've found using it has made designing many web page features so much easier and quicker.

jQuery allows you to edit html and css as much as you want after a web page is useful. This is ideal for web applications where interactivity and customizability is a major part of the design.

jQuery accesses content using classes, names, ids and pretty much any other way you can label an element in html.

For example say I need to change the html content of a div tag with id=div....

To do this in jQuery I simply use:

$('#div').html("<img src="example.jpg"/>)

thereby removing any previous html content from the div and inserting an image.

The other main tool I'll be introducing is jQuery UI which is a set of components for use in jQuery. A few examples include tab systems, draggable elements, loading bars, resizable elements, changing opacity properties and overlays.

So lets get started...

Download the jQuery library from jquery.com and upload the minimized javascript file (in this version comments have been reduced leaving it at a lean 56kb!) to your server.

<script src="myserver/js/jquery-1.3.2.min.js"></script>

start by importing the javascript file into your html page. Use script tags and set the src to the location where the javascript file is hosted.

Then lets make a link disappear when we click on it, this could be used in a form or in a forum when you delete a post or anything like that.

Click Here to Hide this link....

Click Here to show it again! (Wow)

We could even show and hide the whole page using one function! Just click here for an example....

First things first, to show and hide the links, create a link with

<a id="showhide" style="color:#00F;cursor:pointer;" onclick="javascript:hideLINK()">Hide this link...</a>;

Then create a function wrapped in javascript tags which is called on the onclick function in your link.

<script language="JavaScript"> function hideLINK(){$("#showhide").hide(1000);}</script>;

This pretty much calls a jQuery function (initialised with the dollar symbol) to hide any elements with an ID of #showhide. The 1000 refers to how long you want the process to take.
To show the object again I just use the jQuery function show(1000);
Of course if you want a whole animation as in the page disappearing act, a callback can be called at the end of the hide function: This is the code I used:

<script language="JavaScript">

function showHidePage()

{

 $("#outer-wrapper").hide(1000, function(){

  $("#outer-wrapper").show(1000);

 });

}

</script>

So thats a bit of basic jQuery, I'll follow this up with a few more detailed tutorials. Enjoy!