Using a variable within a calc() function

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>


<?php echo $mobile_menu_height ?>

2 Answers
2

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

window.innerHeight

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


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>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.