jquery selection

Question

I have the following code :

$(document).ready(function() {

 var hash = window.location.hash.substr(1);
 var href = $('#nav li a').each(function(){
  var href = $(this).attr('href');
  if(hash==href.substr(0,href.length-5)){
   var toLoad = hash+'.html #content';
   $('#content').load(toLoad)
  }           
 });

 $('#nav li a').click(function(){

  var toLoad = $(this).attr('href')+' #content';
  $('#content').slideUp(2000,loadContent);
  window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
  function loadContent() {
   $('#content').load(toLoad,'',showNewContent())
  }
  function showNewContent() {
   $('#content').slideDown(2000,hideLoader());
  }
  function hideLoader() {
   $('#load').fadeOut('normal');
  }
  return false;

 });

 });

thanks to nettuts a really well written concise and powerful piece of coding (in my opinion)

im having issues with the slide up/down it closes fine, but as the height is different in each content section im loading in, it opens to the old height and snaps to the new one, how can i get around this?

also any way to add browser back/forward button functionality? i havent looked at this yet but would probably have to come back here to ask anyway!

Answer 1

If you load the new content before the slideDown it should slide down directly to the current content, not the old content. In order to make your back and forward buttons work, you'll want a history plugin. jQuery BBQ is probably the best in this regard.