Develop Reference

Set width of scrollbar in JS to 8px

I need to amend the following code that is detecting the scrollbar width. It is opening a fullscreen menu by applying "overflow-y:hidden" to "html" when the menu is opened. This code should add a fake scrollbar to stop the content jumping to the right. Im also using a custom scrollbar that is 8px wide, so I think I just need to amend the code below to make the fake scrollbar 8px.
menuButton.addEventListener('click', () => {
// get width before hiding scrollbar
let oldWidth = document.documentElement.clientWidth;
// toggle CSS class that sets overflow to hidden
document.querySelector("html").classList.toggle("no-scroll");
// get new width after hiding scrollbar
let newWidth = document.documentElement.clientWidth;
// set margin-right value equal to width of the scrollbar
let scrollbarWidth = Math.max(0, newWidth - oldWidth);
document.body.style.marginRight = `${scrollbarWidth}px`;
});

How resize a div height based on width with pure JavaScript

while resizing div change height based on width with constraint ratio
#example div width:300 and height:600 next Ill change width to 400 height change to 800 based on width

You need to find the current width of the element and then reset its height.
Here's a simple example of doing that. It is using offsetWidth to get the current width, but depending on your use case that may or may not be good enough. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth
Typically, offsetWidth is a measurement in pixels of the element's CSS width, including any borders, padding, and vertical scrollbars (if rendered). It does not include the width of pseudo-elements such as ::before or ::after. If the element is hidden (for example, by setting style.display on the element or one of its ancestors to "none"), then 0 is returned.
// Function to set the height of an element proportional to its width
// el is the element we are interested in.
// ratio is the ratio of width to height that we want
function setHeight(el, ratio) {
// first we need to find out what the width of el currently is
const w = el.offsetWidth; //this will always return an integer
console.log(w);
el.style.height = (w * ratio) + 'px';
//note you could also investigate getBoundingClientRect().width for a more general case when there have been transformations
}
<div class="element" style="width: 200px; height: 200px; background-color: magenta;" onclick="setHeight(this, 600/300);">Click me</div>
offsetWidth always returns an integer, and of course there may have been some other calculations which make the width not an integer. Also what if there have been transformations? For a more comprehensive look at dimensions and what they mean see https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

Calculating a responsive header's height and using the result in the style of another div's height

Please bear with me as I attempt to explain the issue I'm having. It's kinda tricky!
I have a fixed header that includes a responsive image, because of this, the height of the header depends on the width of the device. I also have a fixed footer sitting on the bottom of the screen. In-between the header and footer I have a fixed div with scrollable overflow positioned towards the left side of the screen. I need the fixed div in-between the header and footer to have a HEIGHT that is the following:
calc(100% - the header's height in px - the footer's height in px)
To do this, I know I need to use Javascript or jQuery, but I'm unsure how to go about setting that up. Furthermore, I need that styling to only be applied on a specific media query.
I have similar code that adds padding to the top and bottom of another div that is centered between the header and footer. This is the code that I'm using and it works perfectly (in the fiddle I've provided at the bottom, I don't use "DOMContentLoaded" because it doesn't quite work with JSFiddle like it should. same idea slightly different syntax in the fiddle) :
document.addEventListener("DOMContentLoaded", function() {
var headerHeight = document.getElementById('header').clientHeight;
document.getElementById("content").style.paddingTop = headerHeight + "px";
var footerHeight = document.getElementById('footer').clientHeight;
document.getElementById("content").style.paddingBottom = footerHeight + "px";
}, true);
window.addEventListener('resize', function() {
var headerHeight = document.getElementById('header').clientHeight;
document.getElementById("content").style.paddingTop = headerHeight+ "px";
var footerHeight = document.getElementById('footer').clientHeight;
document.getElementById("content").style.paddingBottom = footerHeight + "px";
}, true);
I need to use code similar to that, but instead of styling the div "content", I need to be styling a div titled "description" and instead of styling the padding, I need to be styling the height. The last difference is that the styling should only be applied to this media query:
#media screen and (orientation: landscape)
I've created a JSFiddle: http://jsfiddle.net/yg7mjhvn/
Thank you guys so much! I really appreciate it.

