Using OnClick With OnMouseOver

JavaScript
1

I would like to combine Hover/OnMouseover with OnClick. But only when the audio is playing:

I hope I was detailed enough in here about what I’m trying to do. If you have any questions please ask.

Below is what I’m trying to achieve

initial SVG/Hover Disabled

audio is playing/Hover Allowed
After you click on it, instead of the audio symbol appearing, I want the pause/hover to appear first.

So, when you hover, the pause/hover sign would show, and then when you pull your mouse away, the audio SVG will show:

audio is off/Hover Disabled

New Hover Class

<svg class="hover" width="90" height="108" style="background-color:; "viewbox="-13 -10 85 120">
<path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent; " d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>

Working Code:

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer;background-color: #000000 ;background-image: linear-gradient( to right,transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent  174px, #0059dd 174px, #0059dd 177px, transparent 177px ); border: 3px solid #0059dd;"
    onclick=" 
        var button = document.getElementById('playButton2');
        var player = document.getElementById('player2');
          document.querySelector('#playButton2 .initial').style.display='none';
          document.querySelector('#playButton2 .pause').style.display='none';
          document.querySelector('#playButton2 .play').style.display='none';
        player.volume=1.0; if (player.paused) {
        playButton2.style.border='3px solid #e77d19';
        playButton2.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'http://via.placeholder.com/260x260\')';
        playButton2.style.backgroundColor = 'transparent';
        playButton2.style.backgroundRepeat = 'no-repeat';
        playButton2.style.backgroundPosition = 'center'; 
        document.querySelector('#playButton2 .pause').style.display='inline-block';
        player.play();
        } else {
        playButton2.style.border='3px solid #e77d19';
        playButton2.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'http://via.placeholder.com/260x260\')';
        playButton2.style.backgroundColor = 'transparent';    
        playButton2.style.backgroundRepeat = 'no-repeat';
        playButton2.style.backgroundPosition = 'center'; 
        document.querySelector('#playButton2 .play').style.display='inline-block';
        player.pause();
        }">

      <svg class="play" style="display: none;" width="90" height="108" viewbox="0 -10 85 120">
        <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
      </svg>

      <svg class="pause" style="display: none;" width="60" height="72" viewbox="0 0 16 14">
        <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
        fill="#1ed760 " fill-rule="evenodd"></path>
      </svg>

      <svg class="initial" width="90" height="108" viewbox="0 -10 85 120">
        <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
      </svg>

    </button>

    <audio id="player2" style="display:none;">
      <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
    </audio>

I was told to use addEventListener but I’m not familiar with how it works. This is a new type of code for me.

I messed it all up In here:
https://jsfiddle.net/dmc84scn/1/

I was given these instructions, but I don’t understand any of it, that’s why I’m asking for help with it. Can someone help me set it up the proper way.

Instructions
You can add event listeners for mounseenter and mouseleave events like:

document.getElementsByClassName('pause')[0].style.display = 'none';
button.addEventListener('mouseleave', function() { document.getElementsByClassName('pause')[0].style.display = 'none'; });
button.addEventListener('mouseenter', function() { document.getElementsByClassName('pause')[0].style.display = 'inline-block';});

addEventListener('mouseleave', function() {}); will fire function() {} whenever a mouse enters the element you called it on. For this example it’s button or better to say, it will call the function() {} whenever you ‘hover’ over the button element.

addEventListener('mouseleave', function() {}); will fire function() {} whenever a mouse leaves the button element.

document.getElementsByClassName('pause')[0].style.display = 'inline-block'; will display the element with class pause if you want to use ID instead of CLASS you can use function getElementById('id') in the same way

document.getElementsByClassName('pause')[0].style.display = 'none'; will hide the element with class pause

If you add this code to your fiddle after line 34: document.querySelector('#playButton2 .play').style.display='none'; you will see the effects, the rest is up to you to change the icons.

Setting up single-player tests before adding spinner
2

Step 1: Name the speaker button

First of all, the SVG for pause isn’t actually pause. It’s the audio button.

<svg class="pause" ...>

That needs to be more appropriately named, to audio, or even better, to speaker.

<svg class="speaker" ...>

Step 2: Updating code to use the speaker

Which means changing references from the old pause class, to speaker as well.

// document.querySelector('#playButton2 .pause').style.display='none';
document.querySelector('#playButton2 .speaker').style.display='none';
...
// document.querySelector('#playButton2 .speaker').style.display='inline-block';
document.querySelector('#playButton2 .pause').style.display='inline-block';

Step 3: Adding an onmouseover event

For the speaker to turn in to a pause button, it’s not enough to have the speaker listen for when the mouse is over it, because the speaker is only a small part of the whole button.
Instead, the playButton2 element needs to listen, and decide if things are playing or not. It already has an inline onclick attribute (code smell) attached to is, so what the hell, let’s pile on and add another inline scripting attribute (code smell) called onmouseover.

<button id="playButton2" ... onclick="..." onmouseover="...">

Step 4: Are things playing?

The speaker won’t be involved when the player is paused, so we need to check the player to find out if it is playing. We need to find the player to do that, so we can copy (code smell) the onclick code to get the player.

These code examples will overflow and scroll to the right, but it would be an even greater aggregiance to mark them as JavaScript when it is instead actually embedded within HTML code itself.

Then we can check if the player isn’t paused to find out if it’s playing (code smell).

<button id="playButton2" ... onmouseover="var player = document.getElementById('player2'); if (!player.paused) {}">

Step 5: Moving the pause button in to place

If we’re playing when the mouse is over, we want to show the pause button instead. Before we can do that, we need to move the SVG pause button in with the play and speaker, placing it below the speaker code. Calling it hover is bad though (code smell) because that describes the user interaction, and should instead indicate what the SVG image actually is. So, I’m renaming it to pause.

Looking at the other SVG elements they have a display: none on them (code smell), so that should be done here to the speaker element too.

  <svg class="speaker" style="display: none;" width="60"
...
  </svg>

  <svg class="pause" style="display: none;" width="90" height="108" style="background-color:; "viewbox="-13 -10 85 120">
  <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent; " d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
  </svg>

Step 6: Hide the pause and show the speaker

Now that we have the speaker and pause buttons in the same place, we can add code to the if condition to toggle them.
When we’re hovering, we want the pause to not show and the speaker to show, so we can copy the earlier code (code smell) to hide the pause button and we can copy the play inline-block code (code smell) renaming play to speaker, so that we show the speaker.

<button id="playButton2" ... onmouseover="... if (!player.paused) {document.querySelector('#playButton2 .pause').style.display='none'; document.querySelector('#playButton2 .speaker').style.display='inline-block';}">

When the mouse leaves the play button, we need to run similar code that hides the speaker and shows the pause button. So, we can add an inline onmouseout event attribute (code smell) to achieve that too, where we get the player again (code smell) and check if the player is not paused (code smell) to check if it’s still playing.

Step 7: Adding the onmouseout event

<button id="playButton2" ... onmouseout="var player = document.getElementById('player2'); if (!player.paused){}">

When mouseout sees that the player is still playing, we need to switch the speaker and the pause button. How do we do this? You guess it - we copy more code (code smell) that was used previously and make some minor tweaks to it, so that the speaker is hidden and the pause is showing.

Step 8: Hide the speaker and show the pause

<button id="playButton2" ... onmouseout="... if (!player.paused) { document.querySelector('#playButton2 .speaker').style.display='none'; document.querySelector('#playButton2 .pause').style.display='inline-block';}">

Step 9: Profit???

Does this work? Yes, it works perfectly, as I’ve been making these changes to the jsfiddle code example as I go along.

The … ellipses represent code that that has been removed from the example to help aid understanding, and it’s easy to figure out what goes where.

It’s getting late for me though, so I invite you to make these changes yourself. If you have any problems then please save the code at the appropriate step that you are having trouble with, and some one here can give precise instructions to you about where you’ve gone wrong, and what exactly you can do to fix the problem.

5 Likes
3

I still need help with this. If we could go through the steps one by one.

4

Step 1 “name button” seems clear to me.

The “rename the tags class attribute value” task is implied by the “needs to be”

Have you successfully managed to get that far?

5

I did this:

6

On step 2 I don’t understand.

But this isn’t in the code.
// document.querySelector('#playButton2 .speaker').style.display='inline-block';

to this:


document.querySelector('#playButton2 .pause').style.display='inline-block';
7

So instead of changing the name from pause to speaker, you added another tag with that name. (and removed the hover tag?)

i.e.
from hover, play, pause, initial
to play, speaker, pause, initial

I think what @Paul_Wilkins had in mind was not to change the attribute value of the tag with hover to speaker, but to change the attribute value of the tag with pause to speaker.

8

Wait a second, what was I supposed to do? Was I supposed to do something different?

9

If this isn’t in there, then how will will it appear in the code.

 <svg class="pause" style="display:none ;" width="90" height="108" style="background-color:; "viewbox="-13 -10 85 120">
  <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent; " d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
  </svg>
10

Ah yes, sorry. It does look like there should be both a speaker and a pause/paused

I’ll take a closer look now.

12

Over all there are four SVG elements that are used.

  1. The play button that is first shown that he calls “initial” which he has placed as the last SVG element
  2. The speaker that was called pause but instead gets renamed to speaker, is second in the collection of SVG elements.
  3. The pause icon which initially appears at the top of the code, but is given a name of pause and is moved down to be the second SVG element in the collection, moving the speaker down to be the third.
  4. And the other is the play button that appears when pausing and is called play, and remains called play as the first of the SVG elements.
1 Like
13

Should I place initial as the first element instead of the last? Would that be better? I didn’t know by placing it at the bottom, that means last.

Should it be one way over the other?

initial

pause

speaker

play

or

play

speaker

pause

initial.

14

I think what you meant here was:

Change Play to Pause.

Or now I’m confused cause I had it set up differently before.

This is what I have so far:

If it looks good to you I’ll move on to step 4

15

[quote=“asasass, post:13, topic:278598, full:true”]
Should I place initial as the first element instead of the last? Would that be better? I didn’t know by placing it at the bottom, that means last.

Should it be one way over the other?[/quote]

The order of them doesn’t matter because they’re all hidden except for the one that is currently being shown.

However, it can help to list them in the order that they will be shown. Initial, speaker, pause, followed by the play button.

1 Like
16

I had someone fix Step 3 in the instructions. The heading was in slightly the wrong place.
You’ll see that it’s about adding an onmouseover event to the code.

17

I don’t quite understand where I place this.

onmouseover="if (!player.paused) {var player = document.getElementById('player2');

18

Take a look back at Step 3. That step shows you where it goes.

19

Right before the svg class?

20

In between there?

After the onclick Quotes it’s at the end of the code.


<button id="playButton2" ... onclick="..." onmouseover="...">

21

You know how your code has all of the scripting inside of the onclick attribute? The onmouseover part goes after that onclick scripting code, before the end of the playButton2 button element.

1 Like