Cross Browser fullscreen mode - javascript

In my app, I want users to be able to press a button or F11 to go full screen. However the call to browser to go full screen should go through my custom function as there is additional code which recalculates some variables.
The updated code & link demonstrate that the browser ignores our wrapper function & calls its own fullscreen function immediately with F11 press.
David Walsh has an intro but I cannot seem to be able to pull it off our custom function bit.
The demo works on Chrome but not on Firefox...
David Walsh article on Full screen API
document.addEventListener('keydown', keyInput, false);
var fullscreen_flag = false;
function keyInput(event) {
event.preventDefault();
console.log('user press key');
var code = event.keyCode || event.which;
if (code === 122) { // F11 pressed
requestFullScreen('key request');
}
}
function requestFullScreen(text) {
if (fullscreen_flag) {
exitFullscreen(text);
}
else {
triggerFullScreen(text);
}
}
function triggerFullScreen(text){
fullscreen_flag=true;
//alert('Fullscreen Enabled!');
console.log(text);
var elementDom = document.getElementsByTagName('body')[0];
elementDom.requestFullscreen = elementDom.requestFullscreen ||
elementDom.mozRequestFullScreen || elementDom.webkitRequestFullscreen ||
elementDom.msRequestFullscreen;
elementDom.requestFullscreen();
}
function exitFullscreen(text) {
console.log(text);
fullscreen_flag = false;
//alert('Exiting Fullsreen!');
document.exitFullscreen = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
document.exitFullscreen();
}

Now it should work.
<div onclick="exitFullScreen()" style='cursor: pointer'>Exit Full Screen</div>
<div onclick="triggerFullScreen()" style='cursor: pointer'>Enter Full Screen</div>
document.addEventListener('keydown', keyInput, false);
var fullscreen_flag = false;
function keyInput(event) {
var code = event.keyCode || event.which;
if (code === 122) { // F11 pressed
event.preventDefault();
requestFullScreen();
}
}
function requestFullScreen {
if (fullscreen_flag) {
exitFullscreen();
}
else {
triggerFullScreen();
fullscreen_flag = true;
}
}
document.triggerFullScreen=function(){
alert('Fullscreen Enabled!');
var elementDom = document.getElementsByTagName('body')[0];
elementDom.requestFullscreen = elementDom.requestFullscreen ||
elementDom.mozRequestFullScreen || elementDom.webkitRequestFullscreen ||
elementDom.msRequestFullscreen;
elementDom.requestFullscreen();
}
document.exitFullScreen=function() {
alert('Exiting Fullsreen!');
document.exitFullscreen = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
document.exitFullscreen();
}

Related

Animate CC HTML5 - toggle fullscreen

I have this code (below) on a buton to force my HTML5 game to fullscreen, but I'd like to have it turn back also with the button - right now it only works using ESC key. Is it possbile?
this.fsbtn.addEventListener("click", doFullscreen);
function doFullscreen() {
var i;
var elem = document.getElementById("animation_container");
var fs = ["requestFullscreen", "webkitRequestFullscreen", "mozRequestFullScreen", "msRequestFullscreen"];
for (i = 0; i < 4; i++) {
if (elem[fs[i]]) {
elem[fs[i]]();
break;
}
}
}
Sure it's possible. Change your doFullscreen function to a toggle one that checks if it's fullscreen or not:
function toggleFullscreen(event) {
var element = document.body;
if (event instanceof HTMLElement) {
element = event;
}
var isFullscreen = document.webkitIsFullScreen || document.mozFullScreen || false;
element.requestFullScreen = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || function () {
return false;
};
document.cancelFullScreen = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || function () {
return false;
};
isFullscreen ? document.cancelFullScreen() : element.requestFullScreen();
}
Read the documentation here for fullscreen API
You can exit from fullscreen mode using functions listed below(for more read documentation)
In JS/HTML code you can add button with absolute position and high z-index. Write new click listener for added button and run cancelFullscreen function, that's all.
Example JS function for FullScreen mode:
function toggleFullScreen() {
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (videoElement.mozRequestFullScreen) {
videoElement.mozRequestFullScreen();
} else {
videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.mozCancelFullScreen) {
videoElement.mozCancelFullScreen();
} else {
videoElement.webkitCancelFullScreen();
}
}
}
Working example you can see here: https://developer.mozilla.org/samples/domref/fullscreen.html

How to prevent Chrome open history after press CTRL+H

I mean is there any way to prevent the default accesskey in Chrome.
var text = document.getElementById("text");
text.onkeyup = function(e) {
if(e.ctrlKey && e.keyCode == 72) {
// do something...
alert("You wont see me cause Chrome will open history manager");
}
}
<textarea id="text"></textarea>
This should work. You need Keydown Event.
var text = document.getElementById("text");
text.addEventListener("keydown", function(e) {
console.log(e.keyCode);
if (e.keyCode == 72 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
e.preventDefault();
alert('Stopped');
}
}, false);
<textarea id="text"></textarea>
I've added isCtrlDown variable and keyup with keydown event, to achieve what you're looking for because I didn't see isKeyDown kind of function in Key as discussed here.
var isCtrlDown = false;
var text = document.getElementById("text");
text.onkeydown = function(e){
if(e.keyCode == 17){
isCtrlDown = true;
}
if(isCtrlDown && e.keyCode == 72){
// do something...
console.log("You wont see me cause Chrome will open history manager");
}
e.preventDefault();
}
text.onkeyup = function(e){
if(e.keyCode == 17){
isCtrlDown = false;
}
e.preventDefault();
}

