Adjusted, but in the same style/cosmetic structure. Maybe that’s a better way to put it.
Real fast, do you know what I did wrong here?
<style>
.playButton2 {
margin-top: 8px;
width: 266px;
height: 266px;
cursor: pointer;
background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("http://via.placeholder.com/260x260");
background-repeat: no-repeat;
box-sizing: border-box;
border: 3px solid #0059dd;
}
.playButton2.playing {
border: 3px solid #e77d19;
background-image: linear-gradient( to right, transparent, transparent 83px, #e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px, transparent 260px), url("http://via.placeholder.com/260x260");
background-color: transparent;
background-repeat: no-repeat;
}
.initial {
stroke: #e77d19;
stroke-width: 3px;
color: black;
margin: 76px 85px;
}
.pause {
stroke: #e77d19;
stroke-width: 3px;
color: transparent;
margin: 76px 85px;
display: none;
}
.play {
stroke: #e77d19;
stroke-width: 3px;
color: transparent;
display: none;
}
.speaker {
margin: 94px 100px;
display: none;
}
</style>
<div class="playButton2">
<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>
<svg class="pause" width="90" height="108" 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>
<svg class="speaker" 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="play" style="margin:76px 85px;" 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>
</div>
<audio id="player2" preload="none">
<source src="http://hi5.1980s.fm/;" type="audio/mpeg"></source>
</audio>
<script>
(function iife() {
"use strict";
function playButtonClickHandler() {
var button = document.querySelector("playButton2");
var player = document.querySelector("#player2");
document.querySelector(".playButton2 .initial").style.display = "none";
player.volume = 1.0;
if (player.paused) {
button.classList.add("playing");
document.querySelector(".playButton2 .play").style.display = "none";
document.querySelector(".playButton2 .pause").style.display = "inline-block";
player.play();
} else {
document.querySelector(".playButton2 .pause").style.display = "none";
document.querySelector(".playButton2 .play").style.display = "inline-block";
player.pause();
}
" onmouseover="
var player = document.querySelector("#player2");
player.isPlaying = function() {
return player.paused === false;
}
if (player.isPlaying()) {
document.querySelector(".playButton2 .speaker").style.display = "none";
document.querySelector(".playButton2 .pause").style.display = "inline-block";
}
" onmouseout="
var player = document.querySelector("#player2");
player.isPlaying = function() {
return player.paused === false;
}
if (player.isPlaying()) {
document.querySelector(".playButton2 .pause").style.display = "none";
document.querySelector(".playButton2 .speaker").style.display = "inline-block";
}
}
var playButton = document.querySelector(".playButton2");
playButton.addEventListener("click", playButtonClickHandler);
}());
</script>
The button variable isn’t able to find the element that querySelector is trying to find.
What you mean is, instead of having 3 individual scripts of these, only 1?
<script>
(function iife() {
"use strict";
function playButtonClickHandler() {
var button = document.querySelector(".playButton2");
var player = document.querySelector("#player2");
player.volume = 1.0;
if (player.paused) {
button.querySelector(".play").style.display = "none";
button.querySelector(".pause").style.display = "inline-block";
player.play();
} else {
button.querySelector(".play").style.display = "inline-block";
button.querySelector(".pause").style.display = "none";
player.pause();
}
}
var playButton = document.querySelector(".playButton2");
playButton.addEventListener("click", playButtonClickHandler);
}());
</script>
This CSS and Scripting code is a lot closer to how it should be.
That’s what I said. “That way, the one playButton function will be able to work on all of the players.”
In the case of the code at https://jsfiddle.net/muek65ss/6/ it seems more appropriate to have named the function togglePlayer instead.
function togglePlayer(button) {
var player = button.querySelector("audio");
player.volume = 1.0;
if (player.paused) {
button.querySelector(".pause").classList.remove("hide");
button.querySelector(".play ").classList.add("hide");
player.play();
} else {
button.querySelector(".pause").classList.add("hide");
button.querySelector(".play ").classList.remove("hide");
player.pause();
}
}
How come in the classes, each one needs to have inline-block, why not only the main one?
The display property is a CSS properties that is not inherited by its children.
Can it be set up to?
If browsers did that then it would break the internet.
An alternative is to place common things in a css declaration so that things only need to specified once.
For example at https://jsfiddle.net/muek65ss/8/
.playButtons, .playButtons div {
display: inline-block;
}
1 Like
foreach doesn’t work in internet explorer, what would be an alternative, or I guess I just won’t care about that.
It looks like you haven’t yet read my post #36 with a solution for Internet Explorer.
I was not able to figure this one out. Can you provide more info on what needs to be done?
I tried, it doesn’t work in there.
But the inline-javascript version works in internet explorer:
Maybe maybe it can be converted to javascript a different way then.
inline is below.
<style>
.playButton3 {
display: inline-block;
cursor: pointer;
height: 44px;
background-color: #000000;
border-top: 3px solid #0059dd;
border-bottom: 3px solid #0059dd;
margin-top:8px;
}
.playButton3.svoefm svg {
fill: #aaff00;
}
.playButton3.soundpark svg {
fill: #ffaa00;
}
.playButton3.cavoparadisoclub svg {
fill: #ff00aa;
}
.playButtons {
white-space: nowrap;
font-size: 0;
}
</style>
<div class="playButtons">
<div class="playButton3 svoefm" style="width: 83px; border-left: 3px solid #0059dd;" onclick="playButton3(event)">
<svg class="play" style="margin:15px 36px;" width="12" height="14" viewbox="0 0 85 100">
<path 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;margin:15px 37px;" width="10" height="14" viewbox="0 0 60 100">
<path 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>
<audio preload="none" style="display:none;">
<source src='http://163.172.187.253:8081/radio/svoefm/icecast.audio' type='audio/mpeg' />
</source></audio>
</div>
<div class="playButton3 soundpark" style="width: 88px; border-left: 3px solid #0059dd;border-right: 3px solid #0059dd;" onclick="playButton3(event)">
<svg class="play" style="margin:15px 39px;" width="12" height="14" viewbox="0 0 85 100">
<path 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;margin:15px 40px;" width="10" height="14" viewbox="0 0 60 100">
<path 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>
<audio preload="none" style="display:none;">
<source src='http://163.172.187.253:8081/radio/soundeep/icecast.audio' type='audio/mpeg' />
</source></audio>
</div>
<div class="playButton3 cavoparadisoclub" style="width: 83px;border-right: 3px solid #0059dd; " onclick="playButton3(event)">
<svg class="play" style="margin:15px 36px;" width="12" height="14" viewbox="0 0 85 100">
<path 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;margin:15px 37px;" width="10" height="14" viewbox="0 0 60 100">
<path 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>
<audio preload="none" style="display:none;">
<source src='http://s5.onweb.gr:8488/;' />
</source></audio>
</div>
</div>
<script>
function getButton(el) {
while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
el = el.parentNode;
}
return el;
}
function playButton3(event) {
var button = getButton(event.target);
var player = button.querySelector("audio");
var play = button.querySelector(".play");
var pause = button.querySelector(".pause");
button.classList.add("clicked");
player.volume = 1.0;
if (player.paused) {
play.style.display = "none";
pause.style.display = "inline-block";
player.play();
} else {
play.style.display = "inline-block";
pause.style.display = "none";
player.pause();
}
}
function showPause(event) {
var button = getButton(event.target);
var player = button.querySelector("audio");
player.isPlaying = function() {
return player.paused === false;
};
if (player.isPlaying()) {
button.querySelector(".pause").style.display = "inline-block";
}
}
function showSpeaker(event) {
var button = getButton(event.target);
var player = button.querySelector("audio");
player.isPlaying = function() {
return player.paused === false;
};
if (player.isPlaying()) {
button.querySelector(".pause").style.display = "none";
}
}
</script>
You know what you need to give me from here.
You haven’t yet added the forEach polyfill to that code.
How do I get the button variable to find the element that querySelector is trying to find?
Which code are you working with now?
This one please.