jQuery Transitions

So the last couple of days have been a mammoth exercise in taking on new knowledge. It's all to do with learning the necessary bit and pieces to make the new TerrificArt website (see previous post).

I wanted to have auto-complete with suggestions from an XML file on the form for adding artworks. This meant delving into AJAX in the midst of teaching myself how to handle reading and writing XML files. Fortunately it turns out AJAX isn't that tough, but especially not when you use a library call jQuery with it.

jQuery also does a whole bunch of other neat tricks, like animating your transitions. The code snippet below shows the new largely jQuery code used to hide and reveal the navigation bar on richswebarchive.com, commented out beneath each function is the old code which achieved the same results but somewhat abruptly.

function menuOff() { 
 document.getElementById('hDivider1').style.display='none';
 $('#content').animate({
  left: '2%',
  }, 300, function() {
  // Animation complete.
 });
 $('#navigation').fadeOut("slow");
 $('#pagelinks').fadeOut("slow");
 $('#hDivider2').fadeIn("slow");
//  document.getElementById("content").style.left="2%";
//  document.getElementById('navigation').style.display='none';
//  document.getElementById('hDivider1').style.display='none';
//  document.getElementById('hDivider2').style.display='';
//  document.getElementById('pagelinks').style.display='none';
 }

 function menuOn() {
 $('#content').animate({
  left: '26%',
  }, 300, function() {
  // Animation complete.
 });
 $('#navigation').fadeIn("slow");
 $('#pagelinks').fadeIn("slow");
 $('#hDivider2').fadeOut("slow");
 $('#hDivider1').fadeIn("slow");

//  document.getElementById("content").style.left="26%";
//  document.getElementById('navigation').style.display='';
//  document.getElementById('hDivider1').style.display='';
//  document.getElementById('hDivider2').style.display='none';
//  document.getElementById('pagelinks').style.display='';
}

I'm not going to get into explaining it all here. For information abouy jQuery a great place to start is api.jquery.com. Also extremely useful in setting up my form for TerrificArt was this page at www.malsup.com which is well worth a look at.

Of course you need to include the jQuery libraries for this to work. It's a good idea to load them from Google, as lots of sites do this so they'll more than likely already be cached. Use this code:

<script type="text/javascript" language="javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"> </script>