jQuery not working in IE9

ttmt · 07-12-2011, 12:40 PM

Hi all

I have a stripped down version of my project HERE

http://www.ttmt.org.uk/forum/12_scroll/

It's a simple nav that scrolls the page to a div and the relevant button in the nav changes color. If you scroll the page the button selected
will be the div that is central in the window.

This all works apart from IE9 (surprise surprise). In IE9 the scrolling works and the window
eases to the correct div but the buttons don't change color.

Does anyone know why this won't work in IE9?

I've been looking for a answer for 2 days now, any help would be greatly appreciated.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<style type="text/css" media="screen">
	 *{
	   margin:0;
	   padding:0;
	 }
	 body{
     background:#fff;
   	 color:#888;
     font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
   }
   /*-----------------------Site_Structure-------------------*/
   #leftCol{
     float:left;
     width:240px;
     position:fixed;
   }
   #rightCol{
     margin-left:240px;
     overflow:hidden;
     position:relative;
   	 width:819px;
   }
   /*-----------------------Left Col-------------------*/
   #leftCol ul{
     margin:27px 0 0 50px;
     list-style:none;
   }

   #leftCol li a{
     display:block;
   	 font-weight:bold;
   	 font-size:.9em;
     padding:4px 4px 4px 6px;
     margin-bottom:2px;
   	 text-decoration:none;
     width:120px;
   }
   /*-----------------------Right Col-------------------*/
   .section{
     background:#ddd;
     border-bottom:20px solid #fff;
   	 height:800px;
     overflow:hidden;
     padding:15px 0 5px 30px;
   }
	</style>
</head>

<body>
  <div id="pageWrap">
    <div id="leftCol">
     
      <ul>
        <li><a href="#one" class="nav" id="btn-one">One</a></li>
        <li><a href="#two" class="nav" id="btn-two">Two</a></li>
        <li><a href="#three" class="nav" id="btn-three">Three</a></li>
        <li><a href="#four" class="nav" id="btn-four">Four</a></li>
      </ul>
      
    </div><!-- #nav -->
    
    <div id="rightCol">
      
      <div id="one" class="section">
        <h1>One</h1>
      </div>
      
      <div id="two" class="section">
        <h1>Two</h1>
      </div>  
        
      <div id="three" class="section" >
        <h1>Three</h1>
      </div>
    
      <div id="four" class="section">
        <h1>Four</h1>
      </div>
            
    </div><!--#rightCol-->
  </div><!--#pageWrap-->
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"type="text/javascript"></script>
  <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
  
  <script type="text/javascript" charset="utf-8">
    var overCol = 'red';
    var txtCol = '#888'
    var $easing = 'easeInOutSine';
    //
    //Select Button One when Page first loads.
    $('#leftCol #btn-one').css({'background':overCol, 'color':'#fff'});
    //
    //Scroll page
    $('#leftCol a.nav').click(function(event){
      $anchor = $(this);
      $('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top}, 800, $easing)
      event.preventDefault();
    })
    //
    //Change button color when scrolling
    $(window).scroll(function(event) {
    	$('#leftCol a.nav').css({'background':'#fff','color':txtCol});
        var centre = window.scrollY + window.innerHeight / 2;
    		if(window.scrollY <= 50){
    			$('#leftCol #btn-about').css({'background':overCol, 'color':'#fff'});
    		}
        $('.section').each(function() {
            var div = $(this);
            if (div.offset().top <= centre && div.offset().top + div.height() >= centre ) {
    				$btn = "#btn-"+$(div).attr('id');				
    				$('#leftCol a'+$btn).css({'background':overCol,'color':'#fff'});	
        	}
      });
      return false;
      event.preventDefault();
    });
    
  </script>
</body>
</html>

devnull69 · 07-12-2011, 12:47 PM

Maybe because the CSS for background color is "background-color" and not "background"? CSS background is a multi-value property thus requires more than just the color value. Most browsers might be tolerant about this, but IE might not :-)

ttmt · 07-12-2011, 02:05 PM

That's a good point devnull69 but it's still not working.

SB65 · 07-12-2011, 07:09 PM

Same in IE8 as well.

I think the problem is that IE doesn't support window.scrollY, so the script never gets as far as setting the colour.

devnull69 · 07-12-2011, 09:32 PM

You may be right. This is what the "Javascript Reference" (http://javascript.gakaa.com/window-s...0-scrolly.aspx) has to say about it

Quote:

Return the pixel distance the window is scrolled along the horizontal (scrollX) and vertical (scrollY) axes. To determine these values in IE, you must take into account compatibility mode settings in IE 6 (see the DOCTYPE element). In backward compatibility mode and in IE for Macintosh, use the document.body.scrollLeft and document.body.scrollTop properties. In IE 6 standards compatibility mode (where document.compatMode == "CSS1Compat"), use document.body.parentNode.scrollLeft and document.body.parentNode.scrollTop to get the scroll values of the html element.

ttmt · 07-14-2011, 10:09 AM

So how do I do window.scrollY for IE ?

ttmt · 07-14-2011, 11:22 AM

I tried this to work only in IE

Code:

var centre = document.body.scrollTop + document.documentElement.clientHeight / 2;

to replace this

Code:

var centre = window.scrollY + window.innerHeight / 2;

but it's not working, how can I get the centre var in IE

SB65 · 07-14-2011, 07:45 PM

offset() should do what you need I think.

ttmt · 07-15-2011, 08:51 AM

how would offset() work -

Code:

var centre = window.offset() + window.innerHeight / 2;

ttmt · 07-15-2011, 11:16 AM

Ok so I think it should be

Code:

var centre = document.body.scrollTop + document.body.clientHeight / 2;

but it's still not working so it must be wrong.

This is driving me mad now, why dose IE always have to be the odd one out.

Does anyone have any ideas how to fix this ?

Any help would be greatly appreciated.

Code:

$(document).ready(function(){
  var btnBGColor = 'red';
  var txtCol = '#888'
  var $easing = 'easeInOutSine';
  //
  //Select Button One when Page first loads.
  $('#leftCol #btn-one').css({'background-color':'red', 'color':'#fff'});
  $(window).scroll(function(event) {
  	$('#leftCol a.nav').css({'background-color':'#fff','color':txtCol});

    var centre = window.scrollY + window.innerHeight / 2;
		
    $('#rightCol .section').each(function() {
        var div = $(this);
        if (div.offset().top <= centre && div.offset().top + div.height() >= centre ) {
            var theBtn = div.attr('id')
  	    var $theBtn = $('#leftCol #btn-'+theBtn);	
            $theBtn.css({'background-color':'red','color':'#fff'});	
      	}
    });
    return false;
    event.preventDefault();
  });
  //
  //Scroll page
  $('#leftCol a.nav').click(function(event){
    var $anchor = $(this);
    $('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top}, 800, $easing);
    event.preventDefault();
  })
  //
});

www.ttmt.org.uk