For a site I am working on I’ve been using a lot of JQuery stuff and there’s one part that requires me to use some buttons to activate an action on the page.
In someone’s opinion is it better to input # as the link in the ‘External’ Hyperlink tab or I’ve seen people use “javascript:void(0)”? The site sample I’m working off of uses # then a span ID tag that targets the JQuery stuff. So it looks like:
<a href="#" title="something"><span id="#action">Link To Do Something</span></a>
But I found it didn’t work in IE7, but worked in IE8. So, overall is it better to use the # or “javascript:void(0)” or is there another method to easily incorporating links like these.
Hi Dan,
Consider both sides of the coin; those with JavaScript on and others
with it switched off or unavailable. Adding an empty anchor (#) as an
href will work but can cause frustration for those that aren’t running
JavaScript as at best the page will simply jump to the top.
If your jQuery content can be accessed without JavaScript then I
always try and do something like this;
<a href="my-html-page.html" onclick="do-fancy-stuff(); return
false;">Link to stuff</a>
The href is valid and will take non JS users to the content. The
onclick will run the ‘do-fancy-stuff’ function for those with JS
available and, most importantly, the return false will stop the click
bubbling up to the href and redirecting the user to the my-html-
page.html page after it’s done running the function.
The big question I have is how you do this in jQuery. That I’ll leave
to you.
All the best,
Tim.
On 16 Jan 2010, at 11:10, Dan J wrote:
For a site I am working on I’ve been using a lot of JQuery stuff and
there’s one part that requires me to use some buttons to activate an
action on the page.
In someone’s opinion is it better to input # as the link in the
‘External’ Hyperlink tab or I’ve seen people use
“javascript:void(0)”? The site sample I’m working off of uses #
then a span ID tag that targets the JQuery stuff. So it looks like:
<a href="#" title="something"><span id="#action">Link To Do
Something</span></a>
But I found it didn’t work in IE7, but worked in IE8. So, overall
is it better to use the # or “javascript:void(0)” or is there
another method to easily incorporating links like these.
With jQuery you can setup a listener that responds to a click when a particular id, class, or element is clicked. In this listener you can do the stuff you need to do and then end with return false to prevent the browser from doing its normal routine, in this case following the link. This way you don’t need to worry if you use #, void(0), or bob as the reference (although I agree with Tim, doing something that allows non-js users out there to go somewhere is a good idea).
Cheers,
Joe
On 17 Jan 2010, at 04:57, Dan J wrote:
Thanks Tim for the response. Interesting reads here @
That’s what I was trying to do. It looks like the code doesn’t use an ‘onclick’ approach, but either an anchor < a > with a specific ID or using a span ID. I’ve also seen the ‘button’ tag used, but not too sure about that.
I’ll have to turn off Javascript and see what happens.
Prototype, too, and the syntax is nearly identical:
//to observe a single link
$('linkID').observe('click',function(evt){
evt.stop(); //stops the default click behavior
//do whatever else here
});
//to observe a number of links with the same class
$$('.className').invoke('observe','click',function(evt){
evt.stop(); //stops the default click behavior
//do whatever else here
});
Walter
On Jan 17, 2010, at 5:37 AM, Joe Billings wrote:
With jQuery you can setup a listener that responds to a click when a
particular id, class, or element is clicked. In this listener you
can do the stuff you need to do and then end with return false to
prevent the browser from doing its normal routine, in this case
following the link. This way you don’t need to worry if you use #,
void(0), or bob as the reference (although I agree with Tim, doing
something that allows non-js users out there to go somewhere is a
good idea).
Cheers,
Joe
On 17 Jan 2010, at 04:57, Dan J wrote:
Thanks Tim for the response. Interesting reads here @
