Develop Reference

visibilityChange and pagehide do not work in IOS

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.

Paste event listener on Internet Explorer getting wrong arguments

I'm handling the paste events for a contenteditable to clean all HTML markers before paste. All Works fine in Firefox and Chrome. But when I test my code in IE11, the event object passed is not a ClipboardEvent but a DragEvent.
Is there something wrong with my code?
If I add the listener as the code bellow, should I get the clipboard event. Why I'm getting drag?
editable.addEventListener('paste', pasteHandler, false);
http://jsfiddle.net/vepo/4t2ofv8n/
To test the example above, I'm copy a text from Chrome and paste into IE. But I you copy any text from IE will get the same error.

EDIT
$(document).ready(function(){
var editable = document.getElementById('editable-div');
var pasteHandler = function(e){
if(e.clipboardData && e.clipboardData.getData) {
var pastedText = "";
if (window.clipboardData && window.clipboardData.getData) { // IE
pastedText = window.clipboardData.getData('Text');
} else if (e.clipboardData && e.clipboardData.getData) {
pastedText = e.clipboardData.getData('text/plain');
}
alert(pastedText);
}
else{
alert('Not paste object!');
}
};
editable.addEventListener('paste', pasteHandler, false);
});
here I handle the IE Version and the other browsers as well.
JSFiddle

e.clipboardData was always null for me on IE, so I came up with this:
var pastedText = '';
if (typeof e.clipboardData === 'undefined')
pastedText = window.clipboardData.getData('Text')
else
pastedText = e.clipboardData.getData('text/plain')

e.originalEvent.clipboardData.getData('text/plain') works for safari, chrome, firefox and safari and chrome on an Ipad.
window.clipboardData.getData('text') works for Internet Explorer and Edge.
Note: e.originalEvent.clipboardData.getData('text') works for desktop browsers but not for mobile browsers.
So in the end I used this
var clipText;
if (e.originalEvent.clipboardData !== undefined){
clipText = e.originalEvent.clipboardData.getData('text/plain')
} else {
clipText = window.clipboardData.getData('text')
}

$("element").on('paste', function (e)
{
if (window.clipboardData)
{
pastedText = window.clipboardData.getData('Text')
}
else if (e.clipboardData || e.originalEvent.clipboardData != undefined)
{
pastedText = e.originalEvent.clipboardData.getData('text/plain')
}
}
});

Pause HTML5 video to lighten resource load?

I have a website that has one of those annoying autoplay looping background videos that just play over and over forever instead of using just a picture. I was wondering if it would lighten the resource load on our users machines if I paused the video when they are not looking at my page through the new page visibility API?
To all the geniuses on this site, I would love to see an answer that shows how you determined your answer. I am sort of new to the front-end world and I'm not sure how I would figure this question out.

#stupidkid
Though it has been asked long before, the best solution for you is here : https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
function handleVisibilityChange() {
if (document[hidden]) {
//pause video
} else {
//play video
}
}
document.addEventListener(visibilityChange, handleVisibilityChange, false);
Please try this.

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";
}
}

JavaScript non selectable text not working in Chrome/Internet Explorer

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