Why does my JQuery fading slider not work on any IE type?

Question

My JQuery slider does not work in IE(in any documentmode). How could I fix this? My code slides down a div of text after a button is pressed(it fades in nicely too). The IE console gives me this error: "Object doesn't support property or method 'fadingSlideToggle'".

(function ($) {
    $.fn.fadingSlideToggle = function ($el, options) {
        var defaults = {
            duration: 500,
            easing: 'swing',
            trigger: 'click'
        };

        var settings = $.extend({}, defaults, options)
        $selector = $(this).selector;

        return this.each(function () {
            var $this = $(this);

            $(document).on(settings.trigger, $selector, function (e) {
                e.preventDefault();
                if ($($el).css('display') == 'none') {
                    $($el).animate({
                        opacity: 'toggle',
                        height: 'toggle'
                    }, settings.duration, settings.easing);
                } else {
                    $($el).animate({
                        opacity: 'toggle',
                        height: 'toggle'
                    }, settings.duration, settings.easing);
                }
            });
        });
    };
})(jQuery);

I wonder which part is not supported, and how to fix it. Thank you a lot!

EDIT: Here is the code where I call the function(it works on firefox and chrome):

 <button class="btn-custom btn-lg"" id="clickedEl"><span>Why rate/review websites?</span>        </button></br>
 <nav role="navigation" id="toggleEl">/*non relevant html*/</nav>

The rest of the javascript:

  $(function(){
   $('#clickedEl').fadingSlideToggle('#toggleEl');
  });

The JSFiddle that does not work in IE: http://jsfiddle.net/3ymvv

Answer 1

The problem seems to come from jQuery 1.10.1 ( #13936 #13980 ). Here's the error we got :

Access Denied - jQuery-1.10.1.js, line : 1513, column : 2

And the related lines :

// Support: IE>8
// If iframe document is assigned to "document" variable and if iframe has been reloaded,
// IE will throw "permission denied" error when accessing "document" variable, see jQuery #13936
if ( parent && parent.frameElement ) { // :1513   
    parent.attachEvent( "onbeforeunload", function() {
        setDocument();
    });
}

This happens early, and possibly prevent your script to be loaded.

Update jQuery to the 1.11.0 version (or more) and you'll see it works .

Answer 2

When I was testing in windows XP, ie8 and an old version of firefox exhibited the same behaviour (it suddenly appearing when #clickeEl first clicked) . Removing the <nav> element and just using the <ul> element seemed to fix it. Then I realized that the problem was the tag <nav> which is unknown to ie8 and firefox. As described in this article , the browsers do not know that <nav> is a block element. So adding

nav { display:block }

fixed the problem on me in ie8 in windows xp.

Demo

Actually, not sure how compatible this is, but it seems the plugin is doing some unnecessary stuff, since it's using jQuery. So I added it a bit below. (Mostly it bothered me you have to set display:none in CSS with an ID instead of the plugin itself.

Proposed Changes

Answer 3

Here we clearly do not know where the problem might be.

1. Your code looks fine.
2. Please show us the code where you use your plugin
3. There where you use your plugin, check if the plugin is defined console.log($.fn.fadingSlideToggle)
4. check that the object you are calling your plugin on is actually a valid jQuery Object. console.log(obj instanceof jQuery) or (!!obj.jquery && typeof obj.jquery === "string")

a jquery object usualy has a property called jquery that has the current jQuery version in it. Also the jquery object is usually an instance of the jQuery Object itself. But keep in mind it is possible that using .noconflict() there is no global variable jQuery or $

Answer 4

The problem is the jQuery loading in the fiddle. Just load jQuery from a CDN and then initiate your plugin.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  // your plugin
</script>

Now it works fine in IE 8+.

Answer 5

Do you by any chance have a html element with the id of fadingSlideToggle ? That could be the issue as explained here: https://stackoverflow.com/a/14003088/561957