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 10 of 10
  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jQuery not working in IE9

    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>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    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 :-)

  • #3
    New Coder
    Join Date
    Jun 2011
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's a good point devnull69 but it's still not working.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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.

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    You may be right. This is what the "Javascript Reference" (http://javascript.gakaa.com/window-s...0-scrolly.aspx) has to say about it
    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.

  • #6
    New Coder
    Join Date
    Jun 2011
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So how do I do window.scrollY for IE ?

  • #7
    New Coder
    Join Date
    Jun 2011
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    offset() should do what you need I think.

  • #9
    New Coder
    Join Date
    Jun 2011
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    how would offset() work -

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

  • #10
    New Coder
    Join Date
    Jun 2011
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

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