View Full Version : Frame Resize with hidden elements embedded

03-23-2005, 05:48 PM
So I just figured out how to show and hide elements based on the value of (i.e.) a checkbox, though the trouble I'm having now is that when the element is hidden, the frame height is the same size as if it were visible. I played around with the frame height settings (i.e. - setting to 100% instead of x pixels), but can't seem to figure this last bit out. Is there an attribute for this?

Any help would be greatly appreciated.
Please let me know if you need additional clarification.

03-23-2005, 06:00 PM
Additional Info:

I'm using:

style="visibility:hidden;" ...to hide the element... not sure if this is what's best for what I'm trying to accomplish.

Again, I appreciate any assistance that anyone could provide.

03-24-2005, 05:06 AM
To achieve the effect I think you are looking for, use:

style="display:none;"The antidote (to make it be seen) for which is to set the element's style.display='block'

I'm not going into more detail as I get the idea you know how to access that for visibility, it is the same for display.

03-24-2005, 10:15 AM
First of all, it's generally a bad idea to hide content by default through a style sheet. If the code used to show that content isn't supported, the visitor will never see it unless they disable all of your applied styles. Instead, use script code to hide it initially. That way, the content is interactive if possible, but still usable if not.

The antidote (to make it be seen) for which is to set the element's style.display='block'That isn't necessarily true. Whilst that will show the element again, the block value only applies to most (but not all) block-level elements. The preferred approach to assign an empty string. This effectively removes the inline style information set either through the style HTML attribute, or the style object for that property. This is especially important for cases where IE (in particular) uses an incorrect property value.

For instance, before IE 6 list items have a default display value of block as opposed to the correct value of list-item. Using the former in conforming user agents like Opera or Firefox will cause the item marker not to be hidden (as only list items have item markers).

Another example is that you can achieve certain visual effects by applying the block value to parts of a table (I think it's to the rows, but I can't remember where the demonstration is). As IE uses the block value rather than the proper types, the effect fails to work.

The important thing to note is that assigning an empty string will only work if the element in question is not hidden by a style sheet (that is, a rule in a style element or a linked CSS file). In that case, you'd have to write code which determines the normal value of an unaffected element (impossible if all elements of the same type have their display property overridden).


03-24-2005, 01:11 PM

Many thanks to you - both approaches fit the bill. Thanks for the heads-up on the potential browser issues too, mwinter - though I am developing an intranet site (all users on standard config [IE6]), that certainly is valuable information to have in the back-pocket for developing future external sites.

Again, jscheuer1, mwinter -- my hats off to you both.

- I