CSS and JS notes
Fullscreen mode
Switch to fullscreen:
var docElm = document.documentElement; if (docElm.requestFullscreen) { docElm.requestFullscreen(); } else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); }
Cancel fullscreen:
if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); }
Unselectable text
.uselectable { -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ /* Rules below not implemented in browsers yet */ -o-user-select: none; user-select: none; }
Remove outline
a { outline: none; } /* for buttons in firefox */ button::-moz-focus-inner { border: 0; }
Remove outline for button
$('button').focus(function(){ $(this).blur(); })
Place one image over another
html:
<div class="container"> <img src="http://host/img1.png" class="back"> <img src="http://host/img2.png" class="front"> </div>
css:
.container { position: relative; top: 0; left: 0; } .back { position: relative; top: 0; left: 0; } .front { position: absolute; top: 30px; left: 70px; }
Prevent putting IE into compatibility mode
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Disable autocomplete
<input type="text" autocomplete="off">
Open link in new tab
window.open(url, '_blank'); window.focus();
Check browser is Chrome
var is_chrome = /chrome/.test(navigator.userAgent.toLowerCase()
Submit form in new tab
<form target="_blank">...</form>
Licensed under CC BY-SA 3.0