CODEWITHSUNDEEP
javascripthtmlcssresizewindow-resize
Liv MacIntosh
Liv MacIntosh

Reputation: 153

.clientHeight only shrinks as the browser is resized

console.log(document.body.clientHeight);

The main problem is that I am trying to make an image resize to fit whatever size the browser changes to. So using the.clientHeight property I can detect the size, and then alter the image using this logic as part of a function which is called when the "onresize" even is triggered

 var temp = parseInt((document.body.clientHeight-100)*0.90);

The code works as intended when going from a large size to a smaller one. However when you scale the browser window back up the onresize even is successfully called, but the value given by the .clientHeight stays the same so the image does not return back to a larger size!

Any help is appreciated! here is the full function for resizing, and not to worry the variable won't keep the name "temp".

function resize(){
    //This returns the height in pixels of just the inside content pane of the browser (ie not including tool bars etc)
    console.log(document.body.clientHeight);
    //Here I MUST use the parse INT because there is no such thing as half a pixel and it will cause an error.
    var temp = parseInt((document.body.clientHeight-100)*0.90);
    //in order to prevent the browser from dropping the height mod we need to have "px" appended to the value being passed in
    temp= temp+"px";
    console.log(temp);
    document.getElementById("pet").style.height=temp;
}

Upvotes: 0

Views: 993

Answers (1)

Liv MacIntosh
Liv MacIntosh

Reputation: 153

The suggestion to use window.innerHeight or window.outerHeight was in fact a fix to the problem. The image now scales correctly as the browser is adjusted down and up!

Credit goes to Mash

Upvotes: 1

Related Questions