Ajax Content auto Scroll to TOP or anchors

[Possemaster]

1) Script Title: Ajax Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...jaxcontent.htm

3) Describe problem: i use only one content (overload auto) div. so every link on my page loads html in the content div.
When i read one page and jump to an other it doesn´t reset my scroll bar. It stays on the same place. So every time i have to scroll back up.

and i tried to fix it with TOP anchors in the link but they don´t work in the ajax link.

the url it´s on is http://www.alive-and-well.org , it´s a page for my mother and father in canada who are pastors in the reformed church.

can anyone help me with this, the links i use to load the data is

javascript:ajaxpage('pages/news_letters.htm', 'content')

thanks for your help

[Possemaster]

I found one thing to scroll it to top but it´s a little laggy.
You could put in the link

javascript:document.getElementById('content').scrollTop=0;ajaxpage('pages/page.htm', 'content')

but than if you switch to another page the page blinks first to the top and then loads the other page.
Doesn´t look very good.

So about the anchors, i didn´t get it fixed yet. I tried scrolltop and an number specific to that spot, but that doesn´t work too well eighter.
If one page is shorter than the next it comes in another spot because you scroll it first on the previous page and then load the next content.

So any suggestions??

here is the link it is working on

[Possemaster]

guess it´s a difficult question.
I asked it to several of my co students who are learning javascript, but they haven´t got an solution for this eighter.

guess i got to let it go.

thanks for your effort

[jscheuer1]

In the AJAX script itself, there is a point where the division that will display the content gets its innerHTML set to the responseText. It is at that point in the script where you should do the scrollTop=0 thing (additions red and highlighted):

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
{
document.getElementById(containerid).innerHTML=page_request.responseText
document.getElementById(containerid).scrollTop=0;
}
}

Get rid of (highlighted):

javascript:document.getElementById('content').scrollTop=0;ajaxpage('pages/page.htm', 'content')

from your code that starts the AJAX request, and it should be a smoother, or at least a more intuitive transition.

[Possemaster]

Thank You for your reply.

It´s a lot better this way.
So only one thing left and that is the anchors problem.

Keep up the good work.

[jscheuer1]

Well, at the moment, you have a problem with the English page, I think you must be working on it, but in any case the links are like:

http://www.alive-and-well.org/ajaxpage('pages/ministry.htm',%20'content')

Or, as written in the source:

<li><a href="ajaxpage('pages/ministry.htm', 'content')">Ministry</a></li>

It used to be (which would work):

<li><a href="javascript:ajaxpage('pages/ministry.htm', 'content')">Ministry</a></li>

But it really should be:

<li><a href="pages/ministry.htm" onclick="ajaxpage(this.href, 'content');return false;">Ministry</a></li>

I'm not sure what you mean about the anchors, are you saying that you want the loaded content to scroll to a particular spot once it loads, or that you want the entire ('top') page to scroll to a particular spot?

[Possemaster]

thanks for your reply.

problem on the english site is fixed.

I'm not sure what you mean about the anchors, are you saying that you want the loaded content to scroll to a particular spot once it loads, or that you want the entire ('top') page to scroll to a particular spot?

i would like the loaded dynamic content to be jumped to a certain spot.
like a big studie with different topics.

And if it would be possible ( i dont think it is) .
Can you jump to a specific dynamic page. from ex. an email with a link.

Like http://www.alive-and-well.org/index_...newletters.htm')) or something like that. i think that you know what i mean.
(PS the last question is not nessesary, would be cool though).

I would even like to donate some money if it would take a long time to code.

<Thanks for the effort>

Roy Timmermans

[jscheuer1]

You can do something like mentioned here:

http://www.dynamicdrive.com/forums/s...ad.php?t=12105

although a tailored solution for that particular script would be required, and even the methods (code) outlined in the above thread could probably be more precise, so as to not conflict with other query values (if used/needed).

As far as scrolling to a particular spot in the newly loaded content, you can scroll to a pixel location in it, but this will vary depending upon the user's font-sizes, and perhaps browser. A named anchor could be used to calculate the pixel location though.

Unfortunately, I am a bit busy with other matters at the moment, but if I get some extra time, I will look into it. I will need your example pages - as long as they are still available at the locations mentioned in you previous posts in this thread, I can use those.