Using toogle to show/hide the div, I've got a problem that when I hide my div with anothor function, I have to click twice on the button to perform correct action.
Is there any way change the toggle switch like I clicked the button?
$('#add_task').toggle(function() {
if ($("#new_task_status").attr("value")==0) {
$("#new_task").slideDown();
$("#new_task_status").attr("value", "1");
}
}, function() {
if ($("#new_task_status").attr("value")==1) {
$("#new_task").slideUp();
$("#new_task_status").attr("value", "0");
}
});
$('nav').click(function() {
if ($("#new_task_status").attr("value")==1) {
$("#new_task_status").attr("value", "0");
$("#new_task").slideUp();
}
});
You could change your .toggle() so it doesn't matter, like this:
$('#add_task').click(function() {
$("#new_task").slideToggle(function() {
$("#new_task_status").val($(this).is(':visible') ? 1 : 0);
});
});
This does a slideToggle() instead, so the current state doesn't matter...when it finishes sliding, if it's shown (you opened it) you get a 1 in the input, otherwise you get a 0. Also, use .val() for input setting, much easier and more universal (I'm assuming it's an input here since that's most likely).
No, you would have to implement your own alternative to the toggle() function, which checks the current state of the element.
I don't see any need to use toogle at all. You can do the same with just a click handler:
$('#add_task').click(function() {
if ($("#new_task_status").attr("value")==0) {
$("#new_task").slideDown();
$("#new_task_status").attr("value", "1");
} else {
$("#new_task").slideUp();
$("#new_task_status").attr("value", "0");
}
});
and then:
$('nav').click(function() {
$('#add_task').click();
});
Btw. nav is not a HTML element. You probably mean #nav (maybe just a typo).
And as Nick already mentioned, consider to use .val().
I suggest an event-driven approch, like:
$("#add_task").bind({
"toggle": function(e) {
$("#add_task").trigger(($("#new_task_status").attr("value")==0) ? "open" : "close"););
},
"open": function(e) {
$("#new_task_status").attr("value", "1");
$("#new_task").slideDown();
},
"close": function(e) {
$("#new_task_status").attr("value", "0");
$("#new_task").slideUp();
}
});
$("#nav").click(function() {
$("#add_task").trigger("toggle");
});
Related
I have an element that when clicked is either visible or hidden using jQuery's toggle() method.
Using toggle() is it possible to delay it from being hidden for a few seconds, while not delaying the visibility?
$('.myelement').click(function() {
$('.myelement').toggle();
});
Just try with:
$('.myelement').click(function() {
if ($(this).is(':visible')) {
$(this).delay(1000).hide();
} else {
$(this).show();
}
});
Or simplier:
$('.myelement').click(function() {
$(this).delay($(this).is(':visible') ? 1000 : 0).toggle();
});
I have an element on my website, it looks like so:
<div class="nw_help"><div class="nw_help_content">...</div></div>
Easy stuff. Using CSS on nw_help:hover, nw_help_content becomes visible. In order to support touchscreens too, I have written the following:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).css('visibility', 'hidden');
});
});
The first function works flawlessly, the second one doesn't wanna work at all. I've checked if $('.nw_help_content').css('visibility', 'hidden'); is working in browser's console and it is.
Any ideas?
Thanks so much in advance for your answer.
Edit: Now it hit me: the first function is triggered on clicking nw_help_content as well and it "neutralizes" the second function. But how to prevent it?
I believe if you have the visibility hidden on page render, the element is never rendered. You'll need event delegation:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
$(document).on('click', '.nw_help_content', function() {
$(this).css('visibility', 'hidden');
});
});
Also, only one DOM ready statement is needed.
Demo: http://jsfiddle.net/7sM3L/4/
I suggest staying away from direct CSS rule manipulation on this. Just using jQuery show and hide will provide a more solid/reliable result.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find('.nw_help_content').show();
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).hide();
});
});
It is actually working/ Since the divs are nested you are both events fire and the div is hidden and shown on same click.
use toggle instead.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").toggle();
});
});
Check out the fiddle
As Zenith says, this is due to event bubbling... Another solution is to bind the event only to the outer container and simply check for the visibilty:
$(document).ready(function() {
$('.nw_help').click(function() {
var content = $(this).find('.nw_help_content');
if(content.css('visibility') == 'hidden') {
content.css('visibility','visible');
} else {
content.css('visibility','hidden');
}
});
});
I've built a dropdown menu that uses a slideUp event if the menu itself or anywhere in the body is clicked:
$('html, .currentPage').click(function() {
$('.currentMenu').slideUp('fast', function() { myFunction(); });
});
I also have a function inside the slideUp event callback.
However, my problem is that the function is being called on html or .currentPage click whether the slideUp event has occurred or not.
How can I make it so the function(); ONLY happens if the slideUp event runs?
$('html, .currentPage').click(function() {
var $currentMenu = $('.currentMenu');
if($currentMenu.is(':visible')) {
$currentMenu.slideUp('fast', function() { myFunction(); });
}
});
even more
$('html, .currentPage').click(function() {
var $currentMenu = $('.currentMenu');
if($currentMenu.is(':visible')) {
$currentMenu.slideUp('fast', myFunction);
}
});
You can also optionally use $currentMenu.css('display') != 'none' instead of $currentMenu.is(':visible').
The options are suggested based on the actual behaviour of slideUp(), described in the official documentation at http://api.jquery.com/slideUp/.
$('.currentMenu').slideToggle('fast', function() { myFunction(); });
You could add class open to your menu and slideUp() if hasClass('open'):
if ( $menu.hasClass('open') ) {
$menu.slideUp('fast', function(){ });
...
}
I'm trying to make it so that my dropdown menu shows when you click a button, and hides when you click anywhere except the dropdown menu.
I have some code working, as far as not closing when you click the menu, however when you click the document when the menu is closed, it shows the menu, so it continuously toggles no matter where you click.
$(document).click(function(event) {
if ($(event.target).parents().index($('.notification-container')) == -1) {
if ($('.notification-container').is(":visible")) {
$('.notification-container').animate({
"margin-top": "-15px"
}, 75, function() {
$(this).fadeOut(75)
});
} else {
//This should only show when you click: ".notification-button" not document
$('.notification-container').show().animate({
"margin-top": "0px"
}, 75);
}
}
});
jQuery's closest() function can be used to see if the click is not within the menu:
$('body').click(function(e) {
if ($(e.target).closest('.notification-container').length === 0) {
// close/animate your div
}
});
you can do something like this if your item is not clicked then hide its dropping list in case of drop down
$(':not(#country)').click(function() {
$('#countrylist').hide();
});
I am using a very simple code for this as :-
$(document).click(function(e){
if($(e.target).closest('#dropdownID').length != 0) return false;
$('#dropdownID').hide();
});
Hope it will useful.
Thanks!!
I usually do like this:
$('.drop-down').click(function () {
// The code to open the dropdown
$('body').click(function () {
// The code to close the dropdown
});
});
So put your body (elsewhere) click function inside the drop-down open click function.
This might not be a complete solution but I´ve created a demo to help you out. Let me know it´s not working as you´d expect.
$(document).click(function(e) {
var isModalBox = (e.target.className == 'modal-box');
if (!isModalBox) {
$('.modal-box:visible').animate({
"margin-top": "-15px"
}, 75, function() {
$(this).fadeOut(75);
});
}
});
$('a').click(function(e) {
e.stopPropagation(); // Important if you´d like other links to work as usual.
});
$('#temp-button').click(function(e) {
e.preventDefault();
$('.modal-box').show().animate({
"margin-top": "0px"
}, 75);
});
Try this :
// The code to close the dropdown
$(document).click(function() {
...
});
// The code to open the dropdown
$(".drop-down").click(function() {
...
return false;
});
try something like:
$(document).click(function(event) {
if($(event.target).parents().index($('.notification-container')) == -1) {
if($('.notification-container').is(":visible")) {
$('.notification-container').animate({"margin-top":"-15px"}, 75, function({$(this).fadeOut(75)});
}
}
});
$(".notification-button").click(function(event){
event.stopPropagation();
$('.notification-container').show().animate({"margin-top":"0px"}, 75);
});
This is what I've decided to use, it's a nice little jQuery plugin that works with little code.
Here's the plugin:
http://benalman.com/projects/jquery-outside-events-plugin/
This is the code that makes my above code in my question work.
$(document).ready(function(){
$(".notification-button").click(function(){
$('.notification-container').toggle().animate({"margin-top":"0px"}, 75);
});
$('.notification-wrapper').bind('clickoutside', function (event) {
$('.notification-container').animate({"margin-top":"-15px"}, 75, function(){$(this).fadeOut(75)});
});
});
I got this small JavaScript using jQuery that slides down a ul when an image is clicked:
$(document).ready(function () {
$('img.menu_class').click(function() {
$('ul.the_menu').slideToggle('medium');
});
});
I was wondering if I could modify it to recognize when the mouse leaves the ul/image and make it slide back instead of having the user click on the image again. If I use something else than click() it would (naturally) only apply to the image and won't recognize the ul as an object. Any suggestions?
you can use jquery mouseout()
Try this
$('img.menu_class').bind('mouseleave',function() {
$('ul.the_menu').slideToggle('medium');
});
or
$('img.menu_class').bind('hover',function() {
$('ul.the_menu').slideToggle('medium');
});
Use this code.
This is my updated code
Use this code to slidedown ur list once mouse hover on image and remains open
$(document).ready(function () {
$('img.menu_class').bind('hover mouseleave',function() {
$('ul.the_menu').slideDown('medium');
});
//to close ul
$('#id_of_close_element').bind('click',function() {
$('ul.the_menu').slideUp('medium');
});
});
This is the whole code (added some image swapping to the whole thing), working at all major (updated) browsers at the moment. Not very clean and probably could be done easier but it works:
$(document).ready(function() {
$('ul.menu_body').hide();
if ($.browser.msie && $.browser.version < 8) {
$('.dropdown').click(function() {
if ($('ul.menu_body').is(':hidden')) {
$('ul.menu_body').fadeIn('medium');
$('.menu_head').attr("src", "layout/buttonhover.png");
$('.menu_body').css("font-weight","normal");
} else if ($('ul.menu_body').is(':visible')) {
$('ul.menu_body').fadeOut('medium');
$('.menu_head').attr("src", "layout/servbtn.png");
}
});
} else {
$('.dropdown').click(function() {
if ($('ul.menu_body').is(':hidden')) {
$('ul.menu_body').fadeIn('medium');
$('.menu_head').attr("src", "layout/buttonhover.png");
} else if ($('ul.menu_body').is(':visible')) {
$('ul.menu_body').fadeOut('medium');
$('.menu_head').attr("src", "layout/servbtn.png");
}
});
$('.dropdown').mouseleave(function() {
if ($('ul.menu_body').is(':visible')) {
$('ul.menu_body').fadeOut('medium');
$('.menu_head').attr("src", "layout/servbtn.png");
}
});
}
});