SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hide / show div (but with a twist!)

    Hi All,

    I'm trying to implement a 'show / hide' div functionality into a page. Basically I want it to function like this example:

    http://www.harrymaugans.com/2007/03/...script-and-css

    ...where rather than just showing and hiding the div, it 'animates' between the showing and hiding.

    It's easy enough to follow along with the example from harry maugans site but here's my twist:

    Instead of having a div which expands from 0px height (the hidden state) to it's total height (the shown state), I need to start with a div that is visible and has a height of 200px. When 'expanded', it will grow to a height of 400px. Then, when collapsed, it will contract back down to 200px. So, it's always visible, just the height changes.

    The reason is, the div will contain a 400px high swf but initially I only want the top 200 pixels visible (therefore the overflow will be 'hidden'). Then when it is expanded, it will grow to show the entire 400px height of the swf.

    Strange request, I know.

    Thanks for any help you can give!!

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That script looks incredibly long considering it isn't doing a whole lot. I don't think it's very good because:
    • it uses an inline event handler
    • it uses the Date object (which I don't think is necessary)
    • the script is embedded in the body
    • it depends on putting the height you want in the style attribute (not good, not very maintainable)
    • if javascript is off, the user will not see anything

    I'm going to play with this and see if I can come up with a better solution.

  3. #3
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Raffles. I really appreciate it.

    It's the 'motion' effect that I liked on the harry maugans site (sliding the visibility, instead of abruptly showing/hiding it). Plus, his code is dependant on the visibility of the div being initially hidden.

    Thanks again!

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    OK, I've finished. I'm quite happy with it.

    http://raffles.awardspace.com/javascript/drawer.html

  5. #5
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow,

    Raffles, I don't know what to say. You went above and beyond!! Thanks very, very much!

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    No problem, I enjoyed the challenge. Can you please report on whether it works in Internet Explorer, since mine is broken. Thanks.

  7. #7
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, it certainly does work (like a charm) in IE. Thanks again!


Bookmarks

Posting Permissions

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