animagedcollapse near bottom of page

[fox_1028]

1) Script Title: Animated Collapsible DIV v2.01

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem: Let's say the link to toggle or expand your div is near the bottom of the page and the div content resides below the toggle link.

Clicking the toggle link will make the div content viewable unless the div content falls below the portion of the page which is not currently in view. In this situation the user would be required to scroll down to see the content.

I've been messing around with some javascript to scroll the page down in this situation but no luck. Any thoughts?

[ddadmin]

You could use JavaScript's scrollIntoView() function (http://www.javascriptkit.com/domref/elementmethods.shtml) within the toggler link to get the page to scroll to the content being animated when clicked on. For example:


<a href="javascript:animatedcollapse.show('jason'); document.getElementById('jason').scrollIntoView()">Slide Down</a>

<p>sdfsf</p><p>sdfsf</p><p>sdfsf</p><p>sdfsf</p><p>sdfsf</p><p>sdfsf</p><p>sdfsf</p><p>sdfsf</p>

<div id="jason" style="width: 300px; background: #FFFFCC; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>

[fox_1028]

Testing with IE7; I'm not having any luck with scrolling().

It drops down about half a line (same results when i link to an anchor just below the div content.)

Thanks

[ddadmin]

Please post a link to the page on your site that contains the problematic script so we can check it out.

[fox_1028]

Unfortunately I'm working on a secure network... however you can easily use http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm. Make sure the toggle links are at the very bottom of the viewable window.

Like I have mentioned the content does expand, but you are required to scroll to see the content.

Thanks