Please, check out the JSFiddle:
$('#contacts .tab-content').focusout(function () {
$('#contacts .active').removeClass('active');
});
JSFiddle
I have a (Bootstrap 3) panel at the bottom of the page which pops up when I click on its label, and goes back down when I click anywhere else outside of it. To do so, I put focus on the panel and remove the .active class when the focus is lost. The problem is that, if I click on any other focusable element inside of the panel (like inputs or buttons), it also loses the focus and triggers the function. How can I include all elements inside the panel and remove the .active class when none of them is focused?
$('#contacts > .nav-tabs a').click(function() {
$('#contacts .tab-content').focus();
$('#panel').toggleClass('active');
});
$(document).click(function(e){
if(!$(event.target).closest( ".tab-content" ).length && !$(event.target).closest( ".nav-tabs a" ).length){
$('#panel').removeClass('active');
}
});
Check this once
Related
As you will see from the bootply I have created, When you click anywhere in the panel the input becomes active. When I click on the info button (orange icon) it should open an accordion without the parent (input) becoming active. The problem is that the parent still becomes active.
I can solve this by adding:
$('.tickets-more').click(function(){
event.stopPropagation();
});
But this prevents the info button (orange icon) from working altogether (accordion does not open).
Here is the bootply without the above snippet - http://www.bootply.com/ZKoCxNfMqc
and here it is with the snippet - http://www.bootply.com/WW3Ze2DEpg
Just add/remove the class when the target element doesn't have the class info-sign.
Updated Example
$(".ticket-selector").off('click');
$(".ticket-selector").on('click', function(e){
if(!$(e.target).hasClass('info-sign')) {
$(".ticket-selector").removeClass("active");
$(this).addClass("active");
}
});
..and as others have already said, you should also avoid placing everything inside a label element.
What's happening:
User clicks button
Menu opens (<li>s display = block)
Close menu function is attached to <body>
Close menu function is immediately triggered and menu closes
I'm attaching a function to close the menu (hide the lis) to the body (3) so that after the menu has been opened, the user can close it by clicking anywhere off it onscreen.
The problem is the function attached to the body is immediately triggered in the button click function, so the menu opens and closes before the user even sees it.
I'm using jQuery 1.7's .on() function to bind the event.
Does anyone know a simple solution to this? 'bindAfterEvent' or something along those lines.
Code:
$(document).ready(function() {
$('#page-content div.center-block div:nth-child(1) ul li:nth-child(1)').on('click', openSubnav);
});
openSubnav = function(e) {
// Shows all li tags and attaches close function to the body
e.preventDefault();
$('#page-content div.center-block div:nth-child(1) ul li').show();
$('body').on('click', closeSubnav);
};
closeSubnav = function() {
// Hides all li tags except the first (used to open)
$('#page-content div.center-block div:nth-child(1) ul li').hide();
$('#page-content div.center-block div:nth-child(1) ul li:nth-child(1)').show();
};
Something like this ? (Updated)
$('button').off('click').on('click', functione(e) {
// stop propagation to assure the body click won't be triggered
e.stopPropagation();
$('div').show();
$('body').off('click').on('click', function(e) {
// return false if the element clicked is the button that shows the menu
if($(e.target).is('button')) return false;
$('div').hide();
$('body').off('click');
});
});
Use jquery's stopPropagation() on the click event when opening the menu. See this fiddle: http://jsfiddle.net/zoeexe5q/
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/
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.
I have a jQuery function where when an element is clicked a hidden div shows.
$('.openHide').click(function(){
$(this).next('.hiddenContent').toggle();
});
I need to modify it s that I could close this div if I click back not just on the first element. Possibly on Blur, but I am not sure how to indicate the element...
$('.hiddenContent').blur(function() {
$('.hiddenContent').parent().children('.hiddenContent').hide();
});
Here's my HTML:
<span class="openHide">text here</span>
<div style="display:none" class="hiddenContent">
hidden content here
</div>
On the click on the span the div should be toggled
On the body click the div should be hidden
On the click on the div, the event should not be propagated to the body
On the click on the span the event should not be propagated to the body
$(document).ready(function() {
$('.openHide').click(function(e) {
$('.hiddenContent').toggle();
e.stopPropagation();
});
$(document.body).click(function() {
$('.hiddenContent').hide();
});
$('.hiddenContent').click(function(e) {
e.stopPropagation();
});
});
If .hiddenContent is a div you won't be able to use blur, that only works on text inputs. mouseout may be an alternative, and $(this) is what I think you are looking for in this case:
$('.hiddenContent').mouseout(function() {
$(this).hide();
});
Hide on clicking elsewhere
If you want to hide the div when you click outside the element you must watch for clicks all over the body of the page:
$('body').click(function() {
// Hide all hidden content
$('.hiddenContent').hide();
});
And then provide and exception for when you are clicking on the actually hidden content itself, and when you want to open it:
$('.hiddenContent').click(function(e) { e.stopPropagation() });
$('.openHide').click(function(e) {
$(this).next('.hiddenContent').toggle();
// this stops the event from then being caught by the body click binding
e.stopPropagation();
});