Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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

    Code:
    <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>
    Last edited by tommyguntom; 05-14-2010 at 01:27 AM.

  • #2
    New to the CF scene
    Join Date
    May 2010
    Posts
    9
    Thanks
    0
    Thanked 1 Time in 1 Post
    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, "");

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    9
    Thanks
    0
    Thanked 1 Time in 1 Post
    just make sure you variable in toPP is what you want it to be by echoing

    window.alert(toPP);

  • #4
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,574
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    Try this:
    Code:
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


    Code:
    		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;

  • #7
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hey didnt see your post old pedant, is there advantage in using your code rather than mine?


    Thanks

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,574
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    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?

    Code:
    if(document.documentElement.scrollTop >= 
    document.body.scrollTop){
    would then become
    Code:
       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().
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •