2

Hope this topic doesn't exist twice. I'm searching for a week now and didn't find anything that helped me out.

Ok. I just made a new website with "jimdo" and I'm quite happy with what I've managed so far. My new website is almost done but I have a huge problem to hide a play button on click and show a pause button then. Then click the pause button and the play button appears. I'm sure there are a lot of codes out there but I can't find anything that works for me :(

Here is an image of how it looks at the moment: play-pause button parallel

These two image buttons are connected to a SoundCloud iframe player and it works but it would be just awesome to have one button instead of the two side by side.

The code looks like this:

<div style="position: relative;">
    <img id="playSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/playcircle.svg" alt="play" title="play" class="opa" style="position: absolute;width: 100%;max-width: 20px;filter: invert(100%);cursor: pointer;margin: -30px 1px;" name="playSound2"><img id="stopSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/pausecircle.svg" alt="pause" title="pause" class="opa" style="position: absolute;width: 100%;max-width: 20px;filter: invert(100%);cursor: pointer;margin: -30px 22px;" name="stopSound2">


$(function(){
  var widget1 = SC.Widget("so2");

    $("#playSound2").click(function() {
      widget1.play();

  });  
  $("#stopSound2").click(function() {
      widget1.pause();
  });      
});

I really dont know how to make this work.

Janosch
  • 89
  • 7
  • If this is displayed using an iframe and the code is within it. You won't be able to change any of the CSS. See also [Using CSS to affect div style inside iframe](https://stackoverflow.com/questions/583753/using-css-to-affect-div-style-inside-iframe) – Roy Scheffers Aug 04 '18 at 18:26
  • Also have you checked the settings of Soundcloud? I know they have several displaying options for their players. You might be lucky that this is an option you can set. – Roy Scheffers Aug 04 '18 at 18:30
  • 1
    @RoyScheffers The "play and pause button" pictures are not part of the iframe code. The pictures have only an "id" (playSound) linked to the soundcloud player. All that's missing is a css or a script code that hides the "play" image on click and displays the "pause" image. And if you cklick the "pause" image, this will hide it and show the "play" image again. And so on. – Janosch Aug 04 '18 at 20:22
  • Alright, that changes things. Have a look at the answer provided. That should do the trick. – Roy Scheffers Aug 05 '18 at 10:35

1 Answers1

1

If you are able to adjust the CSS you can implement jQuery's .addClass() and .removeClass.

Here's a working example where the play and pause buttons are placed on top of each other. A click event registered and when fired, the button with the .hide class is assigned to the toShow variable. Then, the hide class is added and removed depending on which button is shown. As you clarified in the comments that it's a requirement to have the code work while there are several buttons on the page, here's a working example.

Make sure the buttons are within the button-wrapper class as the code uses this to find the button that is currently hidden.

$('.opa').click(function(e) {
  var toShow = $(e.target).parent().find('.opa.hide')[0];
  $(e.target).addClass('hide');
  $(toShow).removeClass('hide');
});
.button-wrapper {
  position: relative;
  height: 50px;
}

.opa {
  position: absolute;
  width: 100%;
  max-width: 20px;
  filter: invert(100%);
  cursor: pointer;
  margin: -0px 1px;
}

.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="button-wrapper">
  <img id="playSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/playcircle.svg" alt="play" title="play" class="opa" name="playSound2">
  <img id="stopSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/pausecircle.svg" alt="pause" title="pause" class="opa hide" name="stopSound2">

</div>

<div class="button-wrapper">
  <img id="playSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/playcircle.svg" alt="play" title="play" class="opa" name="playSound2">
  <img id="stopSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/pausecircle.svg" alt="pause" title="pause" class="opa hide" name="stopSound2">

</div>

<div class="button-wrapper">
  <img id="playSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/playcircle.svg" alt="play" title="play" class="opa" name="playSound2">
  <img id="stopSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/pausecircle.svg" alt="pause" title="pause" class="opa hide" name="stopSound2">

</div>
Roy Scheffers
  • 3,832
  • 11
  • 31
  • 36
  • Hey Roy. You did it, the code works great! Thank you very much :) However, I have a new problem now. On my website I have not just one player but ten. And there will be more cards in the future, as in the picture I had attached. The problem is that the "play" buttons should reappear when I click on another "play" button on another card. I found a website where you can see a very good example of how it should look like. Would it be possible to add a class or an id to the existing code that makes this possible? here is the [link](https://www.elektron.se/soundpacks/) – Janosch Aug 06 '18 at 14:02
  • 1
    Specs always change when there is a working example :) No worries though. I have updated my example, which should fit your needs. Let me know if this works. – Roy Scheffers Aug 06 '18 at 15:28
  • Thank you Roy but unfortunately it does not work the way I meant it in your updated example. The pictures do not jump back to "play" status when I click on another player. For example, if you have several soundcloud players on your website and you click on eg the first one and then the second player, the first player jumps automatically from "pause" back to "play" status. – Janosch Aug 06 '18 at 16:46
  • 1
    I see what you mean and as you pointed out in the example link, this is the behaviour between those players. It's hard for me to put that into code without a better example of what your code looks like. Can you create a [jsFiddle](http://jsfiddle.net) with a working example of 2 or more players? Then I can have a look which code would be required to create this functionality and if it can be done. Thanks. – Roy Scheffers Aug 06 '18 at 20:23
  • Hey Roy :) I was able to manage a working jsFiddle with 3 players. Here is the [link](http://jsfiddle.net/pdw59362/40/) – Janosch Aug 07 '18 at 12:33
  • 1
    Thanks. Have a look at [this jsFiddle](http://jsfiddle.net/roycode/5oygw81L/2). It looks like this will probably work on the site. The code can definitely be improved upon, but I didn't want to optimize it too much as I'm unsure if it then would still work on Jimdo. Let me know if we got it! – Roy Scheffers Aug 07 '18 at 17:25
  • First I was really happy to see that it works but then I realized that the code don't work with Jimdo. Or I did something wrong? Anyway, I have tried everything possible, but it does not work as in your jsFiddle example :( I could give you the address and you could look at it yourself to connects the dots? – Janosch Aug 07 '18 at 21:30
  • That's a pity. If you'd like we can join a stack overflow chat. Here's the link. https://chat.stackoverflow.com/rooms/177598/switch-custom-soundcloud-play-pause-image-on-click – Roy Scheffers Aug 07 '18 at 21:34
  • I must have 20 reputation on Stack Overflow to talk in chat :( Until I read the info, I desperately searched for the input text field :D – Janosch Aug 07 '18 at 22:42
  • 1
    Ok, I didn't know. If you want reach out to me through my contact form on my portfolio website. It's in my stack overflow profile. We can take things further via email, if you'd like. – Roy Scheffers Aug 07 '18 at 23:14