I'm trying to hide .menu_branch using jQuery slideUp() only if the user clicks off of .menu_root. I'm not getting any errors but the click() function is executing even if .menu_root is clicked. Any ideas? jQuery or straight JavaScript are both fine by me. Thanks!
HTML:
<span class="menu_root">Menu</span>
<ul class="menu_branch">
<li>Home</li>
<li>FAQ</li>
<li>About</li>
<li>Contact</li>
</ul>
CSS:
.menu_branch {
display:block;
}
Jquery:
$("body:not(.menu_root)").click(function(){
$(".menu_branch").slideUp("fast");
});
I've also tried:
$("body").not(".menu_root").click(function(){
$(".menu_branch").slideUp("fast");
});
As well as replacing body with * in both instances, all with the same result.
One possible solution is to prevent the propagation of click event from menu_root
$(document).click(function () {
$(".menu_branch").slideUp("fast");
});
$('.menu_root').click(function (e) {
e.stopPropagation();
})
Demo: Fiddle
Your code will ignore a body element with class menu_root like <body class="menu_root">
You can try this:
$("body").click(function(event){
if ( $(event.target).hasClass("menu_root") ) {
return false;
}
$(".menu_branch").slideUp("fast");
});
http://jsfiddle.net/WzW2D/2/
Late to the party again but this should work for you. Clicking .menu_root will toggle the menu. Clicking anywhere else will close it (if its open).
$(document).on("click", function(e) {//When the user click on any element:
if($(".menu_branch").is(":visible")){//If the menu is open...
$(".menu_branch").slideUp("fast");//close it.
} else if ($(e.target).hasClass("menu_root")){//Otherwise, if the user clicked menu_root...
$(".menu_branch").slideDown("fast");//open it.
}
});
http://jsfiddle.net/xGfTq/
try
$(document).click(function () {
$(".menu_branch").slideUp("fast");
});
$('.menu_root').click(function () {
return false;
})
Related
I have a jQuery click event which adds a class (active) to a dropdown.
In the dropdown there are boxes (with the class generically called box).
Currently the jQuery event fires anytime you click anywhere in the item class, but if you click the box it also closes the dropdown. Thus I am adding an if statement above the addClass part which checks if you clicked a box.
Here's the html:
<div class="trainee-item">
<div class="dropdown">
<div class="box"></div>
</div>
</div>
and here's the JS:
$('.item').click(function(e) {
$('.box').click(function() {
console.log('stop!!!');
});
if ($(this).children('.dropdown').hasClass('active')) {
$(this).children('.dropdown').removeClass('active');
return;
}
$(this).children('.dropdown').addClass('active');
});
I've tried return (where the console.log('stop!!!!'); currently is, but that only stops the $('.box').click(function() (the immediate "parent" function). I am trying to stop the function above that one
Any help? thanks
One way would be
$('.item').click(function(e){
if (e.target.className=="box"){
e.preventDefault()
return
}
})
$('.item').click(function(e) {
if (e.target.className=="box"){
e.preventDefault()
alert("don't close it!")
return
}
if ($(this).children('.dropdown').hasClass('active')) {
$(this).children('.dropdown').removeClass('active');
return;
}
$(this).children('.dropdown').addClass('active');
});
.dropdown{display:none;width:100px;height:100px;background:#bbb}
.active{height:120px;}
.item{height:20px;background:#ccc}
.active.dropdown{display:block}
.box{border-bottom:1px solid #999;padding:10px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="trainee-item item">
<div>Click me</div>
<div class="dropdown">
<div class="box">hi</div>
</div>
</div>
You should separate these into separate click events. You should also delegate them, since you'll trigger both due to event bubbling. It's been a while since I've written jQuery, but from what I remember you should be using .on();, since you can delegate with that method.
I'll leave the delegation as homework for you, but here's how you should be approaching this issue:
$('.item').on('click', function(e, el) {
var $child = $(this).children('.dropdown'),
activeClass = 'active';
$child.hasClass(activeClass) ? $child.removeClass(activeClass) : $child.addClass(activeClass);
});
$('.box').on('click', function(e, el) {
console.log('box clicked');
});
Being asked to make an SPA pizza place and running into issues with the show and hide feature. only the home page shows at all times
<nav>
<div>
<ul>
<li>Sicilian Home</li>
<li>Sicilian Menu</li>
<li>Sicilian About</li>
</ul>
</div>
</nav>
$(document).ready(function ()
{
$("navHome").click(function (event) {
$("home").show();
$("menu", "about").hide();
});
$("navMenu").click(function (event) {
$("menu").show();
$("about", "home").hide();
});
$("navAbout").click(function (event) {
$("about").show();
$("home", "menu").hide();
});
}
Your CSS selectors are incorrect. Base on your HTML you need to use id selectors:
$("#navHome").click(function (event) {
$("#home").show();
$("#menu, #about").hide();
});
$("#navMenu").click(function (event) {
$("#menu").show();
$("#about, #home").hide();
});
$("#navAbout").click(function (event) {
$("#about").show();
$("#home, #menu").hide();
});
Also there is a difference: $("menu", "about") means "find menu tag within about tag", while $("#menu, #about") means "find element with id menu and element with id about".
I copied your javascript and html to simulate the issue. I added alert statements in the functions to check if the click event is captured in the first place. But, the alert statements themselves were not coming up.
You need to make following two changes to your script to work:
prefix # with the ID's to capture the click event
a closing ) is missing at the end of the script
Please find below the final script:
$(document).ready(function ()
{
$("#navHome").click(function (event) {
$("home").show();
$("menu", "about").hide();
});
$("#navMenu").click(function (event) {
$("menu").show();
$("about", "home").hide();
});
$("#navAbout").click(function (event) {
$("about").show();
$("home", "menu").hide();
});
}
)
I am using 'slideToggle' to open a couple divs on a site and want to ensure all of the divs are closed before another is opened. Is there a way to run a if..then to ensure a toggled div isn't open before opening another?
Here is my script;
<script type="text/javascript">
$(function()
{
$("a#toggle").click(function() {
$("#contact").slideToggle(500);
return false;
});
$("a#toggle_about").click(function(){
$("#about").slideToggle(500);
return false;
});
});
</script>
Calling tag;
<li>Contact Me</li>
And called div;
<div id="contact">blah, blah...</div>
And CSS;
#contact{display: none; padding: 7px; font-size: 14px;}
Thanks,
------EDIT------
This seems to work ok, I can control the transition by setting speed to 500 or 0. It just seems like a lot of code for a simple if..then.
Thanks for the suggestions and possible solutions.
<script type="text/javascript">
$(function()
{
$("a#toggle").click(function(){
if ($("#about").is(':hidden')){
$("#contact").slideToggle(500);
return false;
}else{
$("#about").slideToggle(500);
$("#contact").slideToggle(500);
return false;
}
});
$("a#toggle_about").click(function(){
if ($("#contact").is(':hidden')){
$("#about").slideToggle(500);
return false;
}else{
$("#contact").slideToggle(500);
$("#about").slideToggle(500);
return false;
}
});
});
</script>
Fiddle Example
If you add appropriate classes to your html and change the href to target the div it needs to open, you can significantly simplify your code.
<ul>
<li>Contact Me</li>
<li>About Me</li>
</ul>
<div id="contact" class="toggleable">blah, blah...</div>
<div id="about" class="toggleable">blah, blah...</div>
Now you can handle both links with a single event.
$(".toggler").click(function (e) {
e.preventDefault();
var target = $(this).attr("href");
$(".toggleable").not(target).hide();
$(target).slideToggle();
});
the end result is when you click on "Contact Me", about will hide if it is open, and contact will show if it is hidden or hide if it is shown.
http://jsfiddle.net/nYLvw/
You could implement a helper function to collapse any visible elements with a certain class, and then call that every time you're about to toggle a div.
The markup:
<div id="contact" class="toggle-content">blah, blah...</div>
The code:
function hideToggleContent() {
$('.toggle-content:visible').slideUp( 500 );
}
$(function() {
$("#toggle").click( function() {
var isVisible = $("#contact").is(':visible');
hideToggleContent();
if( isVisible ) {
return false;
}
$("#contact").slideDown( 500 );
return false;
});
$("#toggle_about").click( function() {
var isVisible = $("#about").is(':visible');
hideToggleContent();
if( isVisible ) {
return false;
}
$("#about").slideDown( 500 );
return false;
});
});
You might also check out the jQuery UI accordion, it's default behavior accomplishes the same. http://jqueryui.com/accordion/
UPDATE: Added Fiddle Link For Example
There are several ways to solution this problem.
Whenever you are tweening for effect, and you want to only tween if not already tweening, you will want to track the state of your tween.
Typically, you might have a trigger/toggler, and a target. I like to use closures to accomplish the state tracking. I might use something like this:
$(function () {
// closures
var $togglers = $('[selector][, selector]');
var $target = $('[selector]');
$target.tweening = false;
var tweenStop = function () {
$target.tweening = false;
};
var togglerClick = function () {
if (!$target.tweening) {
$target.tweening = true;
$target.slideToggle(500, tweenStop);
}
};
// handle the event
$togglers.click(togglerClick);
});
>> SAMPLE FIDDLE <<
I have one html div on my jsp page, on that i have put one anchor tag, please find code below for that,
<div class="expandable-panel-heading">
<h2>
<a id="ancherComplaint" href="#addComplaint"
onclick="markActiveLink(this);">ABC</a>
</h2>
</div>
js code
$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
alert('123');
});
function markActiveLink(el) {
alert($(el).attr("id"));
}
here I when I click on div I got alert with 123 message, its fine but when I click on ABC I want message I want to call markActiveLink method.
JSFiddle
what is wrong with my code? please help me out.
The problem was that clicking the anchor still triggered a click in your <div>. That's called "event bubbling".
In fact, there are multiple solutions:
Checking in the DIV click event handler whether the actual target element was the anchor
→ jsFiddle
$('.expandable-panel-heading').click(function (evt) {
if (evt.target.tagName != "A") {
alert('123');
}
// Also possible if conditions:
// - evt.target.id != "ancherComplaint"
// - !$(evt.target).is("#ancherComplaint")
});
$("#ancherComplaint").click(function () {
alert($(this).attr("id"));
});
Stopping the event propagation from the anchor click listener
→ jsFiddle
$("#ancherComplaint").click(function (evt) {
evt.stopPropagation();
alert($(this).attr("id"));
});
As you may have noticed, I have removed the following selector part from my examples:
:not(#ancherComplaint)
This was unnecessary because there is no element with the class .expandable-panel-heading which also have #ancherComplaint as its ID.
I assume that you wanted to suppress the event for the anchor. That cannot work in that manner because both selectors (yours and mine) select the exact same DIV. The selector has no influence on the listener when it is called; it only sets the list of elements to which the listeners should be registered. Since this list is the same in both versions, there exists no difference.
Try this
$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
alert('123');
});
$('#ancherComplaint').click(function (event) {
alert($(this).attr("id"));
event.stopPropagation()
})
DEMO
Try following :
$('.expandable-panel-heading').click(function (e) {
if(e.target.nodeName == 'A'){
markActiveLink(e.target)
return;
}else{
alert('123');
}
});
function markActiveLink(el) {
alert($(el).attr("id"));
}
Here is the working demo : http://jsfiddle.net/JVrNc/4/
Change your jQuery code with this. It will alert the id of the a.
$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
markActiveLink();
alert('123');
});
function markActiveLink(el) {
var el = $('a').attr("id")
alert(el);
}
Demo
You need to read up on event bubbling and for sure remove inline event handling if you have jQuery anyway
Test the click on the div and examine the target
Live Demo
$(".expandable-panel-heading").on("click",function (e) {
if (e.target.id =="ancherComplaint") { // or test the tag
e.preventDefault(); // or e.stopPropagation()
markActiveLink(e.target);
}
else alert('123');
});
function markActiveLink(el) {
alert(el.id);
}
I would have used stopPropagation like this:
$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
alert('123');
});
$('#ancherComplaint').on('click',function(e){
e.stopPropagation();
alert('hiiiiiiiiii');
});
Try out this example, the onclick is still called from your HTML, and event bubbling is stopped.
<div class="expandable-panel-heading">
<h2>
<a id="ancherComplaint" href="#addComplaint" onclick="markActiveLink(this);event.stopPropagation();">ABC</a>
</h2>
</div>
http://jsfiddle.net/NXML7/1/
put your jquery function inside ready function for call click event:
$(document).ready(function() {
$("#ancherComplaint").click(function () {
alert($(this).attr("id"));
});
});
when click on div alert key
$(document).delegate(".searchbtn", "click", function() {
var key=$.trim($('#txtkey').val());
alert(key);
});
I would like to open email-signup when I click on email-signup-link. Then I would like to close it by clicking anywhere on the page except for the box itself, of course.
I have looked around on this site and there are various solutions for this problem but every one I've tried shows and then hides my div instantly. I must be doing something wrong.
This is the HTML:
Sign Up
<div id="email-signup">
<div id="inner">
<h2>E-mail Notifications</h2>
<input class="" type="text" name="description" placeholder="Enter your e-mail address" id="description" />
Sign Up
</div>
</div>
This is my Javascript:
$('#email-signup').click(function(){
e.stopPropagation();
});
$("#email-signup-link").click(function() {
e.preventDefault();
$('#email-signup').show();
});
$(document).click(function() {
$('#email-signup').hide();
});
Two things. You don't actually have e defined, so you can't use it. And you need stopPropagation in your other click handler as well:
$('#email-signup').click(function(e){
e.stopPropagation();
});
$("#email-signup-link").click(function(e) {
e.preventDefault();
e.stopPropagation();
$('#email-signup').show();
});
$(document).click(function() {
$('#email-signup').hide();
});
http://jsfiddle.net/Nczpb/
$(document).click (function (e) {
if (e.target != $('#email-signup')[0]) {
$('#email-signup').hide();
}
});
The way I've often seen this done is by overlaying the page behind the form with a div (greyed out usually). With that, you could use:
$("#greydiv")..click(function() {
$("#email-signup").hide();
$("#greydiv").hide();
});
...or something simliar.
var mouse_is_inside = false;
$(document).ready(function()
{
$('.form_content').hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").mouseup(function(){
if(! mouse_is_inside) $('.form_wrapper').hide();
});
});
as referenced in another stackoverflow post...
$(":not(#email-signup)").click(function() {
$("#email-signup").hide();
});
Although you'd be better off having some kind of an overlay behind the popup and binding the above click event to that only.