Set JS to calculate the size of a div

Asked

Viewed 249 times

2

I made a one-page website 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 point is that with the window the site opens with the Divs all crushed, ai after it loads everything it puts the right size.

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

I want when the site opens each div to have at least the screen size. 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

  • you cannot show html code?

  • 1

    How do you want it to look? You can hide the Ivs until the content loads.

  • @bfavaretto edited

3 answers

2

I want when the site opens each div to have at least the screen size

You can achieve this by putting height: 100% in these Ivs. But beware: all 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%;
}

1

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

0

What happens now is that the Divs open all crushed and after a time they adjust to the correct size

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

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.