Expand Collapse

[soflatechguy]

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

[jscheuer1]

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]

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]

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/FluidW...WidthVideo.php

[molendijk]

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]

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/FluidW...WidthVideo.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]

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]

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]

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]

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.