We Keep Coding

prevent from window.location to child div Jquery

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/

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>

Jquery not delaying properly when clicking on <a> tag

I have a div I want to show when I click an <a> tag, I want to wait for like 10 seconds before redirecting, but it just shows me the div and redirects without waiting.
Html code:
<a class="clickHereToDisplay" href="http://www.google.com">Click here to go</a>"
<div class="hiddenDiv"></div>
Jquery code:
<script>
$(document).ready(function(){
window.setTimeout(function(){
$(".clickHereToDisplay").click(function(){
$('.hiddenDiv').text('THE TEXT I WANT TO DISPLAY WHEN THE HREF IS CLICKED');
$('.hiddenDiv').show();
});
}),10000;
});
</script>

The problem is the browser is using the href to immediately redirect. You want something like this:
<a class="clickHereToDisplay" href="#" onclick="timedRedirect()">Click here to go</a>"
<div class="hiddenDiv"></div>
Then your javascript:
var timedRedirect = function() {
$('.hiddenDiv').text('THE TEXT I WANT TO DISPLAY WHEN THE HREF IS CLICKED');
$('.hiddenDiv').show();
window.setTimeout(function(){
window.location.href = "http://www.google.com"
}),10000);
};
One other note; there is nothing preventing the user from doing other stuff in the ensuing 10 seconds, so make sure you handle user flows you don't want occurring (like other event handlers, etc).

You need to use the timeout in the click handler.
In the click handler first you need to show the hidden div and the use a timer to delay the redirection for which you need to prevent the default action of the click and then manually set the location in the timeout handler.
$(document).ready(function () {
$(".clickHereToDisplay").click(function (e) {
e.preventDefault();
$('.hiddenDiv').text('THE TEXT I WANT TO DISPLAY WHEN THE HREF IS CLICKED').show();
window.setTimeout(function () {
window.location = e.currentTarget.href;
}, 10000);
});
});

jQuery target generic class item but unique href with trigger click

I am trying to target a generic item class with a unique href value based on if hash value is appended to the url unload I want to emulate the click that would normally happen on the page.
jQuery:
if(window.location.hash) {
var hash = window.location.hash;
function showHashVideo() {
jQuery("a.btn").attr("href", hash).trigger('click');
}
jQuery(showHashVideo);
}
HTML:
<a class="btn btn-mini" href="#help-video-modal-Graphing" data-url="video-url" data-title="Graphing">Watch Video</a>

As far as I can read you want to find elements HREF which matches an A element. You can do this:
jQuery("a.btn[href='" + hash + "']").trigger("click");
This will trigger a click on the a.btn with the href=hash.

jQuery trigger will not trigger DOM event clicks, so you must do this.
jQuery("a.btn").attr("href", hash).get(0).click()
You need to use Attribute-Equals-Selector jQuery( "[attribute='value']" )
jQuery('a.btn[href="' + hash + '"]').get(0).click();

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", "#")