We Keep Coding

Detect specific link clicked with href and onclick="setLocation()"

I am trying to detect if a link was clicked with JS.
This is my code:
<div onclick="setLocation('http://domain.com/test')" class="gd-details" id="detail-box2">
<h2 class="gd-product-name">
<a title="test" href="http://domain.com/test">content 1</a>
</h2>
</div>
I'm also trying with this code and it doesn't works:
$(document).on("click", "a", function() {
var href = $(this).attr("href");
if(href == 'http://domain.com/test'){
alert('clicked');
} else {
alert('not clicked');
}
});
How do I detect if a specific link is clicked?

Add an event handler to the div click and compare the onclick attribute to your test url.
$(document).on("click", "div", function() {
var href = $(this).attr("onclick");
if(href === "setLocation('http://domain.com/test')"){
alert('clicked');
} else {
alert('not clicked');
}
});

Error query toggle open all div when click a item?

I have a sample code
On Html:
<div id="item-1-desc">ABC</div>
<div id="item-2-desc">DEF</div>
<div id="item-3-desc">XYZ</div>
And jquery:
$('div[id^=item-][id$=-desc]').hide().before('More');
$('a#toggle-desc').click(function (e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('see-more');
if($this.hasClass('see-more')){
$this.text('More');
} else {
$this.text('Close');
}
$('div[id^=item-][id$=-desc]').slideToggle(200);
});
When I click on more, it open all div(http://jsfiddle.net/3v25guz6). How to click only show a item desc ?

You have to target only the div which is next sibling of the clicked a so
$(this).next('div').slideToggle(200);
Also, id of an element must be unique, so for the dynamically added elements use the class to register the click handler
$('div[id^=item-][id$=-desc]').hide().before('More');
$('.see-more').click(function(e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('see-more');
$this.text($this.hasClass('see-more') ? 'More' : 'Close');
$(this).next('div[id^=item-][id$=-desc]').slideToggle(200);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="item-1-desc">ABC</div>
<div id="item-2-desc">DEF</div>
<div id="item-3-desc">XYZ</div>

http://jsfiddle.net/3v25guz6/2/
$('div[id^=item-][id$=-desc]').hide().before('More');
$('a#toggle-desc').click(function (e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('see-more');
if ($this.hasClass('see-more')) {
$this.text('More');
} else {
$this.text('Close');
}
$this.next().slideToggle(200);
});

How can I create a dynamic navigation system by loading a page into a div?

I am trying to create a navigation system where there is a set of links, that when clicked, will load an external page into a div. This is what I have so far, but it doesn't work:
<div class="row">
<div class="col-md-4"><div class="navActive">Link1</div></div>
<div class="col-md-4"><div class="">Link2</div></div>
<div class="col-md-4"><div class="">Link3</div></div>
</div>
$(document).ready(function() {
$('.loadPage').click(function(e){
e.preventDefault();
var curActive = document.querySelectorAll(".navActive");
for (i=0;i<curActive.length;i++)
curActive[i] = curActive[i].className.replace( /(?:^|\s)navActive(?!\S)/g , '' );
e.preventDefault();
$('.targetLoad')
.hide()
.load(this.href), function() {
$(this).fadeIn(500);
});
$(this + ' div div').addClass('navActive');
});
});

You have a couple of errors in your code:
.load(this.href*)*, function() {...); should be .load(this.href, function() {. You want to specify a complete callback. Not just declare a function expression, right?
this div div what's that? You need $(this).find('div > div').
Summarizing it up.
$(function() {
$('.loadPage').click(function(e){
var activeCls = 'navActive';
e.preventDefault();
$('.' + activeCls).removeClass(activeCls);
$('.targetLoad')
.hide()
.load(this.href, function() {//there is no ')' after href
$(this).fadeIn(500);
});
$(this).find('div > div').addClass(activeCls);
});
});
Working demo http://jsfiddle.net/tarabyte/F4EL9/. Ignore additional code to emulate server response.

Consider doing something like this:
<a onclick="load_url('/my-page.html');">My page</a>
And then the jquery:
function load_url(url)
{
$("#target_div").load(url);
}

Add class active when clicking the menu link with Jquery

I have HTML
<div id="top" class="shadow">
<ul class="gprc">
<li>Home</li>
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
<li>Text4</li>
</ul>
</div>
and JQUERY
$(function () {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
$('#top a').each(function () {
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
}
});
});
The problem is that when i click on the Home link all tabs are getting active class and don't understand why. I need it for the first link to not get any active class.

I'm also looking for this solution and I have tested your code. On the first approach all links are highlighted and when I click other links it is working properly. The problem was on the home page because all links are highlighted because there is "no event been received" when the page is loaded, the code will work if you send a command or by clicking each links, theoretically. To stop this behavior, I found this code to one of the answers above, add this code and change the ".sibling()" to ".previousSibling()"
$(this).parent().sibling().find('a').removeClass('active');
".sibling()" will highlighted at the end of your links change it to ".previousSibling()" so it will go to first (Li)
$(this).parent().previoussibling().find('a').removeClass('active');
Your code will be like this:
$(function () {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
$('#top a').each(function () {
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
$(this).parent().previoussibling().find('a').removeClass('active');
}
});
});

Check this , this will only activates clicked tab , remove active for all and then add for the one clicked
$("#top a").click(function() {
$('a').removeClass('active');
$(this).addClass("active");
});
Check this

You may try this out. It will help you:
<script type="text/javascript">
$(function () {
$('#sidebar li a').each(function () {
var path = window.location.pathname;
if (path.indexOf('?') > 0) {
var current = path.indexOf('?');
}
else {
var current = path;
}
var url = $(this).attr('href');
var currenturl = url.substring(url.lastIndexOf('.') + 1);
if (currenturl.toLowerCase() == current.toLowerCase()) {
$(this).addClass('active');
var par = $(this).parent();
par.addClass('open');
}
});
});
</script>

You're running a foreach loop on all <a> tags within your #top div. So of course it'll add the class active to all of them.
I think what you're trying to do is this: http://jsfiddle.net/rLddf/4/
I used the click event instead.
edit switched link to Kristof Feys example - more efficient.

try this...
$(function() {
$('#yourMenu a').each(function(){
$current = location.href;
$target= $(this).attr('href');
if ( $target== $current)
{
$(this).addClass('active');
}
});
});

I came across the same issue and I found it easier to just add an additional if statement so that the function would fire on all pages except the home page which met my needs.
$(function(){
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
$('#top a').each(function(){
if ( window.location.pathname != '/' ){
if(urlRegExp.test(this.href.replace(/\/$/,''))){
$(this).addClass('active');
}
}
});
});
You could also add in an else statement to show an active link on the homepage by targeting the link directly if required.

I think you need something like this:
$(function () {
$("#top a").click(function(e){
e.preventDefault();
$(this).addClass('active');
$(this).parent().siblings().find('a').removeClass('active');
});
});
Fiddle Demo

How to stop an anchor from redirecting using JQuery

How can I stop an anchor tag redirecting to another page if the user is not logged in? I have a function to check if the user is logged in or not. I want to do it with JQuery or JavaScript. Here is what I have tried so far but with no results:
Read More
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(){
var id = $(this).attr('id');
if(id == 'yes'){
//i want to prevent
}else{
//redirect
}
});
});
</script>

Please use http://api.jquery.com/event.preventDefault/
demo http://jsfiddle.net/aRBY4/6/
e.preventDefault()
quote
If this method is called, the default action of the event will not be
triggered.
Also if I may suggest read this: .prop() vs .attr()
Hope this helps,
sample code
$('a').click(function(event){
event.preventDefault();
//do whatever
});
In your case please try this
$(document).ready(function() {
$('a').click(function(event) {
var id = $(this).attr('id');
if (id == 'yes') {
event.preventDefault();
//i want to prevent
} else {
//redirect
}
});
});​

Change your click event handler to this
$('a').click(function(e){
var id = $(this).attr('id');
if (id == 'yes')
{
e.preventDefault();
e.stopPropagation();
}
else
{
//redirect
}
});

try this one
$("a").on("click",function(e){
e.preventDefault();
alert("Clicked");
});
happy Coding;

Use event.preventDefault(). It is used to prevent the default action of the event.
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(){
var id = $(this).attr('id');
if(id == 'yes'){
event.preventDefault()
}else{
//redirect
}
});
});
</script>