Hi everyone,
I’m pretty new to jQuery and Ajax so bear with me that my understanding is quite primitive. I’m getting an idea of how they work but have some minor issues.
First, here is the URL to my problem pages that need addressing.
I saw this neat tutorial online that implements using jQuery and Ajax to create nice page transitions, where you simply reload content into a div element.
I studied that tutorial and started implementing their code to work with a few project pages I wanted to link together: cobico.html, offramp.html, tiesandscarves.html, and mgmt-artists.html. I reworked their function to work with my ‘#subheadAndNavigation li a’ elements (which controls the NEXT and PREVIOUS buttons on those pages). Here is the reworked version called next-screen-animate.js (you can ignore my comments I added to help me):
$(document).ready(function() {
/* This 'hash' function gives users the ability to link to a particular URL.
By adding the hash, or #, the code changes the URL hash value to the value of the clicked link's
'href' attribute (minus the '.html' extension). So when a user clicks on the 'next' link (href=cobico.html)
then the hash value will read '#cobico'. */
var hash = window.location.hash.substr(1);
var href = $('#subheadAndNavigavtion*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)
}
});
/* We want to target the links within the NEXT and PREVIOUS buttons and run a function when they are clicked */
$('#subheadAndNavigavtion li a').click(function(){
/* We don't want to pull ALL the data, just the data within the 'content' div */
var toLoad = $(this).attr('href')+' .content';
/* This hides the .content div at a fast rate, once that effect is finished then initiates the "loadContent" function using ajax */
$('.content').hide('fast',loadContent);
$('#load').remove();
/* A loading graphic in the form of an animated .GIF to show that something happens in the background as new content loads */
$('.container').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
/* This function calls the requested page, then once that is done, calls the 'showNewContent' function */
function loadContent() {
$('.content').load(toLoad,'',showNewContent())
}
/* This function uses jQuery's show function to make the new (requested) content appear within the '.content' div.
Once it has called the content it initiates the 'hideLoader' function */
function showNewContent() {
$('.content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
/* Remember to use "return false" at the end of click function so that the browser does not navigate to the page */
return false;
});
});
Now everything seems to be working except for one problem. Sometimes when I click on the NEXT button in say, offramp.html, the next page that’s suppose to load doesn’t not use the cool page transitions effects that were embedded in the function. This tends to happen randomly on any of the three pages that use this function, whether you click on NEXT or PREVIOUS.
In addition, I’m also experiencing a similar problem with another jQuery function, where sometimes on some pages the scrollTo function doesn’t transition properly for the anchor links. It’s like it jumps to the top of the page instead of a nice slide upwards. Here’s the code from scrollToTop.js:
$(document).ready(function() {
$('a[href=#theTop]').click(function(){
$('html, body').animate({scrollTop:0}, 'fast');
return false;
});
});
Can anybody shed some light on what I possibly did wrong? Why do some pages have a nice smooth transition while others, at random, do not? And is there a way I can better control the animation speed in the scrollTo function and content loader functions?
Thanks for any help or feedback you can give!