[Pro] Button for browser full screen mode

Please forgive my lack of experience.

I have been reading over various discussions within the forum on how to install a button that will allow the browser to go full screen if the user likes.

It seems rather simple and easy to implement, unfortunately I am having a great deal of confusion as to how I should get this into my page.

The example link I list below has almost exactly what I am looking for aside from the look of the actual buttons. Essentially, a button that initiates fullscreen in the browser is what I desire. Any suggestions on how to do this effectively?

I am reaching out for help as a first time poster, and again please forgive my inability to figure this out on my own. I have little knowledge on how to implement Javascripts directly into my pages, but I am familiar and confident with pre-made actions and little HTML scripts.

Thanks in advance.

http://robnyman.github.io/fullscreen/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I have an example at http://www.deltadesign.co/fw_examples/starry-night-background.html

I have to go out but I will try and put some info together for you later - unless someone beats me to it.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

OK - here it is. The code block below should be saved as a .js file and referenced in your FW page in Page>Html Markup in the Before section using the following line

<script src="http://www.yoursite.com/whatever-fullscreen.js"></script>

Save the code below in a plain text editor as whatever-fullscreen.js and FTP it to your site.

(function () {
    var viewFullScreen = document.getElementById("view-fullscreen");
    if (viewFullScreen) {
        viewFullScreen.addEventListener("click", function () {
            var docElm = document.documentElement;
            if (docElm.requestFullscreen) {
                docElm.requestFullscreen();
            }
            else if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
            }
            else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
            }
        }, false);
    }

    var cancelFullScreen = document.getElementById("cancel-fullscreen");
    if (cancelFullScreen) {
        cancelFullScreen.addEventListener("click", function () {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            }
            else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            }
            else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            }
        }, false);
    }

})();

Now on your FW page create a couple of graphics - one for activating FullScreen and one for cancelling. Give them the Name/IDs of ‘view-fullscreen’ and ‘cancel-fullscreen’ - you can add rollover effects etc. to them.

Example at http://www.deltadesign.co/FW6Test/fullscreen.html

Not sure of support in Browsers other then Webkit and Mozilla - probably not in IE at all yet.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Tremendous thanks.

I appreciate the speedy information. I have applied the advice into a test page and I believe it has worked out with success.

Again, I cannot give enough thanks.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options