Jump to content

How can I get the page height which can change after element hiding?

Go to solution Solved by cyberRobot,

Recommended Posts

Hi again, I am trying to find my page's height which changes when I hide(i.e. changing its height to 0pixel or by using element.style.display: "none")  one element inside it. I found solutions in google as :

  var h1,h2,h3,h4,h5 ; 
  var body = document.body, html = document.documentElement;
  h1 = body.scrollHeight; 
  h2= body.offsetHeight;
  h3= html.scrollHeight; 
  h4= html.offsetHeight; 
  h5= html.clientHeight;
  console.log("bscrH :"+ h1 + ", boffH :"+h2+ ", HtmlscrH:"+h3+", HtmloffH:"+h4+", HtmlcliH:"+h5);

However, when I hide some elements  inside the page with javascript, none of them changed ! How can I get the instant height of my page after hiding an element ? thanks.

Link to comment
Share on other sites

  • Solution

One option would be to write a function that gathers the necessary height information. Then run the function to initialize your height variable(s). If something is hidden after the initialization, run the function again to update the variable(s).

You could also check to see if there's an event listener built into JavaScript for detecting changes to the page height. If something like that is available, you could have that run the necessary code to update the height information.

For example, the "resize" event listener might be useful when gather height information when the user changes their browser's window size. More information can be found here:

Additional listeners may be available for other events that impact page height.

  • Great Answer 1
Link to comment
Share on other sites

Thanks maxxd, I am trying to look for alternative solutions for hiding a top down menu while scrolling down in my web page http://enginery.freecluster.eu 

Although my current code solves my problem in big screens, for tablets and smartphones my page could not seem correct since height condition to hide menu remains too low. So I wanted to direct to alternative solutions. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.