hi i am working on a website using HTML CSS JavaScript and jQuery.
I wanted to display website fullscreen(like when we click F11) onload. I am able to enter fullscreen using onclick even. But with onload event fullscreen script is not working. When i load a site it should display in fullscreen. please help. Here is my code :
here is my HTML code:
<html id="player3">
<body onload="goFullscreen('player');">
</body>
</html>
Here is my js
function goFullscreen() {
var element = document.getElementById("player3");
if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();}
}
Browsers doesn't allow sites to load in fullscreen mode without user interaction. You will get the following error message
Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture.
To Handle this change your UX to make the user interact with your site to go fullscreen mode.
I added an onload, ondrag, onmouseover, oncontextmenu and more to make sure it is always at fullscreen
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body id="appin" onclick="openFullscreen();" onload="openFullscreen();" onmouseover="openFullscreen();" oncontextmenu="openFullscreen()" ondrag="select()">
<h1>Fullscreen on load page</h1>
<style>
*:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
background-color: rgba(255,255,255,0)!important;
padding: 20px;
}
::backdrop
{
background-color: white;
}
</style>
<script>
var elem = document.getElementById("appin");
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
</script>
<p>Note: Internet Explorer 10 and earlier versions do not support the msRequestFullscreen() method.</p>
<p>Note: It does not work on iframes, that means, it will not work on the stackoverflow snipped. Copy and paste the code to ex. w3schools and it will work :)</p>
</body>
</html>
Have something wrong in your code:
Your function have no parameter:
function goFullscreen()
But when you call it, you transfer parameter to function:
onload="goFullscreen('player');"
And if everything is right. you should be put javascript function in $(document).ready()
This solution: https://www.jwplayer.com/blog/using-the-browsers-new-html5-fullscreen-capabilities/
you can create an index.html with this code in the body on load, fill in "fullScreenPage.html" with url of the page that you can open in fullscreen.
<body onload="window.open('fullScreenPage.html, '', 'fullscreen=yes, scrollbars=auto');"></body>
Related
The code below which I found here
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var desktopFallback = "https://youtube.com/watch?v=4KnNVK-udTU",
mobileFallback = "https://youtube.com/watch?v=4KnNVK-udTU",
app = "vnd.youtube://4KnNVK-udTU";
if( /Android|iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
window.location = app;
window.setTimeout(function() {
window.location = mobileFallback;
}, 25);
} else {
window.location = desktopFallback;
}
function killPopup() {
window.removeEventListener('pagehide', killPopup);
}
window.addEventListener('pagehide', killPopup);
};
</script>
</body>
</html>
Is supposed to open youtube app based on the device. If it's a mobile device's browser through which the file was opened, the video must open up in the app. The code works fine in browser like FireFox. But it is not working on chrome. The app is not being opened, instead the browser version of youtube is being opened. That implies the mobilefallback link is being called, which is not I want.
And also if clicked from somewhere it works fine. The problem is only with Chrome. I don't know if it's some kind of chrome feature...but this is not what I need. Any help?
I can use any kind of solution. Even some other way to open up links like vnd.youtube://4KnNVK-udTU this directly in app.
Sorry if this info is not enough...I'll provide whatever it takes for you to help me out. ThankYou :)
I want to drag and drop an eMail from Office365 (Outlook)
to another browser window.
The problem is that after I select and drag an email to my drop location, it doesn't accept the drop location. (Only in IE, chrome works)
How can I create a drop location which accepts the eMail?
I had a look at: https://www.html5rocks.com/en/tutorials/dnd/basics/
but there the dragged objects are never locked this way.
Then I had a look at the different implementations of the drag and drop functionality at this site: http://mereskin.github.io/dnd/
In Chrome the following code works:
JSFiddle: https://jsfiddle.net/puq3y6u1/
(JavaScript for the DropLocation)
var dropbox = document.getElementById('dropbox');
dropbox.addEventListener('dragenter', noopHandler, false);
dropbox.addEventListener('dragexit', noopHandler, false);
dropbox.addEventListener('dragover', noopHandler, false);
dropbox.addEventListener('drop', drop, false);
function noopHandler(evt) {
evt.stopPropagation();
evt.preventDefault();
}
function drop(evt) {
evt.stopPropagation();
evt.preventDefault();
var data = evt.dataTransfer.getData("text/plain");
console.log(data);
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drag and Drop the Office365 Mail</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="dropbox">DropZone </div>
<script src="js/script.js"></script>
</body>
</html>
CSS:
#dropbox {
width: 200px;
height: 200px;
background-color: blue;
color: white;
font-size: 30px;
text-align: center;
line-height: 200px;
}
I know that for the Internet Explorer the getData type should be changed to "text" only.
However I can't change the setData to "text" only because that is already implemented by the owa site.
When I try to move a mail into the droplocation via chrome it works as expected.
If I try to move a mail from a Internet Explorer Window to a Internet Explorer Window gets instantly blocked the moment I am not on the navigation bar where the folders are.
I tried to Debug how Owa does it. Because you can drag and drop eMails to Folders (in IE). But I got stuck there. The code is minified and very large for me to analyze it.
When you drag an eMail in Outlook Web App or Exchange with the Internet Explorer it gets copied into the clipboard.
With:
window.clipboardData.getData("Text");
you can get the data. However you need to enable the clipboard option in the Internet Security Policy Settings.
My website provides iframe code which is put in some other websites.
For simplicity lets say my domain i.e the source of the iframe is www.abc.com and my client who uses my iframe code has domain www.xyz.com.
In my iframe website I try to access geoLocation of user using javascript.
When www.xyz.com is browsed on mobile, www.abc.com (in iframe) puts a confirmation box to allow or deny the access for geoLocation.
Now my issue is:-
I want to show the confirmation box only when the iframe is in the viewable area of the browser. And I want to do it without asking my clients to put any more js code in their website. It should all happen from my iframe source.
I tried the following, but visibilityChanged() gets fired only when we change the browser tab or minimize or maximize the browser...
Sample code. a.html
<!DOCTYPE html>
<html>
<head>
<script>
function onLoad() {
console.log('onload:', (document.hidden));
document.addEventListener("webkitvisibilitychange", visibilityChanged);
}
function visibilityChanged() {
console.log('visibilityChanged: ',arguments);
}
</script>
</head>
<body onload="onLoad()">
test
</body>
</html>
b.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<iframe style="border:1px solid red; width:200px;height:200px;" src="a.html"/>
</body>
</html>
The new PageVisibility API, which should be widely supported on mobile, looks much more promising:
Broad support: http://caniuse.com/#feat=pagevisibility
Spec: http://www.w3.org/TR/page-visibility/
Code snippet from the spec (above):
var timer = 0;
var PERIOD_VISIBLE = 1000;
var PERIOD_NOT_VISIBLE = 60000;
function onLoad() {
timer = setInterval(checkEmail, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
if(document.addEventListener) document.addEventListener("visibilitychange", visibilityChanged);
}
function visibilityChanged() {
clearTimeout(timer);
timer = setInterval(checkEmail, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
}
function checkEmail() {
// Check server for new messages
}
This is an updated question based on feedback from "glautrou": I have an LCD Cape coming for a BeagleBone Black single board computer and I want to have a web page displayed on the LCD with no borders, no scroll bars, and NO TITLE BAR. I am experimenting with getting this to work using the below code which was cut down from an example located at http://lesson8.blogspot.co.uk/2013/01/html5-fullscreen-api.html.
My desire is to have this run either when the page loads or from within a script...and NOT requiring the press of a button. The below script works fine with the button but does not work with either the open or script invocations. I will admit now that I don't really understand the DOM so I suspect that I am missing something simple.
<!DOCTYPE html>
<html>
<head>
</head>
<BODY onLoad="launchFullscreen(document.documentElement);">
<h1>HTML5 Fullscreen API</h1>
<div style="padding:20px;">
<button onclick="launchFullscreen(document.documentElement);" class="sexyButton">Launch Fullscreen</button>
<button onclick="cancelFullscreen();" class="sexyButton">Hide Fullscreen</button>
</div>
<script type='text/javascript'>//<![CDATA[
function launchFullscreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
function cancelFullscreen() {
if(document.cancelFullScreen) {
document.cancelFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
launchFullscreen(document.documentElement);
//]]>
</script>
</body>
</html>
Thanks in advance,
Will
There is a specific fullscreen API in HTML5, look at HTML5 FullScreen API toggle with JavaScript and this tutorial.
I had lost sight of the fact that I am running an embedded (single user) application here...when that re-occurred to me I looked for a way to send keystrokes to the browser. I found, and installed, xdotool as it was packaged for angstrom, and wrote a little autostart script. It works a charm though I will now automate it a little better via my node.js application. Thanks for the help, Will
Another way to meet my requirement given that I am running Chrome...
chrome.exe --kiosk --incognito some.web.site
Kiosk does the full screen thing and incognito prevents the question about restoring sessions in the case of an ungraceful shutdown.
This is what I needed regardless of what I may have thought that I needed!
I am using the following jquery plugin to enable fullscreen in my web app.
https://github.com/martinaglv/jQuery-FullScreen
It works great, except that when I am in fullscreen mode my textarea is not editable? Why is this? Is it a browser thing or the plugin?
It doesnt seem to be disabled in any way...
My test code below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/martinaglv/jQuery-FullScreen/master/fullscreen/jquery.fullscreen.js"></script>
</head>
<body>
<div id="content">
<textarea></textarea>
<button>
Go Go Fullscreen</button>
</div>
<script type="text/javascript">
(function () {
if ($.support.fullscreen) {
$('button').click(function (e) {
$('#content').fullScreen();
});
}
})();
</script>
</body>
</html>
There is a workaround (for Chrome, at least), but I don't know how it factors into the plug-in you're using. You have to pass along a little instruction to allow keyboard input:
document.body.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
UPDATE:
You could modify the plug-in pretty easily. This function would change to reflect the above:
function requestFullScreen(elem){
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen();
}
}
By default, the plug-in forces the browser to enter full-screen mode without allowing keyboard input.
More information here from MDN, and the thread where I found some clues.
From the tutorial:
The idea of allowing developers to programatically take up the user screen doesn’t come without serious security implications, which is why keyboard usage is limited. Of course, there are many legitimate uses for keyboard input in full screen, which is going to be addressed in future revisions of the API via some kind of permission prompt.
However, even in its current, limited form, the API still gives us an opportunity to enhance the experience of the end user.
It doesn't even go full screen in some browsers, like IE 9.
http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/