Results 1 to 5 of 5

Thread: Help with callback functions

  1. #1
    Join Date
    Aug 2009
    Location
    utf-8
    Posts
    205
    Thanks
    4
    Thanked 7 Times in 7 Posts

    Default Help with callback functions

    Hey there, I am using the jQuery plugin jpreloader.

    During the loadComplete function, the splash screen fades out while the site fades in. Here is the code for that function.
    Code:
    	//triggered when all images are loaded
    	var loadComplete = function() {
    		$(jOverlay).fadeOut(800, function() {	
    			$(jOverlay).remove();
    			onComplete();	//callback function
    		});
    	}
    However I would like the page to be scrolled/moved to the top before the site fades in. I tried using the callback function, however the code breaks when I do. This is what I
    attempted:

    Code:
    	//triggered when all images are loaded
    	var loadComplete = function() {
    		$(jOverlay).fadeOut(800, function() {
    			
    			$(jOverlay).remove();
    
    			onComplete('html, body').animate({scrollTop : 0},200);	//callback function
    		});
    	}
    Last edited by FrickenTrevor; 11-19-2014 at 09:24 AM.
    An inline div is a freak of the web and should be beaten until it becomes a span

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    OK, hopefully I can explain what's happening so you get it. When we do:

    Code:
    	//triggered when all images are loaded
    	var loadComplete = function() {
    		$(jOverlay).fadeOut(800, function() {	
    			$(jOverlay).remove();
    			onComplete();	//callback function
    		});
    	}
    That means that when the loadComplete function is called this happens:

    The element(s) (if any) represented by $(jOverlay) fade out over a period of 800 milliseconds. Once that's done, this anonymous function runs:

    Code:
    function() {	
    			$(jOverlay).remove();
    			onComplete();	//callback function
    		}
    The first line of which removes the element(s) (if any) represented by $(jOverlay) and their children (again, if any), while at the time eliminating any events associated with them (again, if any).

    The next line simply runs another function by the name of 'onComplete'. If such a function exist within the scope accessible to this code, it will run, otherwise, nothing will happen.

    That's all well and good, but then when you do/add to it like so:

    Code:
    onComplete('html, body').animate({scrollTop : 0},200);	//callback function
    That's basically jQuery/javascript jibberish and essentially means nothing, and probably throws an error. But it may not. In either case it doesn't do anything.

    Now there could be other issues - like the syntax itself might be off (but it looks good, I just tested it in Chrome), if that's OK like it looks to be, what you can do is this (simplest solution, there are others):

    Code:
    	//triggered when all images are loaded
    	var loadComplete = function() {
    		$(jOverlay).fadeOut(800, function() {	
    			$(jOverlay).remove();
    			$('html, body').animate({scrollTop : 0},200);
    		});
    	}
    Feel free to ask any questions, but if there are still problems after editing the code as I suggest, and refreshing the page and/or clearing the cache, it would help me a lot to help you if you could provide a link to the problematic page, so I can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2009
    Location
    utf-8
    Posts
    205
    Thanks
    4
    Thanked 7 Times in 7 Posts

    Default

    The question I have is how can I edit the code so the scroll bar goes back up to the page before the overlay fades out. Could the code

    Code:
    $('html, body').animate({scrollTop : 0},0);
    be called before

    Code:
    $(jOverlay).fadeOut(800, function() {	
    			$(jOverlay).remove();
    		});
    but with a pause between the two? At least enough time for the page to be scrolled up before the page fades in.
    An inline div is a freak of the web and should be beaten until it becomes a span

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    This should do that:

    Code:
    	//triggered when all images are loaded
    	var loadComplete = function() {
    		$('html, body').scrollTop(0);
    		$(jOverlay).fadeOut(800, function() {	
    			$(jOverlay).remove();
    		});
    	}
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2009
    Location
    utf-8
    Posts
    205
    Thanks
    4
    Thanked 7 Times in 7 Posts

    Default

    Thanks, I figured it would be something that simple!
    An inline div is a freak of the web and should be beaten until it becomes a span

Similar Threads

  1. Replies: 10
    Last Post: 08-22-2013, 02:57 AM
  2. jquery callback href
    By ggalan in forum JavaScript
    Replies: 3
    Last Post: 12-15-2010, 02:07 AM
  3. AJAX Callback problem
    By bjkirkham in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 07-26-2010, 03:52 PM
  4. PHP Callback function needed
    By egturnkey in forum PHP
    Replies: 0
    Last Post: 04-21-2009, 07:29 AM
  5. Ajax callback function
    By dan0 in forum JavaScript
    Replies: 2
    Last Post: 12-01-2008, 09:10 PM

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
  •