Both of them?
</svg>
</div>
<audio preload="none">
<source src="http://hi5.1980s.fm/;" type="audio/mpeg">
</audio>
</div>
Both of them?
</svg>
</div>
<audio preload="none">
<source src="http://hi5.1980s.fm/;" type="audio/mpeg">
</audio>
</div>
The audio is now working.
That </div>
below the audio is the end of the links
element. The </div>
above the audio is the playButton
element. The end of the playButton div needs to be below the audio code.
Both div need to be below audio?
It doesnāt work with just 1 div underneath:
Currently the code is similar to this:
<div class="links">
<div class="playButton">
...
</div>
<audio>
...
</audio>
</div>
Youāll see that the audio stuff is outside of the playButton element. It needs to be inside of it.
You can achieve that by cutting out the audio code, and pasting it above the play buttonās closing div.
<div class="links">
<div class="playButton">
...
<audio>
...
</audio>
</div>
</div>
Done:
Whatās next?
Links float: .style working version:
That float version uses a confusing stylename, because āhideā is supposed to mean that everything is hidden, but the links one uses āhideā to say that only the links will be hidden, not the play button.
To remain consistent, we should rename that to āinactiveā instead, so that when āinactiveā is removed from the links, the links will show.
Does that make sense?
Why are you attempting to convert non-working code to something that works, when you already have working code?
What are you wanting to achieve here?
So the style one looks like this?
Good one, I have it working with a few simple changes.
One is to add an āinactiveā class to the links element, along with a CSS style declaration so that the anchor links are hidden.
Two is to add another CSS declaration so that the āhideā class name successfully hides things.
That gets it looking good before you interact with it.
And three is to use scripting code to remove that āinactiveā class from the links element when you click on it, so it looks good when itās playing.
Wait a second:
Can I get it working like this?
I based it off of this:
Links float: .style working version:
That one doesnāt seem to work.
What else would I need to do to this
To be able to use this?
hide(play);
show(pause);
player.play();
} else {
show(play);
hide(pause);
player.pause();
}
}
And I need to do something about this too I think.
.links.hide a,
.play {
display: none;
}
What is it with the https://jsfiddle.net/qL7dujbu/6/ code that you want to get working on the https://jsfiddle.net/cubphcqd/53/ code?
Are you just going to leave https://jsfiddle.net/cubphcqd/53/ unfinished when itās so close to working?
This one is already working:
And so is https://jsfiddle.net/cubphcqd/53/ with much better code, once a few CSS fixes have occurred.
Weāll do both since both are very close to being done.
One using upto
the other
getplaybutton.
getting the short syntaxes to work
We can finish up upto now:
With https://jsfiddle.net/cubphcqd/53/ we want the anchor links to not be shown when the page first opens.
We can achieve that by changing the document.querySelector line so that it adds āinactiveā instead of āhideā
Why inactive? Because we separately need the āhideā class for the show/hide stuff to work.
The CSS declaration to add to the CSS panel for that is:
.hide, .links.inactive a {
display: none;
}