Develop Reference

Prevent anchor behaviour on click on DOM generated element inside anchor

An arrow button for moving a slider ended up inside an anchor element.
Now when the button is clicked the anchor link is activated.
The button is part of a dinamically created content on page load by 3rd party slider scripts.
Need to keep the anchor to link to the post. And prevent the anchor from working, only when the button is clicked on.
By the way it´s meant for Wordpress.
Thank you.
var jq=jQuery.noConflict();
jq(document).ready(function(){
jq(document).on("click", 'button.next' , function() {
jq('a').defaultPrevented();
});
});

Try this:
jq(document).on("click", 'button.next' , function(event) {
event.preventDefault();
});

Determining when a page anchor (#) visit has occurred with jQuery

I am currently intercepting when a user clicks a particular link with jQuery and scrolling them to an anchor on the page. Once the page has scrolled to the anchor, I then want to show a div and focus on an element in that div. The following code does this but with a problem...
// Intercept the click on the link which scrolls to the signup form
$('#section-footer-buttons a').click(function(){
// Scroll to the welcome section
location.href = '#welcome';
// Show the hidden signup form if it's not already visible
$('#signup-form').slideDown(350, function(){
// Focus on the first element on the form now the animation is complete
$('#signup-form :input:enabled:visible:first').focus();
});
// We've handled this click so return false
return false;
});
The problem is that by the time the page has scrolled up to the anchor where the signup form is, the hidden div is already visible without the nice slideDown animation. Is there a way to only begin the slideDown animation once the page has stopped scrolling? Essentially, I need a callback from when location.href has completed.

You should come at this a different way.
$('#section-footer-buttons a').click(function(){
var welcome = '#welcome',
$offset = $('[href="'+welcome+'"]').offset().top;
$('html,body').animate({
scrollTop:$offset,350
},function(){
location.href = welcome;
$('#signup-form').slideDown(350, function(){
$(this).find('input').filter(':enabled:visible').first().focus();
});
});
return false;
});
Making use of the .animate() callback function like this should hopefully give you what you're looking for.

jQuery tab and tab content show up when clicked ?

My webpage is at http://www.sarahjanetrading.com/js/resume
All the HTML, CSS and jQuery code + images are available there for anyone to access.
My issue is that currently my jQuery code makes the tabs show the tab-content when I click on the achor tag of the tab. But the tab doesnt change into the clicked tab.(tab name remains the same).
And the tab changes into the clicked tab when i click on the respective li of the tab. What I want is that both the tab changes and the content of the tab shows when I click on the either the li of the tab or the anchor of the tab.

You have two lots of events registered. One on the anchors and the other on the lis. The one on the lis changes the active state for the tabs themselves while the one on the anchors change the content. You should combine these into one function.
You change check the li function is working by clicking on the very bottom edge of it. Because your anchor javascript has a return false feclaration it is preventing the click event bubbling up to the li, thus not showing the change.

Try changing the function:
$("ul.tabs li a").click(function() {
$("ul.tabs li > a").removeClass("active");
$(this).addClass("active");
$("#wrap > div").hide();
var activeTab = $(this).attr("href");
$(activeTab).show();
return false;
});
to the following:
$("ul.tabs li a").click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
$("#wrap > div").hide();
$(".active-tab").removeClass();
$(this).parent().addClass("active-tab");
var activeTab = $(this).attr("href");
$(activeTab).show();
return false;
});
This should work and you should be able to remove your other javascript function.

If you already use jQuery you can use the jQueryUI library to create tabs. It is very simple and the style can easily be changed. Here is the Tutorial for tabs:
jQuery UI - Tabs Demo

If you click the whitespace around the text in the tabs, it works. Remove the anchor link from inside the tab, or add a click handler for the anchor link.
Edit:
My mistake. You have a click handler on your anchor element, but clicking the anchor link causes it to become $(this) in your code. So you assign class="active" to the anchor, when you want to assign it to the li.
$(this).addClass("active");
should be rewritten to modify the li. Personally, I would wrap the li in the anchor link:
<li></li>
This will probably require modifying your JS code a little, but will give a uniform result.

How to load the current content with jQuery Address plugin on page load?

I am not very familiar with the JQuery Address plugin, but i came up with this code, and its working great, except in this situation: When i click on the "nav a", the url is changed and the content is also changed, but when i am reload the page, the plugin is not triggered by default.
$("#player aside nav a").address(function(event, hash) {
var rel = $(this).attr('rel');
$('.ajax_container').hide().removeClass('current');
$('#player aside nav a').removeClass('active');
$('#'+rel).show().addClass('current');
$(this).addClass('active');
return $(this).attr('href').replace(/^#/, '');
});
Any idea, how can i trigger this function on page load?

I think you need to look at $.address.externalChange(fn). When I click the back this event will fire and I believe it gives you the hash value.

You could just trigger the click event of that link. Put it in a "dom ready" function:
$(function() {
$("#player aside nav a").click();
});

jQuery disable link if already on page

I have this jquery code that dynamically loads an html page into a div when a user clicks on a link in a list.
Is there a way to disable one of the links if the user is already viewing the page it links to? Right now the loading animation is triggered every time the link is clicked even if the requested link is already showing.
I need the event to not trigger if the page it calls and loads is already displayed.
$('#navigation a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide("slide",{direction:"up"},1000,loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show("slide",{direction:"down"},1000);
}
return false;
});

You can add a custom class which will disable your clicked link. Like:
$('#navigation a').click(function(){
......
$(this).addClass('disabled');
....
}
But you would obivously need to somehow remove that class from other previously added links (so you won't disable whole menu after few clicks. So you could make some reset like:
$('#navigation a').click(function(){
......
$('#navigation a').removeClass('disabled');
$(this).addClass('disabled');
....
}
This is just a simple logic. I believe it can be optimized or written in different way.
Edit: Css class probably won't make it in this case. I am not sure, if you can use disable() on anchor tag. Or you can just execute different logic like using preventDefault on this link, but then you still need to keep track of disabled elements this way so you can enable them once another one is clicked.