Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 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
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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
      });

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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
    });

  • #4
    New Coder
    Join Date
    Apr 2006
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    been trying this out for a little bit now.. will post code to make sure i did things right in a minute

  • #5
    New Coder
    Join Date
    Apr 2006
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote 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?

  • #6
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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();
    		}
    		
    	});

  • #7
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    maybe you should run hideLoader() at the beginning of showNewContent() ?

  • #8
    New Coder
    Join Date
    Apr 2006
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #9
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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

  • #10
    New Coder
    Join Date
    Apr 2006
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote 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?


  •  

    Posting Permissions

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