Home/ Questions/Q 8150937
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T15:12:41+00:00

So I’m using a template for a jQuery plugin and unfortunately it will not

  • 0

So I’m using a template for a jQuery plugin and unfortunately it will not work in IE8 and IE compatibility mode.

I’m not sure if the way I’m writing them is compatibile at all or if I’m just missing something?

HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>SuperHero Demo</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/SuperSelect.js"></script>
</head>

<body>

<div class="test" style="border:1px solid #000;">
<p>Hello World!</p>
</div>
<div>
<p>Sup World</p>
</div>

<script>
$('.test').superHero({

});
</script>
</body>
</html>

SCRIPT:

// Utility
if ( typeof Object.create !== 'function' ) {
    Object.create = function( obj ) {
        function F(){};
        F.prototype = obj;
        return new F();
    };
}

(function( $, window, document, undefined ) {

    var Super = {
        init: function( options, elem ) {
            var self = this;

            self.elem = elem;
            self.$elem = $( elem );

            if ( typeof options === 'string' ) {
                self.duration = options;
            } else {
                // object was passed
                self.duration = options.duration;
            }                       

            self.options = $.extend({}, $.fn.superHero.options, options );

            self.replaceSelect();

        },

        replaceSelect: function( duration ) {
            var self = this;
            $('.test').hide();
            $('.test').after('<select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select>');

        },


    };

    $.fn.superHero = function( options ){
        return this.each(function() {
            var hero = Object.create( Super );

            hero.init( options, this );

            $.data( this, 'superHero', hero);

        });

    };

    $.fn.superHero.options = {
        duration:           5000,   //Milliseconds that each slide remains on screen. Default is 5 seconds.
        transition:         'fade', //How will the slides trascend?
    };

})( jQuery, window, document );

http://jsfiddle.net/userdude/QWhPL/1/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Looks like when you are setting the options, you have a trailing comma after the transition property. IE8 doesn’t like trailing commas, update it to:

    $.fn.superHero.options = {
        duration:           5000,   //Milliseconds that each slide remains on screen. Default is 5 seconds.
        transition:         'fade' //How will the slides trascend?
    };

    …and it should work.

    You also have a trailing comma after the replaceSelect: function declaration that needs removing:

    replaceSelect: function( duration ) {
            var self = this;
            $('.test').hide();
            $('.test').after('<select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select>');

        }
    • 0