having trouble getting ajaxed content to scroll [Archive]

View Full Version : having trouble getting ajaxed content to scroll

kezkankrayon

01-28-2008, 09:54 AM

Am having trouble getting ajaxed content to scroll to a desired <div> identified by an id.

The code i have thus far will load new content into a div identified as 'scrolling_div' and it will even scroll 'scrolling_div' to a desired <div> within. However it will only scroll scrolling_div when a href is clicked for a second time. I would like to have the content load and then also have it scroll with the one click.

I'm stumped

here is the code -->

<script type="text/javascript">
function loadThenScroll(page,id){
getPage(page);
scrollDiv(id);
}

function getPage(page){
var xmlhttp=false; //Clear our fetching variable
try {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP'); //Try the first kind of active x object…
} catch (e) {
try {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); //Try the second kind of active x object
} catch (E) {
xmlhttp = false;
}
}

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest(); //Starts an XMLHttpRequest if able to get a working active x object
}

var file = 'policies.php?category='; //This is the path to the file with data
xmlhttp.open('GET', file + page, true); //Open the file through GET, and add the page wanted to be retrieve as a GET variable

xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState==4) { //Check if it is ready to recieve data
var scrolling_div = xmlhttp.responseText; //The content data which has been retrieved

if( scrolling_div ){ //Makes sure there is something in the content variable (scroll_div)
document.getElementById('scrolling_div').innerHTML = scrolling_div; //Change the inner content of div to the newly retrieved content
}
}
}

xmlhttp.send(null) //Nullify the XMLHttpRequest
return;
}


scrollSteps = 10
timer=""
moz=document.getElementById&&!document.all

function scrollDiv(id){
clearTimeout(timer)
scrollingDiv=document.getElementById("scrolling_div")

if((moz||window.opera)&&!scrollingDiv.style.position){
browserOffset=scrollingDiv.offsetTop
}

else{
browserOffset=0
}

if(scrollingDiv.scrollTop <= document.getElementById(id).offsetTop-scrollSteps-browserOffset){
scrollingDiv.scrollTop=document.getElementById("scrolling_div").scrollTop+scrollSteps
timer=setTimeout("scrollDiv('"+id+"')",10)

// if bottom of page reached before anchor point
if(scrollingDiv.scrollTop>(scrollingDiv.scrollHeight-scrollingDiv.offsetHeight)-scrollSteps){
clearTimeout(timer)
scrollingDiv.scrollTop=document.getElementById("scrolling_div").scrollHeight-scrollingDiv.offsetHeight
}

}

else{

if(scrollingDiv.scrollTop >= document.getElementById(id).offsetTop+scrollSteps-browserOffset){
scrollingDiv.scrollTop=document.getElementById("scrolling_div").scrollTop-scrollSteps
timer=setTimeout("scrollDiv('"+id+"')",10)
}

else{
clearTimeout(timer)
scrollingDiv.scrollTop=document.getElementById(id).offsetTop-browserOffset
}
}

}

function toTop(){
scrollingDiv=document.getElementById("scrolling_div")
clearTimeout(timer)

if(scrollingDiv.scrollTop >= scrollSteps){
scrollingDiv.scrollTop=document.getElementById("scrolling_div").scrollTop-scrollSteps
timer=setTimeout("toTop()",10)
}

else{
clearTimeout(timer)
scrollingDiv.scrollTop=0
}

}

</script>
</head>
<body>

<div id="scrolling_div" style="width:500px; height:100px;overflow:auto">

<div id="idWhatever">
text text text ...
</div>
<div id="idWhatever">
text text text ...
</div>

</div>

I have tried calling these two functions in different ways, but seem to be getting the same result. it will scroll the new content on the second click.
This is what i've tried.
<a href="#" onclick="getPage('pageWhatever'),scrollDiv('idWhatever')">someTitle</a>
<a href="#" onclick="loadThenScroll('pageWhatever','idWhatever')">someTitle</a>
<a href="javascript:getPage('pageWhatever'),scrollDiv('idWhatever')">someTitle</a>
<a href="javascript:loadThenScroll('pageWhatever','idWhatever')">someTitle</a>

I have even tried using different events to call the functions. This one did work, but it was dependent on how long the mouse button is held.
<a href="#" onmousedown="getPage('pageWhatever')" onmouseup="scrollDiv('idWhatever')">someTitle</a>

It seems that the scroll function starts before the ajax content has settled. Does anyone have any ideas?

any suggestions will be greatly appreciated

many thanks in advance

the-dream

01-28-2008, 01:13 PM

Would it not be easier to do this with CSS?

Do a google for 'Scrolling Div CSS'!