If I get it correctly, you just need to set the height of content/description div calc(100% - <header-height> - <footer-height>) with javascript.
So, to do that add a function setDescriptionHeight to your js code which sets the height of description div and add it as a load and resize event handler. All this will be done like this.
function setContentHeight() {
if (window.innerWidth > window.innerHeight) { // window.orientation === 90 for checking the real orientation
var headerHeight = document.getElementById('header').clientHeight;
var footerHeight = document.getElementById('footer').clientHeight;
document.getElementById("description").style.height = `calc(100% - ${headerHeight}px - ${footerHeight}px)`;
} else{
document.getElementById("description").style.height = "";
}
document.getElementById("description").style.top = `${headerHeight}px`;
}
window.addEventListener('load', setContentHeight, true);
window.addEventListener('resize', setContentHeight, true);
Now, you see that it has a condition window.orientation === 90. That is there to check whether the device is in landscape orientation, and if it is then the styling is done.
note that window.innerHeight < window.innerWidth simply detects whether the width is greater than the height. And, window.orientation === 90 checks the device orientation and it won't be 90 for a laptop or a dekstop screen. Moreover, it is deprecated now and you can see more about it here

Sticky Footer + 100% Height + Margin Between Them

My overall goal is make a margin between content with 100% height and a sticky footer; one that shows the body background through it.
As of now, I'm using jQuery to figure out the height of the document and subtract the height of the footer plus a margin, then apply that new size to a DIV with the ID of "content".
I then use jQuery's resize() function to also size the div if the size of the viewport changes so if a user resizes his or her browser window, or zooms in, the size of the DIV will update automatically.
Unfortunately, when I switch directions in zooming (i.e. zoom out after zooming in, and vice versa), the Javascript doesn't recognize the viewport resizing, leaving me with a too-long or too-short background on the content. In addition, this resizing does not recognize content. I'm considering setting a min-height in the CSS, but if there's a way to do it in Javascript, I'm all ears.
I will accept pure CSS-and-HTML solutions, as it seems like it should be possible, but I have exhausted myself looking for for an answer.
My current Javascript (running jQuery library 1.7.2):
$(document).ready(function(){
var height1 = $(document).height(); // height of full document
var height2 = 100; // height of footer plus margin
var height_diff = height1 - height2 +"px";
document.getElementById('content').style.height = height_diff; // Set the remaining height in test DIV.
});
$(window).resize(function () {
var height1 = $(document).height(); // height of full document
var height2 = $("#footer").height(); // height of footer
var height_diff = height1 - height2 +"px";
document.getElementById('content').style.height = height_diff; // Set the remaining height in test DIV.
});
Any direction is greatly appreciated.
EDIT
Got it, all without Javascript. http://jsfiddle.net/Rpdr9/610/

I made something on fiddle.
Looks to me like that is what you want.
Check it out: http://jsfiddle.net/XbXDn/
Orange color: content
grey color : footer
The important thing is to also give your body and html the height:100%; property.
As you will see, the content div auto grows (even over 100%) as you add more text,
though the 25em margin between content and footer is always kept.
I deliberately took a huge margin between content and footer, just so you can see it works :)

Resize DIV but maintain aspect ratio when window is resized

I have a DIV element in my page, that I want to resize when the window is resized, but maintain a square aspect ratio. I want to set the width to be 50% of the browser width, and the height to be equal to the width. How can I do this?
If the solution requires Javascript that's fine but I'd prefer not to use jQuery.

Use width:50% in css and window.onresize event for resize. Have a look
http://jsfiddle.net/536UJ/

You can set the width to be 50% of the window in css;
you just need to adjust the height-
window.onresize=function(){
var who= document.getElementById('divtoresize');
who.style.height=who.offsetWidth+'px';
}

I'm not sure you can make one property (height) equal to other property (width) in CSS... well, at least in CSS 2.
But you of course can do this in JavaScript.
<div id = "myDiv"></div>
<script>
document.onresize = function() {
var element = document.getElementById('myDiv'); // the element
var size = Math.floor(window.innerWidth / 2) + 'px'; // 50% window width
element.style.width = size; // set the width
element.style.height = size; // set the height
};
</script>
Note that the window.innerWidth property is not present in IE. There, you'll have to use document.documentElement.clientWidth.