Anchor Tags in menu not working

Posted on 2012-09-12
Last Modified: 2012-09-14
I've never had this issue before. I am trying to have my main menu have a link to a lower part of the page and clicking the menu item does nothing.

The menu link uses a variable to tell coldfusion to display a piece of content lower on the page. If the url.var isn't in the url, the content won't appear.

I added the #a1 anchor to the end of the link and when I click on the link, nothing happens at all. The url doesn't change, the page doesn't reload with the url variable in the address bar and the page doesn't MOVE down to the anchor location.

I've read the following information online about this type issue and none of the solutions seem to fix my problem.

- If you're using Jquery, it could be conflicting with the anchor tag (don't know how to troubleshoot that)

- If my anchors use the NAME feature, they must have the ID as well (which I do).

- If the anchor tag is located inside a certain type of DIV, it could possibly not work.

- If the page size (height) is variable, the browser may not know how to locate where the anchor exists.

- Use a javascript "onclick" alternative in the link code. (tried, but it doesn't make a difference)

<A href="index.cfm?n1=photos#a1" class="hdrmnu">photos</A>
<a id="a1" name="a1"></a>

Open in new window

I've used anchor tags for 12 years in my web development and this is the first time I've encountered anything like this.
Question by:day6
    LVL 1

    Author Comment

    I've actually relocated the anchor above a DIV tag, which now allows the anchor to focus properly when I click the menu item, but NOW it doesn't pass the URL variable in the page reload.

    The only way I could get this to work is to actually duplicate the page I was on and then change the link to reflect a different .cfm template with the anchor tag. Then it worked fine.

    I don't get this.

    I've always been able to create a URL with variables and then put an anchor at the very end AND stay on the same template page, but it reloads the page with the variables in the URL, which then creates new content on the page based on the variables loading. All I'm trying to do is locate the focus down lower on the page where the new content appears.  I don't want to have to create a new template for every time I want new content to appear.
    LVL 51

    Accepted Solution

    there're various quirks:

    if you loaded the url (including the # anchor) once, the browser cached it, so you need to disable the cahce to make it work, or you need to clear your cach before reloading
    note that this cannot be done from  inside the loaded page

    some browsers have trouble to find the proper anchor, depending on its definition or on the part of the loded page just being displayed (soryy don't have details handy, but you already mentioned some)

    if you loaded the url (without the #) once and then scroll in the displayed window and then click on a link with the anchor it also might not work if the anchor is in the current displayed area

    one way to enforce going to thje specified anchor is to use unique urls, like:
    LVL 75

    Expert Comment

    by:Michel Plungjan
    I am not sure where you get all this information from

    If you have

    <a href="#a1" class="hdrmnu">photos</A>


    <a name="a1">Named anchor to go to</a>


    <div id="a1">content to show</div>

    it should work in all newer browsers unless the code for the menu overrides the onclick (likely)
    LVL 51

    Expert Comment

    ... where id= overrules name=

    Featured Post

    What Security Threats Are You Missing?

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Join & Write a Comment

    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
    This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

    755 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now