Thanks,
~ Christian

A1ien51

01-28-2008, 10:00 PM

The problem is rather simple...You are using a Asynch ajax request...That return at the end of your function...It is returning crapola...alert it and see what I am talking about.

You make two calls on the click [renaming them]....get Content and Scroll Me

get content grabs the page and scroll me, scrolls the to the new location.

Now you are expecting the content to load than have the scroll to load. In reality that is not the case. The two will end up running at the same time.

In non programming terms this is how the code is happening:
You send a friend to go get some pizza for the party. It is pretty hard to eat the pizza right now because it is not there. You need to wait for him to come back to eat it.

Back to the code:
The Ajax call goes out to get the content and you set the scroll location. Problem is the page has not come back

Back to the story:
You realize you are about to run out so he goes and gets more. Well you can keep eating since he already went once and did not come back.

Back to the code:
You are able to scroll because the content is already there from the prevoius request.

How can you fix it?
Well you need to find a way to pass the scroll location along with the call. When the call comes back, you check for the scroll location and you move there.

Hopefully I made some sense....Hard to do that on a monday afternoon. :)

Eric

kezkankrayon

01-29-2008, 02:36 PM

thanks A1ien51, what you said made complete sense. your input helped me along to solving the problem. this is a solution that was found


//processing function
function callback(serverData, serverStatus, id) {
document.getElementById('scrolling_div').innerHTML = serverData;
scrollDiv(id); //scrolls div to desired location
}

function ajaxRequest(page, id) {
var id = id;
var AJAX = null;
if (window.XMLHttpRequest) {
AJAX=new XMLHttpRequest();
} else {
AJAX=new ActiveXObject("Microsoft.XMLHTTP");
} // End setup Ajax.
if (AJAX==null) { // If Ajax couldn't initialize...
alert("Your browser doesn't support AJAX."); // Sorry msg.
return false // Return false, couldn't set up ajax
}
AJAX.onreadystatechange = function() { // When the browser has the request info..
if (AJAX.readyState==4 || AJAX.readyState=="complete") { // see if the complete flag is set.
callback(AJAX.responseText, AJAX.status, id); // Passes the response to processing function
} // End Ajax readystate check.
}
var url='policies.php?category='+ page; // This is the URL to be called.
AJAX.open("GET", url, true); // Open the url this object was set-up with.
AJAX.send(null); // Send the request.
}


scrollSteps = 10
timer=""
moz=document.getElementById&&!document.all

function scrollDiv(id){
clearTimeout(timer)
scrollingDiv=document.getElementById("scrolling_div")

if((moz||window.opera)&&!scrollingDiv.style.position){
browserOffset=scrollingDiv.offsetTop
}

else{
browserOffset=0
}

if(scrollingDiv.scrollTop <= document.getElementById(id).offsetTop-scrollSteps-browserOffset){
scrollingDiv.scrollTop=document.getElementById("scrolling_div").scrollTop+scrollSteps
timer=setTimeout("scrollDiv('"+id+"')",10)

// if bottom of page reached before anchor point
if(scrollingDiv.scrollTop>(scrollingDiv.scrollHeight-scrollingDiv.offsetHeight)-scrollSteps){
clearTimeout(timer)
scrollingDiv.scrollTop=document.getElementById("scrolling_div").scrollHeight-scrollingDiv.offsetHeight
}

}

else{

if(scrollingDiv.scrollTop >= document.getElementById(id).offsetTop+scrollSteps-browserOffset){
scrollingDiv.scrollTop=document.getElementById("scrolling_div").scrollTop-scrollSteps
timer=setTimeout("scrollDiv('"+id+"')",10)
}

else{
clearTimeout(timer)
scrollingDiv.scrollTop=document.getElementById(id).offsetTop-browserOffset
}
}

}

function toTop(){
scrollingDiv=document.getElementById("scrolling_div")
clearTimeout(timer)

if(scrollingDiv.scrollTop >= scrollSteps){
scrollingDiv.scrollTop=document.getElementById("scrolling_div").scrollTop-scrollSteps
timer=setTimeout("toTop()",10)
}

else{
clearTimeout(timer)
scrollingDiv.scrollTop=0
}

}
this is how the function was called
<a href="javascript:ajaxRequest('page','id')">'someTitle'</a>

now i have another query. for my purposes new ajax content doesn't always need to be loaded. sometimes it would be more appropriate to scroll the current content. does anyone know how this could be achieved?

A1ien51

01-29-2008, 07:51 PM

Sure....add a variable that saves the current page loaded.

if current page == requested page
goto my scroll code
else
make my Ajax request

Eric