Dynamic Ajax Content help needed

[chiefdave]

Script: Dynamic Ajax Content
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

couple of questions about this script, prob simple stuff but this is the first time i've used any code like this.

i have a div i'm pulling content into:
<div class="scrollframe" id="contentarea"></div>

i then link to it from the menu:
<a href="javascript:ajaxpage('news.html', 'contentarea');" class="navlink">NEWS</a>

my question is how do i get the content of news.html to load into content area when the page first loads, as you can see (www.thesuffrajets.com/index2.html) when the page first loads the main window is being left blank.

secondly i have a problem with alignment when other pages are being pulled in, they don't always display from the top (if you click around on the above link you'll see what i mean), any ideas how to get round that problem?

[jscheuer1]

I see you've solved your first problem onload which is what I would have suggested. The second problem looks to me to be that because your 'contentarea' can be scrolled at the given moment that different content is loaded into it and because that new content can be taller than the visible part of the container, that the scroll state of the container is being preserved whenever possible. Here is what you need to execute to reset it to the top:


document.getElementById('contentarea').scrollTop=0

You can either include this in the links:


<a href="javascript:document.getElementById('contentarea').scrollTop=0;ajaxpage('news.html', 'contentarea');" class="navlink">NEWS</a>

Or make up a function for it and invoke it each time (put this inside a script block or on an external script linked to the page):


function resetS(){
document.getElementById('contentarea').scrollTop=0;
}

Then you can do:


<a href="javascript:resetS();ajaxpage('news.html', 'contentarea');" class="navlink">NEWS</a>

[monkeytribe]

Hi, this looks like exactly what i need, but when i try to implement the code there is no effect.

see the problem in action here:

http://www.monkeytribe.net/index2.php

the suggested code snippet is only on the "discog" link in the footer.

any ideas what i have done wrong?

thanks!

[jscheuer1]

It isn't working on your page. There may be other problems, but the main reason that:


document.getElementById('contentarea').scrollTop=0

doesn't work on your page is that 'contentarea' isn't the id of the element with the scrollbar. That element's id is 'leftcontent'.

Get things out of whack (scrolled to a point that you don't want) and then paste this into the address bar and hit enter:


javascript:void(document.getElementById('leftcontent').scrollTop=0)