How to image size inside invisible element?

[wellofsouls]

for example, something like this:

<div style="display:none;">
<span>
<table>
<tr>
<td>
<img id="image1" src="something.png" style="width:50px; height:100px;" alt="some image" />
</td>
</tr>
</span>
</div>
<script type="text/javascript>
var mi=document.getElementById('image1');
var height=mi.offsetHeight;
var width=mi.offsetWidth;
</script>

since the whole div is invisible, the height and width are both 0, so is there anyway to get the numbers 100 and 50 for height and width?

From my understanding, if I know which element has the display:none style, I can change the style to display:block and get the image size and then set it back to display:none, however currently there may be an arbitrary number of elements nested around the image element, and I don't know which of them is set to display:none, how may I get the image size in this case? Thanks.

[Teddy*]

i guess this will work

document.getelementbyid("image1").width=50;

document.getelementbyid("image1").height=100;

Load these after the image have loaded

[wellofsouls]

i guess this will work

document.getelementbyid("image1").width=50;

document.getelementbyid("image1").height=100;

Load these after the image have loaded

Oops, I meant to say "get image size", not "set image size", somehow I mis-deleted the "get" in the topic title :wacko:

[Krome]

wellofsouls, this is maybe something that related to what you wanted to accomplish... check this out

http://code.google.com/p/timthumb/

timthumb.php is probably what the doctor order

EDIT: oops just read your correction and forget what I say then...

[Calculator]

If the width and height are always defined in a CSS style (inline or from a stylesheet), then you should be able to retrieve them with:

var mi = document.getElementById("image1");
var width = parseInt(mi.style.width);
var height = parseInt(mi.style.height);

[+Nik Louch Subscriber²]

Would jQuery dimensions be of use here?

[wellofsouls]

wellofsouls, this is maybe something that related to what you wanted to accomplish... check this out

http://code.google.com/p/timthumb/

timthumb.php is probably what the doctor order

The thing is that I need to do it client side with Javascript, so no php allowed :(

[wellofsouls]

If the width and height are always defined in a CSS style (inline or from a stylesheet), then you should be able to retrieve them with:

var mi = document.getElementById("image1");
var width = parseInt(mi.style.width);
var height = parseInt(mi.style.height);

Unfortunately many of the images do not have size defined in CSS. :(

[lnmnky]

Can I just ask... why you need it if it's display : none; ?

Are you going to show it?

Are you spacing elements around it?

Maybe the visibility : hidden; might be of more use than display : none;

Or script it in and preload the image, or test it in script. You can use height and width instead of offset...

http://stackoverflow.com/questions/799710/...idth-and-height

Edited November 4, 2009 by lunamonkey

[wellofsouls]

Can I just ask... why you need it if it's display : none; ?

Are you going to show it?

Are you spacing elements around it?

Maybe the visibility : hidden; might be of more use than display : none;

Or script it in and preload the image, or test it in script. You can use height and width instead of offset...

http://stackoverflow.com/questions/799710/...idth-and-height

well, I need to make a javascript function that runs at page load and checks every image in a web page and resize it if it's too large or too small. Maybe the images will be invisible at first, but later made visible by some javascript trigger.

And yeah, I also just figured that preloading the images seems to be the only way :

<script type="text/javascript>
var mi=document.getElementById('image1');
var ti = document.createElement('img');
ti.setAttribute('src', mi.getAttribute('src'));
ti.style.width=mi.style.width;
ti.style.height=mi.style.height;
document.body.appendChild(ti);
var height=ti.offsetHeight;
var width=ti.offsetWidth;
document.body.removeChild(ti);
</script>

it's quite a hassle, but seems to work fine so far.

alternatively, guess I can first try to get the style.width and style.height, and if that fails, get the height and width. That way there's no need to append and remove the image in the body, which may not be safe I think...

[sweetsam]

Alternatively you could add a class to body and setup the images to render offscreen, get their dimensions, hide them and then remove the class.