Full screen "f11" modus on a specific wordpress page - javascript

I got a specific page that I want in full screen mode like if you press F11.
How can I fix this page to get in the full screen mode?
The page contains a full screen slide show.
Thanks for your help.
****** UPDATE ******
I figured out to create a button that goes to the full screen mode.
Still I would like to know if it's possible to load full screen instantly when the page is entered.

JS has an experimental fullscreen API that you can use by calling:
elem.requestFullscreen();
There are vendor-specific functions that are necessary in some cases.
You could also use a library like screenfull.js to abstract the complexity away for you
Update: It's not possible to go fullscreen automatically upon load. If you try to use the fullscreen API calls without them being synchronous reactions to user input (click, keypress, etc) they will fail.

Related

Enter full screen automatically by inserting script in a webpage using requestly

I want to go into full-screen mode (F11) on certain pages. For this, I am using Requestly chrome extension to insert a script on a webpage.
Here is the script
document.body.requestFullscreen();
When I run this script directly in the console, I am able to go into full-screen mode. However, when Requestly is executing the script, the script is being executed but the full-screen mode is not triggered.
Even MDN Documentation of requestFullScreen doesn't provide any additional information about this.
Need to understand if there are technical limitations about this requestFullscreen() API that this has to be user-intent driven like click etc and cannot be automatically called?
TLDR; This is not possible to auto-trigger full-screen mode using Script Insertion. It has to be based on user Interaction.
As per requestFullscreen MDN documentation
This method must be called while responding to user interaction or a device orientation change; otherwise, it will fail.
I tried triggering an automatic click on a button dynamically inserted into the page but we get the same error.
Here's the Insert Script Rule I created in Requestly

Enter full screen whenever page is loaded

I'm working on asp.net quiz application. The mandatory requirement of this application is: when the application starts (page is requested), it automatically enters into full screen.
Now I tried dozen of solutions (JS & Jquery's plugins)
JS Solution
Mozila's
Jquery Plugins
a number of different jquery's plugins, but Chrome & Firefox are not allowing me to do so. Because it states that it needs user interaction for that.
Can somebody please help me out of this situation? Solution can be browser dependent.
Details about application:
Total 5 aspx pages.
One page is an iframe/frame in another page.
Quick and dirty solution. Let's create another page which will be our container page. Put an Iframe there, calculate Iframe height width attribute based on the screen size. make the first page as iframe source. on the iframe put frameborder=0, so from user perspective it will look like single page
For full screen check this link http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/

GoogleChrome-fullscreen issue

I tried with different options for automatically making a page full screen using javascript
I tried with the window.open("index.html","","fullscreen=yes,location=no, cursor=none");
I tried with the Native FullScreen JavaScript API- It only works on a button click or any other events , but I need to make the page automatically open on fullscreen.
...I need to make the page automatically open on fullscreen
You can't, and for good reason. That's why the fullscreen API (and window.open, typically) only works in response to a user event. It's by design to prevent web pages from hijacking the user's workspace.

Why html5 fullscreen not working with window.history.pushState?

I am using html5 fullscreen api to make a div fullscreen. Based on user interaction/navigation url changes using window.history.pushState but as soon as I change the URL, page exits the fullscreen mode.
And it is happening on all the sites not just my app.
Steps to reproduce:
Goto http://davidwalsh.name/demo/fullscreen.php (A nice demo)
Then hit Launch fullscreen
Now using chrome/ff console try changing the url using window.history.pushState
Use following code window.history.pushState(window.location.origin, "show", '/myNewPath');
Now you would notice that URL changes but fullscreen mode exits. Am I doing something wrong here? Let me know if you guys need more info.
I've noticed this issue as well, basically any pushState will kick you out of full screen mode. I've been following this for a while and a fix should be coming soon according this thread:
https://code.google.com/p/chromium/issues/detail?id=138324
It seems they finally amended it, so these two should finally play nice together.
You have to notice that the browser refresh, so it must exit from fullscreen mode.
If you wanna stay on fullscreen mode, you must stay on the same page, and prevent from exiting / refreshing the page, and use AJAX to manage your navigation and links and load content in the same page.

Make the user leave his screensaver through a website

Weird question !
I was wondering if there was any action a website could do to make the user's screensaver disappear.
I wanted to create kind of an alarm-clock website, but with nice visual effects, and I wished I could make the user leave their screensaver.
Is there any action that wakes up the computer ? Like, I don't know, making the website fullscreen, moving the window around.. Or is the screensaver only and exclusively left through keyboard/mouse events ?
I've read that you can't interact with the screensaver with JS : javascript code to prevent screensaver from starting
But I was hoping something like putting the website fullscreen would wake the computer up.
Nope.
For security reasons, nothing running inside the browser has access to OS-level commands like that.
Simply popping up an alert box won't do it. Going full screen won't work either, and anyway, you can't go full screen on a timer. I just tried and and apparently there are browsers safeguards against it. If you request full screen as a direct result of user interaction like, for example, a click, it goes full screen no problem. But, put the exact same code inside a setTimeout() function and it just doesn't run.
You have two options for an alarm type application:
1) Just do it with sound. Set up an <audio> tag and set it to play on a setTimeout.
2) Chrome apps offer greater access to different things that require more security than a typical web page. I don't know if they allow enough access to do what you're wanting to do, but you can read about it here: http://developer.chrome.com/apps/first_app.html
Hope that helps.

Categories