Sencha ExtJs TextField KeyDown Event in FireFox

So I have the following code that detects where the key that was pressed is a number, space or delete key. If not it stops the key from being entered into the textfield. It works perfectly in Chrome and IE. When I run it in FireFox I get the following error: returnValue is undefined in the following statement: e.event.returnValue = false;
Here is the code:
keydown:function( sender, e, eOpts )
{
if (!isNumberKey(e))
{
e.event.returnValue = false;
}
}
The Function that does the work:
function isNumberKey(e)
{
//Local Varaible Declaration
var returnValue = false;
if (e.keyCode >= 96 && e.keyCode <= 105)
{
returnValue = true;
}
else if (e.keyCode >= 48 && e.keyCode <= 57)
{
returnValue = true;
}
else if (e.keyCode == 8 || e.keyCode == 46)
{
returnValue = true;
}
return returnValue;
}
I looked in the debugger in the firefox and found that returnValue really is not there. What do I use instead? I am sure there must be a way to accomplish this in FireFox.
Thanks,
Josh
It took me like 4 hours but here is the solution. Hope this helps:
keydown:function( sender, e, eOpts )
{
if (!isNumberKey(e))
{
if (Ext.browser.is.Firefox)
{
e.event.preventDefault();
}
else
{
e.event.returnValue = false;
}
}
}

Add arrow key navigation to site with variable in page

I would like to add this code to allow navigation through a website with left and right arrows. Is there any way to assign the window.location variable from an image that is linked on that page? I'm trying to make the left and right arrows on the page that are used for navigation on the page to be assigned to the left and right arrows on the keyboard.
img src="leftarrow.png" = previous page
img src="rightarrow.png" = next page
Code to be used: (other code is fine too)
var browser = navigator.appName;
if (browser == "Microsoft Internet Explorer") {
document.onkeydown=keydownie;
} else {
document.onkeydown=keydown;
}
function keydownie(e) {
if (!e) var e = window.event;
if (e.keyCode) {
keycode = e.keyCode;
if ((keycode == 39) || (keycode == 37)) {
window.event.keyCode = 0;
}
} else {
keycode = e.which;
}
if (keycode == 37) {
window.location = '!!PREVIOUS_URLHERE!!';
return false;
} else if (keycode == 39){
window.location = '!!NEXT_URLHERE!!';
return false;
}
}
function keydown(e) {
if (e.which) {
keycode = e.which;
} else {
keycode = e.keyCode;
}
if (keycode == 37) {
window.location = '!!PREVIOUS_URLHERE!!';
return false;
} else if (keycode == 39) {
window.location = '!!NEXT_URLHERE!!';
return false;
}
}
Assuming the image is wrapped in an anchor tag (otherwise how would it work?), you could do something like this:
if (keycode == 37) {
img = document.querySelector("img[src='leftarrow.png']");
window.location = img.parentElement.href;
return false;
} else if (keycode == 39) {
img = document.querySelector("img[src='rightarrow.png']");
window.location = img.parentElement.href;
return false;
}
We're looking for the appropriate image/navigation link and getting the url from it's anchor container.

How can i disable the ctrl + a using javascript?

<script type="text/javascript">
function mischandler(){
return false;
}
function mousehandler(e){
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
var isCtrl = false;
document.onkeyup=function(e)
{
if(e.which == 17)
isCtrl=false;
}
document.onkeydown=function(e)
{
if(e.which == 17)
isCtrl=true;
if((e.which == 85) || (e.which == 67) && isCtrl == true)
{
// alert(‘Keyboard shortcuts are cool!’);
return false;
}
}
</script>
Hi all , I using the code to disable the right click and also the ctrl+c and ctrl+u how to disable the ctrl a in the following code. Any help would be great.
Thanks,
vicky
You shouldn't try to do this, let me tell you why. I'm assuming you want to disable ctrl + c because you don't want the user to be able to copy content from your site, well have you thought about the fact that there are a dozen of other ways to copy your content?
Download html file and copy in their favorite text editor
Inspect element and copy content from there
Use mouse to right click -> copy
And for my good friend #glenatron:
Network sniffer like Fiddler between the browser and the network card
Screenshots, Taking a photograph of the monitor
... The list goes on and on.
Also, trying to stop users from normal functionality will only bother and annoy them; most likely causing them to leave your site and never return.
FInd the below code for detect ctrl + a,ctrl + A,ctrl + c,ctrl + C, ctrl + u,ctrl + U with your code editing.
<script type="text/javascript">
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
function mischandler(){
return false;
}
function mousehandler(e){
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
var isCtrl = false;
document.onkeyup=function(e)
{
if(e.which == 17)
isCtrl=false;
}
document.onkeydown=function(e)
{
if(e.which == 17)
isCtrl=true;
if(((e.which == 85) || (e.which == 117) || (e.which == 65) || (e.which == 97) || (e.which == 67) || (e.which == 99)) && isCtrl == true)
{
// alert(‘Keyboard shortcuts are cool!’);
return false;
}
}
you can get value for key from below link
http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00000520.html
Enjoy...!! :)
How can i disable the ctrl + a
I had the same question but for a different reason,
I had multiple textPath elements in my DOM and because of some weird bug, whenever I pressed ctrl + a they all change position, to fix that I added:
body{
...
user-select:none
}
I guess this also "technically" disables Ctrl + a

Categories