Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 08-20-2007, 09:21 PM   PM User | #1
rafael.lucchese
New to the CF scene

 
Join Date: Aug 2007
Posts: 3
Thanks: 2
Thanked 0 Times in 0 Posts
rafael.lucchese is an unknown quantity at this point
Resizing Divs (Expanding, Contracting)

Greetings,

I am currently designing a site without the use of tables. Although I will past my code bellow, I will explain what I intend to do: Each div contains a text header, a button (plus or minus) located to the right of the label, and text below (which may be a list of items, or a block of text); the latter being contained inside of another div (so it's a div inside of a div)
Once the user clicks on the button or on the <h3>label, I would like the div that contains the list or the block of text to go down to height zero, which would bring the bottom divs upward and resize the height of the entire page (which is set to auto), and change the button from minus to plus (which will not be visible since the files are not included, but it's okay because that part works well anyway).

This mechanism works well in firefox and ie7, but i6 hides the visibility of the contents upon a click without resizing the div to zero; therfore I don't get the expanding/contracting effect that I was hoping for.

Please note the attached txt and css files.

Thank you in advance for any assistance.

Rafael Lucchese.
Attached Files
File Type: txt profile.txt (9.3 KB, 101 views)
File Type: css asamaProfile.css (5.5 KB, 100 views)
File Type: txt profileList.txt (846 Bytes, 89 views)
File Type: css asama.css (6.3 KB, 123 views)
rafael.lucchese is offline   Reply With Quote
Old 08-21-2007, 07:22 AM   PM User | #2
abduraooft
Supreme Master coder!

 
abduraooft's Avatar
 
Join Date: Mar 2007
Location: N/A
Posts: 14,680
Thanks: 158
Thanked 2,182 Times in 2,169 Posts
abduraooft is just really niceabduraooft is just really niceabduraooft is just really niceabduraooft is just really niceabduraooft is just really nice
Instead of visibility, have a try on
Code:
document.getElementById(listString + "Inside").style.display = "none";
and
Code:
document.getElementById(listString + "Inside").style.display = "block";
I couldn't run your code without errors in Mozilla, its better to give a link to your page since these files have a lot of directory dependencies.
__________________
Quote:
The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)
abduraooft is offline   Reply With Quote
Users who have thanked abduraooft for this post:
rafael.lucchese (08-21-2007)
Old 08-21-2007, 07:49 AM   PM User | #3
SuperRoach
New Coder

 
Join Date: Aug 2007
Location: Ballarat
Posts: 22
Thanks: 0
Thanked 1 Time in 1 Post
SuperRoach is an unknown quantity at this point
Have you tried jQuery? This could give it some visual jazz as well as easily do what you want.

Look at these examples:
http://jquery.bassistance.de/accordion/
SuperRoach is offline   Reply With Quote
Users who have thanked SuperRoach for this post:
rafael.lucchese (08-21-2007)
Old 08-21-2007, 03:58 PM   PM User | #4
rafael.lucchese
New to the CF scene

 
Join Date: Aug 2007
Posts: 3
Thanks: 2
Thanked 0 Times in 0 Posts
rafael.lucchese is an unknown quantity at this point
Thank you Abduraoof and SuperRoach

Changing the statement at the JavaScript to display = "none"; has apparently solved the problem. I will do some more looking here, finish the changes to both the script and the css just to make sure that it is really working well.

The JQuery looks very interesting, I will keep that in mind for future uses as well.

Thank you again.

Rafael.
rafael.lucchese is offline   Reply With Quote
Old 08-23-2007, 04:12 PM   PM User | #5
rafael.lucchese
New to the CF scene

 
Join Date: Aug 2007
Posts: 3
Thanks: 2
Thanked 0 Times in 0 Posts
rafael.lucchese is an unknown quantity at this point
Smile Issue Resolved

The issue is resolved, thanks again.
rafael.lucchese is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 02:23 PM.


Advertisement
Log in to turn off these ads.