Pass the destination URL of clicked link to javascript/jQuery - javascript

After reading this Q&A I was able to pass the URL of a specific div to jQuery upon clicking the link. However, I have multiple links of the page and I want to pass their individual href values to jQuery upon clicking. Right now the code selects all links on the page:
jQuery(document).ready(function(){
jQuery(".view-frontpage a").click(function (event) {
href = $('.view-frontpage a').attr('href');
event.preventDefault();
alert(href);
});
});
The result of this currently is that it pops up a dialog displaying the href property of the first link on the page, regardless of which link is clicked. How do I change this to give me the href of the link that has just been clicked?

This should work. Change:
href = $('.view-frontpage a').attr('href');
To:
href = $(this).attr('href');

First, it's a good idea to use event delegation so you don't actually create a handler for every link on your page.
In your case, jQuery binds this inside your click handler to the click event target (the element that's been clicked on), so you need to do href = $(this).attr('href'); to get the href of the link you need.
Here is the full code using the new jQuery on() function (available since 1.7)
$(document).on('click', '.view-frontpage a', function(e) {
alert($(this).attr('href'));
e.preventDefault();
return false;
});​​​

Related

How do I detect the same anchor link clicked multiple times on the page?

I have a question for you guys.
Lets say I have an internal anchor link on the same page as in http://jquery.com/#myAnchor
Now if I click on the anchor, then the url will be http://jquery.com/#myAnchor
And if I click on the anchor again, the url will again be http://jquery.com/#myAnchor
aka, the url actually does not change .. just the link clicked twice on the page. How do I detect that the internal anchor has been clicked again?
For example
<a name="myAnchor"></a>
If the above anchor link is on the same page, then how do I detect this hashChange.
Actually I have function that detects hashChange on a page as in below. but the code fails for this one particular codition
$(window).on('load hashchange', function () {
use data- attributes. When user clicks the anchor link, just increment the data attribute.
$(document).ready(function(){
$('a.myLink') .click(function(e) {
e.prevenDefault();
var count = $(this).attr('data-clicked');
count = parseInt(count) + 1;
$(this).attr('data-clicked', count);
});
});
<a class="myLink" data-clicked="0">Anchor Tag</a>
You can use event delegation to track the clicks, something like
$(document).on('click', '[href="#myAnchor"]', function(){
//do whatever you want here
});
Also named anchors are obsolete, you should be using ids instead.
<section id="myAnchor">
</section>
Add any class when user click on anchor tag . User click again on that ancor tag check hasClass()
Please check Below Jsfiddle enter code here
http://jsfiddle.net/upardhi/2krq8Lsy/
You can check like this also
$(document).on('click', 'a', function() {
var link = $(this).attr('href'),
currentLink = window.location.href;
if (link == currentLink)
return false;
else
//your conditions
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a name="myAnchor" href="http://jquery.com/#myAnchor">Test</a>

In javascript, how can I click on link programmatically in case href="javascript:someMethod()" without JQuery

I have a link on the page with href="javascript:someMethod()". I need to click on this link programmatically within javascript. without using eval() and Without JQuery please.
You can assign an id to the link and use the following, or just call someMethod() directly.
document.getElementById('idOfLink').click();
Assign a class or a id to the element.
<a id="link">Click me</a>
Attach the click event to the link.
var link = document.getElementById("link");
link.addEventListener("click", function(e) {
// Prevent the default action.
e.preventDefault();
// Do something else;
});

How to show a specific div with its own id in jQuery when I click a link?

I have a div like this:
<article id="#pippo">blablabla</article>
that I have hided with jQuery
$('article').hide();
now I'd like to have a link menu that show a specific article id when it's clicked for example.
If I click on link:
LINK PIPPO
I'd like that the article named #pippo is shown
if I click on link that point to #pluto, an article with id #pluto have to be shown...
how can I do this in jQuery?
If you want this to work for every <a> tag on your page then you can do the following
$('a').click(function (e) {
var id = $(this).attr('href');
$(id).show();
// Don't follow the link
e.preventDefault();
});
More likely though you want this to work on a subset of <a> on the page. If so you can distinguish them by putting a class in the link and changing your selector as appropriate
HTML:
LINK PIPPO
JavaScript:
$('a.fakeLink').click(function (e) {
var id = $(this).attr('href');
$(id).show();
// Don't follow the link
e.preventDefault();
});
Try this
$("a").click(function(){
$(this.href).show();
return false;
});
First add a class to identify the anchor tags that need this functionality, eg. 'visibility_toggle'. Then add a handler that uses the href attribute to work out which div to show/hide.
$('a.visibility_toggle').click(function(e) {
$(this.href).toggle();
e.preventDefault();
});

how to make the menu close if it is clicked out

i have an menu with some values and i got someting hidden and while click on more button it shows like google more menu... if it is clicked out it is not hiding till the more menu is clicked once again
More<small>▼</small><div class="more list" id="one" style="display:none">test <span style="color:#329">|</span> test1 <span style="color:#169">|</span> test4</div></div>
Script:
function toggle(one)
{
var o=document.getElementById(one);
o.style.display=(o.style.display=='none')?'block':'none';
}
how to make it close while the mosuse clicks on any other place other than the menus
Try using the onblur event.
I see you've tagged this with jQuery, if that is an option, you can clear up the link a bit, like this:
More<small>▼</small>
And use unobtrusive script combined with event bubbling to your advantage, like this:
$(function() {
$(".more_link").click(function(e) {
$(this).next(".more").toggle();
e.stopPropagation();
});​​
$(".more").click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$(".more").hide();
});​
});
You can test it out here, this only closes the menu if you clicked neither the menu of the toggle, e.g. clicking one of the test links will not close it. If you want it to, just remove the $(".more").click(function(e) { e.stopPropagation(); }); portion.
It uses event.stopPropagation() to stop the click from bubbling up to document, which if happens (and would if you clicked anything else) triggers its click handler, closing all the .more elements.
I wouldn't use onBlur because it's not a good accessibility approach (for example if the user is using tab to navigate the page).
Look at this solution instead:
jQuery click event for document but ignore a div
Typically, I let the event bubble up to the 'body' or 'html' doc and check if the target is what i want (and/or isn't contained within what i want). If the event target is not contained within your menu, then perform your desired operation (in this case, hide the div).
i.e.
jQuery(document).ready(function(){
jQuery("html").bind("click", function(evt){
var $target = jQuery(evt.target);
var shouldShowMenu = $target.hasClass("menu_toggle");
shouldShowMenu |= $target.parents(".menu_toggle, .more_list").length;
if(!shouldShowMenu)jQuery(".more_list").hide();
});
});
NOTE: your markup would needs to be extended such that the "more" href becomes has a class attribute, class="menu_toggle"

jQuery: How to hide and show the href?

Is it possible to hide the href without hiding the whole anchor tag?
Click Me
The reason I need this is because I'd need to hide and show it based on desktop and mobile view controlled by JS.
Something like $('a').attr('href').hide(); won't work
Edit:
I need to 'hide' the href so I can 'show' it where I need to. Removing the href will not restore it.
You can use removeAttr():
$('a').removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click Me
Description: Remove an attribute from each element in the set of matched elements
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');
});
But what if You want to restore href? From where will You get it?
<div class="some-container">
Click Me
Click Me
</div>
function hideHrefs(selector) {
$(selector).each(function(){
var $this = $(this);
var href = $this.attr('href');
$this.attr('href', '').data('href', href);
});
}
function restoreHref($element) {
var href = $element.data('href');
$element.attr('href', href);
}
hideHrefs('.some-container a'); // hides all hrefs from links in container element
restoreHref($('.some-container a:first')); // restores href for dedicated element
Is it possible that when you don't want the href you do something like this
$($.find("a")).attr("href", "#")

Categories