I’m trying to write a script using the jQuery CSS method with a variable, but I can’t figure out the syntax.
What I need is jQuery(‘#sidecontent’).css(‘height’, ‘calc (100vh - $var)’);
What’s the right syntax to subtract the variable from the 100vh?
As your question is not very clear I can only guess but maybe it’s
...css('height', (100 - $var)+'vh');
But Normally in JavaScript variables don’t start with a $. So maybe I am wrong
Assuming the variable has units defined you could do this.
var elHeight = "200px";
$("#sidecontent").css("height", "calc(100vh - " + elHeight + ")");
It equates to:
<div id="sidecontent" style="height: calc(100vh - 200px);">test</div>
If the variable doesn’t have units and its supposed to be pixels then add px to it.
e.g.
var elHeight = 200;
$("#sidecontent").css("height", "calc(100vh - " + elHeight + "px" + ")");
However I’m thinking that your problem may be solvable using CSS and no JS but does depend on situation. The danger with setting a height in JS is that you need to do it on resize and on text zoom etc otherwise the height may change during use so is not the best way to do things although sometimes may be necessary.
Maybe the code was supposed to be a template literal. ${var} perhaps?
That won’t be the same as calc() converts the vh into pixels to allow pixels to be subtracted from it. That example will just subtract something from 100 which is not the same :). (Unless I’m mistaken as I often am - or if both units are vh units).
That’s why I wrote it’s unclear to me what he wants to achieve. Could also be that he wants to have 50vh after he subtracted 50 from 100. you never know 
1 Like
Sorry, yes of course. You could be right
More clarification is necessary and as you say we are just guessing at the moment 
1 Like
You forgot the closing parenthesis for calc🙂
var elHeight = "200px";
$("#sidecontent").css("height", "calc(100vh - " + elHeight + ")");
1 Like
Well spotted (I’ve added it now ;))
Thanks everybody for the input. I’m trying to make a page template with a sidebar that sticks to the top and has a height of 100vh minus whatever the height of the header is (so that it occupies the entire viewport height, minus the header).
The problem is that the header isn’t always the same height.
The header is about 180px tall until the header is scrolled, then it’s between 55 and 180px, then it’s 55px. That’s because there’s a “non-scrolled” header with 2 rows (180px tall), and a “scrolled down header” that’s only a single row (55px tall). Then, of course, somewhere between 55px and 180px as the user scrolls down.
Yes if you are doing a dynamic header that scrolls down then you will need JS to work out where to place the top of the fixed sidemenu as CSS alone probably can’t do that. Just remember to check the height of the element on resize also and if possible debounce the scroll/resize events etc.
I haven’t tried to incorporate debounce yet, but I to have something wrong here…
I can’t get the #sidecontent height to get adjusted on scroll.
jQuery( window ).scroll(function() {
let headerHeight = jQuery('.td-header-template-wrap').height();
let stickyHeaderHeight = jQuery('.td-header-desktop-sticky-wrap').height();
let yScroll = document.documentElement.scrollTop;
if (document.documentElement.scrollTop > headerHeight) {
jQuery('#sidecontent').addClass('active');
jQuery('#sidecontent').css('top', '55px');
jQuery('#sidecontent').css('height', 'calc(100vh - 55px)');
} else {
jQuery('#sidecontent').removeClass('active');
jQuery('#sidecontent').css('top', '0');
jQuery("#sidecontent").css("height", "calc(100vh - " + yScroll+ ")");
jQuery('#sidecontent').css('padding-top', '0');
}
});
The page looks to be working to me. Have you fixed it now ?
It mostly works, except the height isn’t updating inbetween the “Full header” (about 180px) and the “scrolled-down header” (55px). Try scrolling down the page < 180px and you’ll notice a gap between the bottom of the window and the bottom of the #sidecontent.
I have to have something wrong, because the height of the #sidecontent isn’t changing
For me it looks like you only use the wrong trashhold to start your special case. You put the small header in place when the whole header is scrolled out. Instead you should put the small header in as far as the top of the header moved out. Hope this is understandable
1 Like
Also when you return to the start you still have the small header (55px) css being applied.
<div id="sidecontent" style="height: calc(100vh - 55px); top: 0px; padding-top: 0px;" class="">
That’s not the same as when the page opens initially. The full header is 180px.
e.g.
<div id="sidecontent" style="height: calc(100vh - 180px);">
You need to reset it back to 180px.
This is probably of no use at this stage but I had some spare time and had a go at a bare bones demo just to work out the concept. Its rough and ready but seems to work although could do with refinement. It will work with fluid height headers and maintain the scrolling full height (minus header) for the sidebar.
Much room for improvement but as a proof of concept seems promising.
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.