Omitting the href attribute in an a element? - javascript

So many times writing html code along with javascript, I create <a> elements.
My question is, can I ignore the href attribute? as I rather add an ID attribute and handle the click there.
Most of the time when I do that, its not to go to a different page, but more to perform a ajax call of some sort.
I hate having the # in the url, it just looks ugly.
Should I rather use a different element, i.e. a <span> and just modify it with a class to look like link?
Thanx
J

If you have a link without a href, it's not a link, it's probably a button, and you should be using one, instead of a link.
Button VS. Link - User Experience.SE

if you dont want use any value in href want
<a href="javascript:void(0)"​ >link</a>
if dont want to add href but want pointer style of cursor
<a style="cursor:pointer">link</a>

Yes! It's not necessary to use href attribute if the purpose is to achieve only click event and not link to some page or tab.
You can style the a tag with CSS by some classname or directly a{ cursor: pointer; color: blue;}
But you can not style a element using a:link if the href attribute is not assigned

You don't necessarily need an href with an a tag. It basically distinguishes it from the other and makes it look clickable. You can use a or any other element for that matter with an onclick for your purpose.
<a class="lookClickable" onclick="doSomething()">Click Me</a>
(the above could be anything other than a too like span, div etc.

Related

How can I exclude this element from an inherited link?

I have a site at whensayfeed.meteor.com. Each of those "Posts" is a nested in a <a></a> element. The heart on the right side of each one is supposed to be a "like button" so it also needs to be clickable. However, since it's nested in an <a> it just goes to that address when clicked. I need a way to either exclude this element, or do this in some other way. I've tried to just nest the .chant element in the link, but it doesn't pick up that click. What do you believe I should do?
Nesting tags is illegal
Try making your like button a link that's outside of the post link. You can then use position: absolute to overlap your like button on top of the post.
Try this:
Set the z-index: 0; of .post-contain instead of previous z-index: -20;.
Have a function receiving anchor click events like so:
function onAnchorClicked(e){
if(e.target.nodeName==='IMG'){
console.log('Image clicked');
e.preventDefault();
}else{
console.log('Anchor clicked');
}
}
Assign the click event to all anchor tags: $('a').on('click',onAnchorClicked);
This way, you can do what you want to do when img is clicked.
Having said that, although HTML5 does allow block-level elements to be nested inside an anchor tag but legacy browsers will have a hard time.
A solution to that perhaps could be to have your posts wrapped around a div element instead of anchor which behaves like an anchor tag accompanied by a data-link attribute with values containing your links that you can populate from backend e.g.:
<div class="anchor-link" data-link="LINK GOES HERE">...</div> and then assign the click as described above (changing the selector obviously).
Hope this helps.

Hide anchor, but not anchor text

Basically, I want to do the opposite of this: how do i hide anchor text without hiding the anchor
I'd like to be able to have a link on my page which under a certain set of client-side determined conditions would be able to deactivate the link, but still show the text. Is there any way to do this without having two separate elements (one with both the anchor and the text and one with just the text) and then flipping visibility between the two?
EDIT: Sorry, should have clarified. I'd like the link to not be styled like a link when it's deactivated.
Replace the <a> with a generic <span>, and back again.
A simple strategy to replace would be:
find the node.
add the replaced node before it
remove the first node
--
var node = document.getElementById("example");
var new_node = document.createElement("a"); // or "span"
new_node.innerText = text;
node.parentNode.insertBefore(new_node, node);
node.parentNode.removeChild(node);
This code isn't complete, but just to give you an idea.
You can remove the href attribute when the condition is met.
Check this example.
HTML
Link to google
<p> Hover over me to remove the link from the anchor</p>
Javascript(Using jquery)
$("p").on("mouseover", function(){
$("a").removeAttr("href");
});
When you hover over the paragraph tag the href is removed but if u never hover over it u can go to google.com, hovering over the p tag is the example condition.
Example Fiddle
This will remove the href permanently from the anchor tag. You will have to add it back when another condition is met.
The short answer is, no. Any hidden or invisible element will hide it's children as well. You may find it easier to simply modify the attributes of the anchor tag when needed.
Hot link:
Text here
Non-hot link
<a class="no-link" data-url="#some-url-here">Text here</a>
You can use JavaScript to remove the href attribute, store it's value and add a class that you can use to override any styling.
There's no direct "correct" answer for what you've asked, as there are too many ways to achieve a similar effect. This answer is what I judge to be one of the simplest methods in case you need disable and re-enable the anchor(s) based on conditions.
You can add a click handler such as .on('click.disabledLink', false) to deactivate the anchor functionality (prevents default and stops propagation), then style it with a class that makes it look like normal text in your page.
To re-enable it you just have to off the handler and remove the added class.
//disable link
$('a').on('click.disabledLink', false).addClass('disabledLink');
//re-enable link
$('a').off('.disabledLink').removeClass('disabledLink');
Fiddle
In Firefox and WebKit browsers, you can use pointer-events: none; to make an element "transparent" to pointer (in a functional sense, not a visual sense!). What you're really clicking is the element below. See http://jsfiddle.net/Hqk49/ for demo.
Beware that it'll only work if CSS are enabled (and JS, in order to toggle a class to restore the normal behavior of the link). No support in IE9 and maybe IE10, no support in Opera: https://developer.mozilla.org/fr/docs/CSS/pointer-events
Refer the below CSS:
a{
line-height: 0;
font-size: 0;
color: transparent;
}

What is the right href value for a JavaScript anchor tag?

I usually have to bind a JavaScript function to an anchor-click event. That is easy using jquery or the onclick inline attribute.
But, my problem is that I never know what the best way to keep href empty is.
For instance:
<a href="javascript:void(0)"> - It seems like a bit too much code for just being empty
<a href=#> - If I don't want to move to another page, I must return
false in the JavaScript call
<a href> - This option breaks the
cursor and hover style and the browser doesn't render it as a link
<a> - idem
What is the best href value for empty anchors? I'm not interested to keep functionality without JavaScript
The right one is to use an empty a element href attribute and bind the click event in Javascript.
For unobtrusive design, you should have a href attribute with a proper link (so those without Javascript can still use the site) and remove the attribute in Javascript, binding the click event.
If you are simply using the a element as a target to bind the click event to, consider using a div or span instead.
I'm personally a firm believe in using JavaScript to extend functionality, not replace. With that said, I leave anchors pointing to a "safe" fall-back of the action I'm really just executing with javascript. Simply put:
Then, supplement (and return false) if javascript was able to successfully load and bind to the element, otherwise still provide the user the ability to accomplish the task if they don't have javascript (either blocked via plugin or just not loaded).
Simply do not use A element. You can as well make DIV clickable or any other element.
Or you can also simply leave href attribute out, like so.
<a onclick="myFunction();">dasd</a>
If you also want to look it like a link, put this in CSS:
a {
text-decoration: underline;
color: blue;
}​
I think
or
is the best way to indicate empty anchor.
and
will move the page to the dom element which has id="someId"
it all depends. if you are clicking an anchor to open a panel on the page then I am happy to use option 2 but only if I insert that anchor with javascript.
this then means with javascript disabled the anchor doesn't show and the panel should be visible.
if the link goes somewhere then you need the actual link address like brad christy and odid said.
<a href=#>ABC</a>
=> on click of above link it will set url in address bar which makes flickering of document or resetting scroll position
to avoid above problem,
<a href=# onclick="return false" >abc</a>
can be used and bind event handler using jQuery as usual
or you can execute any function on onclick which return false value.

Disabling a button defined in an anchor tag

I am using a fairly standard technique to create a button on my page using an anchor tag.
Specifically:
<span style="margin-left:17px;">Download</span>
Initially I want to disable this button. But because I implement it as an anchor tag, I don't know how to do this. As a regular Input button, I would just add the attribute disabled=true, but what do I do here?
Thank you for your help.
Elliott
Initially, set onclick="return false", then use your script to change the value of onclick when the time comes.
You could also add a class to the anchor, then use CSS to style the link so that it does not look like a link. Then remove that class from the element at the same time that you change the value of onclick.
InOrder to disable it just remove your href and add it later using javascript:
HTML:
<a id="downloadBtn" onclick="doSomething()"><span style="margin-left:17px;">Download</span></a>
JavaScript:
$("a").attr("href", "http://www.google.com/")

removeAttr("href") on anchor also removed text color

I have a web site that uses JQuery and JQuery UI.
For some links, I didn't want to use JQuery UI Theme's colors, so I overrided using my own css.
It all worked until I used $("#a_about").removeAttr("href") to remove the href from the anchors (so that the link wouldn't actually work, I just want to grab the click action)
to my surprise, it also removed the color which my css applied, and returned to the color which JQuery UI Theme applied previously.
I tried to change the element on which the color is applied (the anchor itself, the parent container, etc...) but nothing helped.
Thanks...
Instead of:
$("#a_about").removeAttr("href")
Use:
$("#a_about").attr("href","javascript:;")
It's because on some browser, a anchor a without attribute href is treat as normal text. So try change the href to javascript:; instead of remove it.
Anchor without href is not really a link. As others said set it to something like # and to "cancel" the click, also have:
$("#a_about").attr("href", "#").click(function() { return false; });
Don't touch the href. Prevent the default action in the event handler instead.
This way the link will continue to work if people, for example, middle click on it.

Categories