Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jul 2006
    Location
    El Cajon
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Better choice to make a link do nothing besides "#"?

    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.
    Thanks

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    Code:
    <a href="#" onclick="return false">link</a>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Jul 2006
    Location
    El Cajon
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onClick already being used

    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.

  • #4
    New Coder
    Join Date
    Jul 2006
    Location
    El Cajon
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    oops

    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?

  • #5
    New Coder
    Join Date
    Sep 2006
    Location
    Netherlands
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    New Coder
    Join Date
    Jul 2006
    Location
    El Cajon
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    tried a suggestion-didn't work.

    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.
    Code:
    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.

  • #7
    New Coder
    Join Date
    Sep 2006
    Location
    Netherlands
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Firefox apparantly returns an error as well. I think something is wrong in your code. same error.
    As a rule, I never touch anything more sophisticated and delicate than myself.

  • #8
    New Coder
    Join Date
    Jul 2006
    Location
    El Cajon
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks for the reply

    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.

  • #9
    New Coder
    Join Date
    Jul 2006
    Location
    El Cajon
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Doh!

    It was just pointed out to my neophyte self, that I may not have an element called 'mymap'. (And of course I don't) 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!

  • #10
    New Coder
    Join Date
    Jul 2006
    Location
    El Cajon
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's using onclick exclusively.
    A sample line in my html, not in an image map - part of a menu
    Code:
    <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:
    Code:
    <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?
    Hmmm.
    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="#"
    with:
    href="javascript:function Z(){Z=''}Z()"
    which works great in Opera.
    Code:
    <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');" />
    </map>
    (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!

  • #11
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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>
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •