I am using jquery slidetoggle & slideup so that, when a user clicks on #link, #div (which is by default hidden) slides open. Additionally, any click anywhere should slideUp and hide #div. So my script is like this:
$( document ).ready(function() {
$('#link').click(function(){
$('#div').slideToggle('fast');
event.stopPropagation();
});
$(window).click(function() {
$('#div').slideUp('fast');
});
});
This works fine in Chrome, but in Firefox the initial click to open the div also triggers the slideUp, so the div slides down and then immediately slides back up. What am I doing wrong here? Is there a better way to accomplish what I'm trying to do?
Seems like you have missed to pass event object to the listener.Correct your code to this and try..
$( document ).ready(function() {
$('#link').click(function(event){ //note here
$('#div').slideToggle('fast');
event.stopPropagation();
});
$(window).click(function() {
$('#div').slideUp('fast');
});
});
for more details refer here event.stopPropogation
hope this helps!
Related
I have a dropdown(.dropdown) div that opens when I click on .open:
Html:
<div class="open">Open</div>
<div class="dropdown">Dropdown</div>
jQuery:
$(".open").click(function(){
$(".dropdown").show();
});
Once the dropdown is open I'm using this jQuery script to close it when i click is made outside .dropdown div:
$(document).click(function(){
$('.dropdown').hide();
console.log('click');
});
$('.open, .dropdown').click(function(e){
e.stopPropagation();
});
The problem is that the click event for document is executed even if the div is not visible. Now, I could check to see if the div is visible before executing the .hide() method but is there a solution to activate the event on the document when the div is visible and deactivate it when the div is hidden?
It looks like you need to bind a click event to the document anyways to hide the dropdown. So, what about doing something like:
$(document).ready(function(){
$(document).click(function(e){
if ($(e.target).hasClass("open")) $(".dropdown").show();
else $(".dropdown").hide();
});
});
It's more concise and you don't have to worry about event propagation.
I had a project with jQuery 1.11.2.1
where this jquery statement was working with no problems:
$( document ).ready(function() {
$(".clickme").click(function(){
$("#menu").toggleClass("fixed", $( $("#panel").is(":visible") ) );
$("#panel").slideToggle();
});
});
after I moved to jQuery 1.11.3.2
browser freezes whenever I click the ".clickme" button and ask me to block a script (jquery) that was hanging too long.
I had to remove the is visible condition to avoid browser hanging:
$( document ).ready(function() {
$(".clickme").click(function(){
$("#menu").toggleClass("fixed");
$("#panel").slideToggle();
});
});
the problem is I need to check the visibility of the #panel element.
element #panel default state is display:none
the issue is present in all browsers I can check.
The first example is almost correct, except that you're putting a boolean (from .is()) in to a jQuery object. The boolean needs to be given directly as a parameter to the toggleClass method. Try this:
$(".clickme").click(function(){
$("#menu").toggleClass("fixed", $("#panel").is(":visible"));
$("#panel").slideToggle();
});
More info on toggleClass()
I have a modal that uses jQuery to popup on (document).ready.
$(document).ready(function() {
$("#openModal").toggleClass("target");
});
$(window).one( "click", function() {
$( "#openModal" ).toggleClass("target");
});
It works fine on desktop, but on iOS Safari it doesn't close on tap.
I read about the cursor:pointer fix, but it doesn't want to work in this scenario. I'm guessing this is because the event is binded to the window while the cursor is binded to the element.
And I obviously can't put body{cursor:pointer;}
What could this be caused by ?
Using .one will only trigger this for the first click on the window, therefore if you tapped (clicked) on the window before the modal opens, the function will not run again. Try using this:
$(window).on( "click", function() {
$( "#openModal" ).toggleClass("target");
});
Edit after your response:
I guess you want the modal to open only once on document ready, then do it like this, avoid using toggleClass and use this instead:
$(document).ready(function() {
$("#openModal").addClass("target");
});
$(window).click(function() {
$( "#openModal" ).removeClass("target");
});
$(window).one('click touchstart', function () {
$( "#openModal" ).toggleClass("target");
});
How do I get jQuery(document).ready(function() to fire again when an overlay div is activated?
I'm using this function to hide the a.button:
jQuery(function($) {
jQuery(document).ready(function() {
jQuery(
'.theme-actions a.button.button-primary.customize.load-customize.hide-if-no-customize'
).css("display","none");
});
});
The same button with the same class exists in a "overlay" called .theme-wrap, and within .theme-wrap, the a.button CSS looks like this (the difference being .active-theme ):
.theme-actions .active-theme a.button.button-primary.customize.load-customize.hide-if-no-customize
If I reload the page with the .theme-wrap overlay open, the button disappears, because the jQuery document ready function fires again.
I tried adding both CSS rules to the one function
jQuery(
'.theme-actions a.button.button-primary.customize.load-customize.hide-if-no-customize,
.theme-actions .active-theme a.button.button-primary.customize.load-customize.hide-if-no-customize
').css("display","none");
but it doesn't work.
How do I get document ready to fire again when the overlay opens?
Update 10/14/14
As was pointed out in the answer below: there is no need for jQuery in this instance. The CSS I'm using is the same for each div - the original and the overlay - so a simple {display:none} rule added to the admin stylesheet will suffice.
Instead of using the $(document).ready() function again, try adding the CSS directly to your stylesheet.
Once the overlay is activated run the following:
jQuery('.theme-actions .active-theme a.button.button-primary.customize.load-customize.hide-if-no-customize
').css("display","none");
Or better still create a function:
function hideElement( sel) {
$( sel ).hide(); //.hide() is equiv to .css('display', 'none');
}
Then call the function at DOM ready with first selector:
$(document).ready(function() {
hideElement( 'selector-1' );
});
And then when the overlay is fully activated, call the function with the appropriate selector:
hideElement( 'selector-2' );
So I have a dropdown, which I hide and show based on an element click. However, I also want to hide this dropdown whenever it is visible if I click anywhere else in the document.
This is the dropdown code:
function dropdown(){
$('#smenubutton').click(function(e){
var submenu = $(this).find('.submenu');
if (submenu.is(':visible')){
submenu.hide();
}else{
submenu.show();
}
});
}
however, a code like this:
$(document).click(function(e){
e.stopPropagation();
$('.submenu').hide();
});
will obviously always hide the submenu. both are loaded in document load. I know I am just missing something so simple. Feel free to point me to a duplicate(I have tried searching but can't find any questions based on my needs) and close this question.
You should check if e.target is the submenu and hide the submenu only if it's not (in this case i check if it has the class submenu)
$(document).click(function(e){
if($(e.target).hasClass("submenu")){
$('.submenu').hide();
}
});
Since you mentioned "outside the browser", try this: http://www.thefutureoftheweb.com/blog/detect-browser-window-focus
EDIT: Since OP edited the question, I'll edit the answer:
$(document).on('click', '#submenu', function(e) {
e.stopPropagation();
// show or hide the submenu here
});
$(document).on('click', function(e) {
// hide submenu here
});
example: http://jsfiddle.net/A3SfP/
Try on blur() or focusout():
$('#smenubutton').blur(function(){ submenu.hide(); });
// OR
$('#smenubutton').focusout(function(){ submenu.hide(); });
If it doesn't work try giving your menu an explicit tabindex.