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');
});
Related
I'm attempting to prevent a user from clicking a link and it going to another page while any input is focused. Sometimes the only available space around the input and the keyboard is a link and some users click the link accidentally. I'm trying to make it so when they click the link it blurs the input (closes the keyboard) and prevents the page from following the link. Then let them click the link again if they want to go to another page after the input is no longer in focus.
html
<input type="text">
Example
I've tried the following...
jQuery
$('a').on('click', function (event) {
if ($('input').is(":focus")) {
console.log('focused');
event.preventDefault();
}
});
(nothing gets logged)
Also tried this...
if ($('input').is(":focus")) {
$('a').on('click', function (event) {
event.preventDefault();
$('input').each(function(){
$(this).trigger('blur');
});
});
}
Neither one prevent the page from going to whatever link was clicked...
I don't think you can do this. You can disable the click event on the links while input is focused, and enable it back again when blur occurs on the input elements. However, while if user clicks on a link while focused on the input element blur event will occur first (which would enable clicking) then click even occurs and links acts as normal.
You could try disabling the links while input elements have focus, then you can enable them on the first click and restore normal operation.
$("input").on("focus", function() {
$("a").on("click", function (event) {
event.preventDefault();
$("a").off();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
example
I think I found a solution.
HTML
Example.com
jQuery
$('input').on('focus', function () {
$('a').each(function(){
$(this).addClass('cant-click');
});
});
$(document).on('touchend', function (e) {
if (!$(e.target).closest('input').length) {
$('a').each(function(){
$(this).removeClass('cant-click');
});
}
});
CSS
a.cant-click { pointer-events: none; }
When the input takes focus, every link gets this class. When anything on the page is clicked that is not an input, it removes this class from every link.
I have an iframe without ID (generated by third party). The iframe is embedded on a landing page. When the submit button on the iframe gets clicked, I would like the window or landing page to be closed because when the submit button is clicked, it will open a new tab.
function() {
var iframe = document.getElementByTagName('iframe');
var sbutton = document.getElementById("form_002b_ao_submit_href");
iframe.sbutton.onclick = function() {
window.unload();
}
};
but it does not get triggered.
$('iframe').contents().find('body button').click(function (event) {
event.preventDefault();
$('iframe').remove();
});
If you are wanting to close the main window after the submit button is clicked then you can do something like the following.
Live Preview
Link to the test page that is loaded in the iframe
HTML
<iframe src="http://s.codepen.io/larryjoelane/debug/dMoqPL"></iframe>
JavaScript
//select the iframe element without an id
var submitButton = $("iframe").contents().find("#submit_button");
submitButton.on("click", function(event) {
//if you need to prevent default actions(form submit for example)
event.preventDefault();
//close the window
window.close();
//debugging only
//alert("iframe submit button click event fired");
});
I have a function that when a user clicks outside of the mobile navigation close the mobile menu. I don't think I've got the code just right as when I click the mobile menu it opens and closes straight away.
What I want to happen is when the user clicks outside of the nav slideToggle the menu back.
Current code is:
// Responsive menu
$('.mobile-menu').click(function(e) {
e.preventDefault();
$('nav').slideToggle('slow');
});
// Close out the menu on click outside
window.addEventListener('mouseup', function(event) {
var box = document.getElementById('nav');
if(event.target != box && event.target.parentNode != box) {
$('nav').slideToggle('slow');
}
});
I think it's somewhere to do with mouseup however I don't see a mouseclick in the available parameters.
Thanks
I can give you a cleaner approach to this.
The window's listener should only be bound after the menu is expanded. When it's collapsed, the listener should be removed. This will prevent a lot of hassle and possible bug due to asynchronous execution of 2 event listeners.
With that in mind:
// First we define a callback function to be called after the nav complete showing, which will close the nav when a user tap outside.
var bindEventListener = function(event) {
var box = document.getElementById('nav');
if(event.target != box && event.target.parentNode != box) {
$('nav').slideUp('slow', function(){
// remove the window's event listener after the nav is closed
window.removeEventListener('mouseup', bindEventListener);
});
}
});
// Now we set the button's onclick event and bind the above defined callback for mouseup event.
$('.mobile-menu').click(function(e) {
e.preventDefault();
$('nav').slideDown('slow', function(){
window.addEventListener('mouseup', bindEventListener);
});
});
The target of the click event is not necessarily the nav or it's first level child, so if there is a click event on the nav you will slide it open and then slide it close.
You need to check if the nav contains the target element or equals to it, so inside the event listener, change your condition to this:
if(!(event.target == box || $.contains(box, event.target))) {
...
The problem is that when you mousedown on .mobile-menu it shows the nav, then when you mouseup on anything outside the nav, including .mobile-menu, it hides the nav again. You should check that the click event's target also isn't .mobile-menu. Try the following code:
// Responsive menu
$('.mobile-menu').click(function(e) {
e.preventDefault();
$('nav').slideToggle('slow');
});
// Close out the menu on click outside
$(window).on('mouseup', function(event) {
if(!$(event.target).is("nav") && $.contains(event.target, $("nav")) && !$(event.target).is('.mobile-menu')) {
$('nav').slideToggle('slow');
}
});
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;
});
$(".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/