I'm try to see if it's possible to have an html (https Only), to fullscreen src with the website url inside? With just a click of a button, or is this not possible yet?
top of page
Important forum update
This forum is migrating to one unified Wix community forum starting July 26th, and will be read-only during the process.
Wishlist Page is the official platform for requesting new features. You can vote, comment, and track the status of the requested features.
bottom of page
Thanks a lot !
Working great. I am new with HTML/CSS but here is an exemple of what I've managed to do with an icon button Open and Exit Fullscreen if it can help some of you.
________________________________________________________
OPEN WIX EDITOR
In your page Wix Code :
// For full API documentation, including code examples, visit http://wix.to/94BuAAs import wixWindow from 'wix-window';
$w.onReady(function () { // does not change to full screen // sets flag to *allow* full screen // code in HtmlComponent will change to full screen $w("#html1").allowFullScreen(); });
In HTML Iframe ()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Font Awesome Icons</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <style type="text/css"> .fa_custom { background-color: black ; color: #dfdfdf ; outline:white ; position:absolute;z-index:1} .fa_custom:hover { background-color: black ; color: #ffffff } .fa_custom { top: 0; right: 0; } .fa_custom_exit { background-color: black ; color: #dfdfdf ; outline:white ; position:absolute } .fa_custom_exit:hover { background-color: black ; color: #ffffff } .fa_custom_exit { top: 0; right: 0; }
<style type="text/css"> #fullscreen { background-color: transparent; padding: 0px; border: 0px solid #000; </head> } #fullscreen:-webkit-full-screen { width: 100% ; height: 100% ; } #fullscreen:-webkit-full-screen>button { position:absolute }
</style>
</style> <button id="fullscreen-button" class="fa fa-arrows-alt fa_custom" style="font-size:23px"></button> <div id="fullscreen"> <iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px;" src= "write the website address you want to embed" frameborder="0" height="100%" width="100%"></iframe> <section> <button type="button" button id="exit-fullscreen-button" class="fa fa-arrows-alt fa_custom_exit" style="font-size:23px;position:absolute"></button> </section>
</div> <script>
var fullscreenButton = document.getElementById("fullscreen-button"); var fullscreenDiv = document.getElementById("fullscreen"); var fullscreenFunc = fullscreenDiv.requestFullscreen; if (!fullscreenFunc) { ['mozRequestFullScreen', 'msRequestFullscreen', 'webkitRequestFullScreen'].forEach(function (req) { fullscreenFunc = fullscreenFunc || fullscreenDiv[req]; }); } function enterFullscreen() { fullscreenFunc.call(fullscreenDiv); } fullscreenButton.addEventListener('click', enterFullscreen); var exitFullscreen = function () { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else { console.log('Fullscreen API is not supported.'); } }; var exitfullscreenButton = document.getElementById('exit-fullscreen-button'); exitfullscreenButton.addEventListener('click', function(e) { e.preventDefault(); exitFullscreen(); });
</script> </body> </html>
________________________________________________________
Copy/paste and Voilà ! ;)
Best.
Mo
I have tried a number of the solutions. The code works perfectly as a standalone (fullscreen functionality working). However, when I embed it into the wix iframe, it doesn't work on my site in preview or published mode. Am I missing something?
Thanks for the link David, but has a serious problem... the user has to add the given page to their iOS home screen in the first place in order to work. The kind of pages I do just can't rely on that... This has to work from the page without having the user do anything at all... there has to be a way....
I've now tested 2 more things... Putting the metatags in the advanced SEO section of the page's settings and putting all those 3 lines in the custom section of the tracking tools and analytics, that also allows to put code....Then I place the suggested java script text on that section too... no results
If anyone has another idea please suggest it here.... This is critical for me at least....
I've tested all solutions provided for that subject in stack overflow... the best one was to put this 3 lines in the metatag:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
That also failed. The other approach I've read is to use javascript. That´s something I never done in my life. and don't have the least idea of how to do in wix. I know where to put corvid code, but java???.... this is killing me...
Ok, I'll go right-away this is emergency status now.... I'm potentially in biiiig trouble... I f I found something that woks I'll post it ASAP!
Great!!! I see that is a code I need to implement in the HTML. The new question for me is how? That documentation says: Sets whether a web application runs in full-screen mode.:
<meta name="apple-mobile-web-app-capable" content="yes">
So I've just tested it and doesn't work. I didn't search for it in the browser because I don't even know what to search. Regarding code I just know the minimal... this is not my main area at all...
I just place that in the meta tag area at the beginning of the html code.. nothing still...
Any creative solution out of this... This just basically is destroying my plans for this year this very second...???
Hello, I implemented this.. tested it in android and everything worked just fine.. but then... in ios devices... it doesn't work at all.... What can it be?
Mo, this is ace! Thanks for sharing.
You might be interested in the new example on how to change an HTML element in an HtmlComponent to full screen. Take a look at Example: Fullscreen with HtmlComponent.
Have fun,
Yisrael
But is there a way to automatically put into full screen?
BTW - the allowFullScreen() function only allows full screen, it doesn't put it into full screen. Hopefully I can find an example how this works.
I'm trying to clear this up for you. Hopefully will have an answer tomorrow.
For some reason, the html code still don't similes to work?
export function button7_click(event, $w) { $w('#html1').allowFullScreen(); console.log('HTML element is now in Fullscreen Mode'); }
The console.log is runs normally but, it don't fullscreen? Did forget to add something?
The HtmlComponent has limitation for security and technical considerations. See the HtmlComponent API docs for more information. Follow the links to pages that detail limitations and usage.