Animated Collapsible DIV's: positioning the expanded div on top of page

[dan_gva]

1) Script Title: Animated Collapsible DIV's

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

3) Describe problem: Is there a way to position the expanded div on top of the page ?

If a collapsible DIV which stands at the bottom of a long page is called from an external link, it might expand unseen.
To see an example: take a look at this site (http://www.h2osa.com), and choose the last subitem in the "Formations" nav item.

Is there a way to "scroll" the page in order that if a collapsible div is expanded, it is also positioned at the top of the page (I mean: in the visible area) ?

I've tried with html anchors, but since the script calculates the page height on the fly, it doesn't work. My external links looked like this:

<a href="mypage.shtml#myanchor?expand=3">

Any help appreciated.

[ddadmin]

Try making the change in red to the original expanding code:


<script type="text/javascript">

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var param=window.location.href.match(/expand=(\d+)/i)
var paramvalue=RegExp.$1
if (/\d+/i.test(paramvalue)){ //if URL parameter contains "?expand=integer"
animatedcollapse.dotask(window, function(){setTimeout("window['collapse'+paramvalue].slidedown()", 200)}, "load")
animatedcollapse.dotask(window, function(){setTimeout("document.getElementById('five').scrollIntoView()", 500)}, "load")
}

</script>

Basically it calls the DOM function scrollIntoView() on the DIV being expanded a slight delay after the DIV has been expanded (500 milisec versus 200 milisec). You may want to increase 500 to a 1000 instead if it's still not even time.

Not tested yet, but should work.



</script>

[dan_gva]

Thank you! I sincerely appreciate your help.

It works. However, since the scrollIntoView() method is executed afterwards, the expansion animation is lost... and it's a pity. :)

I tried to put the extra line in red above (instead of below) the former line, with a timeout set to 0. As you can see on this page (http://www.h2osa.com/fr/formation.shtml), it works 98%.

The remaining 2%: since the positioning is done before the expansion's calculation, the div's bottom might still be hidden under the bottom of the viewport... :( frustrating.

Is there a "simple" way to make scrollIntoView() work along with the div's real height (ie unexpanded) ?

PS: I left your example code untouched, i.e. bearing the id 'five' as argument for the document.getElementById method. Strangely enough, this seems to work okay for every div contained in the page (maybe because 'five' is the last one on page ?). But if I remove the id 'five', nothing works anymore... :confused: