troubleshooting Question

Jquery function not working in IE

Avatar of maccaj51
maccaj51Flag for Afghanistan asked on
JavaScriptjQuery
4 Comments1 Solution327 ViewsLast Modified:
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);

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 //

}
        });
    });

Many thanks in advance
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 4 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros