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

Wheen

Could you also post the usage code? – Dak

Could you please verify that there's not multiple calls to include the jQuery library? you could be overriding your modified one with an empty copy. – Elonore

the html you appended does not show the code where you call the jQuery Plugin – Cerography

@Cerography My bad, I edited again. – Wheen

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.

Honorarium

Found the same thing, but this man clearly beat me to it. Give this man your 50 points, here's the fiddle to prove it: jsfiddle.net/3ymvv/10 – Prefrontal

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

Countermand

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 $

Cerography

The plugin is defined, I checked my console. How do I check if it is a valid JQuery object? – Wheen

ok, than, we need the code where you use your plugin, because clearly there is a problem with the initialization and not in your plugin – Cerography

I call it like this: <script src="jquery/jquery.fadingslidetoggle.js"></script> and then the rest of it is in an edit in my orginal post. – Wheen

is the code above defined AFTER you load jQuery?, Are you loading more than one jQuery? Also if you place a console.log('plugin'); in the middle fo your plugin, does it show up in the console? – Audreaaudres

it is after I load jQuery, I don't think I load more than one. Nothing shows up if I do that. – Wheen

I think I asked already 5 times. Can you show us the JavaScript code where you actually say $(".someSelector").fadingSlideToggle() or something ...? – Cerography

Here's a JSFiddle with everything: jsfiddle.net/gh/gist/jquery/1.10.1/6769183 – Wheen

the plugin is missing in the fiddle – Cerography

@Cerography its in the external resources. – Wheen

Oh I see, but it does not work, Refused to execute script from 'raw.github.com/donwalter/jquery-fading-slide-toggle/master/…' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. – Cerography

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+.

Gaylegayleen

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://mcmap.net/q/319269/-script438-object-doesn-39-t-support-property-or-method-ie

Tridimensional