Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    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 Attached Files

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,859
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    rafael.lucchese (08-21-2007)

  • #3
    New Coder
    Join Date
    Aug 2007
    Location
    Ballarat
    Posts
    22
    Thanks
    0
    Thanked 1 Time in 1 Post
    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/

  • Users who have thanked SuperRoach for this post:

    rafael.lucchese (08-21-2007)

  • #4
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    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.

  • #5
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Smile Issue Resolved

    The issue is resolved, thanks again.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •