I am saying, that if you intend for only the initial image to be hidden, that you cannot succeed when the whole play button is inside of that initial element too.
What Paul means is that this is a wrapper - hide it, and everything inside it goes too.
Is there a way to get it to work with initial at the top, or itās 100% not possible?
It might be possible to have initial separated from the rest of the play button parts
The structure that I would have is:
- play button
- initial
- links
- buttons
Or it is possible, and I just have to figure it out?
All my other codes have playbutton at the top, but I donāt understand how you would do that with this code.
Like this:
play button
initial
links
buttons ( play/pause)
Do you mean like this?
<div class="playButtone" data-audio="http://hi5.1980s.fm/;">
<p>Links</p>
<div class="linkse">
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<svg class="playe" focusable="false" width="38" height="40" 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">
<title>PLAY</title>
</path>
</svg>
<svg class="pausee hidee" focusable="false" width="36" height="40" 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">
<title>PAUSE</title>
</path>
</svg>
</div>
</div>
TypeError: el.matches is not a function
function upTo(el, selector) {
while (el.matches(selector) === false) {
el = el.parentNode;
}
return el;
}
I think you mean this, then?
Right?
<div class="playButtone" data-audio="http://hi5.1980s.fm/;">
<div class="initiale">
<p>Links</p>
<div class="linkse">
or, do I even need initial, and can I do this instead?
body {
background-color: black;
}
.playButtone {
position: relative;
width: 260px;
height: 168px;
background: url("https://i.imgur.com/BBYxKcf.jpg");
border: 3px solid #0059dd;
cursor: pointer;
}
p {
font-family: Tahoma;
font-weight: bold;
font-size: 30px;
color: #0059dd;
line-height: 40px;
text-align: center;
}
.playButtone::before,
.playButtone::after {
content: "";
position: absolute;
top: 0;
left: 86px;
width: 3px;
height: 100%;
background: #0059dd;
}
.playButtone::after {
left: 177px;
}
.linkse {
width: 266px;
height: 174px;
overflow: hidden;
}
.linkse a {
float: left;
width: 44px;
height: 44px;
border: 3px solid #0059dd;
margin: 0 4px 12px 0;
}
.linkse a:hover {
border: 3px solid red;
}
.linkse a:nth-of-type(5n) {
margin-right: 0;
}
.linkse a:nth-of-type(15) {
position: relative;
width: 44px;
height: 44px;
border: 3px solid #0059dd;
background: #ffffff;
}
.linkse a:nth-of-type(15)::before,
.linkse a:nth-of-type(15)::after {
content: '';
position: absolute;
top: 0;
width: 14px;
height: 44px;
}
.linkse a:nth-of-type(15)::before {
left: 0;
background-color: #00ffff;
}
.linkse a:nth-of-type(15)::after {
right: 0;
background-color: #ff00ff;
}
.playButtone.activated {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 44px;
height: 44px;
cursor: pointer;
border: 3px solid #0059dd;
fill: #aaff00;
}
.playe {
position: absolute;
left: 6px;
top: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: -1;
/* move it under the image*/
}
.pausee {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.hidee,
.linkse.inactive a {
display: none;
}
You had a way that works, with the initial section. Why are you looking to change that? Are there problems with what worked?
Similar to CSS, JavaScript can benefit from having good HTML to work with. This is not the JavaScript category so Iāll ignore that.
But I have a question. Do both of those SVG images display in the same coordinates, alternating in which is displayed?
If so, it could be a good idea to wrap them in a containing element to style them against instead of styling them against the larger containing element.
If you were to replicate the HTML structure Paul suggested above, it would look more like this.
<div class="playButtone">
<p>Links</p>
<div class="linkse">
...
</div>
<svg class="playe">
...
</svg>
<svg class="pausee hidee">
...
</svg>
</div>
Note: I have removed most of the content and element attributes to provide clearer visibility to the overall structure, and not because they are somehow irrelevant.
PS. I canāt help think that the <p>
tag is a poor choice and should be one of <h1> ... <h6>
instead depending on what else is on the page
Are you seriously saying that after all this time, you are still unable to distinguish the difference between one div inside another:
<div class="first">
<div class="second">
</div>
</div>
and one div after another:
<div class="first"></div>
<div class="second"></div>
No you didnāt. Look at where the closing <div>
tag is for the links section.
Thanks.
I just fixed it.
<div class="linkse">
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
</div>
Itās fixed? How do you plan to hide that initial image?
That looks better. However, I need to go now, as itās 00:37 (UK time) in the morning and I have to be up early.