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.
Related
I'm creating a game page with JavaScript.
I am currently registering the Visibility Change event listener to turn on/off the BGM, but if I close the screen in IOS, the application will no longer move.
So I commented out the Visibility Change event. On Android, the BGM continues to play when the screen is closed, but iOS stops playing even without a BGM OFF event.
I tried the pagehide event, but it doesn't seem to work.
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined")
{
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";
}
document.addEventListener(visibilityChange, SnlPixiMgr.VisibilityChange, false );
window.addEventListener("pageshow", function(evt){
alert('show');
}, false);
window.addEventListener("pagehide", function(evt){
alert('hide');
}, false);
arguments.callee.VisibilityChange = function()
{
console.log("VisibilityChange called");
if(document.hidden)
{
for( var i=0; i<SnlPixiMgr.m_HiddenEvent.length; i++ )
{
SnlPixiMgr.m_HiddenEvent[i]();
}
}
else
{
for( var i=0; i<SnlPixiMgr.m_VisibleEvent.length; i++ )
{
SnlPixiMgr.m_VisibleEvent[i]();
}
}
}
I want the BGM to be turned on and off properly when I turn the screen off and on in iOS.
The following code works fine in most browsers but it won't work in Internet Explorer CE Mobil and I can't for the life of me figure out why.
function autofocus() {
var el = document.getElementById("autofocus");
if (el === null) {
return;
} else if (el.tagName.toUpperCase() == "SELECT") {
if (el.selectedIndex == -1) {
el.options[0].selected = true;
}
}
el.focus();
}
$(window).ready(function () {
autofocus();
});
It works perfectly in all the regular browsers I have tried but in Internet Explorer Mobile it seems to focus on the select list itself which means it's not possible to navigate the various options without clicking one. Maybe if I click one of the options instead?. See http://jsfiddle.net/mhenrixon/sbwCv/19/ for an example of what is not working.
EDIT: It does not have to do with the selectedIndex per se since most of the time there will be a selectedIndex like 15, 5, 27 or whatever. Just not -1.
On my Samsung Saga, I'm running:
Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile 7.11) VZW:SCH-i770 PPC 320x320
and the problem on this browser is the jQuery ready function.
If instead you use <body onload="autofocus()"> the <select> will have its first option selected. And that option is indeed focused; if I use the optical mouse, I can right-arrow to a different option and space-bar to select it.
So here's the test case I've ended up with:
<html>
<head>
<title>Test</title>
<!-- script type="text/javascript" src="jquery-1.4.2.js" -->
<script type="text/javascript">
function autofocus() {
var el = document.getElementById("autofocus");
if (el === null) {
return;
} else if (el.tagName.toUpperCase() == "SELECT") {
if (el.selectedIndex == -1) {
el.options[0].selected = true;
}
}
el.focus();
}
/*
$(window).ready(function () {
autofocus();
});
*/
</script>
</head>
<body onload="autofocus()">
<select autofocus="autofocus" id="autofocus" multiple="multiple">
<option value="0">0:17,00st</option>
<option value="P11">P11:1918,00st</option>
<option value="P12">P12:100,00st</option>
</select>
</body>
</html>
And of course it works on desktop browsers as well.
you can try if el.selectedIndex = 2; works or not, i can't seem to reproduce this problem in IE8, so may be the problem is just related to IE CE Mobile
function autofocus() {
var el = document.getElementById("autofocus");
if (el === null) {
return;
} else if (el.tagName.toUpperCase() == "SELECT") {
if (el.selectedIndex == -1) {
el.selectedIndex = 0;
el.options[0].selected = true;
}
}
el.focus();
}
$(window).ready(function () {
autofocus();
});
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();
});
i have this page which opens up a popup. i want to refresh the parent after popup has been closed.. i used the function i found in stackoverflow
var win = window.open("popup.html");
function doStuffOnUnload() {
alert("Unloaded!");
}
if (typeof win.attachEvent != "undefined") {
win.attachEvent("onunload", doStuffOnUnload);
}
else if (typeof win.addEventListener != "undefined") {
win.addEventListener("unload", doStuffOnUnload, false);
}
which didn't do anything after i closed the pop up... what can i do achieve this?
thanks...
You wrote the unload event in the wrong place. You added an unload event to the main page instead of to the popup...
var win = window.open("popup.html"); // O.K.
All of this should be in the popup.html page...
function doStuffOnUnload() {
alert("Unloaded!");
}
if (typeof win.attachEvent != "undefined") {
win.attachEvent("onunload", doStuffOnUnload);
} else if (typeof win.addEventListener != "undefined") {
win.addEventListener("unload", doStuffOnUnload, false);
}
You can use the unload jquery function:
$(window).unload(doStuffOnUnload);
unload docs
In Firefox seems fine, Chrome and Internet Explorer the text is still selectable, is there any way around this? The code was taken from another question, (which I can't find right now) so it may be out of date?
// Prevent selection
function disableSelection(target) {
if (typeof target.onselectstart != "undefined") // Internet Explorer route
target.onselectstart = function() { return false }
else if (typeof target.style.MozUserSelect != "undefined") // Firefox route
target.style.MozUserSelect = "none"
else // All other routes (for example, Opera)
target.onmousedown = function() { return false }
}
Used in code as:
disableSelection(document.getElementById("gBar"));
For webkit use khtmlUserSelect instead of MozUserSelect .
In opera and MSIE you may set the unselectable-property to "On"
As the both styles related to gecko/webkit are CSS, you can use a class to apply it:
<script type="text/javascript">
<!--
function disableSelection(target)
{
target.className='unselectable';
target.setAttribute('unselectable','on');
}
//-->
</script>
<style type="text/css">
<!--
.unselectable{
-moz-user-select:none;
-khtml-user-select: none;
}
-->
</style>
Note: unselectable will not pass on child-elements, so if you have there anything else than textNodes inside target, you need the workaround you already have there for MSIE/opera.
all of the above examples is too complicated.. based on the browser version.
I got simle solution ... works for all browsers!
// you can select here which html element you allow to be selected
var ExcludeElems = ["INPUT","SELECT","OPTION"]
function disableSelection (target) {
// For all browswers code will work .....
target.onmousedown = function (e)
{
var i;
var e = e ? e : window.event;
if (e)
for (i=0; i<ExcludeElems.length;i++)
if (e.target.nodeName == ExcludeElems[i] )
return true;
return false;
}
if you need you can make this function more complicated.
Use this code for any container element ...
disableSelection (document)
//disableSelection (document.body)
//disableSelection (divName) ....
For Wekbit (e.g. Chrome and Safari) you can add:
else if (typeof target.style.webkitUserSelect != "undefined") // Webkit route
target.style.webkitUserSelect = "none";
For IE, use 'unselectable':
else if (typeof target.unselectable != "undefined") // IE route
target.unselectable = true;
Reference: http://help.dottoro.com/ljrlukea.php
Like the MozUserSelect styling in Firefox you can use -webkit-user-select: none for Webkit based browser (like Safari and Chrome).
I think that you can use -o-user-select: none in Opera. But I have not tested it.
// Prevent selection
function disableSelection(target) {
if (typeof target.onselectstart != "undefined") //IE route
target.onselectstart = function() { return false }
else if (typeof target.style.userSelect != "undefined") //Some day in the future?
target.style.userSelect = "none"
else if (typeof target.style.webkitUserSelect != "undefined") //Webkit route
target.style.webkitUserSelect = "none"
else if (typeof target.style.MozUserSelect != "undefined") //Firefox route
target.style.MozUserSelect = "none"
else //All other route (ie: Opera)
target.onmousedown = function() { return false }
}
For IE, maybe this can help you: http://msdn.microsoft.com/en-us/library/ms534706(VS.85).aspx