SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery not working in IE ?

    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.

    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. #2
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ttmt View Post
    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.
    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:

    Code:
    <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. #4
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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. #6
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes it's IE9 - Is it worth trying to fix this?

  7. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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. #8
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Certain jQuery elements work in IE9 - the page easing works and that's jQuery.

  9. #9
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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".


Bookmarks

Posting Permissions

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