|
Subject:
|
Dynamically expanding and collapsing elements
|
|
Posted By:
|
richard.york
|
Post Date:
|
11/25/2003 9:02:44 PM
|
<script language='JavaScript' type='text/javascript'>
function show_field(field)
{
document.getElementById(field).style.visibility = 'visible';
}
function hide_field(field)
{
document.getElementById(field).style.visibility = 'collapse';
}
</script>
<div class='formfield'>
<div class='formdescription2' onmouseover='show_field("field1")' onmouseout='hide_field("field1")'>
<div class='formtext'>CC:</div>
</div>
<div class='forminput2' id='field1' style='visibility: collapse;' onmouseover='show_field("field1")' onmouseout='hide_field("field1")'>
<textarea rows='4' cols='65' name='address_cc' wrap='virtual' class='fields' id='fields1' onfocus='bg_onfocus("fields1", 0)' onblur='bg_onblur("fields1", 0)'></textarea>
</div>
</div>
I have this snippet above that works fine in Netscape 7 but not in IE. What I am trying to do is dynamically expand and collapse the content in the div which contains the textarea. I tried changing the CSS attribute from collapse to hidden (apparently IE doesn't support the collapse property), but that leaves a huge space where the textarea is supposed to be and well sort of defeats the original purpose of the whole thing.
I was playing around with setting an innerHTML attribute. But I didn't feel that was quite the right solution the text contained in the textarea kept getting lost that way. It just seems like that would be a much more complex approach to take. I would have to relocate the text in the textarea every time it was collapsed and then fill it back in when expanded. I also didn't like having to place the textarea code into a JS variable. The form itself is spit out using a complex PHP class where outputting the textarea to a JS variable might require a lot of rethinking in the PHP class.
Anyone have any ideas?
: )
Rich
:::::::::::::::::::::::::::::::::
Smiling Souls
http://www.smilingsouls.net
:::::::::::::::::::::::::::::::::
|
|
Reply By:
|
joefawcett
|
Reply Date:
|
11/26/2003 4:35:53 AM
|
Try using the style.display property. Set it to "none" or an empty string.
--
Joe
|
|
Reply By:
|
planoie
|
Reply Date:
|
11/26/2003 8:02:43 AM
|
Yes. Joe's right on this one. style.display with "none" or "inline". "hidden" will do nothing by hide it as you've found.
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp
Peter
------------------------------------------------------
Work smarter, not harder.
|
|
Reply By:
|
richard.york
|
Reply Date:
|
11/26/2003 8:17:46 PM
|
Thanks Fellas!
The display property did the trick. I decided to go with the 'block' attribute since the <div> tag is a block level element.
: )
Rich
:::::::::::::::::::::::::::::::::
Smiling Souls
http://www.smilingsouls.net
:::::::::::::::::::::::::::::::::
|
