0

I need to get the actual width and height of the shareddiv before populating it with content so that i can determine how many panels can fit into the shareddiv based on the device or browser resolution

<div id="outerdiv">
<div style="width: 100% ;height:100%;" id="sharedDiv" ></div>
</div>

The alert returns different values at different locations in the code. 

var divow = document.getElementById('sharedDiv').offsetWidth;
        alert("div offsetwidth"+divow);
user1071096
  • 155
  • 1
  • 3
  • 14
  • You would have to post more code for us to help figure out why it returns different values at different locations in the code. Does the actual width of the div change between these different points in the code? From what I can see here, it looks like you are on the right track. – Travesty3 Apr 11 '12 at 13:35
  • Wait, are you actually saying that the _width_ of the div varies according to where you query its value? Hm. – Mr Lister Apr 11 '12 at 13:51
  • Yes!If I specify the style with width=100% and height=100%,I thought div will take the device width and height.So that before rendering the controls into this div area,if I could get the size of the div ,it will be equal to the device width and height and ,easily I can calculate the number of controls correctly fit into the device. – user1071096 Apr 12 '12 at 03:13

2 Answers2

0

you'll only ever get a valid measurement once the DOM and your resources (CSS and images) are loaded. until that happens elements in the page may move around and change size (progressive rendering). therefore you should do your measurements in an event handler like onload. you should also recalculate on a resize event.

SpliFF
  • 38,186
  • 16
  • 91
  • 120
  • The div size is needed before rendering any controls into it,so that the number of controls fit into this div area as per the device resolution can be detected.But,yes! the width of the div varies according to where I query. – user1071096 Apr 12 '12 at 02:47
  • i know that. read my answer carefully. i'm trying to explain that when you query while the page is loading (like through an inline script tag) what you are actually doing is taking a sample of the elements' dimensions before the final dimensions are known. If you wait for the page to actually load *then* create your controls you will get a consistent result. – SpliFF Apr 12 '12 at 04:39
0

have you tried using jquery?

var divow = $("#sharedDiv").outerWidth();

or better yet why not just

var divow = $(window).height();
Ann B. G.
  • 304
  • 2
  • 6
  • :Without specifying any meta tag with the $(window).height(); gives the value as Landscape: 980x661.But I didnt understand the screen resolution of my ipad is 768x1024 then how can be the window size 980x1208.?So,with this width and height(980x1208)if I calculate the number of controls fit into the div area and render ,the controls are going out of screen width and height and default scroll will appear or I need to pinch/zoom to see all the controls which I dont want. – user1071096 Apr 12 '12 at 03:01
  • can u tell me what exactly u wanted to accomplish by getting the width and height of the window? maybe i can help u better knowing what's it exactly for.. – Ann B. G. Apr 12 '12 at 13:20