1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.1 SoundCloud HTML5 embed with dropdown

Discussion in 'Styling and Customization Questions' started by Cala_Marie, Jul 9, 2013.

  1. Cala_Marie

    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: Jul 9, 2013
  2. Cala_Marie

    Cala_Marie New Member

    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/
     

Share This Page