VEIT JOSEF SCHNEIDER
UX Design | Visual Design | Audio Design

How to expand Voxel desktop view to full screen

Category:

Tags:

This is a small feature to expand Voxel desktop view. Added as an icon on desktop top bar, for example. By clicking it your desktop users can enjoy your Voxel website in full screen mode!

To make this work you just need to assign an ID to the top menu VX action list item you want this function to have. In my case the expand icon.

#1: In the header template give the item the ID “full-screen-button” that you want to have the expand function.

#2: Now you need to add a code snippet, for example as javascript snippet through a plugin like WPCode to be added to the site-wide footer:

document.addEventListener("DOMContentLoaded", function() {
    var fullscreenButton = document.getElementById("full-screen-button");

    if (fullscreenButton) {
        fullscreenButton.addEventListener("click", function() {
            toggleFullScreen();
        });
    }
});

function toggleFullScreen() {
    if (!document.fullscreenElement &&    // Alternative standard method
        !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
        if (document.documentElement.requestFullscreen) {
            document.documentElement.requestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) {
            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if (document.documentElement.msRequestFullscreen) {
            document.documentElement.msRequestFullscreen();
        }
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}

And you are good to go! 🙂 Have fun.

If you do not have Voxel yet, you can support me by getting it through this link: Get Voxel

And check out my other Voxel related blog posts!

If you like my tutorials and snippets, and want to motivate me, or just say thanks,
feel free to support me by buying me a tea (as I do not drink coffee) :)

This website may contain affiliate links. If you click on a link and make a purchase, I may earn a small commission at no additional cost to you. This helps support the time and effort put into maintaining this website. I only recommend products and services I genuinely believe will be helpful to you. Thank you for your support!