which is better, void or # ?

[sparky672]

What's better for killing a link when it's only used for hovering? And why?

href="#"

or

href="j void(0);"

[aaronbarker]

(5th January 21:02)sparky672 Wrote:  What's better for killing a link when it's only used for hovering? And why?

href="#"

or

href="j void(0);"

neither. Do onclick="return false"

But if you had to pick one, do #d (or some other string). Just a # will take you to the top of the page, #d or anything else that isn't actually an ID/Name on the page, will not make the page jump.

[sparky672]

(5th January 21:44)aaronbarker Wrote:  neither. Do onclick="return false"

But if you had to pick one, do #d (or some other string). Just a # will take you to the top of the page, #d or anything else that isn't actually an ID/Name on the page, will not make the page jump.

Yes, that page jump thing is not readily noticeable unless you are scrolled down so thanks for reminding me. But what exactly is wrong with the Javascript Void then?

The onclick="return false" means that you'd have to leave out the href attribute or get a 404 error. But when you do that, you lose the mouse pointer "hand" icon and the link's underline. I'm also not sure if an <a> tag will pass validation if you don't have the href attribute.

I'll play around with your dead anchor idea. Thank-you.

[aaronbarker]

(5th January 21:59)sparky672 Wrote:  But what exactly is wrong with the Javascript Void then?

It's just dirty. Running javascript where it's not meant to be run (in the href).

(5th January 21:59)sparky672 Wrote:  The onclick="return false" means that you'd have to leave out the href attribute or get a 404 error. But when you do that, you lose the mouse pointer "hand" icon and the link's underline. I'm also not sure if an <a> tag will pass validation if you don't have the href attribute.

Valid point. In practice it is both the href="#d" and the onclick="return false". The href provides the hand and all that good stuff, and the return false stops it from following the #d. Another issue with the #d is that it adds to the history of the page. So if you clicked on 5 different links you would have to hit back 5 times before you could actually leave the page (unless they all pointed to the same #d, but even one extra back is annoying).

[sparky672]

I agree the Javascript Void is dirty but I notice all the big websites are using it... it seems to be the way since all the other methods have more cons.

Also the Javascript Void is visible in the browser's status bar... this I don't like either.

Why not use "#d" with an "onclick"? The onclick kills it so might as well just use a "#"... the onclick kills that too.

This seems to solve all the problems (tested only in Safari so far)...

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

- Thanks to "onclick", # is not added to URL and therefore not added to history either.
- No Javascript.
- Does not cause page to jump since "onclick" is killing it.
- Still has underline and hand icon.
- Still looks and acts like a normal link except does not go anyplace.

The only thing now is if this fails in Exploder... that will be very disappointing and I'll just go back to the JavaScript Void.

[Craig]

