JQuery Collapse and JW Player bug in IE8

There are a handful of JQuery plugins I utilize on a regular basis at my job at an online medical course company in Boston. Not surprisingly, problems are encountered from time to time when adding two JQuery plugins to the same online course webpage. Just this week I encountered a problem with using the JQuery Collapse plugin in conjunction with the JW Player plugin with Internet Explorer 8. The Collapse plugin provides the ability to show/hide content on a webpage and comes with some great options. While the JW Player plugin allows the ability to embed mp4 video in a webpage and have it play back in either HTML5 or Flash depending on the device. If JW Player code is placed inside an instance of the Collapse plugin it causes a JQuery  “unexpected call to method or property” error while using IE8. The error doesn’t occur in IE9, Firefox or Chrome by the way.

I did some research online, checked the Collapse plugin’s GitHub page, and did a quick Google search with not much sucess. Other people found bugs while using the Collapse plugin with IE7 or IE8 but didn’t have my specific issue. The solution was relatively simple, move the JW Player script outside the div for the Collapse plugin and place it somewhere else on the page. The div for the JW player, indicated by the div with the mediaplayer id, still stays inside the Collapse plugin div with the class of progressive disclosure.

Here’s an example:

<div class="progressive-disclosure">
<h3>View Video</h3>
<div id="mediaplayer"></div>
</div>
<script type="text/javascript">
    jwplayer("myElement").setup({
        file: "/uploads/example.mp4",
        height: 360,
        image: "/uploads/example.jpg",
        width: 640
    });
</script>
I hope people find this post useful. If you encountered the same problem let me know. I would like to hear from you.

Matthew Dailey

Web developer, photographer, and Photoshop user.