Skip to main content
gamedev.net
🔒 Locked

[web] DHTML: finding natural size of an object

Started by Wyrframe 8 replies 1.9k views
Original Post
Wyrframe
Wyrframe
I'm writing some animation tweens for a DHTML/AJAX framework I'm developing, and I've hit a small brick wall. I want to determine the 'natural size' of an element, usually a DIV. Why: I've made a zero-height (and zero-opacity) DIV where some content will eventually appear. The AJAX engine then puts some content in it, but because of the current {overflow:hide; height:0px;} directives, it remains hidden. I now want to animate a sort of 'fold-out' by growing the DIV out to the size it would have been without the height:0px; directive. Currently, I do this with the following javascript... 
var base = box.clientHeight;
			
// If no default is given, find the native size.
// TODO: find a better way! This makes an annoying flicker!
if ( findNative ) {
   box.style.height = "";
   toHeight = box.clientHeight;
   box.style.height = base;
}
So: does anyone know a way to eliminate the flicker that this causes (because of the update-and-restore), or another way to determine content size? The only way I can think of is to put another DIV inside this one, and let its size guide me, but this seems just as much a hack as my current method. Anyone else solved this problem?
RIP GameDev.net: launched 2 unusably-broken forum engines in as many years, and now has ceased operating as a forum at all, happy to remain naught but an advertising platform with an attached social media presense, headed by a staff who by their own admission have no idea what their userbase wants or expects.Here's to the good times; shame they exist in the past.
Verminox
Verminox
You must be looking for either
height: 100%;
or
height: auto;

Edit: That is, use it in the script. For example,

box.style.height = "auto"



Edit2: Not to mention overflow: hide should be overflow: hidden.
--------------------------------------Amaze your friends! Astound your family! Kennify your text!
Wyrframe
Wyrframe
*headslaps* Of course I oughta use percentage... christ, where can I hide my face...

About overflow, I know; I just mistyped it in the post.
RIP GameDev.net: launched 2 unusably-broken forum engines in as many years, and now has ceased operating as a forum at all, happy to remain naught but an advertising platform with an attached social media presense, headed by a staff who by their own admission have no idea what their userbase wants or expects.Here's to the good times; shame they exist in the past.
Wyrframe
Wyrframe
Well, it was worth a shot. Setting to 100% in IE and Firefox I get a box the height of the window, and setting height to 0 (any unit) in IE or Opera makes them act like I never specified a height (they pop back out to natural size).

Any suggestions for either problem? I'm mostly concerned with the annoying pop-back; setting {display:none;} or {display:hidden;} has no effect in making the element remove itself from the layout engine in IE; it's invisible but it still takes up room (as correct for 'hidden', but not for 'none', curse it).
RIP GameDev.net: launched 2 unusably-broken forum engines in as many years, and now has ceased operating as a forum at all, happy to remain naught but an advertising platform with an attached social media presense, headed by a staff who by their own admission have no idea what their userbase wants or expects.Here's to the good times; shame they exist in the past.
Verminox
Verminox
I'm not sure what you mean by the pop-back effect... could you post a link to a page or post the HTML here so that I/we can try it out and actually see the popping? That will help me/us help you better.
--------------------------------------Amaze your friends! Astound your family! Kennify your text!
Wyrframe
Wyrframe
Sample setup on my server (please don't hit my bandwidth too hard)...

http://moonshot.no-ip.org/framework/

Try it in whatever browsers you've got. In Firefox Linux, everything works perfect. In Firefox Windows, everything except "Native" size works (I end up with the blue box being as tall as the window), and in IE Windows, everything but 0px and Native sizes work (same bug). In other browsers, I get various combinations of the above bugs.
RIP GameDev.net: launched 2 unusably-broken forum engines in as many years, and now has ceased operating as a forum at all, happy to remain naught but an advertising platform with an attached social media presense, headed by a staff who by their own admission have no idea what their userbase wants or expects.Here's to the good times; shame they exist in the past.
Verminox
Verminox
I'm using Firefox on Linux so I don't really any bugs.... and if 100% makes it go to the size of the window, try using "auto".
--------------------------------------Amaze your friends! Astound your family! Kennify your text!
Wyrframe
Wyrframe
Verminox, the point is to make it animate and grow out to natural size, not to just plain set it there. I know that {height:auto;} will make it the correct size; what I need to do is determine what the natural size is, so I can tween to it.
RIP GameDev.net: launched 2 unusably-broken forum engines in as many years, and now has ceased operating as a forum at all, happy to remain naught but an advertising platform with an attached social media presense, headed by a staff who by their own admission have no idea what their userbase wants or expects.Here's to the good times; shame they exist in the past.
izua
izua
You can hide the div with the items (target) in another div (bigger), set the bigger div invisible, and the pop up the target to its natural size with auto.

You can now get the value, set target height to 0, show the bigger div, set its height to the value + a few pixels, and make the target div grow gradually to the value.

edit: oh, you mentioned this in the last line. uh well, try using DOM explorer in firefox. There might just be a property for this. I worked with a javascript that was shrinking images, and i needed the natural size of the image, and i found it this way. They were naturalWidth and naturalHeight.
Wyrframe
Wyrframe
Izua; that technique would fix the problem in Firefox Windows, but not IE. But I'll give it a try in case it fixes Opera, too.

Also, I have looked; those properties are only in Firefox, and only on <IMG> elements.
RIP GameDev.net: launched 2 unusably-broken forum engines in as many years, and now has ceased operating as a forum at all, happy to remain naught but an advertising platform with an attached social media presense, headed by a staff who by their own admission have no idea what their userbase wants or expects.Here's to the good times; shame they exist in the past.

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.

Sign in to reply to this topic.