IE ## anchors

##, link, anchors, a, IE, Internet Explorer, Firefox

[likes2burn]

Hiya there,

I'm working on a website, I have some links on the side bar that expand to display hidden content. I need to make my links have anchors that don't move the web page.

I have a system of links nested in LI, as well as nested UL. The links that are not suppose to move the page are listed as <a href="##"> which works wonders on Firefox, etc. not so much IE, it focuses to the top.

I could post the code, but here's the actual site: <snip>

It's much like the side bar on this site, however IE works great for these guys:
<snip>

It's a bit difficult to do a Google search for what I'm looking for - haven't found anything remotely close; so thanks for your time!

[edited by: incrediBILL at 8:19 am (utc) on Nov. 14, 2009]
[edit reason] removed personal URLs, see TOS #13 [/edit]

[D_Blackwell]

The personal links are going to get chopped, so I cannot use as a reference.

My recommendation is to strip the HTML and CSS down to the problem itself by commenting out extraneous markup unrelated to the problem. If the fix is not found during this process, post the test ready code that replicates the problem and we will look at the options.

Be sure to declare a DTD and validate the markup. That will avoid, eliminate, or rule out many problems.

[likes2burn]

whoops! forgot that rule, /sheepish. Gotta pay attention more at 3am...ish.

But you are answering all my questions today, things are going well.

So strangely, ### works - in a way. It's not the listed way to do it, but hey I'm willing to do it. Still XHTML strict!

Thank you for all your help!

[rocknbil]

The links that are not suppose to move the page are listed as <a href="##"> which works wonders on Firefox, etc. not so much IE, it focuses to the top.

I don't understand the use of a double ##, can you explain why you are doing that?

To my knowledge, a link to a single # will always scroll to the top of the page it's referenced. Never seen a ##.

The best approach is to name your identifiers, and link to them by ID, which is essentially what # does. You don't need it to be an anchor.

<a href="#some-id">Go to some-id</a>

<h2 id="some-id">Some-ID</h2>

I need to make my links have anchors that don't move the web page.

A small bit of Javascript is required to do this. Return false will always tell the browser not to perform the requested action, doesn't matter whether it's a link

<a href="#" onClick="return false;">Goes nowhere</a>

or a form

<form action="" onSubmit="return false;">

Generally this is done to allow Javascript to "take over" the function of the link. You use a "real link" in case Javascript is disabled.

<a href="#some-id" onClick="return some_function();">Some Function</a>
<script type="text/Javascript">
function some_function() {
alert ('boo');
return false;
}
</script>

in the above the return false comes from the function itself.

A good approach might be to assign the function to the link externally by class name, so you don't have to have the inline Javascript - see JS forum for help.

[likes2burn]

Hm, I know it's not in the specifications but a ## link, or ### link works as a static click.

While the site I'm working on requires Javascript to be enabled from others, I see what you mean. So instead of
<a href="###" onclick="aFunction()"> I'm using
<a href="alt.html" onclick="aFunction();return false;">