SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot ChrisCarter's Avatar
    Join Date
    May 2004
    Location
    Wenatchee, WA
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Disable page scroll when using an anchor target

    I'm working on an app right now that uses the CSS psuedo class :target to mimic static drop down menu functionality (ala the "Search", "Thread Tools", etc on vBulletin) without the use of JavaScript. The issue I'm running into is the browser "jumping" to the anchor target on longer pages despite it being right next to the targeting link.

    How would I go about disabling the page scroll/jump for internal anchor targets on a page, say with an onclick property on the linking anchors?

    Thanks for any help you guys can provide!

  2. #2
    SitePoint Zealot ChrisCarter's Avatar
    Join Date
    May 2004
    Location
    Wenatchee, WA
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Am I unclear in my description, or is this genuinely an issue that no one knows how to solve?

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you are unclear

    best to post a link to the code of post code

  4. #4
    SitePoint Zealot ChrisCarter's Avatar
    Join Date
    May 2004
    Location
    Wenatchee, WA
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.w3.org/Style/Examples/007/target.html

    Take a look at this page in FireFox. Notice the tabs in the second example? Scroll your window so that those tabs are toward the bottom of the viewable area, then click on one. See how the window "jumps" to the location of the tab? This is obviously standard functionality for internal anchors, but I'd like the ability to selectively disable this somehow.

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I cant disable it but have the following workaround

    PHP Code:


    <script language="JavaScript" type="text/javascript">
    <!--
    function 
    bgenScroll() {
     if (
    window.pageYOffset!= null){
      
    st=window.pageYOffset+'';
     }
     if (
    document.body.scrollWidth!= null){
      if (
    document.body.scrollTop){
      
    st=document.body.scrollTop;
      }
      
    st=document.documentElement.scrollTop;
     }
      
    setTimeout('window.scroll(0,st)',10);
    }



    //-->
    </script>

    </p><div class="example">
     <div class="tabs">
      <div id="tab1">
      <a href="#tab1" onclick="bgenScroll();" >Tab&nbsp;1</a>
       <div>One might well argue, that...</div>
      </div>
      <div id="tab2">
       <a href="#tab2" onclick="bgenScroll();">Tab&nbsp;2</a>

       <div>... 30 lines of CSS is rather a lot, and...</div>
      </div>
      <div id="tab3">
       <a href="#tab3" onclick="bgenScroll();">Tab&nbsp;3</a>
       <div>... that 2 should have been enough, but...</div>
      </div>
      <div id="default2">

       <a href="#default2" onclick="bgenScroll();" >Default</a>
       <div>... it works!</div>
      </div>
     </div>
    </div>

    </div>
    </div> 
    bit naff but all I can think of at the moment

    learnt from your code though - thanks

    while I'm here can you help with


    PHP Code:


    <html>

    <
    head>
      <
    title></title>
    <
    style>
    .
    fred {
     
    width:200px;height:100px;
     
    background-color#404040;
     
    borderthin solid black;
     
    margin-right2px;
     
    padding0px 2px;
     -
    moz-border-radius5px 20px 40px 60px;
    }

    </
    style>
    </
    head>
    <
    div id=trial class='fred' ></div>
    <
    body>

    </
    body>

    </
    html
    [/code]


    I can change width height etc with

    document.getElementById('trial').style.width='100px';

    but can find the syntax for border radius

    also can IE achieve the same effect
    Last edited by vwphillips; Jan 1, 2005 at 06:04.

  6. #6
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As the W3C article points out, when responding to an activated link for an internal anchor, "Browsers typically try to make sure that the targeted element is visible and if possible at the top of the screen."

    Perhaps an internal anchor isn't what you should be using? For that matter, JavaScript is better supported than CSS 3, anyway.
    Last edited by JVLB; Jan 1, 2005 at 10:18.


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
  •