...

View Full Version : Trouble with simulating anchor tags



Fumigator
07-06-2007, 07:10 PM
To fire off a Javascript function, I have this anchor tag:


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


<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? :(

Jutlander
07-06-2007, 07:21 PM
It works here when I add


cursor: hand;

to the .spanlink :)

Jutlander
07-06-2007, 07:25 PM
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.

Fumigator
07-06-2007, 08:11 PM
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.

Jutlander
07-06-2007, 08:16 PM
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. :D

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

_Aerospace_Eng_
07-06-2007, 09:07 PM
Just use the link and add return false after the function call in the onclick

<a href="#" onclick="doStuff();return false">link</a>

Fumigator
07-06-2007, 11:42 PM
That solution is very nice. Thank yoU!

VIPStephan
07-07-2007, 12:47 AM
And in case you didnít know: cursor: hand; is wrong. Itís called cursor: pointer;.

Arbitrator
07-07-2007, 10:09 AM
Just use the link and add return false after the function call in the onclick

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


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.

Bill Posters
07-07-2007, 11:01 AM
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.

phill_ridout
07-07-2007, 05:42 PM
To fire off a Javascript function, I have this anchor tag:


<a href="#" onclick="doStuff();">Do stuff</a>



i dont know how correct this is either but you can use:



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

Bill Posters
07-07-2007, 05:48 PM
i dont know how correct this is either but you can use:



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

VIPStephan
07-07-2007, 11:25 PM
Plus: There is no JavaScript protocol and the javascript:Ö thing is plain bullsh!t. Look at (good) tutorials and everybody will confirm that.

Bill Posters
07-08-2007, 06:51 AM
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.

Arbitrator
07-09-2007, 01:25 PM
i dont know how correct this is either but you can use:



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


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/current-work/multipage/section-scripting.html#javascript-protocol
[2] http://www.codingforums.com/showpost.php?p=585308&postcount=10



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum