Develop Reference

Input focus and blur firing when window gets focus

I have a text input on a page to which I have bound focus() and blur() events. I'm having an issue where focus and then blur are firing unexpectedly if I follow the these steps:
Click on input, focus() fires. OK.
Click out of window on another window, blur() fires. OK.
Click back on original window, focus() and then blur() on the input both fire. PROBLEM!
$('#password').focus(function(){
$('#passwordStrength').slideDown(500);
}).blur(function(){
$('#passwordStrength').slideUp(500);
});
I really need the focus() and blur() events not to fire when the window regains focus as it causes a div to quickly appear and then disappear.
Any ideas on how to stop this?

I ended up getting around this by checking if the document has focus as part of my blur function.
$('#password').focus(function(){
$('#passwordStrength').slideDown(500);
}).blur(function(){
if (document.hasFocus()) {
$('#passwordStrength').slideUp(500);
}
});
This means that my strength box stays on the page when clicking away and then behaves appropriately when clicking back into the window.
Thanks to the commenters for trying to help and sending me on the right path.

You can use window.onfocus to detect if the current tab is focused.
function focus () {
$('#password').focus(function(){
$('#passwordStrength').slideDown(500);
}).blur(function(){
$('#passwordStrength').slideUp(500);
});
}
focus();
window.onfocus = function () {
$('#password').focus();
focus();
}
Here the fiddle

Android click event div element

I am having the following issue with click/touchstart event on Android (as far as I know only happening on Android),
1. the element triggers a modal window.
2. one of the buttons/links inside this modal gets triggered instantly without giving the user the option to make a choice.
It is of course required for the visitor/user to view the modal content before being redirected to a link to another page from one of those buttons.
I believe this is due to the 'touchstart' event bind to this div, which I am using since click events on divs for touch devices don't work.
I am using jQuery to make this work, and on iOS there doesn't seem to appear any issue.
$(document).on('click touchstart','.mydiv', function(e) {
e.preventDefault();
// open modal
});
Any suggestions please.

Try this:
$(.mydiv).on('touchstart', function(e) {
e.preventDefault();
// open modal
});
cheers

Event Handler for closing modal popups

I'm doing some selenium web testing and on this one site I'm automating a modal popup would sometimes show up randomly and would prevent me from grabbing other elements. I know there are built in Selenium methods for closing the popup like alert().dismiss() but this would mean I know when the popup would show up and I don't it shows up at random.
I would like to know how to attach an event listener for when these modal popups show up and have a callback that would close out of it. please and thanks

If you know where is the code that triggers the popup, you can simply inject few line of javascript in webdriver and nullify the popup.
As an example, if the popup appears after a couple of seconds and is triggered by the following code:
setTimeout(function () {
showModal()
}, 5000);
you could override the modal function in the webpage with the following (Java) code:
driver.executeScript("showModal = function () {}");
the next time the modal is executed this will trigger an empty function.

jQuery click handlers not triggered inside a modal window

I have a very simple click handler that makes an AJAX GET request on click like so:
$('span.switch-option').click(function() {
$(this).parents('div.log-in-option').hide();
$(this).parents('div.log-in-option').siblings('div.log-in-option').fadeIn();
});
This works perfectly anywhere else on the website. However, when I try to click a <span> element with the class switch-option inside a modal window, the event does not fire. Entering the contents of the click-handler function in the console and running them does perform the desired behavior, however.
Why will the click handler not fire in this modal window? I am using the popular SimpleModal plugin http://www.ericmmartin.com/projects/simplemodal/ and jQuery 1.9.1.
A live example is here: http://ec2-107-22-8-70.compute-1.amazonaws.com/thread/19. If you click the 50,000 reps or any user's reputation then try to click the big blue link in the dialog, the click handler does not fire. This behavior happens with other click handlers in different modal windows as well.

When your script(main.js) is running the elements 'li.log-in, a.log-in' does not exists in the dom, they are loaded dynamically when the popup is created thus jQuery is not able to bind the event handlers
Try event propagation
$(document).on('click', 'li.log-in, a.log-in', function() {
$.get('/login/', function(data) {
//make a modal window with the html
$.modal(data);
});
return false;
});

How to show confirm message on close of child window in javascript?

I have a parent window and when I click a link from parent window, the link opens in a new window. I need to show confirm message on close of child window.(i.e. the opened link )
childWindow = window.open("http://www.google.com","width=400, height=400");
I like confirm close for child window. like
childWindow.close(function(){var confirmClose=confirm("Are you sure to close ?");
});
If the user clicks "OK" of the confirm box then the child window will be closed, else if the user click "Cancel" then the child window will not be closed

Use onbeforeunload event: https://developer.mozilla.org/en/DOM/window.onbeforeunload

To set up a confirm dialogue, add a listener to the beforeunload event of the (child)window as demonstrated in Confirm message on browser page close and prevent the action eventually.
If you call childWindow.close(), the window will get closed instead of hooking a callback function.