SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jump To #selected Div Before jQuery Is Executed

    I'm trying to scroll/jmp to the #selected div on the current page before it runs the javascript below:
    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();
            }
           
        });
    How difficult would it be to do this?

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    The super easy way would be to use the jQuery scrollTo plugin. It will enable you to perform the scroll and add a callback function to execute when the scroll is complete.

    The (only slightly) harder way would be to first wrap the code you want to execute in a function, then call window.scrollTo() followed by your function call
    e.g.:
    Code JavaScript:
    function something() {
    	console.log("some code");
    }
    $(document).ready(function(){
    	window.scrollTo(0,$("#selected").position().top);
    	something();
    });

    Of course using a plugin for such simple functionality is a little overkill
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


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
  •