Jquery not working in IE?

JavaScript
1

Jquery not working in IE ?

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 IE (surprise surprise). In IE 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 IE?

Any help would be greatly appreciated.


<!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>
2

Does anyone have any idea about this, I’ve been trying to work it out all day and got nowhere.

Any help would really be appreciated.

3

Lets start with the obvious. Try adding a space between … “/1.3/jquery.min.js” … and … "type=“text/java” … in your code. So it would read:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

Might not be the problem, I just know IE is very picky.

4

TheRaptor, thanks for your input.

I tried your suggestion but no luck. The actual page that this appears on has other jQuery elements that work, the scrolling with easing on this example works as well.

5

I am going to assume your using IE 9, if you are then that’s the issue. I don’t know what Microsoft did but IE 9 breaks everything it touches, even simple jQuery scripts like the scroll script your using won’t work but it works fine in IE 6, 7 & 8.

6

Yes it’s IE9 - Is it worth trying to fix this?

7

Personally not its not, i haven’t seen one jQuery plugin that works with IE 9 and for me that’s a big -1 for Microsoft as they rushed IE 9 before it was even complete.

8

Certain jQuery elements work in IE9 - the page easing works and that’s jQuery.

9

Yes certain aspects work fine but all the plugins i use don’t work at all in IE 9 and they have no errors, the problem is Microsoft won’t fix the issue because there is no issues “apparently”.