asked on

Jquery function not working in IE

Hi Experts,

This function works when called in all browsers except IE... is there anything obvious that I'm doing wrong?

(function ($) {

    $.fn.wavesurf = function (options) {
        var defaults = {
            increment: false,
            gridSize: 320,
            surfSize: 400,
            normalSize: 960,
            maxSize: 1600,
            surfCustom: $.noop // I want a user supplied method here
        };
		

        var surfOptions = $.extend(defaults, options);

        var increment = surfOptions.increment;
        var gridSize = surfOptions.gridSize;
        var surfSize = surfOptions.surfSize;
        var normalSize = surfOptions.normalSize;
        var maxSize = surfOptions.maxSize;


        var containerOuterWidth = $(this).outerWidth();
        var containerInnerWidth = $(this).innerWidth();
        var windowWidth = $(window).innerWidth();

        var gridCount = Math.floor(windowWidth / gridSize);
        var gridCountWidth = gridCount * gridSize;


        if (increment === false) {
            if (windowWidth >= maxSize) {
                $(this).css("width", maxSize);
                $(this).removeClass("surf");
            } else if (windowWidth > normalSize && windowWidth < maxSize) {
                $(this).css("width", normalSize);
                $(this).removeClass("surf");
            } else if (windowWidth > surfSize && windowWidth < normalSize) {
                $(this).css("width", normalSize);
                $(this).removeClass("surf");
            } else if (windowWidth < surfSize) {
                $(this).css("width", gridSize);
                $(this).addClass("surf");
            }

        } else {

            if (gridCountWidth === gridSize) {
                $(this).css("width", gridSize);
                $(this).addClass("surf");
            } else if (windowWidth < maxSize && windowWidth > gridSize) {
                $(this).css("width", gridCountWidth);
                $(this).removeClass("surf");
            } else if (windowWidth >= maxSize) {
                $(this).css("width", maxSize);
                $(this).removeClass("surf");
            }


        }

        if ($.isFunction(options.surfCustom)) {
            // call user provided method
            options.surfCustom.call();
        }
    };
})(jQuery);

Open in new window

and then call it like this...

$(window).bind("load resize", function () {
        $('#container').wavesurf({
            increment: false,
            gridSize: 320,
            surfSize: 400,
            normalSize: 960,
            maxSize: 1280,
            surfCustom: function () {

// Execute more script in here //

}
        });
    });

Open in new window

Many thanks in advance

maccaj51

ASKER

doing some research it looks like this is an issue in ie -
$(window).bind("load resize", function ()

Any ideas?

Gary

What version? Works fine for in IE10

Jagadishwor Dulal

You are not using document ready in your script it's seems like window resize bind event in IE can not work while document is completely loaded, it won't work. Add document ready before call event

$(document).ready(function(){ }

Open in new window

ASKER CERTIFIED SOLUTION

maccaj51

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial