Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript
| Search | Today's Posts | Mark Forums Read
Javascript General Javascript discussions.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old November 25th, 2003, 10:02 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default Dynamically expanding and collapsing elements

Code:
<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
:::::::::::::::::::::::::::::::::
  #2 (permalink)  
Old November 26th, 2003, 05:35 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Try using the style.display property. Set it to "none" or an empty string.



--

Joe
  #3 (permalink)  
Old November 26th, 2003, 09:02 AM
planoie's Avatar
Friend of Wrox
Points: 16,481, Level: 55
Points: 16,481, Level: 55 Points: 16,481, Level: 55 Points: 16,481, Level: 55
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Aug 2003
Location: Clifton Park, New York, USA.
Posts: 5,407
Thanks: 0
Thanked 16 Times in 16 Posts
Default

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/a...es/display.asp

Peter
------------------------------------------------------
Work smarter, not harder.
  #4 (permalink)  
Old November 26th, 2003, 09:17 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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
:::::::::::::::::::::::::::::::::


Similar Threads
Thread Thread Starter Forum Replies Last Post
Dynamically Finding Elements in XSL tclancy XSLT 2 March 1st, 2006 03:25 PM
Collapsing Margin Questions, P310-312 MRoberts BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 1 June 10th, 2005 10:34 AM
aspx - dynamically expanding the page vhrao General .NET 1 November 5th, 2004 03:49 PM
adding option elements dynamically to a select richard.york Javascript 4 December 5th, 2003 04:57 AM
Dynamically Named form elements conundrum Javascript How-To 4 October 1st, 2003 04:04 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.