SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict webmistress's Avatar
    Join Date
    Aug 2002
    Location
    Derbyshire, UK
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why does using anchors break my scroll bar?

    Yeah sounds crazy I know... however..
    I have a list of links at the top of the page and they link to page anchors on that page.

    Here is the list:
    Code:
    <ul>
     		    <li><a href="#entertainment">Entertainment &amp; Attractions</a></li>
     		    <li><a href="#transportation">Transportation</a></li>
     		    <li><a href="#homes">East Midlands &rsquo; Homes</a></li>
     			<li><a href="#finances">Finances</a></li>
     		    <li><a href="#health">Health &amp; Education</a> </li>
     		    <li><a href="#news">News and Weather</a></li>
     		</ul>
    And the anchors are made like this:

    Code:
    <h2><a name="entertainment"></a>Entertainment &amp; Attractions</h2>
    When I preview this in Firefox and click a link that takes me to that part of the page, it works fine except I can no longer scroll up and down. I have to click somewhere on the page to re-enable the scroll again..

    Any ideas?

    I have been on the w3c website to check I am doing my anchors correct and it seems so.. Very confused..
    This doesn't happen in IE6 though.

    Thanks

    L
    ****************
    The Webmistress

  2. #2
    SitePoint Addict
    Join Date
    Nov 2003
    Location
    Malmoe, Sweden
    Posts
    265
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It can be that when navigating within a document the anchor will get focus and that you may be able to use the JavaScript method blur() to get around this. Itīs a longshot I know but thatīs what I can think of for now.

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    581
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by andrin
    It can be that when navigating within a document the anchor will get focus and that you may be able to use the JavaScript method blur() to get around this. Itīs a longshot I know but thatīs what I can think of for now.
    No offence, but I highly doubt that this is a good suggestion! I really don't think the anchor gets the focus. At least it shouldn't. This could very well just be a Firefox bug as I have noticed other issues with the scrollbars.

    I honestly do not know what to tell you, webmistress, but the problem is not your code.
    I will not flame the newbies,
    I will not flame the newbies,
    I will flame the newbies...
    Table free is the way to be!

  4. #4
    SitePoint Addict
    Join Date
    Nov 2003
    Location
    Malmoe, Sweden
    Posts
    265
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you have a link pointing to an anchor and after (in code) that anchor you have a link or a form element (input, select) and you click the first link (the one pointing to the anchor) and then press tab ones you will notice that the link/form element after the anchor gains focus. This implies that focus was on the anchor before tab was pressed.

  5. #5
    SitePoint Addict webmistress's Avatar
    Join Date
    Aug 2002
    Location
    Derbyshire, UK
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    However isn't the focus thing true for all anchors?
    I tried the same thing on a page where the scroll bar still works and after the anchor is clicked and it jumps to the next link after the anchor when you tab indicating it did have focus... doesn't make sense that mine is broke saying I used the same technique and same browser.. oh sign.. Unsolved mystery..

    Thanks guys
    ****************
    The Webmistress

  6. #6
    SitePoint Addict
    Join Date
    Nov 2003
    Location
    Malmoe, Sweden
    Posts
    265
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm. Well I must confess i am baffled. I have almost the same setup on a page i have made but without this problem. The difference is that I have the anchor outside and before the header:
    HTML Code:
    <a name="entertainment"></a>
    <h3>Entertainment &amp; Attractions</h3>
    What version of FF you use?

  7. #7
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <h2 id="entertainment">Entertainment &amp; Attractions</h2>
    Simon Pieters

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't seem to replicate getting the mouse scroll wheel to stop working when using named anchors in FF1.0.4/Win.

    NS4.x only supports using intrapage linking with real named anchors (<a name="...">).
    Other browsers will scroll to elements with an ID set.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  9. #9
    SitePoint Addict webmistress's Avatar
    Join Date
    Aug 2002
    Location
    Derbyshire, UK
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am using FF 1.0.4.

    Let me try the 2 suggestions above. Moving the link above the h3 and using ID....

    BRB.
    ****************
    The Webmistress

  10. #10
    SitePoint Addict
    Join Date
    Nov 2003
    Location
    Malmoe, Sweden
    Posts
    265
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it that you use a frameset? Or maybe an iframe? I know there are known issues when using these.

  11. #11
    SitePoint Addict webmistress's Avatar
    Join Date
    Aug 2002
    Location
    Derbyshire, UK
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hmmmmmmm

    hmm ok I have discovered something...

    I just tried the other 2 methods, using id and putting the link before the h3... didn't work...

    But I noticed one of my other anchor links did work fine, and that was my back to top link. I checked out where I had put the back to top link and it appears just after the 1st div.... where as the other ones are deeper inside divs..

    Code:
     <body> 
      <div id="outer"> 
      <a name="top" accesskey="q"></a> 
      <div id="contentwrapper"> 
      <div id="sectionboxes"> 
      <div id="main"> 
      <p> my content</p>
      
      		  <ul>
     		    <li><a href="#entertainment">Entertainment &amp; Attractions</a></li>
      			etc...............
      		</ul>
      
      <a name="entertainment"></a><h2>Entertainment &amp; Attractions</h2>
      
      <p>more text</p>
      
      <div id="b2top"><a href="#top">Top of page</a>
      			 </div><!-- Closing tag for id="b2top" -->
      
      </div> 
      </div>
      </div>
      </div>
    hmm... I moved the <a name="top" accesskey="q"></a>
    to just below the
    <div id="main">
    and it broke! just like the other anchors...

    So it is something to do with that... but not sure what. LOL.

    Back to the drawing board.
    ****************
    The Webmistress


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
  •