I have an API which i need to open to activate, but I don't want that users actually see the link. Does JQuery or Javascript provide a way to solve this?
I just use windows.open(...) to open the link.
As long as the link is between <a></a> tags, the href will always be displayed on hover for browsers. However, you can do it with events like onClick="function(){}", which can be applied on any kinds of elements, like div.
If you want to hide the href but still want it to redirect when clicked, use this.
Get the URL and put it in data attribute. Then remove the href attribute.
$('a').each(function() {
$(this).data('href', $(this).attr('href')).removeAttr('href');
});
When clicked on anchor, get the URL from data attribute and redirect.
$('a').on('click', function() {
window.location.href = $(this).data('href');
});
Related
I have problem. Anchor link changes url. After i press a tag with #down. My url changes to localhost/#down . My anchor link change url. is there way to pervent anchor to change url?
Thanks
Use the following javascript code to prevent the default behaviour of your anchor
document.getElementById("myAnchor").addEventListener("click", function(event){
event.preventDefault()
});
If i have multiple links on a website, is there a way that if they are clicked they can be transferred to another website? All the links can be the same, but when either one is clicked they transfer over to the same page.
I'm trying to find an event that cancels the bubble when the event is clicked but can't find one.
Say for example I have
google
when that link is clicked then it will cancel the google.com transfer and open yahoo.ca
Using jQuery you could bind a click handler that prevents the default, and instead redirects the page, like so.
$('a').click(function(ev) {
ev.preventDefault();
window.location = "http://www.example.com"
});
If you mean you can have any href in link and you click any of links in page, then you need preventDefault:
$('a').click(function(e){
e.preventDefault();
window.location = 'http://yahoo.ca';
});
I have a general question about jQuery.
I have created few jQuery buttons but the problem that I have is when you scroll half way down the page and you press the button, the page jumps back to top, instead of staying in the middle where the button is??
How can you stop this from happening, as it's frustrating for the user??
Is there any particular reason why it's happening?
jsFiddle Example:
$(".comment-here").click(function() {
$(".comment-form").slideToggle('slow');
});
$(".main-btn.orange").click(function(){
$(".comment-form").slideUp('slow');
});
You're not preventing the default event. Since you're clicking on an anchor tag, the default event for # is just to jump up to the top of the document.
To prevent this from occurring:
Pass the event into the function, and use preventDefault();
$(".comment-here").click(function(e){
e.preventDefault();
$(".comment-form").slideToggle('slow');
})
$(".main-btn.orange").click(function(e){
e.preventDefault();
$(".comment-form").slideUp('slow');
})
You could also use return false; instead, which goes a bit further than just preventing the default event, it will stop events bubbling up to parent elements.
Add return false; to the click handler of the <a class="comment-here">.
Essentially it is not jQuery, but the default browser behaviour that causes this: you clicked a link, it has to navigate to its href, which is... "#", i.e. this page. So there we go back to this page (the top).
Prevent default behaviour of anchor tags:
$(".comment-here").click(function(e){
e.preventDefault();
//....
});
The problem is with your <a> tag using href="#" which references the current page and pulls you to the top.
I'd recommend the following approaches, instead of the default event prevention mentioned in other answers. Of course those work, but why use an element only to remove it's default functions?
Ergo, use something that is intended for your purpose:
1.) Use a <button> instead of <a>:
http://jsfiddle.net/RvHjx/7/
2.) If you're dead set on using <a>, remove the href attribute in your <a> tag. This will remove the blue-underlined link styling (the link still functions correctly though), but it's easy to fix with some CSS:
http://jsfiddle.net/RvHjx/11/
Adding javascript:; to your a tags href is the simplest way.
my link
I have a gallery of photos with a next and previous button. If one of my javascript methods is broken for one reason or another when one of the buttons is clicked it will add a hash to the url i.e. www.google.com# . I know the hash can be given a div id to jump to that part of the page but when it's blank it jumps around my page a few times and I'm not sure what it's targeting. I thought of attempting to remove the hash from the url but then I'd have to ensure that on every action and that seems like bad practice. I would prefer if the hash just made no difference to the actions on the page.
Don't use href="#", it is improper.
Instead, use href="javascript:;" or a variant thereof (personally I use javascript:void(null);)
This explicitly states that the link does not go to another location, but is handled by JavaScript.
I guess Next And Prev button has <a href="#" ...</a> like markup. In this case you can add event listener to those links with jquery
$('#prev, #next').on({
'click': function(e) {
e.preventDefault();
}
})
and avoid changing location by browser. Or in pure javascript:
document.querySelectorAll('#prev, #next').addEventListener('click', function(e) {
e.preventDefault();
},false)
//Note: this code is not cross-browser
Don't use an anchor tag when you don't want to perform a navigation function. Use button
I just can not figure a way to use location.href to act like you're clicking on a link.
What I am trying to do is get the variables included, for example,
The regular link is like this and works fine:
Click Me
I am trying to call a function using href (or some other method) to open the image with the other parameters just as if you were to click on the link.
I hope I am explaining this correctly.
Thanks for any help.
-UPDATE-
I finally found my solution here Displaying the Popup box generated by Greybox on page load(onLoad)
Thank you all for your suggestions.
Add an onclick event to your link. Using JQuery, you could ofcourse bind the click event to the links, and use .preventDefault() to block the anchor tag workin. Much cleaner code also.
$(document).ready(function(){
$('a').bind('click', function(e){
e.preventDefault();
//do whatever you wish to do
});
});
Answer: Yes.
Click Me
location.href or window.location.href refers to the browsers current address. If you change the value of location.href the browser will use that value as it's address. So if you want to navigate your browser to a link programmatically, you just have to change its value.
If you just want a clickhandler for your link don't use onclick or href, that's just bad practice, use a sepperate script that does this unobtrusively like so:
var button = document.getElementById('button');
button.onclick = function(){
do_something();
}
<a onclick="yourJSFunction();return false" href="images/someImage.jpg" title="My Image" rel="gb_page_center[249, 266]">Click Me</a>
You just need to add an onclick attribute to your anchor tag.
Make sure to return false or else the anchor tag will go to the URL like normal.