Set width and height based on viewport dimentions - Vanilla Javascript
/******************************************************* *
**
** Function to set an element dimensions relative
** to the viewport dimensions.
**
** Pass the selector and the dimensions you want
** to set. If you need just the height, set width
** to 0 or false.
**
** No dependency.
**
* *******************************************************/
function setDimensions(el, width, height) {
var el = document.querySelectorAll(el),
w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
if(width) {
for (var i = 0; i < el.length; ++i) {
el[i].style.width = w * (width/100) + "px";
}
}
if(height) {
for (var i = 0; i < el.length; ++i) {
el[i].style.height = h * (height/100) + "px";
}
}
}
Written by Elton Mesquita
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Viewport
Authors
benjamincharity
1.172K
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#