jQuery - Could use a little help with a content loader
- by Kenny Bones
Hi, I'm not very elite when it comes to JavaScript, especially the syntax. So I'm trying to learn. And in this process I'm trying to implement a content loader that basically removes all content from a div and inserts content from another div from a different document.
I've tried to do this on this site:
www.matkalenderen.no - Check the butt ugly link there. See what happens?
I've taken the example from this site:
http://nettuts.s3.cdn.plus.org/011_jQuerySite/sample/index.html#index
But I'm not sure this example actually works the way I think it does. I mean, if the code just wipes out existing content from a div and inserts content from another div, why does the other webpages in this example include doctype and heading etc etc? Wouldn't you just need the div and it's content? Without all the other stuff "around"? Maybe I don't get how this works though. Thought it worked mosly like include really.
This is my code however:
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#dynloader a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #container';
$('#container').load(toLoad)
}
});
$('#dynloader a').click(function(){
var toLoad = $(this).attr('href')+' #container';
$('#container').hide('fast',loadcontainer);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadcontainer() {
$('#container').load(toLoad,'',showNewcontainer())
}
function showNewcontainer() {
$('#container').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
