PDA

View Full Version : Ajax Content auto Scroll to TOP or anchors



Possemaster
02-20-2008, 09:31 AM
1) Script Title: Ajax Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.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
02-21-2008, 02:32 PM
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 (http://www.alive-and-well.org)

Possemaster
02-25-2008, 07:21 AM
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
02-25-2008, 11:09 AM
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
02-26-2008, 12:20 PM
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
02-26-2008, 03:02 PM
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
03-20-2008, 10:35 AM
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_en.html(javascript:ajaxpage('content','pages/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
03-21-2008, 03:29 PM
You can do something like mentioned here:

http://www.dynamicdrive.com/forums/showthread.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.