423,491 Members | 1,369 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 423,491 IT Pros & Developers. It's quick & easy.

getting hidden image width/height in IE

epots9
Expert 100+
P: 1,351
I have a image inside of a div
[html]
<div id="image">
<div id="loader">
<img id="loaderImage" src="assets/loader.gif" alt="loading..." />
</div>
<div id="loaded">
<img id="picture" src="" alt="" /><!--image in question-->
<div id="closeAll" onclick="closeAll();">X</div>
</div>
</div>
[/html]

the div "image" is hidden until a button is click, and the div "loaded" is hidden until a certain time.

the javascript in question:
Expand|Select|Wrap|Line Numbers
  1. var image = document.getElementById("image").style;
  2. var width = document.getElementById("picture").width;
  3. var height = document.getElementById("picture").height;
  4. document.getElementById("picture").style.width = width + "px";
  5. document.getElementById("picture").style.height = height + "px";
  6. height += 15;
  7. image.display = "block";
  8. image.width = width + "px";
  9. image.height = height + "px";
  10.  
the problem is that in ie7 width and height return zero causing the div "image" to be 0x0....but in firefox width and height return the correct values and the div is sized correctly. so, i'm looking for a work around.

thanks in advance..
Aug 5 '07 #1
Share this Question
Share on Google+
1 Reply


epots9
Expert 100+
P: 1,351
I have a image inside of a div
[html]
<div id="image">
<div id="loader">
<img id="loaderImage" src="assets/loader.gif" alt="loading..." />
</div>
<div id="loaded">
<img id="picture" src="" alt="" /><!--image in question-->
<div id="closeAll" onclick="closeAll();">X</div>
</div>
</div>
[/html]

the div "image" is hidden until a button is click, and the div "loaded" is hidden until a certain time.

the javascript in question:
Expand|Select|Wrap|Line Numbers
  1. var image = document.getElementById("image").style;
  2. var width = document.getElementById("picture").width;
  3. var height = document.getElementById("picture").height;
  4. document.getElementById("picture").style.width = width + "px";
  5. document.getElementById("picture").style.height = height + "px";
  6. height += 15;
  7. image.display = "block";
  8. image.width = width + "px";
  9. image.height = height + "px";
  10.  
the problem is that in ie7 width and height return zero causing the div "image" to be 0x0....but in firefox width and height return the correct values and the div is sized correctly. so, i'm looking for a work around.

thanks in advance..
never mind, i solved it.

all i had to do was relocate the javascript to after i make the div visible and width and height were returning the correct values (working with ie7 and firefox).
Aug 5 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.