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 15 of 15
  1. #1
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts

    Trouble with simulating anchor tags

    To fire off a Javascript function, I have this anchor tag:
    Code:
    <a href="#" onclick="doStuff();">Do stuff</a>
    This is OK, but there are times I don't want this link to force the page to the top (because of the href="#"). So I've come up with this:
    Code:
    <style type="text/css">
    .spanlink {
        text-decoration: underline;
        color: #007;
    }
    .spanlink:hover {
    	text-decoration: underline;
    	color: #00c;
    	background: #ccc;
    	cursor: pointer;
    	cursor: hand;
    }
    </style>
    .
    .
    .
    <span class="spanlink" onclick="doStuff();">Do stuff</a>
    As you can see the "cursor" attribute is set to "pointer" and "hand", because all the advise I have googled says this should make both FF and IE display that little pointy hand. However, this does not work in IE for me. It's so annoying. Come to think of it, in IE the colors do not change when hovering over the <span> tag either! What am I doing wrong?

  • #2
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    It works here when I add

    Code:
    cursor: hand;
    to the .spanlink
    .
    .

  • #3
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    And the reason that the background color doesn't get applied in IE, I seem to recall that it is because IE only support the :hover pseudo class on links, not on spans or divs or such things.
    .
    .

  • #4
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Ah yes, of course-- I add cursor:hand to the class itself rather than the hover. Nice, thank you!

    And uh, IE's lack of hover support along with the gazillion hover bugs makes me crazy. I have a mind to stop using hover altogether because of the bugs in IE. I am still testing with IE6; I don't think the masses of the great unwashed have "upgrade to IE7, yet another atrocity" very high on their to-do lists.

  • #5
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Yeah I know, been almost pulling the hair I don't have, out of my head sometimes, because IE just didn't want to play along.

    Anyone got a spare minute to hack IE 6 and 7 and then switch out that Trident engine with the Gecko?
    .
    .

  • #6
    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
    Just use the link and add return false after the function call in the onclick
    Code:
    <a href="#" onclick="doStuff();return false">link</a>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    That solution is very nice. Thank yoU!

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,474
    Thanks
    6
    Thanked 980 Times in 953 Posts
    And in case you didnít know: cursor: hand; is wrong. Itís called cursor: pointer;.

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Just use the link and add return false after the function call in the onclick
    Code:
    <a href="#" onclick="doStuff();return false">link</a>
    One could also use a real URI, such as / instead of # as well. Of course, this means that youíll have a hyperlink thatís actually functional should JavaScript be missing from the picture; if thatís undesirable, then the href attribute probably shouldnít be there.

    Quote Originally Posted by VIPStephan View Post
    And in case you didnít know: cursor: hand; is wrong. Itís called cursor: pointer;.
    I believe that he already knew this based upon his code. Internet Explorer supports cursor: pointer though, so adding cursor: hand would seem to be superfluous.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #10
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by Arbitrator View Post
    One could also use a real URI, such as / instead of # as well. Of course, this means that youíll have a hyperlink thatís actually functional should JavaScript be missing from the picture; if thatís undesirable, then the href attribute probably shouldnít be there.
    I might be wrong, but I think anchor elements w/o an href might throw up some accessibility issues with AT and keyboard users as they may not be a tabbable element. It will still be 'clickable' by those using a pointing device (e.g. mouse, etcÖ).
    Consequently, href="#" is likely to be a better option than no href at all.

    Of course, as you mention, a proper href would be ideal, but without knowing the actual circumstances of the link's purpose, it's difficult to say whether a proper url in the href would improve underlying usability.

    - - -

    Fumigator, it might be a good idea to consider adding this js-dependent link to the page using js. This would mean that those without js aren't offered a link which is useless to them.

  • #11
    Regular Coder
    Join Date
    Mar 2006
    Posts
    187
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Fumigator View Post
    To fire off a Javascript function, I have this anchor tag:
    Code:
    <a href="#" onclick="doStuff();">Do stuff</a>
    i dont know how correct this is either but you can use:

    Code:
    <a href="javascript:doStuff()">Do stuff</a>

  • #12
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by phill_ridout View Post
    i dont know how correct this is either but you can use:

    Code:
    <a href="javascript:doStuff()">Do stuff</a>
    The technique of placing javascipt protocol directly into the href is increasingly frowned upon. Whilst it may only provide similar functionality, using the href="#" onclick="Ö; return false;" is considered a slightly more modern approach due to its 'better separation'.

  • #13
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,474
    Thanks
    6
    Thanked 980 Times in 953 Posts
    Plus: There is no JavaScript protocol and the javascript thing is plain bullsh!t. Look at (good) tutorials and everybody will confirm that.

  • #14
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by VIPStephan View Post
    Plus: There is no JavaScript protocol and the javascript thing is plain bullsh!t. Look at (good) tutorials and everybody will confirm that.
    Trying it will also confirm, for the most part, it works.
    Dismissing it as bs isn't particularly helpful - or accurate - when the fact remains that everybody knows that it works, but it's simply less desirable/optimal than the alternatives.

  • #15
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by phill_ridout View Post
    i dont know how correct this is either but you can use:

    Code:
    <a href="javascript:doStuff()">Do stuff</a>
    So far as I know, the javascript URI scheme isnít standardized anywhere. The authors of the HTML 5 specification (unfortunately) intend to change that though [1].

    The href attribute was not meant to be used to execute scripts and, if you use a URI like that, you get a broken link when scripting is disabled unless the anchor element or the attribute were added via scripting themselves. Furthermore, you may have issues when users attempt to open such links in new tabs or windows.

    The appropriate place for the code would be an onclick attribute, or, better yet, it would be assigned via an event listener from an embedded or external script.

    Code:
    anchor.addEventListener("click", function, false); // W3C method
    anchor.attachEvent("onclick", function); // Microsoft method
    anchor.onclick = function; // traditional method
    If the resulting effect is relevant to visually‐impaired users, then you might take Bill Posterís suggestion [2] and insert the anchor dynamically, with a valid URI, and a canceled default action (via preventDefault() or returnValue) to overcome potential browser usability issues. (Iíve no idea how non‐visual UAs handle this stuff.)

    [1] http://www.whatwg.org/specs/web-apps...cript-protocol
    [2] Trouble with simulating anchor tags
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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