When I manipulate the DOM, like adding or removing a div when a user clicks a link, I have the link that initiates the DOM manipulation going to "#". Where should the href parameter point to if I want to page to stay at the page position it is currently at?
You can do:
Click Me
You need to have your click handler return false; this will prevent the browser from following the link.
This should work
Not really a link!
fixed
put in your link
My Link
If you want to do a javascript call, you can put in any js before the return false
The function that gets called on click should return FALSE to stop the anchor from following through.
<script>
function onClick() {
// do click work
return false;
}
</script>
<a href='#' onclick='javascript:onClick'>Click Me</a>
Related
I have a link as follows:
Click me
On clicking the link, it's executing the JavaScript function, but it is not taking me to the href link.
How can I achieve the same?
I think the easiest way to do it is to make your function return true, so that after the function is complete, the anchor tag will behave like it normally does. This way you can also use the target-attribute if you want to use new window:
function myFunction() {
alert("hello");
return true;
}
Click me
I used jQuery, and I hope it's still understandable:
<a href="www.google.com" onClick=someFunction()>Click me </a>
It's executing the JavaScript function, but it is not taking me to the href link.
So one way is to add the redirection after your function:
function someFunction()
{
... Your code ...
window.location.href($(this).attr('href')); // <----- HERE
}
UPDATE AFTER COMMENT:
function someFunction()
{
... Your code ...
window.open($(this).attr('href'), '_blank'); // <----- HERE
}
You could do this a few ways,
<div onclick = "function();">link here </div>
or you could just use onclick on the a itself
link here
You're putting the onclick inside of the tags which is just for text. Place it in the first to use it as an attribute of the tag.
As Esko posted, in the function return true if you want the href to execute as well.
When the click event is attached on an anchor tag, it is handled by browser in a 'special' way.
The .click is not supposed to work with 'a' tags, because the browser does not support "fake clicking" with JavaScript.
I mean, you can't "click" an element with JavaScript. With 'a' tags you can trigger its onClick event, but the link won't change colors (to the visited link color, the default is purple in most browsers).
So it wouldn't make sense to make the "click" event work with 'a' tags since the act of going to the href attribute is not a part of the onClick event, but hardcoded in the browser.
But you can do some customization to an onclick handler so as to refer href link.
Let's have an example for it:
$('a').click(function () {
window.open($(this).attr('href'));
});
Here is the http://jsfiddle.net/4Qku8/ demonstrating the same using jQuery.
For further details, please refer to Stack Overflow question Can I call jQuery's click() to follow an link if I haven't bound an event handler to it with bind or click already?.
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 wrote this script for javascript disabled browser.
Here is HTML:
Google
Here is Javascript:
<script type="text/javascript">
function jstest() {
alert("Success");
// show popup
return false;
};
</script>
If javascript is enabled it should alert a popup showing success. And if it is disabled it should move to google page. I was told to do this by a friend. It works on jsFiddle.net. But not working if i try to do this in my work.
It shows popup when i click and when i close popup it moves onto google page.
I want it to stay on the same page. I dont want it to move on link page.
It should move only if javascript is disabled.
What have i done wrong in this script?
Thank You,
Kishore.
You need to include that script after the element it tries to assign the onclick handler to. Or wrap that code in an onload handler. Otherwise the JS executes before the element has been parsed so getElementById("goo") doesn't find it.
By the way, you don't need an inline html attribute onclick as well as assigning a handler in your JS. The attribute is trying to call a global function called jstest() which doesn't exist in your code. You could remove the document.getElementById("goo").onclick = part and just declare the function with the same name as used in the inline html attribute onclick.
I would guess it works on jsfiddle.net because by default jsfiddle wraps your code in an onload handler (you can change this via the panel on the left).
Try this as your hyperlink:
<a href="http://www.google.com/" onClick="return jstest();">
The return within the onClick should confirm that the return false from your function should bubble up to the hyperlink's behavior.
Don't understand why you have an onclick embedded in your tag
jQuery :
$(function() {
$("#goo").click(function(e){
e.preventDefault();
// Do whatever you want here
})
})
You can do it something like this using jQuery
$(document).ready(function() {
$("#goo").click(function(event){
event.preventDefault();
alert("Success");
});
});
Hope this helps
Here is a Link
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.
I have jQuery that I have written that is supposed to find a particular <a> tag and change its behavior. Before jQuery loads, the <a> tag has an href attribute that points to another page. I am using jQuery to change the behavior of the <a> tag so that rather than directing the browser to load that other page, it instead runs javascript when clicked that loads content dynamically in a <div> that is positioned at the location of the mouse pointer.
So, for example, I have the following:
<a class="funk" href="http://example.com/page2.html">Link</a>
<div class="hidden bubble">Load this instead.</div>
The jQuery I have running does the following:
$(document).ready(function(){
$('.bubble').hide()
$('.bubble').removeClass('hidden');
$('.funk').attr('href', '#');
$('.funk').click(function(e){
$('.bubble').show();
})
})
The problem I have is: Whenever the user clicks the link, the browser acts on the href="#" attribute and brings scrolls the browser to the top of the page. What is the most "correct" way to make my site so that the browser does not scroll at all, but instead merely executes the jQuery code that I have written for the click event?
Let the 'click' function return false. That cancels the event, and the browser doesn't follow the link. In this case, you can even let the href attribute at its original value.
$('.funk').click(function(e){
$('.bubble').show();
return false;
//--^
})
To be on the save side, you can explicitly cancel the event:
e.preventDefault(); // no default action
e.stopPropagation(); // event doesn't bubble up or down in the DOM
Add this to your click function:
$('.funk').click(function(e){
e.preventDefault();
e.stopPropagation();
$('.bubble').show();
});
This will do what is implied by the method names.
Call e.preventDefault() in the click handler.
http://api.jquery.com/event.preventDefault/