CODEWITHSUNDEEP
javascriptjqueryinternet-explorerjquery-plugins
Aly Afifi
Aly Afifi

Reputation: 35

My jquery plugin is not working on IE

i'm creating a gallery slider it is working fine on most of the browsers but not working on IE i have tested it on google chrome and firefox no errors found there and it is working as it should be
please show me where is my error

`(function($){

$.fn.AD_Slider = function(options)
{
    parent = this;
    parent.append('<span id="AD_slider_holder"></span>')
    $('#AD_slider_holder')
            .css
            (
                {
                    'position': 'absolute',
                    'bottom': '0px',
                    'left':'0px'
                }
            )
    no_of_items = 0;
    var settings = $.extend(
        {
            item_width: 200,
            animation_time: 1000,
            wait_time: 1000,
            slider_width:400,
            height:300
        },
        options
    );
    this.css
    (
        {
            'position':'relative',
            'width':  settings.slider_width + 'px',
            'height': settings.height + 'px',
            'border':'1px solid',
            'overflow':'hidden'
        }
    )
    $(this).children('div').each(function(){
        parent.children('#AD_slider_holder').append('<div />');
        parent.children('#AD_slider_holder')
            .each(
                function()
                {
                    $(this).children('div')
                        .css
                        (
                            {
                                'width':'10px',
                                'height':'10px',
                                'border':'1px solid',
                                'margin':'5px',
                                'float':'left'
                            }
                        )
                }
            )
        $(this).css
        (
            {
                'position': 'absolute',
                'top': '0px',
                'left': '0px',
                'width':settings.item_width,
            }
        );  
        $(this).hide();

    })
    parent.children('#AD_slider_holder').each(
    function(){
        $(this).children('div').click(
            function()
            {
                clearTimeout(animator_time_out);
                animate_next(parent,$(this).index());
            }
        );
    })
    animate_next(this);
};
function animate_next(parent,index_no)
{
    if(!index_no)
    {
        index_no = 0;
    }
    no_of_elements = parent.children('div').length;
    if(no_of_elements == index_no)
    {
        index_no = 0;
    }
    parent.children('div').fadeOut(); 
    parent.children('div:eq('+index_no+')').fadeIn(2000);
    parent
        .children('#AD_slider_holder')
            .each
            (
                function()
                {
                    $(this).children().css({'background':'none'})
                }
            )
    parent.children('#AD_slider_holder')
        .each(
            function()
            {
                $(this).children('div:eq('+index_no+')')
                    .css
                    (
                        {
                            'background':'red'
                        }
                    )
            }
        )
    index_no++;
    animator_time_out = setTimeout(function(){animate_next(parent,index_no)},5000)
}

})( jQuery );`

i'm using the latest jquery

Upvotes: 0

Views: 988

Answers (1)

Didatus
Didatus

Reputation: 900

I don't know exactly but i suggest to remove the comma at the end of

'width':settings.item_width,

in

    $(this).css
    (
        {
            'position': 'absolute',
            'top': '0px',
            'left': '0px',
            'width':settings.item_width,
        }
    );

The Internet Explorer doesn't like it if there is a comma after the last element of an object.

Upvotes: 3

Related Questions