Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 24

Thread: Expand Collapse

  1. #11
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    This is soflatechguy's test page. As your can see, the expanding video does not push down the content beneath the video as it should. This is slightly corrected version (by me) that corrects the problem as a result of a different video-embedding.

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

    Default

    Quote Originally Posted by molendijk View Post
    This is slightly corrected version (by me) that corrects the problem as a result of a different video-embedding.
    You mean that the height is corrected as a result of the 380px height in the JavaScript init Which might be fine for a fixed width layout, but it stops the panel height from being natively fluid, as responsive design requires.

    Let's work *with* the whole responsive design concept of allowing content to dictate layout, (and indeed, with the native behaviour of the dd script) by not using a fixed height when it isn't necessary, and instead allow the content to expand the height to whatever it takes to accommodate it. See this demo that *doesn't* have a fixed height in the JavaScript init http://fofwebdesign.co.uk/template/_...nicollapsediv/ I've taken the liberty of applying the responsive video technique as previously suggested, so that it fluidly adapts at small sizes (and I've capped the width at 750px with max-width to allow enough variance in size so that you can easily see video/panel height behaviour at different screen widths).
    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

  3. The Following 2 Users Say Thank You to Beverleyh For This Useful Post:

    Ripsaw (02-04-2016),Winchester (02-04-2016)

  4. #13
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    488
    Thanks
    0
    Thanked 62 Times in 58 Posts

    Default

    Beverley,

    There's something not quite right with example 2 in your test page. This is a screendump from Opera version 35.0.


    Click image for larger version. 

Name:	DdBeverley20160204a.jpg 
Views:	112 
Size:	56.1 KB 
ID:	5814

  5. #14
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    No, that's not what I mean. Even if we leave out the height, the elapsing video will push down the content below (contrarily to what happens on soflatechguy's test page).. What I have been talking all along is that the way the iframe is embedded does matter!

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

    Default

    Quote Originally Posted by styxlawyer View Post
    Beverley,

    There's something not quite right with example 2 in your test page. This is a screendump from Opera version 35.0.


    Click image for larger version. 

Name:	DdBeverley20160204a.jpg 
Views:	112 
Size:	56.1 KB 
ID:	5814
    I've only demonstrated my changes in the Example 1 panel - anything else is as it came from soflatechguy's demo page.
    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. #16
    Join Date
    Jan 2016
    Posts
    23
    Thanks
    49
    Thanked 3 Times in 2 Posts

    Default

    styxlawyer, the problem isn't just with Beverleyh's demo. The issue is also present on soflatechguy's and molendijk's linked pages.

    I have to say that I am in awe at the responsive video trick and will be using it for my website soon. Thank you Beverley for demonstrating how it should be done

    You make the world of web and responsive seem so effortless.

    Muchas gracias mi amigo!

  8. #17
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    Quote Originally Posted by Ripsaw View Post
    styxlawyer, the problem isn't just with Beverleyh's demo. The issue is also present on soflatechguy's and molendijk's linked pages.
    That's because both Beverleyh and I kept some of the code by soflatechguy. If we don't want content to shine through expanding divs, the latter divs should expand to the size of their content, meaning that they should not have an explicit value for height, see my modified test page.
    The wrapper div for the iframe should have an explicit height, though, or a value for padding-bottom if we use Beverleyh's solution.
    The values for width (and height) are best given in percentages.
    Beverleyh, I see that for embedding the video you use a method that I was referring to in my (moderated) post to soflatechguy: iframe inside a div, size for the iframe: 100%. I'm sure there was a misunderstanding as for the purpose of my post.

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

    Default

    Beverleyh, I see that for embedding the video you use a method that I was referring to in my (moderated) post to soflatechguy: iframe inside a div, size for the iframe: 100%. I'm sure there was a misunderstanding as for the purpose of my post.
    I'm using a different method -- I'm using the intrinsic ratios technique pioneered by Thierry Koblentz and presented on A List Apart in 2009 http://alistapart.com/article/creati...tios-for-video -- otherwise why would you have replied after me if we were both offering the same advice, and why would our demos behave so differently now? 2 different methods, different results. I don't think there's anything more to discuss.

    Thank you for the demos - visitors here can choose which they prefer, or which works best for their needs.
    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. #19
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    Still a misunderstanding. No, not an essential difference as far as embedding is concerned (as opposed to what soflatechguy does), but an essential difference in video-sizing.
    I'll leave it at this.

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

    Default

    Quote Originally Posted by Ripsaw View Post
    styxlawyer, the problem isn't just with Beverleyh's demo. The issue is also present on soflatechguy's and molendijk's linked pages.

    I have to say that I am in awe at the responsive video trick and will be using it for my website soon. Thank you Beverley for demonstrating how it should be done

    You make the world of web and responsive seem so effortless.

    Muchas gracias mi amigo!
    No problem Ripsaw. I'm glad the solution worked for you. Happy to help
    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

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

    Ripsaw (02-06-2016)

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
  •