SoundManager 2 in a hidden Container

Doesn’t work in IE

by mischah

HTML

<link rel="stylesheet" href="http://www.schillmania.com/projects/soundmanager2/demo/play-mp3-links/css/inlineplayer.css">
<link rel="stylesheet" href="http://www.schillmania.com/projects/soundmanager2/demo/flashblock/flashblock.css">
<script src="http://www.schillmania.com/projects/soundmanager2/script/soundmanager2.js"></script>
<script src="http://www.schillmania.com/projects/soundmanager2/demo/play-mp3-links/script/inlineplayer.js"></script>
<p>
    <a href="#" class="showDetails">Details</a>
</p>

<div class="details">
    <div id="sm2-container">
        <!-- SM2 flash goes here -->
    </div>
    
    <ul class="graphic">
        <li>
            <a href="http://www.freshly-ground.com/misc/music/carl-3-barlp.mp3" class="sm2_link">
                Barrlping with Carl (featureblend.com)
            </a>
        </li>
        <li>
            <a href="http://www.freshly-ground.com/data/audio/binaural/Mak.mp3" class="sm2_link">
                Angry cow sound?
            </a>
        </li>
    </ul>
</div>

CSS

#soundmanager-debug {
    /* SM2 debug container (optional, makes debug more useable) */
    position:absolute;position:fixed;*position:absolute;bottom:10px;right:10px;width:50em;height:18em;overflow:auto;background:#fff;margin:1em;padding:1em;border:1px solid #999;font-family:"lucida console",verdana,tahoma,"sans serif";font-size:x-small;line-height:1.5em;opacity:0.9;filter:alpha(opacity=90);
}

body {
    font:75% normal verdana,arial,tahoma,"sans serif";
}

JavaScript

$(document).ready(function() {
    var details = $('.details').hide();
    $('.showDetails').click(function() {
        details.slideToggle();
    });
});