Contractible Headers Position Problem on Expand

[tberg]

1) Script Title: Contractible Headers

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/navigate2.htm

3) Describe problem: I have the script in a div box with a scroll bar. The problem is that sometimes the content expands upwards so that you have to use the scrollbar to get to the beginning of the expanded content (some of which is lengthy). Conversely, sometimes the content will expand below the header, but it's not visible at all until you scroll down. Sometimes it even looks like it didn't work at first, which might confuse visitors.

Samples: http://www.alphalifecenter.org/main.html If you click on "parenting" and then click on the 1st header, leave it open and scroll down to the next header, click on that one, and you'll see what I mean about the content expanding upwards. If you click on "pregnancy" and then click on the last header in the box, you can see what I mean about it looking like it didn't work because the content expanded downwards, out of sight of the box (but there is a slight change in the scrollbar--that probably wouldn't tip most people off).

Thanks for any help you can offer.

[ddadmin]

One way is to have the page automatically scroll to where the header that's just been clicked on each time it's clicked on. To do this, firstly, add the below function to the script itself:


function bringtoview(what){
if (what.scrollIntoView)
what.scrollIntoView()
}

Then, inside the HTML for your headers, add the below:


<h3 onClick="expandcontent('sc1'); bringtoview(this)" style="cursor:hand; cursor:pointer">What is JavaScript?</h3>

The part in red is new- basically what will happen now is whenever the user clicks on the "What is JavaScript" header, the page will scroll to it if it's out of view. This may help in your case.

[tberg]

I tried that and it worked! I can't thank you enough for answering my post and helping me with the problem. You're awesome. :)