Develop Reference

browser close not triggering the visibilityChange on safari

I am trying to save some statistics when the user closes the browser, below is the code
if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support
hidden = 'hidden';
visibilityChange = 'visibilitychange';
} else if (typeof document.mozHidden !== 'undefined') {
hidden = 'mozHidden';
visibilityChange = 'mozvisibilitychange';
} else if (typeof document.msHidden !== "undefined") {
hidden = 'msHidden';
visibilityChange = 'msvisibilitychange';
} else if (typeof document.webkitHidden !== 'undefined') {
hidden = 'webkitHidden';
visibilityChange = 'webkitvisibilitychange';
} else {
console.log('in else condition');
}
if (typeof document.addEventListener === 'undefined' || hidden === undefined) {
console.log("App requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
document.addEventListener(visibilityChange, handleVisibilityChange, false);
}
function handleVisibilityChange() {
// Send a ajax call with **async: false**
}
The above code works well in mozilla firefox, google chrome but does not in safari. I am testing this on Mac Os and safari version is Version 12.1.1 (14607.2.6.1.1)
Can any please suggest if this is an expected behaviour in safari and what could be done as a workaround.
Thanks.

According to the MDN docs, the "pagehide" event should work for this:
If you're specifically trying to detect page unload events, the pagehide event is the best option.
https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event

jQuery-based HTML parsing in Javascript and Firefox: can't explain behavior

I'm writing a small script to parse a HTML page with the help of jQuery; while my script works as I expect in Chrome, IE and Safari, I can't explain its behavior in Firefox (version 36.0.1). Here it is:
$.ajax({
url: 'myURL.aspx',
async: false,
success: function (data) {
html = $.parseHTML(data, document, true);
$.each(html, function (i, el) {
if (el.nodeName === "FORM") {
$.each(el.childNodes, function (j, n) {
if (typeof n != "undefined") {
if (n.nodeName === "SCRIPT") {
if (typeof n.innerText != "undefined") {
if (n.innerText.indexOf("...") != -1) {
if (n.nodeType == 1) {
$("body").append(n);
}
}
}
}
}
});
}
});
}
});
The problem is, I set a breakpoint on the line where I'm calling append and, if I inspect the properties of n the first time the debugger breaks, I see that n.nodeName is not SCRIPT, n.innerText is undefined and n.nodeType is 3. Is there something I'm completely misunderstanding?

Looks like Firefox 36.0.1 is not completely ok with property innerText, after all (thanks apsillers!). I replaced it with textContent and now the script works in Firefox, Chrome, IE and Safari.

Javascript/Jquery Syntax to Disable Text Selection on a Div AND all Child Elements?

What is the syntax to disable text selection on a div and all of it's sub elements. I'm using $("#MyContent).disableSelection() to disable all of the text in the below code and it works in firefox and disable all three lines at once.
In IE explorer 9 it doesn't work on child elements so to disable all of the text I'd have to do $("#text1).disableSelection(), $("#text2).disableSelection(), $("#text3).disableSelection(). What is the syntax to disable or apply this to all children at once?
<div id="MyContent">
<div id="text1">Hello World</div>
<div id="text2">Goodbye</div>
<div id="text3">Asdf</div>
</div>

This works for me:
$('#MyContent').children().each(function(i, c) {
disableSelection(c);
});
function disableSelection(target) {
console.debug(target);
if (typeof target.onselectstart != "undefined") // For IE
target.onselectstart = function() { return false };
else if (typeof target.style.MozUserSelect != "undefined") // For Firefox
target.style.MozUserSelect = "none";
else // All other routes (Opera, etc.).
target.onmousedown = function() { return false };
target.style.cursor = "default";
}
Demo : http://jsfiddle.net/9vLFD/4/

You could try
$('#MyContent').children().each(function(i,c){
$(c).disableSelection();
});

Opposite of disableSelection function for enabling text selection for specific HTML elements

I'm using a JavaScript function called as disableSelection for preventing text selection on specific elements. Declaration of this function is here:
function disableSelection(target)
{
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
I want to disable text selection on the whole page except form elements. If I call disableSelection(document.body), it'll do the job but it'll also disable text selection on form elements (but this happens only on Firefox).
My question is how can I prevent form fields being affected by this text disabler script? I can tag all content except form fields but it requires so much effort.
I'll appreciate any help on this.
Note: I found disableSelection script from here.

by returning false from an event, you will disable the default behavior of the browser (selecting the text). I would therefor modify the function like this;
function disableSelection(target, enable)
{
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return enable}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect=enable?"all":"none";
else //All other route (ie: Opera)
target.onmousedown=function(){return enable}
target.style.cursor = "default"
}
and then call this for your stuff;
disableSelection(document.body, false);
disableSelection(document.forms[0], true);
should work (didn't test it)

script must be under <body> tag. if u want div only disable : disableSelection(document.getElementById('divName'))

This works for me, only tested in chrome:
function enableSelection(target) {
//For IE This code will work
if(typeof target.onselectstart != "undefined") {
target.onselectstart = function() {
return true;
}
}
//For Firefox This code will work
else if(typeof target.style.MozUserSelect != "undefined") {
target.style.MozUserSelect = "all";
}
//All other (ie: Opera) This code will work
else {
target.onmousedown = function() {
return true;
}
target.style.cursor = "default";
}
}

document.hasFocus() for chrome

Does anyone know what to use instead of hasFocus() for Chrome? I want to know when my Chrome tab has focus or not, so I can blink an alert message in the title.
Cheers

You could listen for the onfocus/onblur events and keep track of page state that way.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="output">
</div>
<script>
var has_focus = true;
function print(str) {
var out = document.getElementById('output')
out.innerText = out.innerText + "\n" + str;
};
window.onfocus = function() {
print('focus');
has_focus = true;
};
window.onblur = function() {
print('blur');
has_focus = false;
};
</script>
</body>
</html>

The page visibility API should do the trick:
https://developer.mozilla.org/en-US/docs/DOM/Using_the_Page_Visibility_API
document.hidden
Returns true if the page is in a state considered to
be hidden to the user, and false otherwise.
Of course, since this is a new API, you'll need to use different browser prefixes:
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
hidden = "hidden";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
}
var isHidden = document[hidden];
// or even
var isFocused = !isHidden;

You would use the document.activeElement tag.