jQuery toggle class when iframe src changes

1
votes

I'm using a SoundCloud.com music player plugin called Stratus. The plugin allows you to set the class "stratus" on any anchor pointing to a soundcloud track and when clicked, will dynamically add the track to the player and begin playing. jsfiddle example: http://jsfiddle.net/2CCS6/

In addition to the toggle I have below, I'd like to toggle or remove "pause" from (this) when the src of the iframe changes. I've styled all .stratus links as play buttons and the issue is that when they're clicked, they (visually) remain in a play state. By toggling the class pause, I can display a pause icon instead to indicate the active track and pause functionality.

The version I have here sort of works for the click function but it seems to interfere with the function below it. As for toggling when the iframe src changes... I was looking into this.contentWindow.location but not sure if that will work due to the domain mismatch.

$('a.stratus').click(function() {
  $(this).toggleClass('pause');
  $.postMessage($(this).attr('href'), src, $('#stratus iframe')[0].contentWindow);
  return false;
});
return $.receiveMessage(function(e) {
  return $('#stratus').toggleClass('open');
}, root_url);

Thanks for any help you can offer!

1
javascriptjqueryiframetogglesoundcloud

1 Answers

1
votes

I believe the .load method will fire every time the src attribute changes.

 $('#frameId').load(function () {
    $(this).toggleClass('pause');
 });