Page 1 of 3 123 LastLast
Results 1 to 10 of 24

Thread: Expand Collapse

  1. #1
    Join Date
    Jan 2016
    Location
    Delray Beach, FL
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Expand Collapse

    1) Script Title: Animated Collapsible DIV v2.4

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...edcollapse.htm

    3) Describe problem:

    I'd like to embed a youtube into the div that is expanded. When I do, the div below is not pushed down. If I add text to the div, it works fine.

    I am using the std youtube embed string. Check out Example One on this page --- www.catalystvs.com/test

    Suggestions?

    Also, instead of a button, I'd like to have the user click on a bold word or phrase (in color, of course) to expand and collapse the div with the content.

    All that's in this script is using a button or text that expands and text to collapse, do not want to use instructions to expand and collapse.

    Suggestions?

    Doug
    Last edited by Beverleyh; 02-01-2016 at 06:16 AM. Reason: Formatting

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    If including text fixes it, I would be tempted to try including like just a period. If that works, make that period visibility hidden. As for a button versus text, a button may be styled to look like text or text can be given an event to trigger the event upon a button which can be hidden if need be. But let's get the other problem solved first. I think it might be more complicated than I'm suggesting, though if the solution I put forth works - great! We can move on.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2016
    Location
    Delray Beach, FL
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I was mistaking, example 2 has extra text, it overflows the div. How does one make the div height dynamic, based on the content in the div? Especially needed in responsive pages for mobile devices.

    Ah I so miss flash.

    Doug

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Looks like there's a height declared in the JavaScript init
    Code:
    animatedcollapse.addDiv('jason', 'fade=1,height=80px')
    If you take that out (the part in red) it should expand to whatever height is needed.

    From the demo page instructions - re: height attribute
    Set to an integer plus "px" to explicitly define the height of the DIV using the script. Typically you would leave out this attribute altogether (so it's undefined) to let the DIV default to its natural height, or that specified in either your inline or global CSS.
    And to deal with your video embed, which wouldn't be responsive be default, see this article here: https://css-tricks.com/NetMag/FluidW...WidthVideo.php
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  5. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,859
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    For some reason, my post on the subject has been removed. Someone may have mistakenly thought that my post was a duplicate of his/her post. But that's not true. I not only pointed out, like Beverleyh did in #4, that the height should be adapted in
    Code:
    animatedcollapse.addDiv('jason', 'fade=1,height=80px')
    but also that there's a huge difference between what soflatechguy has:
    Code:
    <div id="jason" width: 500px height:400px style="background: #FFFFCC; display:none">
    <b>Content inside DIV!</b><br />
    <iframe width="420" height="315" src="https://www.youtube.com/embed/bwuWFPh4ka4" frameborder="0" allowfullscreen></iframe>
    <b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
    </div>
    and what he should have written:
    Code:
    <div id="jason" style="width: 500px; background: #FFFFCC; display:none">
    <b>Content inside DIV!</b><br />
    <iframe style="width: 100%; height: 100%" src="https://www.youtube.com/embed/bwuWFPh4ka4" frameborder="0" allowfullscreen></iframe>
    <b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
    </div>
    These lines solve the problem of the div not being pushed down and are not the duplicate of any post.

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Posts were moderated because they contained misleading information

    To clarify what soflatech guy should do in order to achieve fully responsive content.

    Do not use fixed heights or widths at all - they are not conducive to responsive design.

    Completely remove the part in red here:
    Code:
    animatedcollapse.addDiv('jason', 'fade=1,height=80px')
    And follow the tutorial on responsive video here: https://css-tricks.com/NetMag/FluidW...WidthVideo.php

    Lastly, as a final clean-up - fix markup errors by removing width and height here (in red)
    Code:
    <div id="jason" width: 500px height:400px style="background: #FFFFCC; display:none">
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  7. The Following User Says Thank You to Beverleyh For This Useful Post:

    Ripsaw (02-04-2016)

  8. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,859
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    Quote Originally Posted by Beverleyh View Post
    Posts were moderated because they contained misleading information
    What misleading information, Beverleyh?
    Quote Originally Posted by Beverleyh View Post
    To clarify what soflatech guy should do in order to achieve fully responsive content...
    But his concern was not responsive context, but rather a div not being pushed down by a video.

  9. #8
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Misleading because you promoted the use of a fixed height (or any height in the JavaScript init) when one isn't needed at all (as per the demo instructions).

    His concern *was* responsive context/dynamic height, as per this statement;
    How does one make the div height dynamic, based on the content in the div? Especially needed in responsive pages for mobile devices.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  10. #9
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,859
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    My main concern was to explain to him that the way he embedded the video caused the expanding video not to push down the content beneath it. So my answer related to his very first post. I think this caused the misunderstanding.

  11. #10
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I can see how you might have misunderstood but the way the video is embedded isn't the issue. Soflatechguy's video markup doesn't effect the height of the panel as it expands. The height in the JavaScript init is the problem.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

Similar Threads

  1. expand/collapse paragraph help.
    By cturcotte224 in forum JavaScript
    Replies: 0
    Last Post: 05-19-2011, 08:37 PM
  2. ddsmoothmenu onclick collapse and expand
    By textile in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-12-2011, 10:18 PM
  3. Does expand/collapse script like this exist?
    By neomatrix in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 01-26-2006, 06:05 PM
  4. Expand Collapse Fameset
    By justin in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 09-21-2004, 10:14 PM
  5. Expand Collapse Fameset
    By justin in forum JavaScript
    Replies: 0
    Last Post: 09-21-2004, 10:14 PM

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
  •