XF 1.1 SoundCloud HTML5 embed with dropdown

Cala_Marie

New member
A quick rundown of the changes I've made so far:
  • Added the BB Code media site SoundCloud:
    • Match URL (using regex): #soundcloud\.com/(?P<id>[a-zA-Z0-9\/_-]+?)#siU
    • Embed this HTML:
      Code:
      <iframe class="soundCloudEmbed" width="100%" height="450px" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https://soundcloud.com/{$id}&color=0085ff&auto_play=false&show_artwork=false"></iframe>
  • Added this to EXTRA.css:
    Code:
    iframe.soundCloudEmbed {
        position: relative;
        height: 166px;
        transition: height 250ms ease-in-out, margin-bottom 250ms ease-in-out;
    }
        iframe.soundCloudEmbed.soundCloudHover {
            position: relative;
            height: 450px;
            margin-bottom: -284px;
            z-index: 9999;
      }
  • Added this to page_container_js_body:
    Code:
    $(".soundCloudEmbed").hover(
        function () {
            $(this).addClass("soundCloudHover");
        },
        function () {
            $(this).removeClass("soundCloudHover");
        }
    );
The result is that moving your cursor over a SoundCloud widget causes it to fold out (animated gif).

The problem I'm dealing with now is that all SC widgets fold out, whether they're part of a set/playlist or not. If the sound isn't part of a playlist, hovering over it results in a large empty space (animated gif).

Is it possible to set this up so that the widget only folds out if its sound is part of a set/playlist?

Edit: To clarify, SC's HTML5 widget detects its own size on its own and adjusts its content accordingly (sound only if it's 166px high, sound + playlist if it's 450px high).
 
Last edited:
Jason P over at Stack Exchange has saved the day. :)

Here's the final JS:
Code:
jQuery(document).ready(function () {
    $('.soundCloudEmbed').each(function () {
        var soundSrc = $(this).attr("src");
        var isSet = (soundSrc).search('%' + '2Fsets' + '%' + '2F');
        if (isSet > -1) {
            $(this).hover(function () {
                $(this).addClass("soundCloudHover");
            }, function () {
                $(this).removeClass("soundCloudHover");
            });
        }
    });
});

Live demo: http://jsfiddle.net/dSX5g/
 
Top Bottom