SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 38 of 38

Thread: Ajax help!!!

  1. #26
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The problem with using .html() and .fadeIn() together is that .html() triggers a hide/show event which doesn't allow for animations to continue. Try the code below and see if it works

    Code JavaScript:
    $("#projectnav").html(ajax_load).load(getURL(this), function(response){
        $(this).hide().fadeIn(1000, function(){
            $(this).text(response);
        });
    });

    As for not been able to add multiple instances of code into the document ready method i have no clue about that one as it should work find unless theres errors in your script.

  2. #27
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where would I use this? There is no click function? Or is this separate from that?

    Can you add it in to this code block

    Code:
    $(document).ready(function(){
        // Loading image
        var ajax_load = "<div class='loader'><img src='images/cssimg/load.gif' alt='loading...' /></div>";
       
        // Setup the ajax methods
        $.ajaxSetup({
            cache: false
        });
       
        // Returns the URL based on the class given
        var getURL = function(obj){
           switch($(obj).attr('class').toLowerCase()){
                case "identity":
                    return "navs/identity_nav.html";
                break;
                case "web":
                    return "navs/web_nav.html";
                break;
                case "print":
                    return "navs/print_nav.html";
                break;
                case "package":
                    return "navs/package_nav.html";
                break;
                default:
                    return;
            }
        };
     
    	  $(".identity, .web, .print, .package").click(function(){
    		$("#projectnav").html(ajax_load).load(getURL(this), function(){
    			$(this).html().fadeIn(1000);
    		});
    	   
    		return false;
    	});
       
        // END DOCUMENT READY
    });

  3. #28
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I see

  4. #29
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It does work but after it fades in the whole pages mark up loads after.

  5. #30
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You the MAN! I removed the text part (response) and it works great.

    Can you explain why there is a return false as this doesn't look or act like a loop that needs to be stopped. I know very little JS but I thought that is what Return false was for.

  6. #31
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I am trying to implement this fadein to the rest of the scripts and am having trouble with the projects loading in.

    Try clicking through http://kenaesthetic.com/portfolio.htm

    Code:
    $(document).ready(function(){
        // Loading image
        var ajax_load = "<div class='loader_display'><img src='images/cssimg/load.gif' alt='loading...' /></div>";
       
        // Setup the ajax methods
        $.ajaxSetup({
            cache: false
        });
       
        // Returns the URL based on the class given
        var getURL = function(obj){
           switch($(obj).attr('class').toLowerCase()){
                case "romare":
                    return "projects/romare.html";
                break;
                case "eyce":
                    return "projects/eyce.html";
                break;
                case "elund":
                    return "projects/elund.html";
                break;
               
                default:
                    return;
            }
        };
     
    	  $(".romare, .eyce, .elund").click(function(){
    		$("#container").html(ajax_load).load(getURL(this), function(response){
    			$(this).hide().fadeIn(1000);
    		});
    	   
    		return false;
    	});
       
        // END DOCUMENT READY
    });
    
    </script>
    It is the same and should work as the scripts do the same thing? What is wrong here?

  7. #32
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You don't need it there but in the past for browser compliance and for the sake of it been there i like using it to stop the page from continuing if an error occurs.

  8. #33
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about why the fadein doesn't work for the actual projects? I am using the same code but not getting the same results.

  9. #34
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    I couldn't find any fadeIn() methods in your code except for in the initial HTML loader code

  10. #35
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code for the project is embedded in the nav files that are loaded in initially. I pasted the code above.

  11. #36
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    I looked directly at the files and found that they are not all the same when animating. Double check your project files and i think you will find the answer

  12. #37
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm stuck. The fadein lines are the same in both areas the only differeece is the container the files are loaded into.

    This is the project container code

    Code:
     $(".intervention, .mlccc, .pti").click(function(){
    		$("#container").html(ajax_load).load(getURL(this), function(response){
       			$(this).hide().fadeIn(1000);
       	});
    This is the nav container code
    Code:
     $(".identity, .web, .print, .package").click(function(){
    		$("#projectnav").html(ajax_load).load(getURL(this), function(response){
       		$(this).hide().fadeIn(1000);
    
    });
    I'm afraid I can't see the problem. Any ideas?

  13. #38
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is the last function(response) on the top code block that doesn't seem to be working. I also noticed the fadein doesn't work at all in safari and IE8.

    You can see they are exactly the same the bottom one works with the nav but the top one doesn't with the projects.

    What else could be the fault?


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
  •