Using JS to manipulate an AJAX generated DIV by ID, but it is not working.

jerryjoh · 10-20-2008, 04:31 AM

I am attempting to keep a DIV in the viewing window as the user scrolls. The DIV is in HTML generated in an AJAX call via a PHP script. The JS function is in the main HTML where the AJAX call resides. The code is:

<code>

<script type="text/javascript">
/********************************************************************
* You may use this code for free on any web page provided that *
* these comment lines and the following credit remain in the code. *
* Keep In View (c) JavaScript-FX. (www.javascript-fx.com) *
********************************************************************/
JSFX_KeepInView = function(id){
var getPageY=function(el){return(el==null)?0:el.offsetTop+getPageY(el.offsetParent);};
var getScrollTop=function(){return document.body.scrollTop||document.documentElement.scrollTop};
var el=document.getElementById(id);if(el==null)return;
if(el.style.position=="absolute"){el.startPageTop=-el.offsetTop;el.currentX=el.offsetLeft;el.currentY=el.offsetTop;}
else{el.style.position="relative";el.startPageTop=getPageY(el);el.currentX=el.currentY=0;};
el.floatInView=function(){
var targetY=(getScrollTop()>this.startPageTop)?getScrollTop()-this.startPageTop:0;
this.currentY+=(targetY-this.currentY)/4;this.style.top=this.currentY+"px";};
setInterval('document.getElementById("'+id+'").floatInView()',40);
};
JSFX_KeepInView ("ShowGoogleMapDiv");
</script>
</code>

When the page fully resolves the div dosen't "keep in view" during scrolling. I use firebug to attempt to put a watch on the script but firebug says the div is not defined. I can see the div in the dom inspector, however.

If I change the name of the div in the script to the ID of the div that surrounds the AJAX call, all of the content generated in the call stays in view during scrolling. This doesn't work for me though because the user can't see all of the content (only what originally is viewable).

Is there something special I need to do to access div's generated by AJAX?

I would really appreciate any help.

abduraooft · 10-20-2008, 07:28 AM

Have a try by changing

Quote:

JSFX_KeepInView ("ShowGoogleMapDiv");

to

Code:

window.onload=function(){
JSFX_KeepInView ("ShowGoogleMapDiv"); 
}

jerryjoh · 10-20-2008, 05:30 PM

Thank you for your post, but that did not work either. Is there some prefix I need to access the DOM within the response text?

I tried obj.responseText.document.getElementById(id) but that didn't work either.

Any thoughts?

jerryjoh · 10-21-2008, 08:04 PM

Thanks to everyone that read my post. I managed to figure out how to make this work. I left the function portion of the script in the main page and then called the function in the generated HTML by refering to it with the parent node:

<code>parent.JSFX_KeepInView("ShowGoogleMapDiv");</code>