sysadmin42
Technical User
- May 6, 2005
- 138
I have a div layer that I need to stay visible as I scroll down the page. It works fine when I set up the internal contents to load with the page. The problem is, I am using AJAX to dynamically change the contents of the div. Once I do that, the layer won't move when I scroll.
Here's the "keep visible" code:
And here is the code for the div:
And to use it, I simply do something like this:
Any ideas?
"Computer illiterate is a dirty word."
Here's the "keep visible" code:
Code:
//Simply give the element an id of jsfx_float0, jsfx_float1, jsfx_float2, jsfx_float3, right_frame
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()',10);
};for(var i=0 ; i<4 ; i++)JSFX_KeepInView ("jsfx_float"+i);
Code:
function ahah(url, target) {
document.getElementById(target).innerHTML = ' <em>Loading data...</em>';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req != undefined) {
req.onreadystatechange = function() {ahahDone(url, target);};
req.open("GET", url, true);
req.send("");
}
}
function ahahDone(url, target) {
if (req.readyState == 4) { // only if req is "loaded"
if (req.status == 200) { // only if "OK"
document.getElementById(target).innerHTML = req.responseText;
} else {
document.getElementById(target).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
}
}
}
function load( div, name) {
ahah(name,div);
return false;
}
Code:
<a href="#a" onclick="load('jsfx_float1','pagetoload.php');">
Any ideas?
"Computer illiterate is a dirty word."