jQuery - click (almost!) anywhere to hide div etc - javascript

$(".clickPlan").click(function(){
$(".panel1").animate({left:'0px'});
});
$(".sendBtn").click(function(){
$(".panel1").animate({left:'300px'});
});
$(document).click(function() {
$('.panelBox').fadeOut('fast');
});
$(".clickPlan").click(function(e) {
e.stopPropagation();
});
Fiddle here:
http://jsfiddle.net/stupaul22/qV246/5/
I am close. This is the functionality I want.
Click "SHOW PANEL" animates the panel onto the screen.
You can enter name and email without making the panel disappear.
Clicking "SEND" animates the panel off to the right.
Clicking anywhere outside the panel and outside "SHOW PANEL" makes the panel fade.
After a fade --> Click "SHOW PANEL" animates the panel onto the screen FROM LEFT.

You could try adding a click handler to the .panel1 class and stop the event from propagating to the click handler that's on your document.
// will stop the event from reaching the $(document).click handler
$(".panel1").click(function(e){
e.stopPropagation();
})
http://jsfiddle.net/qV246/6/

Related

Prevent bootstrap dropdown closing when clicked anywhere else other than the menu item itself

I need the submenu to be opened when its child is active (as in when the user is on that page). Managed to do so already by this:
// To open active submenu on load
jQuery('.keep-open').find('.current-menu-item').closest('.current-menu-parent').children('.dropdown-toggle').trigger('click');
But upon clicking anywhere, the menu closes. It needs to stay opened unless it's specifically clicked. Only managed to prevent it from closing when clicked outside using this:
// To prevent submenu from being closed on outside click
jQuery('.current-menu-parent').on('hide.bs.dropdown', function() {
return false;
});
But of course, this seems prevents it from closing too even when the menu itself is clicked. How can I specify it to close only when that menu item is clicked?
Closest reference I found but was this and this but so far still can't get a hold of how to do it. This is on a WordPress site menu via wp_bootstrap_navwalker.
Jsfiddle here
If you want to close only when that menu is clicked just add this code
// Hide dropdown when click menu
jQuery('.current-menu-parent').bind('click', function() {
$(this).find('ul').fadeOut();
});
Demo here
Or you want to show menu item again when that menu is clicked:
// toggle dropdown when click menu
jQuery('.current-menu-parent').bind('click', function() {
$(this).find('ul').fadeToggle();
});
Demo here

Jquery .click hide function for closing window

I prepared fragment of my page to show you my problem:
a link
On the bottom is show small red window named div "pomocnik"
In Chrome browser click on the "close" icon do it works, but IE does the work prepared for clicking in the text inside DIV
onclick="document.location.href('http://www.google.com')
so it open new page.
IE has detected onclick for DIV but Chrome detected more in detail for image.
My idea is to close window after clicking on close button.
$('#close').click(function() {
//var g = document.getElementById("pomocnik");
//g.style.display = 'none';
$('#pomocnik').hide(2000);
$('#konsul').click = null;
});
I think that the problem is that the event (click onto close image) first calls the event handler which hides your div, but then bubbles up to the containing div and starts the default action for it (open the link). Try the following:
$('#close').click(function(e) {
//var g= document.getElementById("pomocnik");
//g.style.display= 'none';
e.stopPropagation(); //this will prevent the event from bubbling up to the containing div
$('#pomocnik').hide(2000);
//$('#konsul').click=null;
});

Dropit Jquery - keep submenu open on click

I'm using simple DropIt jquery dropdowns - http://dev7studios.com/dropit/
I want to have the submenu box stay open unless clicked outside of the box (.dropit-submenu)
I'm planning to have a form input in dropdown but whenever i click input inside dropdown the whole dropdown closes...
line 40 of js is showing this
// Close if outside click
$(document).on('click', function() {
settings.beforeHide.call(this);
$('.dropit-open').removeClass('dropit-open').find('.dropit-submenu').hide();
settings.afterHide.call(this);
});
There is a trick if you want to use, on div which is popping up you can write onclick="return false;" so this will not go to call jquery other call and after your form submission you can hide the same div.
// Close if outside click
$(document).on('click', function(e){
if($(e.target).closest('.dropit-submenu').length){ return true; }
settings.beforeHide.call(this);
$('.dropit-open').removeClass('dropit-open').find('.dropit-submenu').hide();
settings.afterHide.call(this);
});

Capturing some clicks, not all

I have built a modal box, which uses a cover-all div background to fade out the content and allow the user to click off the box in order to close it. I do this by capturing all of the clicks, but filtering out any that are over the model box.
$('body').on('click', '.cover_slide > *',function(e){
e.stopPropagation();
});
$('body').on('click', '.cover_slide',function(){
helper.cover.close();
$('body').off('click', '.cover_slide');
});
I would like to be able to interact with some elements on my modal box with clicks, but I can't seem to figure out how to do that AND still have my 'click off to close' function. At present all clicks on the box are ignored.
There is no need to bind the click multiple times. Try using this snippet. Note that you might have to change the closest selector depending on what the element really is
$(document).bind("click", function(e) {
if($(e.target).closest("div").hasClass('coverSlide')) {
//do stuff if someone clicks the box
}
});

Trigger Javascript Function when user clicks anywhere on page

I have a ModalPopupExtender that needs to be hidden whenever the user clicks anywhere else on the page, window, or scrollbar. I have a function and it works if i set it to a div tag but what about when the user clicks the windows scrollbar?
function HideList() {
$find("<%=ModalPopupExtender1.BehaviorID%>").hide();
}
<div id="maindiv" onclick="HideList()">
Elements...
</div>
AFAIK, it's not possible to target the scroll bar using JavaScript.
However, you can target the scroll event and any click event on the window:
$(window).bind('scroll click', function() {
alert('Boo');
});

Categories