Using a variable within a calc() function

Question

I feel like I've tried everything, but I just can't seem to get this working. I have a variable called 't' that stores the value of $mobile_menu_height. This value is currently set to 280px;

var t = "<?php $mobile_menu_height ?>";  //this is currently 280px

Further down in the script I would like to get rid of the hard coded "288px" (I will leave 8px hardcoded) in this line

y.style.height = "calc(100vh - 288px)";

and instead be using the variable (I've tried using 't' and '$mobile_menu_height' but I can't get either to work in my calc() function. Ideally it would look something like this:

y.style.height = "calc(100vh - 8px - t)";

or

y.style.height = "calc(100vh - 8px - $mobile_menu_height)";

But I am simply stuck on how to get this working. Could it possibly be an issue with WordPress sanitization (or lack thereof) of the input of $mobile_menu_height? I have tried inputing both with and without the "px" measurement ie "280" and "280px".

Full script I am working on here:

    <script>
        function toggleMobileNav() {
            var x = document.getElementById("container-mobile-menu");
            var y = document.getElementById("content-container");
            var t = "<?php $mobile_menu_height ?>";

            if (x.style.display === "none") {
                x.style.display = "block";
                y.style.top = t;
                y.style.height = "calc(100vh - 288px)";
            } else {
                x.style.display = "none";
                y.style.top = "62px";
                y.style.height = "calc(100vh - 68px)";
            }
        }
    </script>

Can't you just concatenate the string? You should also strongly consider meaningful variable names - variables that are single letters are very difficult to make sense of — CertainPerformance
– CertainPerformance, Commented Aug 23, 2018 at 5:35
You need to echo the value: <?php echo $mobile_menu_height ?> or it will simply result in an empty string in your js-code. — M. Eriksson
– M. Eriksson, Commented Aug 23, 2018 at 5:45

Potato Salad · Accepted Answer · 2018-08-23 05:38:07Z

1

You can use window.innerHeight to get the 100vh equivalent and manually compute like so

const windowH = window.innerHeight + 8 + parseInt(t);
y.style.height = windowH + "px";

answered Aug 23, 2018 at 5:38

Potato Salad

4,6603 gold badges22 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zowie · Accepted Answer · 2018-08-23 13:55:09Z

Thanks guys! It used a combination of your answers to fix things. I was indeed missing an echo, and the window.innerHeight worked like magic. I'll clean up those variable names now. Fixed code here for those wondering.

    <?php
        $mobile_menu_height = get_theme_mod( 'mobile_menu_height_setting', '' );
    ?>
    <script>
        function toggleMobileNav() {
            var x = document.getElementById("container-mobile-menu");
            var y = document.getElementById("content-container");
            var mobile_menu_content_drop = "<?php echo $mobile_menu_height; ?>";
            if (x.style.display === "none") {
                x.style.display = "block";
                y.style.top = mobile_menu_content_drop;
                const windowH = window.innerHeight - 8 - parseInt(mobile_menu_content_drop);
                y.style.height = windowH + "px";
            } else {
                x.style.display = "none";
                y.style.top = "62px";
                y.style.height = "calc(100vh - 68px)";
            }
        }
    </script>

Collectives™ on Stack Overflow

Using a variable within a calc() function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related