View Full Version : Better choice to make a link do nothing besides "#"?

09-16-2006, 06:06 PM
I have styling that relies on a link being a link, yet I would like the link to do absolutely nothing and go nowhere. (Not all of the time, just when it's necessary.) I'm also using image maps that rely on links.

I'm using href="#" and that works, but it forces a page reload when the original changed page is "surfed" back to, or returned to. In Opera, "#" apparently means 'immediately reload this div' and the link's other means of egress or change, which is javascript called "SwapImg", gets overridden. In essence in Opera, you get-reload-period with "#".

IE works great till you surf back and expect to see your past changes made with javascript. Your back to square one thanks to "#", which is not too bad, just a little annoying and not too slick.

I've used href="javascript:function Z(){Z=''}Z()" in place of href="#" , but that looks real tacky in the status bar when the link is hovered. Works great in Opera though; all of your changes remain when you return.

Some FF work like IE, some like Opera. That's using the "#".? Dunno why.

Are there any other 'do nothing' link alternatives that are elegant?
I can live without it, and I sure can't write it, so unless someone's had a need for a 'null link' solution, I'll have to rely on what I have.

I can repost code if it'll help.

09-16-2006, 10:51 PM
Using onclick="return false" will stop the link from going anywhere. If you need to call another function as well onclick then seperate function calls with a semi colon. Just remember to have return false at the end.

<a href="#" onclick="return false">link</a>

09-19-2006, 01:32 PM
onClick is being used in the 'SwapImg' script. It needs to be ="return true".
If it didn't already need to be true, that would work.

09-19-2006, 01:47 PM
I mis-spoke (typed). onclick is what makes the javascript function happen, and that still means it can't be used with ="return false" appended to it, right?

09-19-2006, 01:52 PM
I just set a "javascript:;" as the href which appears to do nothing. By using # the page often flips back to the top which is sometimes not what you want.

and btw, hi, i'm new ;) :thumbsup:

09-19-2006, 02:33 PM
Thanks though! :)
I moved the script into my script folder, took out the html, and called it with a link.
In IE7 RC1 I get this error
Here's the killLinks.js I've made.

function killLinks(el) {
var links=document.getElementById(el).getElementsByTagName('a');
for (i=0; i<links.length; i++) {
links[i].onclick=function() {return false;}
window.onload=function() {killLinks('mymap')}
All browsers seem to exhibit their individual behaviors with or without this script.
Almost leads me to believe it's not related to "#", although it certainly is the case for Opera.

09-19-2006, 02:41 PM
Firefox apparantly returns an error as well. I think something is wrong in your code. same error.

09-19-2006, 04:32 PM
Thanks for the tip Desdinova. What your using looks more elegant in the status bar or tool tip than the javascript:function Z(){Z=''}Z() I'm using.
It doesn't solve the IE & FF issue of always reloading my div to the beginning img so it seems I'm going through this excersize just for Opera.
If I could get a handle on what's happening between IE & Opera, this new site would all be roses.

09-19-2006, 04:51 PM
It was just pointed out to my neophyte self, that I may not have an element called 'mymap'. (And of course I don't) :D I'll re-test when I find out how to correctly call out all of the maps and links I need to identify; commas, quotes, or ?.
Thanks again ever so much! :)

09-19-2006, 09:41 PM
It's using onclick exclusively.
A sample line in my html, not in an image map - part of a menu

<li class="submenu" onclick="SwapImg('i215','products');"><a href="#">Products</a>

Interestingly enough, although I haven't used SwapImg this way in these places, this works too:

<li class="submenu"><a href="#" onclick="SwapImg('i215','products');">Products</a>

SwapImg doesn't care what it's part of, it just works because of the name?
That means I could divorce it from an href altogether.
This begs the question: What is the real difference between <a href=""> in a link, and href="00,00,00,00" in an image map?

All of the image maps follow this format, except in this one I've replaced:
href="javascript:function Z(){Z=''}Z()"
which works great in Opera.

<map id="controllers" name="controllers">
<area shape="rect" coords="30,93,164,211" href="sgIP.html" alt="STARGATE-IP" />
<area shape="rect" coords="179,93,315,211" href="sgLite.html" alt="STARGATE-Lite" />
<area shape="rect" coords="348,93,443,211" href="cs30.html" alt="CommStar CS30" />
<area shape="rect" coords="21,317,95,350" href="javascript:function Z(){Z=''}Z()" alt="Home" onmouseout="window.status=''; return true" onmouseover="window.status='Home'; return true" onclick="SwapImg('i215','screenWelcome');" />
<area shape="rect" coords="114,317,188,349" href="javascript:function Z(){Z=''}Z()" alt="Back" onmouseout="window.status=''; return true" onmouseover="window.status='Back'; return true" onclick="SwapImg('i215','products');" />
<area shape="rect" coords="395,318,432,349" href="javascript:function Z(){Z=''}Z()" alt="cycleLeft" onmouseout="window.status=''; return true" onmouseover="window.status='Home'; return true" onclick="SwapImg('i215','misc');" />
<area shape="rect" coords="432,318,468,349" href="javascript:function Z(){Z=''}Z()" alt="cycleRight" onmouseout="window.status=''; return true" onmouseover="window.status='Home'; return true" onclick="SwapImg('i215','interfaces');" />

(If I've never mentioned it, all of this 'Swap Img' stuff only happens on the index.html and nowhere else.)
Again, all of this works wonderfully well except:
Not in Opera with "href "#"-
Selected screen using 'SwapImg' gone (index.html-reloaded) on return using back button in IE-
Selected screen gone or there on return depending on your FF flavor-

The horse may be dead already, but if you would like me to still beat him (He may not be completely dead.), I can re-post what's needed or wanted.

Thanks again!

09-19-2006, 09:55 PM
href="#" is a link to the top of the page (or if something follows the # it is a link to the anchor that has that as its name).

Try this to override it from the onclick:

<li class="submenu"><a href="#" onclick="SwapImg('i215','products');return false;">Products</a></li>