PDA

View Full Version : Expand Collapse



soflatechguy
01-31-2016, 10:54 PM
1) Script Title: Animated Collapsible DIV v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.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

jscheuer1
02-01-2016, 01:23 AM
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.

soflatechguy
02-01-2016, 01:54 AM
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

Beverleyh
02-01-2016, 08:16 AM
Looks like there's a height declared in the JavaScript init
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/FluidWidthVideo/Article-FluidWidthVideo.php

molendijk
02-03-2016, 02:23 PM
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

animatedcollapse.addDiv('jason', 'fade=1,height=80px')
but also that there's a huge difference between what soflatechguy has:

<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:

<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.

Beverleyh
02-03-2016, 04:50 PM
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:
animatedcollapse.addDiv('jason', 'fade=1,height=80px')

And follow the tutorial on responsive video here: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Lastly, as a final clean-up - fix markup errors by removing width and height here (in red)
<div id="jason" width: 500px height:400px style="background: #FFFFCC; display:none">

molendijk
02-03-2016, 06:44 PM
Posts were moderated because they contained misleading information :)
What misleading information, Beverleyh?

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.

Beverleyh
02-03-2016, 08:20 PM
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.

molendijk
02-03-2016, 09:27 PM
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.

Beverleyh
02-03-2016, 10:18 PM
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.

molendijk
02-03-2016, 10:54 PM
This (http://www.catalystvs.com/test/) 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 (http://mesdomaines.nu/collapsible.html) is slightly corrected version (by me) that corrects the problem as a result of a different video-embedding.

Beverleyh
02-04-2016, 08:17 AM
This (http://mesdomaines.nu/collapsible.html) 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/_testing/test/ddanicollapsediv/ 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).

styxlawyer
02-04-2016, 09:46 AM
Beverley,

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


5814

molendijk
02-04-2016, 11:50 AM
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!

Beverleyh
02-04-2016, 01:38 PM
Beverley,

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


5814
I've only demonstrated my changes in the Example 1 panel - anything else is as it came from soflatechguy's demo page.

Ripsaw
02-04-2016, 02:24 PM
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 :D

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

Muchas gracias mi amigo!

molendijk
02-04-2016, 04:40 PM
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 (http://mesdomaines.nu/collapsible.html).
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.

Beverleyh
02-04-2016, 05:22 PM
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/creating-intrinsic-ratios-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.

molendijk
02-04-2016, 05:37 PM
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.

Beverleyh
02-04-2016, 06:55 PM
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 :D

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 :D

jscheuer1
02-06-2016, 12:01 AM
Yeah but, ripsaw wasn't the OP here. Sigh. This is why I often tried, often successfully, when I was very active here, to kick other people out of my threads. What happens to the OP here? Hopefully they will find their answer though in the very admirable work of both Arie and Beverley. Not how I would have gone about it, and each different from each other. But more than two ways it appears to skin this cat. ;)

Ripsaw
02-06-2016, 11:54 AM
That was my fault. Beverleyh's response was to answer me. Apologies for butting in on the discussion but I hope my acceptance of the answer helps highlights it to the original poster.

I was unaware of you thread ownership system, buy I've only been here a month and one of the reasons I find enjoyment in my visits is due to the collaborative discussions. This forum has been a real friendly place and everybody can join in (or so I surmised - may be I got it wrong?). I hope you don't kick me out. I was only voicing my opinion of an awesome solution :(

Beverleyh
02-06-2016, 02:39 PM
There's no official thread ownership system per se - I think it's more of an unspoken thing where you leave the thread in the hands of the person who replied first, and then others chip in with their suggestions only if it adds to the overall solution. Maybe we allowed this thread to be an open discussion further past what was necessary somewhere on page one. But anyhow, hopefully the OP will reply at some point if they need to :)

jscheuer1
02-07-2016, 06:43 AM
Right. We are not strict like some forums are. However - just something to bear in mind. When someone posts a question, they have a reasonable expectation that their question will be addressed and that the thread will not be given over to service another person's question. If you have a question about this script, ideally you would start your own thread about that.