Question

I tried to use multiple soundcloud html5 widgets (iframes) in a javascript slider using slidejs.

Apart from IE all browsers slide the widgets without any problems.
In IE9 only the widget in the first slide shows up, the other widgets are somehow hidden.
You can find a example of the slider.

I found out that after reloading the page you can click on “next” fastly and all the widgets are shown.

in the console i get two errors:

"HTML1115: X-UA-Compatible META tag ('IE=edge,chrome=1') ignored because document mode is already finalized."

and

"?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F56094476&show_artwork=false
SCRIPT5009: 'Object' is undefined 
widget-ab572693.js, line 1 character 6728"

Answer 1

There is a bug/security feature in IE9 (Link expired, see update) that is preventing iframes that are detached from DOM from accessing JavaScript runtime environment. So basic things like Object or even String constructors aren’t available in time of widgets’ JavaScript evaluation.

Slidejs plugin is detaching the contents of slides’ divs (you can see jQuery wrapAll call, that is effectively removing and re-attaching contents of the slides). I’ve tried to only load iframes after the slidejs is done with its initialization, but even just having the iframe containers display CSS property set to none is preventing iframes from being visible in IE9. Which is another issue with how IE9 handles iframes.

Another thing you could have done is to initialize the widget iframes only after the slide is shown, but unfortunately slidejs is not providing callback API for that event.

So, my suggestion is to try another plugin that would provide you with same functionality but would let you create iframes on slides being shown, or to patch this one by hiding slides with position:absolute;left:-9999px or something like that instead of using display:none.

I hope this helps!

UPD. MSDN “moved” (or removed) the content of that link. Wayback machine link for that article is here.