I sometimes use a snooze button (shamelessly stolen name... can't remember where I saw it!)

HTML Code

<a href="#zzz">Clickety click!</a>

Works nicely and doesn't jump the browser to the top of the page either. Plus no need for an onclick which I wouldn't suggest anyway... in-line JS a nono in a lot of peoples books! Doesn't solve the history issue however...

This is probably the best option:

HTML Code

<a href="#">Click</a>

JS Code

$('[href=#]').click(false); // Use function(){ e.preventDefault(); } for jQuery 1.4.2 and below

[aaronbarker]

You can even take it a step further, depending on what it is you are trying to do.

Figuring you are asking about this for qtip usage (maybe not), this is what I do. I put the ID of the inline content that I want to load or the URL of the ajax that I want to load in the HREF. Then I check all my qtip using anchors to see if they have a # or not in them. If they have a # then they must be local inline content and I configure the qtip that way. If they don't, then it must be an ajax request and so I configure it that way.

Now if a user has JS off then they will still jump to the inline content (which would have been hidden with JS and so is still showing) and go to the page with the ajax (ugly looking page with only a little content, but at least accessible).

Then I add the preventDefault to wrap it all up.

So that gives you a functional href that can actually have a purpose instead of just be filler and it gracefully degrades when there is a problem.

Again, that is kind of a targeted use case, your your miles may vary.

[sparky672]

Both excellent suggestions. Thanks!

[sparky672]

Here's an article that explains "return false" in depth. I suppose it doesn't really apply if we're using click(false) with jQuery 1.5 but it's interesting nonetheless....

http://fuelyourcoding.com/jquery-events-...urn-false/

[sparky672]

There's a discussion I started on StackOverflow and they're insisting that using ".click(false)" is totally unacceptable.

http://stackoverflow.com/questions/52862...a-function

[sparky672]

After a ton of research and much consideration, here's what I ended up using everyplace I want to kill the normal behavior of a clickable link with href="#".

When you click any link to href="#" within element id "myDiv"...

- Nothing is added to browsing history.
- The URL remains intact without a "#" being added to end.
- The window does not scroll back to top.

JS Code

$('#myDiv a[href]').click(function (e) { e.preventDefault(); });

If you want something else to happen when you click the link, put your code AFTER the preventDefault...

JS Code

$('#myDiv a[href]').click(function (e) { 
      e.preventDefault();
      // your other click code here
});

[Backslider]

Why in the World would you use a link in the first place if its not used for what its intended??

Anybody still using inline javascript such as onclick really needs to come into the 21st century.

[sparky672]

(1st August 23:45)Backslider Wrote:  Why in the World would you use a link in the first place if its not used for what its intended??

What? You've never seen an href="#" within an "<a>" element before? It's used all over the place and it's perfectly valid syntax.

An "<a>" element has more intended uses than just a link. And 'being a link' is not even a requirement for the "<a>" element.

http://www.w3.org/TR/html4/struct/links.html#h-12.2

In the context of this forum's purpose to support a jQuery plugin called qTip, you may want to bring up a qTip on hovering a piece of text while at the same time not linking it to another page. While there are other ways to style a chunk of text for hovering, there are CSS issues like cross-browser cursor consistency... simply using an "<a>" element with an href="#" solves that.

(1st August 23:45)Backslider Wrote:  Anybody still using inline javascript such as onclick really needs to come into the 21st century.

Perhaps you read only the first post and skipped to the end of the thread, but ultimately, no inline JavaScript was used...

JS Code

<script>
    $('.myHover').click(function (e) { e.preventDefault(); });
</script>

HTML Code

<a href="#" class="myHover">myHover Text</a>

[Timson]

Why do you need to use <a> tag at all?
I use
.cursorHand{cursor: pointer;cursor: hand;}

<span class='cursorHand'>Clear solution</span>

instead, if object is not for navigation.

[sparky672]

(7th August 22:42)Timson Wrote:  Why do you need to use <a> tag at all?
I use
.cursorHand{cursor: pointer;cursor: hand;}

<span class='cursorHand'>Clear solution</span>

instead, if object is not for navigation.

Don't forget to underline it.

And now that you bring it up, why even use the "cursor: hand;" fallback? Is anyone you know still using IE 5.5 or earlier?

[ciguli]

I basically discovered 2 ways to avoid the page jump and underlined links:

1) Use <a id="tip1">Trigger</a>
NOTE: qtip needs to be created using $('#tip1').qtip ...

2) Use <span class="tip1">Trigger</span>
NOTE: qtip needs to be created using $('.tip1').qtip ...


Does anyone know if there is anything wrong with these two methods?

Thanks

[sparky672]

(9th September 23:05)ciguli Wrote:  I basically discovered 2 ways to avoid the page jump and underlined links:

1) Use <a id="tip1">Trigger</a>
NOTE: qtip needs to be created using $('#tip1').qtip ...

2) Use <span class="tip1">Trigger</span>
NOTE: qtip needs to be created using $('.tip1').qtip ...


Does anyone know if there is anything wrong with these two methods?

Thanks

The second one won't behave like a link so you'll have to style it with the proper cursor and underline if desired. Without an "href", the first one might not either.

http://www.thefutureoftheweb.com/blog/us...attributes

[ciguli]

(10th September 06:06)sparky672 Wrote:  The second one won't behave like a link so you'll have to style it with the proper cursor and underline if desired. Without an "href", the first one might not either.

http://www.thefutureoftheweb.com/blog/us...attributes

True. I am styling them. They both don't behave like links otherwise which is what I exactly want.

[ciguli]

(9th September 23:05)ciguli Wrote:  I basically discovered 2 ways to avoid the page jump and underlined links:

1) Use <a id="tip1">Trigger</a>
NOTE: qtip needs to be created using $('#tip1').qtip ...

2) Use <span class="tip1">Trigger</span>
NOTE: qtip needs to be created using $('.tip1').qtip ...


Does anyone know if there is anything wrong with these two methods?

Thanks

By the way, can anyone explain to me why I have to use $('.tip1').qtip when I use the span class method? Why doesn't it work with the $('#tip1').qtip?

[Craig]

You could use #tip1, but the span would have to have an ID or 'tip1', or rather some element on the page would have to, as its equivalent to calling document.getElementById('tip1'). The second method is equivalent to document.getElementsByClassName('tip1'). Both are valid, but serve differing purposes i.e. ID's are for specific singular elements, whereas classes are used for multiple element selection.