I am trying to use http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/ and modifying it myself, I added fancybox and tinyscrollbar it is working at the first, however, after I switch between some pages it is no longer working. I tried to find my answer in the comments of the tutorial page, I used .live() but it seams it is not working and I can not figure out the solution, hear is my 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').live ('click', function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').slideToggle('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn(500);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show(500,hideLoader());
}
function hideLoader() {
$('#load').fadeOut(500);
}
return false;
});
$("#scrollbar1").tinyscrollbar();
$("a#example1").fancybox();
});
thank you, Andrew
Its hard to see what your trying to do when there isn't a complete page to look at. But i think the problem is that when you load new content you should update the scrollbar and the fancybox accordingly.
For tinyscrollbar you can use the update method.
you can see how to use it on the tinyscrollbar site.
You could try to put it in the succes callback of your loading event.
$("#scrollbar1").tinyscrollbar_update();
You could try to put that rule on the end of your hideLoader function or showNewContent function.
精彩评论