Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

floating div issue- won't float

Status
Not open for further replies.

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:
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);
And here is the code for the div:
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;
	}
And to use it, I simply do something like this:
Code:
<a href="#a" onclick="load('jsfx_float1','pagetoload.php');">

Any ideas?

"Computer illiterate is a dirty word."
 
I saw that, but I don't want to use the position element, I want to use Javascript. Is this the CSS or JS forum?

"Computer illiterate is a dirty word."
 
Is this the CSS or JS forum?
Is that supposed to be a serious question? Sarcasm isn't always easily noticed on the 'net.

-kaht

Looking for a puppy?

silky-icon-left.gif
[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]
silky-icon-right.gif
 
sarcasm.

"Computer illiterate is a dirty word."
 
In that case:

I saw that, but I don't want to use the position element

from your code above [small](that you didn't write)[/small]
Code:
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;};

It would appear that your code is dependent on the CSS position element no matter what solution you use.

I want to use Javascript. Is this the CSS or JS forum?
Why would you *want* to use javascript when a CSS solution exists that performs the same functionality? If you read deeper into the thread that Miros provided for you [small](which is another thread in the javascript forum, NOT the CSS forum)[/small] then you will see that BabyJeffy supplied a link to a page that provides the functionality that you are asking for w/o javascript. All javascript solutions to this problem create jittery boxes that don't move very fluidly with the rest of the page when it is scrolled, and I probably don't even have to go into the argument about people turning off javascript - I'm sure you've heard it a thousand times, but it still applies here.

I'd suggest that you try not to take an attitude with posters that freely offer their time to give you helpful suggestions. If it's not the exact answer you're looking for then that is not a reason to give a sarcastic response. There was no malice in Miros's reply to you, and s/he did not deserve your curt reply.

-kaht

Looking for a puppy?

silky-icon-left.gif
[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]
silky-icon-right.gif
 
my apologies to both of you. it wasn't meant with attitude- just my personality.

the reason I want to use javascript is that I have dynamic content which may often be taller than the page allows. using css would give me problems there. Also, I can't have the position fixed/absolute (with IE6) because the content above it may push it down a little and it needs to flow with the page.

I think the fix is a really cool css option, tried it and it works well, just not fitting my application completely.

and in regards to the code I posted, I simply copy/pasted from another website. I didn't write the JS.

It seems that this particular thread may have misaligned with the stars and may be unfruitful. I will try my solution-searching elsewhere. Again, I meant no ill feelings by my sarcasm.

"Computer illiterate is a dirty word."
 
Also, I can't have the position fixed/absolute (with IE6) because the content above it may push it down a little and it needs to flow with the page.

position:absolute should remedy this - giving an element the position:absolute property removes it from the layout of the rest of the page - and the browser will render it as it's own seperate entity. In turn, that should mean that it will not interfere with the positioning of the rest of the elements in the layout of your page.

-kaht

Looking for a puppy?

silky-icon-left.gif
[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]
silky-icon-right.gif
 
The reason I posted that link is because I suggested using a Frame or IFrame in that thread and didn't think it was appropriate to repeat myself. I suppose I should have said, Look at my post in this thread, but thought the original questioner would quickly scan through the whole thing.

I still think an IFrame would help if you don't want absolute positioning. But that's my personal preferences.

 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top