Results 1 to 8 of 8

Thread: Ajax Content auto Scroll to TOP or anchors

  1. #1
    Join Date
    Jan 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation Ajax Content auto Scroll to TOP or anchors

    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
    Code:
    javascript:ajaxpage('pages/news_letters.htm', 'content')
    thanks for your help

  2. #2
    Join Date
    Jan 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Other possibilities

    I found one thing to scroll it to top but itīs a little laggy.
    You could put in the link
    Code:
    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
    Last edited by Possemaster; 02-25-2008 at 07:11 AM.

  3. #3
    Join Date
    Jan 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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):

    Code:
    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):

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jan 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default thanks

    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.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    http://www.alive-and-well.org/ajaxpage('pages/ministry.htm',%20'content')
    Or, as written in the source:

    Code:
    <li><a href="ajaxpage('pages/ministry.htm', 'content')">Ministry</a></li>
    It used to be (which would work):

    Code:
    <li><a href="javascript:ajaxpage('pages/ministry.htm', 'content')">Ministry</a></li>
    But it really should be:

    Code:
    <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?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Possemaster (03-20-2008)

  8. #7
    Join Date
    Jan 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up

    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

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •