CODEWITHSUNDEEP
javascriptcssviewport
Tobias Alt
Tobias Alt

Reputation: 483

JavaScript calculate with viewport width/height

I am trying to set a responsive point in my mobile Webview and did this:

var w = window.innerWidth-40;
var h = window.innerHeight-100;

This works great so far. But the values -40 and -100 are not in the viewport scaling height and width.

When I do this: 

var w = window.innerWidth-40vw;
var h = window.innerHeight-100vh;

as it should be to stay responsive and relative to the viewport - the JS does not work anymore. I think vh and vw works only in CSS ? How can I achieve this in JS ?

Pleas no JQuery solutions - only JS!

Thanks

Upvotes: 20

Views: 61063

Answers (8)

Yashar Aliabbasi
Yashar Aliabbasi

Reputation: 2719

Based on this site you can use the following util functions to calculate your desired values as a function of a percent of screen width or height:

function vh(percent) {
  var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  return (percent * h) / 100;
}

function vw(percent) {
  var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  return (percent * w) / 100;
}

function vmin(percent) {
  return Math.min(vh(percent), vw(percent));
}

function vmax(percent) {
  return Math.max(vh(percent), vw(percent));
}

console.info(vh(20), Math.max(document.documentElement.clientHeight, window.innerHeight || 0));
console.info(vw(30), Math.max(document.documentElement.clientWidth, window.innerWidth || 0));
console.info(vmin(20));
console.info(vmax(20));

I used this incredible question in my code!

Upvotes: 50

Weilory
Weilory

Reputation: 3101

get vmin in px

function vmin(){
    return window.innerHeight < window.innerWidth ? window.innerHeight: window.innerWidth;
}

Upvotes: 0

1337ingDisorder
1337ingDisorder

Reputation: 893

This isn't a universal solution, but it's a much simpler implementation if you're working with a page that is always 100% displayed within the viewport (ie, if the body doesn't have to be scrolled and always matches the window width and height).

let vh = document.body.getBoundingClientRect().height;

This sets the vh variable to the pixel value of the document body with just one line of code.

Useful for game dev and other scenarios where you have the body affixed to the viewport.

Upvotes: 0

Fatih Mert Doğancan
Fatih Mert Doğancan

Reputation: 1092

this is my solve with you can use CSS;

    // calc dynamic customer device height/width
    let vh = window.innerHeight * 0.01,
        vw = window.innerWidth * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
    document.documentElement.style.setProperty('--vw', `${vw}px`);

How to use in CSS ?

If you will use 100vh or 100vw with this method, you should set 100vh/100vw for uncompatible browser.

Examples;

.wrapper{
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
}

.slide-container{
    height: calc(var(--vh, 1vh) * 100 - var(--menuHeight) - var(--footerHeight));
}

.little-image{
    width: calc(var(--vw, 1vw) * 5);
    margin-bottom: calc(var(--vh, 1vh) * 1);
}

/* and more.. */

Upvotes: 0

user11331664
user11331664

Reputation:

you just need to surround it in quotes I think. var w = window.innerWidth = "40vw" var w = window.innerWidth = "40vw"

Upvotes: 0

Weslbyno19
Weslbyno19

Reputation: 1

The simplest way to do this, if you can fully edit the page, is to make a css class that has -40vw and -100vh like so:

CSS:

.class{
    width: -40vw;
    height: -100vh;
}

JS:

element.classList.add("class");

Note: "classList" is not supported in Internet Explorer 9. If you want it to work in all browsers, use this for JS instead:

function myFunction() {
    var element, name, arr;
    element = document.getElementById("myDIV");
    name = "mystyle";
    arr = element.className.split(" ");
    if (arr.indexOf(name) == -1) {
        element.className += " " + name;
    }
}

Upvotes: 0

Arun V K
Arun V K

Reputation: 94

Try this: 

function getViewport() {

 var viewPortWidth;
 var viewPortHeight;

 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 if (typeof window.innerWidth != 'undefined') {
   viewPortWidth = window.innerWidth,
   viewPortHeight = window.innerHeight
 }

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
 else if (typeof document.documentElement != 'undefined'
 && typeof document.documentElement.clientWidth !=
 'undefined' && document.documentElement.clientWidth != 0) {
    viewPortWidth = document.documentElement.clientWidth,
    viewPortHeight = document.documentElement.clientHeight
 }

 // older versions of IE
 else {
   viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
   viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
 }
 return [viewPortWidth, viewPortHeight];
}

Reference: http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

Upvotes: 5

Justinas
Justinas

Reputation: 43441

Problem is that JS does not have 40vh, calculate how much pixels is 40vh first to use it. It will throw error when doing 1000 - 40vh

40vh means 40 % of viewport height. So window.innerHeight * 0.4 == 40vh

Also there is no such thing as wh, only vh (% of viewport height)

Upvotes: 2

Related Questions