jQuery remove class after second click - javascript

I have my own drop down navigation working, so when a user clicks on one of the links a page overlay will appear. I just need when they click again the page overlay removes.
Here is my code to add the overlay
$('#nav li a').on('click', function(){
$('#page-overlay').addClass('active').siblings().removeClass('active');
});
And a working DEMO is here - http://dsm.fishtankcreative.co.uk/
I just need help for when a user clicks off the navigation the page overlay class disappear.
Thanks in advanced.

Use toggleClass()
$('#nav li a').on('click', function(){
$('#page-overlay').toggleClass('active').siblings().removeClass('active');
});
Note: I don't think there is a need to use .siblings().removeClass('active'), as you are not adding the active class to any other elements

Related

How to set active class to multiple tabs in one page onclick?

I have multiple tabs in one page and having trouble in setting up an active class to the selected menu. It's working great if I only have one set of tab. If I click on the first tab menu, the 2nd tab menu will lose its active class. Also the fade in effect is not workin. Please help. thank you. Fiddle here.
$(".tabs a").click(function() {
$(".tabs a").parent().removeClass("active");
$(this).parent().addClass("active").fadeIn('slow');
});
Do it like this
$(".tabs a").click(function(e) {
e.preventDefault();
var p = $(this).closest('.tabs');
var i = '#'+$(this).attr('data-tab');
$(this).closest('ul').find('li').removeClass("active");
$(this).parent().addClass('active');
$(p).find('.tabInner div').hide();
$(p).find(i).fadeIn('slow');
});
JFIDDLE EXAMPLE
Try this to fix the selection of the tabs:
$(".tabs a").click(function () {
$(this).closest('ul').find('li').removeClass("active");
$(this).parent().addClass("active").fadeIn('slow');
$(this).closest('ul').next(".tabInner").find("div").eq($(this).parent().index()).hide().fadeIn('slow');
});
jsFiddle example

Bootstrap toggle doesn´t work when a link is clicked

The navbar on the right collapses when the window is resized, but when I click the toggle button the menu appears. When I click any link, the bar doesn´t "un-toggle"... Can anybody help me?
Site here
Having the menu collapse when a link is clicked is not the default functionality of the expand/collapse menu with bootstrap. If you want it to function that way, you have to bind the hide function .collapse('hide') to the click action for those links.
You can do so by including this:
jQuery(function($){
$('.navbar-default .navbar-nav > li > a').click(function() {
$('.navbar-default .navbar-collapse').collapse('hide')
});
});

selecting current anchor with jquery on the same page

is there a way to select the current anchor and have it visible on every section of a one page site? For example all my pages (home/contact/shop etc) are on one page, in a horizontally scrolling layout. When I select the anchor, it highlights the current anchor but does not keep that anchor highlighted when it scrolls to the next section of the page. Instead its highlighted and as the scroll begins the highlight of the anchor disappears. Here's the code I am using:
$('#nav a').click(function() {
alert($(this).attr('href'));
});
I had thought about using jquery ui to do it, but it seems a little too much just to carry out this operation. So highlight the current anchor of the item, in the same page, but when scrolling to a different section remaining highlighted. Thoughts?
Thanks in advance
I guess you are talking about the default overlay on focus that happens when you click an anchor?
How about adding a class to the currently active section instead:
$("#nav a").click(function() {
var self = $(this), className = "active";
self.addClass(className).siblings("."+className).removeClass(className);
...
});
You might also want to check this answer since it could be related. If this answer is not helpful to you my advice is to create a test case on jsFiddle to help you describe your problem further.
Like this?
JS:
$('#nav a').click(function(){
$('#nav a').removeClass('highlighted');
$(this).addClass('highlighted');
});
CSS:
.highlighted {
background: #ffffeo;
}

Navigation close onClick of another list item

Does anyone know how I can expand on the function at the moment, so that when one navigation is open, when the user clicks to open the other navigation, the navigation which is open presently collapses?
Please find the code below;
http://jsfiddle.net/N7xgC/
What you're currently doing is toggling the display of all elements with the sub class, so clicking on any link will display all of the sub menus. Instead, you want to hide all of the elements with the class sub that aren't a sibling of the link being clicked on, and then toggle only the element with the class sub that is a sibling of the link being clicked on.
$(document).ready(function() {
$('.main > li > a').click(function() {
var sibling = $(this).siblings('.sub'); // select the <ul> to exclude
$('.sub').not(sibling).hide(); // hide everything except that element
sibling.toggle(); // toggle that element
});
});
Updated jsFiddle
Updated your jsFiddle http://jsfiddle.net/N7xgC/6/
$(document).ready(function()
{
$('.main > li > a').click(function(event)
{
$('.main > li > ul').hide();
$(this).next().show();
});
});
Like this?
http://jsfiddle.net/foxbunny/N7xgC/10/
EDIT: A bit of a cleanup, with single click handler:
http://jsfiddle.net/foxbunny/N7xgC/11/

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.

Categories

Resources