Question 43827 in Html Question posted in
Some basic documentation can be found here.

changing css style with javascript not working when full screen in Unity WebGL – Html

I am showing/hiding div element with this code. It works fine, but once the app goes full screen, the div element stops updating. Ie it seems that when full screen, the changes in css are not working/updating anymore

document.addEventListener("keypress", function (event) {

    if (event.keyCode == 122) {
        disableCartModal();
    }

    if (event.keyCode == 120) {
        enableCartModal();
    }
});

function disableCartModal() {
    document.getElementById("cart-modal").style.display = "none";
}

function enableCartModal() {
    document.getElementById("cart-modal").style.display = "block";
}

Fullscreen code

document.addEventListener('fullscreenchange', exitHandler); document.addEventListener('webkitfullscreenchange', exitHandler); document.addEventListener('mozfullscreenchange', exitHandler); document.addEventListener('MSFullscreenChange', exitHandler);
    
    function exitHandler() {
    
        var element = document.documentElement;
    
        if (element.requestFullScreen) {
           element.requestFullScreen();
        } else if (element.mozRequestFullScreen) {
           element.mozRequestFullScreen();
        } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
        } 
}

Edit: I am running javascript from Unity WebGL

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    Since this is a Unity WebGL project, I was assuming that all the html/javascript code is a separate thing. But I was switching fullscreen with Unity Screen.fullscreen, which essentially completely blocked any updates to css. So if by some chance anyone else comes to a situation, where they have Unity WebGL, that has to be full screen and they want to edit css through javascript called from Unity, make sure to trigger full screen from javascript itself, not from Unity.


  2. 0

    As event.keyCode is deprecated (see here) you could try to check for event.key (see values here).
    Maybe your browser has dropped support or has the keys in question reserved for special actions.

    Login or Signup to reply.
  3. 0

    I tried out your code and found it to work in both Firefox and Chrome… I added some debugging in the console to ensure things were firing as expected. I would suggest adding some debug statements to your code to make sure that you are hitting what you expect.

    Also ensure that the part of the document you are testing has focus – testing, I found that if there are frames/ developer tools selected, the event would not be processed.

    Also note, as Bastian points out, this is NOT the recommended way to do keyboard events in modern browsers. Support may disappear.

    Modern method:

    window.addEventListener(
    "keydown",
    (event) => {
        console.log("evt fired: " + event.key);
        if (event.key == "z") {//z
            console.log("z");
            disableCartModal();
        }

        if (event.key == "x") {//X
            console.log("x");
            enableCartModal();
        }
    },
    true
);

    My experiment with your code (debug statements added):

    <!DOCTYPE html>
<html>

<head>
    <title>keytest</title>

</head>
<body>
    <div>Precart</div>
    <div id="cart-modal">Cart</div>
    <div>Postcart</div>
    <script>
        console.info("script commencing");
        document.addEventListener("keypress", function (event) {
            console.log( "evt fired: "+ event.keyCode);
            if (event.keyCode == 122) {//Z
                console.log( "Z");
                disableCartModal();
            }

            if (event.keyCode == 120) {//X
                console.log( "X");
                enableCartModal();
            }
        });

        function disableCartModal() {
            document.getElementById("cart-modal").style.display = "none";
        }

        function enableCartModal() {
            document.getElementById("cart-modal").style.display = "block";
        }
        console.info("script done");
    </script>
</body>
</html>
    Login or Signup to reply.
  4. 0

    I don’t think you quite understand the meaning of a minimal reproducible example. It doesn’t help to just add a tiny bit of code to your question, you should try to create a complete example, and test it yourself, so we can work with it to try to reproduce your problem.

    You can run my attempt below, even full screen, and you’ll see it works just fine. At least, it does for me.

    function disableCartModal() {
    document.getElementById("cart-modal").style.display = "none";
}

function enableCartModal() {
    document.getElementById("cart-modal").style.display = "block";
}

window.addEventListener(
    "keydown",
    (event) => {
        console.log("evt fired: " + event.key);
        if (event.key == "z") { //z
            console.log("z");
            disableCartModal();
        }

        if (event.key == "x") { //X
            console.log("x");
            enableCartModal();
        }
    },
    true
); 

document.addEventListener('fullscreenchange', exitHandler); document.addEventListener('webkitfullscreenchange', exitHandler); document.addEventListener('mozfullscreenchange', exitHandler); document.addEventListener('MSFullscreenChange', exitHandler);
    
    function exitHandler() {
    
        var element = document.documentElement;
    
        if (element.requestFullScreen) {
           element.requestFullScreen();
        } else if (element.mozRequestFullScreen) {
           element.mozRequestFullScreen();
        } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
        } 
}
    div {
  background-color: green;
  color: white;
  height: 100px;
}
#cart-modal {
  background-color: red;
  color: white;
  height: 100px;
}
        <div>Precart</div>
    <div id="cart-modal">Cart</div>
    <div>Postcart</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search