Web Analytics Made Easy -
StatCounter Editing JQuery/Ajax Effect - CodingForum

Announcement

Collapse
No announcement yet.

Editing JQuery/Ajax Effect

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Editing JQuery/Ajax Effect

    right now I almost have this script working the way I want it to, here it is:

    Code:
    var hash = window.location.hash.substr(1);
    	var href = $('.workimg a').each(function(){
    		var href = $(this).attr('href');
    		if(hash==href.substr(0,href.length-5)){
    			var toLoad = hash+'.html #selected';
    			$('#selected').load(toLoad)
    		}											
    	});
    
    	$('.workimg a').click(function(){
    								  
    		var toLoad = $(this).attr('href')+' #selected';
    		$('#selected').slideUp('slow',loadContent);
    		$('#load').remove();
    		$('#wrapper').append('<span id="load">LOADING...</span>');
    		$('#load').fadeIn('normal');
    		window.location.hash = $(this).attr('href');
    		function loadContent() {
    			$('#selected').load(toLoad,'',showNewContent)
    		}
    		function showNewContent() {
    			$('#selected').slideDown('slow',hideLoader);
    		}
    		function hideLoader() {
    			$('#load').slideUp('slow');
    		}
    		return false;
    		
    	});
    How it works is an image is clicked, and it fills the #selected div with content. The problem I'm having is the #selected div is always visible so the questions I have are
    1. How do I get this to snap to the #selected Div and add a 1 second delay before the slideDown effect?
    2. How do I get add a fade in effect so it becomes Opacity=0 -> slideDown -> Opacity=1 when it appears and Opacity=1 slideUp -> Opacity=0 when it transitions to the next?

  • #2
    you can use .delay() for the delay. but when using .delay never use the words "slow", "fast" etc for the animation speed, always set a numeric time or the delay will not work.

    Code:
    $('#selected').delay(1000).slideDown(1200,hideLoader);
    for the other questions you need to use .animate()

    Code:
      $('#selected').animate({
        opacity: 1,
        height: 'toggle'
      }, 1200, function() {
        // Animation complete. Do callbacks here
      });
    - Firebug is a web developers best friend! - Learn it, Love it, use it!
    - Validate your code! - JQ/JS troubleshooting
    - Using jQuery with Other Libraries - Jslint for Jquery/other JS library users

    Comment


    • #3
      also for your clickfucntion you shoudl use preventDefault() and not return false, because sometimes returnign false can add it's own complications.

      Code:
      $('.workimg a').click(function(e){
      e.preventDefault();
      
      do stuff
      });
      - Firebug is a web developers best friend! - Learn it, Love it, use it!
      - Validate your code! - JQ/JS troubleshooting
      - Using jQuery with Other Libraries - Jslint for Jquery/other JS library users

      Comment


      • #4
        been trying this out for a little bit now.. will post code to make sure i did things right in a minute

        Comment


        • #5
          Originally posted by DanInMa View Post
          you can use .delay() for the delay. but when using .delay never use the words "slow", "fast" etc for the animation speed, always set a numeric time or the delay will not work.

          Code:
          $('#selected').delay(1000).slideDown(1200,hideLoader);
          for the other questions you need to use .animate()

          Code:
            $('#selected').animate({
              opacity: 1,
              height: 'toggle'
            }, 1200, function() {
              // Animation complete. Do callbacks here
            });
          I'm still really new to jQuery so it's alot of trial/error with what I tried to do.
          Code:
          var hash = window.location.hash.substr(1);
          	var href = $('.workimg a').each(function(){
          		var href = $(this).attr('href');
          		if(hash==href.substr(0,href.length-5)){
          			var toLoad = hash+'.html #selected';
          			$('#selected').load(toLoad)
          		}											
          	});
          
          	$('.workimg a').click(function(e){
          	e.preventDefault();
          								  
          		var toLoad = $(this).attr('href')+' #selected';
          		$('#selected').slideUp(1200,loadContent);
          		$('#load').remove();
          		$('#work').append('<span id="load">LOADING...</span>');
          		$('#load').fadeIn('normal');
          		window.location.hash = $(this).attr('href');
          		function loadContent() {
          			$('#selected').load(toLoad,'',showNewContent)
          		}
          		function showNewContent() {
          			$('#selected').delay(50).animate({
              opacity: 1,
              height: 'toggle'
            }, 1200, function() {
              // hideLoader?
            });
          		}
          		function hideLoader() {
          			$('#load').fadeOut('10');
          		}
          		
          	});
          The .animate seems to be working fine, but since the opacity isnt set to 0 before it scrolls down it just looks the same way it did before. How do I fix that? also where do i place the hideLoader function so the loading wheel stops spinning?

          Comment


          • #6
            changes are in green. this might do it


            Code:
            var hash = window.location.hash.substr(1);
            	var href = $('.workimg a').each(function(){
            		var href = $(this).attr('href');
            		if(hash==href.substr(0,href.length-5)){
            			var toLoad = hash+'.html #selected';
            			$('#selected').load(toLoad)
            		}											
            	});
            
            	$('.workimg a').click(function(e){
            	e.preventDefault();
            								  
            		var toLoad = $(this).attr('href')+' #selected';
            		$('#selected').slideUp(1200,loadContent);
            		$('#load').remove();
            		$('#work').append('<span id="load">LOADING...</span>');
            		$('#load').fadeIn('normal');
            		window.location.hash = $(this).attr('href');
            		function loadContent() {
            			$('#selected').load(toLoad,'',showNewContent)
            		}
            		function showNewContent() {
                                    $('#selected').css("opacity","0");
            			$('#selected').delay(50).animate({
                opacity: 1,
                height: 'toggle'
              }, 1200, function() {
                hideLoader();
              });
            		}
            		function hideLoader() {
            			$('#load').hide();
            		}
            		
            	});
            - Firebug is a web developers best friend! - Learn it, Love it, use it!
            - Validate your code! - JQ/JS troubleshooting
            - Using jQuery with Other Libraries - Jslint for Jquery/other JS library users

            Comment


            • #7
              maybe you should run hideLoader() at the beginning of showNewContent() ?
              - Firebug is a web developers best friend! - Learn it, Love it, use it!
              - Validate your code! - JQ/JS troubleshooting
              - Using jQuery with Other Libraries - Jslint for Jquery/other JS library users

              Comment


              • #8
                How do I get it to jump to the #selected div?

                It fades in from 0 opacity now, but is there a way to get it to scroll down first and then fade it in? Right now it does everything at once.

                What im pretty much trying to do is use this for a portfolio so I can keep everything on the same page kinda like this website http://www.johnkarlsson.se

                Comment


                • #9
                  oh, well youd have to reference things by class instead of id and you would need to set the whole thing tot he hover event not the click event if you want it like that.

                  youd basically need to re-write most of this code and youd want to include samples of the html you are using. unfortunately I dont have time to go into that kind of detail right now
                  - Firebug is a web developers best friend! - Learn it, Love it, use it!
                  - Validate your code! - JQ/JS troubleshooting
                  - Using jQuery with Other Libraries - Jslint for Jquery/other JS library users

                  Comment


                  • #10
                    Originally posted by DanInMa View Post
                    oh, well youd have to reference things by class instead of id and you would need to set the whole thing tot he hover event not the click event if you want it like that.

                    youd basically need to re-write most of this code and youd want to include samples of the html you are using. unfortunately I dont have time to go into that kind of detail right now
                    I would have to do all that to jump to the #selected div before it executes the rest or to slide it then change the opacity? Or for both?

                    Comment

                    Working...
                    X