I have a link with the id:
nyhedsklik
I this function that gets triggered when clicking on the link:
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
I have just taken a part of the function for an example....
Now I want to make a click on the link with Jquery. Just like a user would do I have tried this which does not work:
<script>
$(document).ready(function() {
$('#nyhedsklik').trigger("click");
});
</script>
If you use the click() method with no parameters, Jquery will simulate a click...
$('#nyhedsklik').click();
Make sure that before you trigger click event on the anchor the event is attached to it.
$(document).ready(function() {
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
...
});
$('#nyhedsklik').trigger("click");
//Alternatively you can just call click method
$('#nyhedsklik').click();
});
You can use $("selector").click().
http://api.jquery.com/click/
I see no errors in code posted, there should be a problem somewhere else; this demo works fine (it simulates click with a 5 seconds delay).
Works for me.
http://jsfiddle.net/sAcje/
Related
I'm currently working with this code, anytime I click on the div it goes to the url...
HTML
<div class='gotoPost' data-href='post?i=24'>[text]</div>
JQUERY
$(function() {
toUrl = function(){
var GoToUrl = $(this).data('href');
var redirect = GoToUrl;
window.location = redirect;
}
});
$(function() {$(".gotoPost").on('click',toUrl);});
PROBLEM
Now I want to add a absolute-positioned div at the top of the container, but anytime I click on it. (to show a Lightbox) it goes to the url...how do I prevent it from going to the url? I want when clicked the child div,it doesnt go to the url.
<div class='gotoPost' data-href='post?i=24'>[text]
<div class=ShowLightBox>3</div>
</div>
So Your question is..
<div class='gotoPost' data-href='post?i=24'>
[text]
<div class=ShowLightBox>3</div>
</div>
If you click 'showlightbox' div, it doesn't redirect to other page,
but when you click other area of 'gotoPost', then you want to redirect page. right?
Solution
So here's the solution:
$(function() {
toUrl = function(e){
if (e.target.classList.contains('gotoPost')) {
var GoToUrl = $(this).data('href');
var redirect = GoToUrl;
window.location = redirect;
}
}
});
$(function() {$(".gotoPost").on('click', toUrl);});
If you use call-back function with JS, when event happends it will call call-back function with 'EVENT' object, which contains 'e.target' - HTML Element you've click.
the code above check if your click event is targeting 'gotoPost' directly not inside HTML element. So this would work for you! :)
ps. Checkout "Event Delegation with JavaScript".
You need to prevent the click event on .ShowLightBox from propagating. For example:
$('.ShowLightBox').on('click', function(e){
e.stopPropagation();
// Open light box
});
Ref: https://api.jquery.com/event.stoppropagation/
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>
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;
});
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();
});
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", "#")