Set JS to calculate the size of a div

Question

Set JS to calculate the size of a div

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

2

I made a one-page site and to calculate the size of the main divs I used this JS:

    function tamanhos(){
        $('#a, #b, #c, #d').css('min-height', $(window).height());
    }
    $(window).load(tamanhos);
    $(window).resize(tamanhos);

The issue is that with window the site opens with the divs all crushed, then after loading everything it puts the right size.

I have some other option to calculate the size of the divs, but that does not break while the site is loading?

I want when the site opens each div to have at least the size of the screen. What happens now is that the divs open all crushed and after a while they adjust to the correct size.

HTML:

<div id='conteudo'>
<div id='a'></div>
<div id='b'></div>
<div id='c'></div>
<div id='d'></div>
</div>

javascript jquery

asked by anonymous 08.05.2015 / 16:09

3 answers

Cancel backspace action How to create schema and use it in table creation

score 2 · Answer 1

I want when the site opens each div has at least the size of the screen

You can achieve this by putting height: 100% in these divs. But beware: all the elements above them in the hierarchy also need to have this statement.

For example, for this HTML:

<body>
   <div id='conteudo'>
      <div id='a'></div>
      <div id='b'></div>
      <div id='c'></div>
      <div id='d'></div>
   </div>
</body>

You would need:

html, body {
   height: 100%;
}
#conteudo {
   height: 100%;
}
#a, #b, #c, #d {
   height: 100%;
}

score 1 · Answer 2

You can put a dialog (modal type) on the screen and a loading message ... with everything else hidden $('body').hide() , and after your javascript code is finished you give $('body').show()

score 0 · Answer 3

What happens now is that the divs open all crushed and after one time they set the correct size

This is because js has not been loaded yet, an alternative would be to show the divs when js was loaded or do as the bfavaretto explained.