SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question jQuery and content loading issues

    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):


    Code JavaScript:
    $(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:


    Code JavaScript:
    $(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!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    First steps to solving this is understanding the problem itself.

    When the transition successfully occurs, a fragment identifier is added on to the page URL.
    #./offramp

    When the transition fails to occur, no fragment identifier is added on the the page URL.
    That indicates that after the page content is loaded, the prev/next links have no jQuery click event attached to them.

    The most likely cause is due to the click event affecting the page that initially loads, but not the Ajax retrieved content.
    You should be able to use the live event so that your click event is also attached on to the Ajax loaded content.
    Last edited by paul_wilkins; Mar 8, 2011 at 20:35.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I definitely understand and see now that a fragment identifier was not added to Page 3 (for example) when user clicks Next on Page 2 meaning the jQuery didn't work.

    Unfortunately I don't know how to use that .live() function in my .js file. Is this something I add to the current functions I have, or do I replace them? I have a crude understanding of jQuery.

    Thank you.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by RiderOfTheStorm View Post
    Unfortunately I don't know how to use that .live() function in my .js file.
    Instead of binding a click event, you use a live click event instead.

    The click event that your page currently uses is:

    Code:
    $('#subheadAndNavigavtion li a').click(function () {
        ...
    });
    Behind the scenes, jQuery actually uses bind to attach the function to the click event

    Code:
    $('#subheadAndNavigavtion li a').bind('click', function () {
        ...
    });
    The live documentation page says that you replace bind with live

    Code javascript:
    $('#subheadAndNavigavtion li a').live('click', function () {
        ...
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •