jQuery doesn't work in IE, does work in all other browsers

Discussion in 'jQuery' started by KaDushi, Oct 5, 2012.

0
  1. #1
    Hi everyone,I'm busy designing a new website and want to include some jQuery elements. I'm pretty new to jQuery however I'm able to get it working in all browsers except for IE.This is what I have done:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Untitled Document</title>
<link href="css/layout_MouseOverSlide.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/MouseOverSlide.js"></script>
</head>
<body>
<div id="commercials"><div id="commercials_button"><ul id="commercials_slider_content">  <li class="commercials_slider_text"><a href="commercials.php"><img src="images/commercials_out.jpg" border="0" title="Radio and TV Commercials" /></a></li></ul></div>
</body></html>
    HTML:
    This is the jQuery script:

    $(document).ready(function(){                                            var thumbs = $("ul li img");        
        
        for (var i = 0, ii = thumbs.length; i < ii; i++){
            if (thumbs[i].title && thumbs[i].title.length > 0)
            {            
                var imgtitle = thumbs[i].title;        
                $(thumbs[i]).wrap('<div class="wrapper" />').                
                after('<div class=\'caption\'>' + imgtitle + '</div>').
                removeAttr('title');
                                            
            }                    
        }
                    
    $('.wrapper').hover(
        function(){
            $(this).find('img').animate({opacity: ".5"}, 300);        
            $(this).find('.caption').animate({top:"-140px"}, 300);            
        }, 
        function(){
            $(this).find('img').animate({opacity: "1.0"}, 300);                    
            $(this).find('.caption').animate({top:"140px"}, 100);
        }        
        );            
    });
    Code (markup):
     
    KaDushi, Oct 5, 2012 IP
  2. plussy

    plussy Peon

    Messages:
    152
    Likes Received:
    5
    Best Answers:
    9
    Trophy Points:
    0
    #2
    jquery is usually cross browser compatible.

    did you see if the js code causes any errors?
     
    plussy, Oct 10, 2012 IP
  3. KaDushi

    KaDushi Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi Plussy,

    How do I check that? IE doesn't give any code.. The effect just doesn't show up.
     
    KaDushi, Oct 10, 2012 IP
  4. plussy

    plussy Peon

    Messages:
    152
    Likes Received:
    5
    Best Answers:
    9
    Trophy Points:
    0
    #4
    plussy, Oct 10, 2012 IP
  5. KaDushi

    KaDushi Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I understand debugging is a must but I can't find a way to do it... Internet Explorer doesn't run on Mountain Lion OS. Does anyone have an idea how to tackle this? Thanks!
     
    KaDushi, Oct 16, 2012 IP
  6. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #6
    You have to be able to run all the browsers you want your site to work in. If you're running Apple, you'll have to dual boot Windows and run IE. You should also be running Opera, Chrome, Safari and Firefox - in at least both operating systems (since they run differently in each). And if you want Linux users to see your site the way you want it seen you should also be running Linux.

    That will solve all your "it doesn't look right in this browser in that OS" problems.
     
    Rukbat, Oct 28, 2012 IP
  7. barbodco

    barbodco Greenhorn

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #7
    opacity is css3 and not working in IE at all , how ever there is a code you can fadein and out the element with . but not via animate . whats your exact problem buddy?
     
    barbodco, Nov 12, 2012 IP