SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Eliminate jump to top

    On my site I have a switch and JQuery fade in fade out when I click on 'Updates' or 'Projects'. Problem is that if I have scrolled down the page a little before clicking one of them, the page jumps back to top on clicking these options. I would like to eliminate that jump to the top. How can I do that? Thanks

    http://bit.ly/gkyS2p

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Add
    Code:
    return false;
    to your .click function

    Code:
    $('#projects-switch').click(function(){
        setCurrentMenuTo($(this));
        slideTabToCurrentMenuItem();
        
        $('.home-updates').fadeOut('slow',function(){
        	$('.home-sheets').fadeIn('slow');								
        });
        
        return false;
    });
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Changed it but still showing the same behaviour.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by drtanz View Post
    Changed it but still showing the same behaviour.
    Take a look at your fadeOut and fadeIn parts. Temporarily disable the fadeIn part and you will see precisely why the page performs the jump.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I've disabled it but I can't see what is causing the jump anyway.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Why it's happening is that once the content has been faded out, the remainder of the page is less than the full height of the screen. Therefore, no scrollable position is capable of being kept.

    One solution to this is to use a different fading technique, where both sections of content are absolutely positioned on the page at the same location, so that you can fade one out to nearly 0, fade the other in, then completely fade out the first.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks I understand the dynamics of what's happening now, I'll probably leave it is at is then as it's a minor annoyance anyway. Thanks again.

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this should be easily fixed with an 'internal anchor'.

    Set an anchor right above the tabbed area:
    HTML Code:
    <a name="stop-going-to-the-top">some text, if you want hide it with css</a>
    And make the tab anchors link to it:

    HTML Code:
    <a href="#stop-going-to-the-top">Tab text</a>


    HTML Code:
    <a name="stop-going-to-the-top">some text, if you want hide it with css</a>
    <ul id="sliding-menu" class="labels">    
    <!-- SWITCH FOR HOME PAGE -->
    <li class="current-menu-item">
    <span id="projects-switch">
    <a href="#stop-going-to-the-top">Projects</a>
    </span>
    </li>
    <li>
    <span id="updates-switch">
    <a href="#stop-going-to-the-top">NEWS</a>
    </span>
    </li>            
    </ul>
    Also it's odd that what ever JS you are using is essentially refreshing the page for it to jump.
    possibly try another tabbing script?

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sheferd View Post
    Also it's odd that what ever JS you are using is essentially refreshing the page for it to jump
    I think that you may be misunderstanding his problem. No refresh is occurring. Instead, with his existing hide then show script, there is not enough content left on the page during the hiding part of the process. That is what removes the scrollbars, and also removes any prior scrolled position. Then when the other content is shown, the pare remains at the same unscrolled position that it was at.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    I think that you may be misunderstanding his problem. No refresh is occurring. Instead, with his existing hide then show script, there is not enough content left on the page during the hiding part of the process. That is what removes the scrollbars, and also removes any prior scrolled position. Then when the other content is shown, the pare remains at the same unscrolled position that it was at.
    Ahh ok, I thought it was odd. just didn't realise it hides and then shows, just looked like a refresh.

    Anyways.

    In that case put the <a name="xxxx"></a> below the tabbed box.

    OR

    The content seems to always be inside a container that should stay the same size.

    Wrap it all inside a containing div with a set height that way, that element will always be present, the page will stay the same size and the scroll bar won't disappear, eliminating the jump to top.

    Quote Originally Posted by drtanz View Post
    Thanks I understand the dynamics of what's happening now, I'll probably leave it is at is then as it's a minor annoyance anyway. Thanks again.
    May seem like a minor annoyance for you as you've seen it so often but as a new visitor, someone may find it annoying, give up and leave the site...

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sheferd View Post
    Anyways.

    In that case put the <a name="xxxx"></a> below the tabbed box.
    I think that a jump would still occur in the scrolling with that one

    Quote Originally Posted by sheferd View Post
    OR

    The content seems to always be inside a container that should stay the same size.

    Wrap it all inside a containing div with a set height that way, that element will always be present, the page will stay the same size and the scroll bar won't dissappear.
    With that solution, there will always be a gap underneath the smaller piece of content.

    Even if the OP decides to not implement any of our solutions, do you see any issues with this potential solution, which is:

    to use a different fading technique, where both sections of content are absolutely positioned on the page at the same location, so that you can fade one out to nearly 0, fade the other in, then completely fade out the first.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    With that solution, there will always be a gap underneath the smaller piece of content.

    Even if the OP decides to not implement any of our solutions, do you see any issues with this potential solution, which is:

    to use a different fading technique, where both sections of content are absolutely positioned on the page at the same location, so that you can fade one out to nearly 0, fade the other in, then completely fade out the first.
    The whole container though looks to always be the same size..

    If everything from above the tabs to below the part that fades in and out was inside a set height container it'll work completly fine, no gaps would occur if that containing div was only placed anywhere the tabs were...

    Also for them to be absolutely positioned properly they'd need to be inside a containing div that wasn't the body or a whole page wrapper as this could cause usability issues with different screen sizes.

    Usually though things like this are inside containers with set heights that aren't affected by fades etc because of things like this current issue.

    not completly fading would also work but a little more work than just a wrapping div.


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
  •