asasass
November 14, 2017, 7:13am
1
How would I hide the Playbutton when viewing the cover image, and show it after you click on the image?
I’ve been trying different ways, but can’t seem to get it.
<style>
.cover {
width: 260px;
height: 168px;
cursor: pointer;
background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
border: 3px solid #0059dd;
font-family: Tahoma;
font-weight: bold;
font-size: 30px;
color: #0059dd;
cursor: pointer;
line-height: 100px;
text-align: center;
}
.links div {
margin: 0 0 12px 0;
}
.links a {
display: block;
width: 50px;
height: 50px;
background-color: green;
margin: -50px 0 0;
transition: 0.5s ease-in-out;
}
a.x1 {
margin: 0
}
a.x2 {
margin-left: 54px
}
a.x3 {
margin-left: 108px
}
a.x4 {
margin-left: 162px
}
a.x5 {
margin-left: 216px
}
.links a:hover,
.links a:active,
.links a:focus {
background: blue;
}
.scrl a:visited {
background: orange;
color: #000000;
}
.scrl a:hover {
background: red;
}
.hide {
display: none;
}
.links div:last-child {
margin-bottom: 0;
}
.playButton {
width: 50px;
height: 50px;
cursor: pointer;
background-color: #000000;
fill: #aaff00;
margin: -112px 0 0 108px;
}
.playButton.playing {
background-color: #000000;
}
</style>
<div class="cover">Links</div>
<div class="test hide">
<div class="links ">
<div>
<a class="x1" href="" target="_blank"></a>
<a class="x2" href="" target="_blank"></a>
<a class="x3" href="" target="_blank"></a>
<a class="x4" href="" target="_blank"></a>
<a class="x5" href="" target="_blank"></a>
</div>
<div>
<a class="x1" href="" target="_blank"></a>
<a class="x2" href="" target="_blank"></a>
<a class="x4" href="" target="_blank"></a>
<a class="x5" href="" target="_blank"></a>
</div>
<div>
<a class="x1" href="" target="_blank"></a>
<a class="x2" href="" target="_blank"></a>
<a class="x3" href="" target="_blank"></a>
<a class="x4" href="" target="_blank"></a>
<a class="x5" href="" target="_blank"></a>
</div>
</div>
</div>
<div class="playButton ">
<svg class="play" style="margin:5px 9px;" 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"></path>
</svg>
<svg class="pause" style="display: none;margin:5px 7px;" 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"></path>
</svg>
</div>
<script>
(function iife() {
"use strict";
function hideClickedElement(evt) {
var target = evt.target;
target.classList.add("hide");
document.querySelector(".test").classList.remove("hide");
}
var cover = document.querySelector(".cover");
cover.addEventListener("click", hideClickedElement, false);
}());
</script>
Alright so I looked at Your code and found out all elements are fixed width and height.
Since this is not really responsive design all I did was added position:absolute; z-index:999; to your .cover class and than added position:absolute; z-index:1; to your .playButton class.
I know my idea is not the best but since you are using fixed sizes its a good idea to use them if it was a responsive design than instead of having to use position:absolute; I would have used DIsplay:none; and toggled the display using javascript or CSS.
asasass
November 14, 2017, 11:58am
4
1st Answer:
Just add the hide class to the play button and add
document.querySelector(".playButton").classList.remove("hide");
<script>
(function iife() {
"use strict";
function hideClickedElement(evt) {
var target = evt.target;
target.classList.add("hide");
document.querySelector(".test").classList.remove("hide");
document.querySelector(".playButton").classList.remove("hide");
}
var cover = document.querySelector(".cover");
cover.addEventListener("click", hideClickedElement, false);
}());
</script>
asasass
November 14, 2017, 12:03pm
5
2nd Answer:
Hide your play button div onload using your class hide. then remove it on click of cover element.
<style>
.cover {
width: 260px;
height: 168px;
cursor: pointer;
background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
border: 3px solid #0059dd;
font-family: Tahoma;
font-weight: bold;
font-size: 30px;
color: #0059dd;
cursor: pointer;
line-height: 100px;
text-align: center;
}
.links div {
margin: 0 0 12px 0;
}
.links a {
display: block;
width: 50px;
height: 50px;
background-color: green;
margin: -50px 0 0;
transition: 0.5s ease-in-out;
}
a.x1 {
margin: 0
}
a.x2 {
margin-left: 54px
}
a.x3 {
margin-left: 108px
}
a.x4 {
margin-left: 162px
}
a.x5 {
margin-left: 216px
}
.links a:hover,
.links a:active,
.links a:focus {
background: blue;
}
.scrl a:visited {
background: orange;
color: #000000;
}
.scrl a:hover {
background: red;
}
.hide {
display: none;
}
.links div:last-child {
margin-bottom: 0;
}
.playButton {
width: 50px;
height: 50px;
cursor: pointer;
background-color: #000000;
fill: #aaff00;
margin: -112px 0 0 108px;
}
.playButton.playing {
background-color: #000000;
}
</style>
<div class="cover">Links</div>
<div class="test hide">
<div class="links ">
<div>
<a class="x1" href="" target="_blank"></a>
<a class="x2" href="" target="_blank"></a>
<a class="x3" href="" target="_blank"></a>
<a class="x4" href="" target="_blank"></a>
<a class="x5" href="" target="_blank"></a>
</div>
<div>
<a class="x1" href="" target="_blank"></a>
<a class="x2" href="" target="_blank"></a>
<a class="x4" href="" target="_blank"></a>
<a class="x5" href="" target="_blank"></a>
</div>
<div>
<a class="x1" href="" target="_blank"></a>
<a class="x2" href="" target="_blank"></a>
<a class="x3" href="" target="_blank"></a>
<a class="x4" href="" target="_blank"></a>
<a class="x5" href="" target="_blank"></a>
</div>
</div>
</div>
<div class="playButton ">
<svg class="play" style="margin:5px 9px;" 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"></path>
</svg>
<svg class="pause" style="display: none;margin:5px 7px;" 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"></path>
</svg>
</div>
<script>
(function iife() {
"use strict";
function hideClickedElement(evt) {
var target = evt.target;
target.classList.add("hide");
document.querySelector(".test").classList.remove("hide");
document.querySelector(".playButton").classList.remove("hide");
}
document.querySelector(".playButton").classList.add("hide");
var cover = document.querySelector(".cover");
cover.addEventListener("click", hideClickedElement, false);
}());
</script>
asasass
November 14, 2017, 12:12pm
6
Which is a better answer?
system
February 13, 2018, 7:12pm
7
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
