jQuery plugin issues in IE

Question

I don't understand why my code doesn't work on internet explorer/ This is my index.php where I am invoking js libraries.

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/shadowbox.js" ></script>
    <script type="text/javascript" src="js/slides.min.jquery.js" > </script>
    <script type="text/javascript" src="js/jquery.simpleWeather-2.0.1.min.js" > </script>
    <script type="text/javascript" src="js/jquery.clock.js" > </script>
    <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
    <script type="text/javascript" src="js/default.js" > </script>

And this is my default.js

$(document).ready(function() {
    Shadowbox.init({
        overlayOpacity: 0.8
    }, setupDemos);

    if (typeof $().slides != "undefined") {
        $('#slides').slides({
            preload: true,
            preloadImage: 'images/slides/loading.gif',
            play: 3000,
            pause: 2500,
            hoverPause: true,
            animationStart: function(current){
                $('.caption').animate({
                    bottom:-35
                },100);
            },
            animationComplete: function(current){
                $('.caption').animate({
                    bottom:0
                },200);
            },
            slidesLoaded: function() {
                $('.caption').animate({
                    bottom:0
                },200);
            }
        });
    }

    $.each($(".menu li"), function(index, li) {
        if ($(li).hasClass("active")) {
            $("title").append(": " + $(li).children("a").text());
        }
    });

    if (typeof $.simpleWeather != "undefined") {
        $.simpleWeather({
            location: 'Armenia, Yerevan',
            unit: 'c',
            success: function(weather) {
                html = "<div style='height: 117px;'><h2>"+weather.city+', '+weather.region+'</h2>';
                html += '<img style="float:left;" width="125px" src="'+weather.image+'">';
                html += '<p>'+weather.temp+'&deg; '+weather.units.temp+'<br /></p>';
                html += '</div>';

                $("#weather").html(html);
            },
            error: function(error) {
                $("#weather").html('<p>'+error+'</p>');
            }
        });
    }

    $('#yerevan-time').clock({offset: '+4', type: 'analog'});
    $('#london-time').clock({offset: '+0', type: 'analog'});
    $('#new-york-time').clock({offset: '-5', type: 'analog'});
});

function setupDemos() {
    Shadowbox.setup("a[rel=photos]", {
        gallery:        "cars",
        continuous:     true,
        counterType:    "skip"
    });
}


$(function() {
    $( "#day1" ).datepicker();
    $( "#day2").datepicker();
    });

I can't find a solution here. You can check this out here . This is my website. So in internet explorer the clock and the weather doesn't work. What's the problem here. Any help will be useful. thanks.

Answer 1

The error has nothing to do with the code you posted..

If you check the console, you will see an error that is related to google maps.

And that error is being fired when you run the initialize method ( you have it bound to the onload event of the body tag )

Remove that to check that the clocks work correctly, and then make sure to run in only when there are maps to be shown in the page..

---

Update

The other , more important, issue in your case is that the clock plugin you use has code like this

jQuery(_this)
    .find(".sec")
    .css({"-moz-transform" : srotate, "-webkit-transform" : srotate});

Seeing the vendor prefixes -moz- and -webkit- means that the rotation of the hands is only applied to the mozilla and webkit browsers..

They have specifically excluded all other browsers..

---

Modern IE (>=9) workaround

For IE >= 9 you could add "-ms-transform" : srotate

jQuery(_this)
        .find(".sec")
        .css({"-moz-transform" : srotate, "-webkit-transform" : srotate, "-ms-transform" : srotate});

and it would work ( as IE >= 9 supports rotation.. )

( make sure to correct the code for all hands.. my example is only about the seconds )