Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorjoshcarr
    • CommentTimeApr 2nd 2007 edited
     permalink
    Is there a way to use Javascript to disable the browser from jumping to an anchor when a page loads? For instance, if I link to a page with the URL:

    www.example.com/example.html#example

    with an anchor named "example" half-way down the page, is there a way to have the page load at the top, rather than at that anchor? I don't want to use something like window.scrollTo or anything "after the fact," but rather I want to catch the functionality and disable it right away so that the page loads immediately at the top. I also want to keep the URL as is, with the anchor listed after the hash.

    Any ideas?

    Thanks, for your help.
    • CommentAuthorvarland
    • CommentTimeApr 2nd 2007
     permalink
    I don't know how to do this, but I wonder why you'd want to… That seems like something that would infuriate me as a user. If I expect to see #example, I'm going to think your website is broken if I don't get it.
    • CommentAuthorPettyRider
    • CommentTimeApr 2nd 2007 edited
     permalink
    The only thing I could imagine doing would be to absolutely position the element at the top of the page until the document loads. Not sure how to do that unobtrusively though.. Perhaps tack on a 'js' class to the HTML tag, position all elements to the top using 'html.js' as part of your selector, then remove that class immediately. Not sure what the browsers will do, to be honest
    • CommentAuthorjoshcarr
    • CommentTimeApr 3rd 2007
     permalink
    The reason I'm trying to do this is I am using DOMTabs, where I display a tab's DIV equivalent when the tab is clicked on (and the DIV is hidden otherwise). I also want to have this functionality when a user visits the page with the anchor link of the DIV in the URL (the www.example.com/example.html#example above). But for some reason, when I load the page with this URL, my entire layout scrolls up to display the location of the anchor at the top of the window. I want to disable this behavior so that when one visits the URL the appropriate DIV is displayed and nothing is scrolled. As a user, you would see the content you expected.

    Does that make sense?
  1.  permalink
    Makes sense. I think someone here already did something similar. Have you tried searching for it? You'll have to inspect location.href or location.hash? to get at the fragment, then display the matching DIV. If the browser then scrolls to it, it probably should.
    • CommentAuthorMatt
    • CommentTimeApr 4th 2007
     permalink
    I agree with pettyrider, do a window.load and getelementbyid and then give it the styles of position:relative, but in your css give it position absolute and top 0px;. that should do the trick.
    •  
      CommentAuthorkayloe
    • CommentTimeApr 4th 2007
     permalink
    can you provide a sample page of what you are attempting?
    i did something similar with a FAQs section on a commercial project (with jQuery, but you could also use plain old DOM).
    • CommentAuthorneXus
    • CommentTimeApr 5th 2007 edited
     permalink
    you could always use an htaccess rule to rewrite the URL from www.example.com/example.html#example to something like www.example.com/example.html?example which would have the effect your looking for without having to resort to javascript
  2.  permalink
    Interesting idea, neXus
    • CommentAuthorvarland
    • CommentTimeApr 5th 2007
     permalink
    I like neXus' idea, but you may have some trouble. I don't know that Apache can see IDs specified with a "#" sign.
    • CommentAuthorneXus
    • CommentTimeApr 7th 2007
     permalink
    See this is what happens when you don't think about your answer before you post it..

    scrap what i said, it's not going to work (well, if you redirect to a cgi script i suppose you could) the server never see's the named anchor, it's held by the User-Agent.

    It'd be much easier if you just don't use anchors. :p
    •  
      CommentAuthorkayloe
    • CommentTimeApr 9th 2007
     permalink
    try something like:

    <script language="javascript" type="text/javascript">
    if (window.location.href.indexOf('http://www.yoursite.com#example') > -1) {
    window.location.href = 'http://www.yoursite.com';
    }
    </script>

    after you set the div#example to display:block or visible with JS or CSS.
Add your comments
    Username Password
  • Format comments as (Help)