Resolved javascript issue with google chrome (position:fixed horizontal position:absolute vert

[tommyguntom]

I'm new to javascript and am not sure why this works in firefox and not chrome.
I am trying to create a script that keeps an object fixed horizontally while bing positioned absolute vertically.

if I replace the toPP variable in document.getElementById('fire').style.top = toPP; with say '50px' it will move the element down 50 pxs, but how I have it currently it doesn't do anything in chrome

<script type="text/javascript" >
	
	
window.onscroll = function() 
{
	if( window.XMLHttpRequest ) { 
		
			
			var x = 0 -document.documentElement.scrollTop;
			var toP = String(x);
			var toPP = toP + "px";
			
			document.getElementById('fire').style.position = 'fixed'; 
			document.getElementById('fire').style.top = toPP;
				
	}
}
	</script>

[xaltednet]

firefox is smarter and more robust so it changes things for you at times... you might need to get rid of the 'px' in the scrollTop.... not 100% sure about this though

var x = 0 - document.documentElement.scrollTop.replace(/px/gi, "");

[xaltednet]

just make sure you variable in toPP is what you want it to be by echoing

window.alert(toPP);

[tommyguntom]

Thanks for your time xaltednet.


Could you please explain what that last part does

.replace(/px/gi, "");

if I add this bit it makes it not work in firefox as well as chrome.


also if I use the window.alert(topp); thing on chrome it only ever comes up with 0px
but comes up with the right numbers on firefox.

[Old Pedant]

Try this:

window.onscroll = function() 
{
	if( window.XMLHttpRequest ) 
	{ 
		var stop = parseInt(document.documentElement.scrollTop);
		if ( isNaN(stop) || stop == 0 )
		{
			stop = parseInt(document.body.scrollTop);
		}
		if ( ! isNaN(stop) && stop != 0 )
		{
			document.getElementById('fire').style.position = 'fixed'; 
			document.getElementById('fire').style.top = (- stop ) + "px;
		}
	}
}
</script>

Whether or not document.documentElement exists depends on the type of page you are using (HTML, XHTML transitional, XHTML strict) and seems to vary by browser. My hack is to try document.documentElement first and, if it doesn't work, then fall back to document.body.

And that replace() should have removed the "px" from scrollTop if it came back as "135px" (for example), but parseInt will do the same thing, so K.I.S.S.

[tommyguntom]

it appears that there is a bug in google chrome;

http://code.google.com/p/chromium/issues/detail?id=2891

so this code doesn't work for chrome but works for FF
document.documentElement.scrollTop

and this code doesnt work for FF but works for chrome

document.body.scrollTop

so just did a pick the greatest one and use that

		var x = 0;
			if(document.documentElement.scrollTop >= 
document.body.scrollTop){ 
			
			 x = 0 - document.documentElement.scrollTop;
			}
			
			else{
				
			x = 0 -	document.body.scrollTop;
			}
			
			
			var toP = String(x);
			var toPP = toP + "px";
			
			document.getElementById('fire').style.position = 'fixed'; 
			document.getElementById('fire').style.top = toPP;

[tommyguntom]

hey didnt see your post old pedant, is there advantage in using your code rather than mine?


Thanks

[Old Pedant]

Well, you are making the assumption that you will indeed get a zero value from whichever one doesn't exist.

But suppose you get null?

if(document.documentElement.scrollTop >= 
document.body.scrollTop){

would then become

   if ( null >= '42px' )
or 
   if ( '42px' >= null )

Would that always give the comparison you expect??

Me, I'm paranoid. I play it safe by ensuring that I *do* get a number by using isNaN().