What is the best way to determine the height of a DIV before being visible on a web page?

Question

I have a script that will retrieve data from the server and make a DIV according to it. DIV will contain image, text and other undefined content. I want to organize it freely, so I need to know its height and width before it is shown to the user.

But, in my understanding, I should ask the browser to do it first, otherwise I can not know the width and height.

Is there a better way to know the width and height of a DIV without showing it to the user?

EDIT:

Some good guy tells me that I am using the jquery.width () method, but I am wondering if the DIV contains an image, will jquery wait after loading the image? I do not know the size of the image in advance.

Answer 1

You can set display: none style to div. Then use .width() from jQuery and you will get this value.

Throughout the calculation, he will use .swap() to set the style so that the element is visible, call callback calculates the width and swap style back.

It will install (see code ):

• position: absolute
• visiblity: hidden
• display: block

EDIT (see comments):

If you upload an image and want the image to load before the width calculation, you can attach the width calculation as an onload handler as follows:

 $('#someImg').load(function() { // image is loaded, you can calculate the width console.log($('#test').width())); }); 

HERE is a working example.

Answer 2

jQuery is smart enough to calculate dimensions, but only entered once in the DOM.

 var html = "<span>My Content</span>"; //hide your element then insert it into the webpage var html_el = $(html).hide(); $('body').append(html_el); //get width and height var width = html_el.width(); var height = html_el.height(); //Remove element from page if no longer needed html_el.remove(); 

Also note: the <div> block will be displayed at the width of the screen, so the width of the contained elements is incorrectly specified. To get around this, you add these styles to your container: float:left or display:inline-block . Example:

 var html = "<div><h2>heading</h2><input type=\"text\" /></div>"; var html_el = $(html).css('float','left').hide(); 

Answer 3

set style="display:none" check the width and then show if necessary

Answer 4

If you set style.display to 'block' and style.visibility to 'hidden' , the browser should calculate the dimensions but not display the div .

However, I do not know if all browsers did this correctly.

Answer 5

The best I can come up with is to show it very quickly (it may even be off-screen depending on your situation), then get its size, and then hide it again.

But yes, if the div contains images, they must be loaded first (or have the width / height set on them) before you know the size of the div container. you can use

 $(document).load(function() { calculate height... }) 

to calculate the height only after the full page has been loaded (including images).

Answer 6

I do something similar when height and width are unknown. The data that fill the div with the display: none is the data from the snmp request, so there is some time involved in getting and displaying this data. Here is a small piece of code that I use to adjust the absolute position depending on the height.

 var height = $('.stripPopupContainer', this).height(); $('.stripPopupContainer', this).css({ left: '-5px', top: '-'+ height + 'px' });