Looks like @Archibald has given you another good solution so you have enough answers to work something out 
I’m in transit to Spain so will be unavailable apart from commenting via a mobile.
2 Likes
I tried it your way and it is not working.
https://jsfiddle.net/xwjz28ed/
Clicking around the circle still opens it.
Can that be fixed?
svg {
width: 90px;
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}
circle {
cursor: pointer;
}
<div class="outer">
<div class="container with-curtain">
<svg class="playa thePlay" viewBox="0 0 90 90">
<g id="play">
<title>Play</title>
<polygon points="35,24 62,45 35,66" fill="blue" />
<circle cx="45" cy="45" r="40" stroke-width="10" stroke="blue" fill="transparent" />
</g>
</svg>
<div class="inner-container curtain curtain1">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</div>
<div class="container with-curtain">
<svg class="playb thePlay" width="100%" height="100%" viewBox="0 0 90 90">
<use href="#play" />
</svg>
<div class="inner-container curtain curtain2">
<div class="ratio-keeper">
<div class="wrapb">
<div class="video video-frame" data-id="0dgNc5S8cLI"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</div>
<div class="container with-curtain">
<svg class="playc thePlay" width="100%" height="100%" viewBox="0 0 90 90">
<use href="#play" />
</svg>
<div class="inner-container curtain curtain3">
<div class="ratio-keeper">
<div class="wrapc">
<div class="video video-frame"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</div>
<div class="container with-curtain">
<svg class="playd thePlay" viewBox="0 0 90 90">
<use href="#play" />
</svg>
<div class="inner-container curtain curtain4">
<div class="ratio-keeper">
<div class="wrapc">
<div class="video video-frame" data-id="0dgNc5S8cLI"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</div>
<div class="container with-curtain">
<svg class="playe thePlay" viewBox="0 0 90 90">
<use href="#play" />
</svg>
<div class="inner-container curtain curtain5">
<div class="ratio-keeper">
<div class="wrapc">
<div class="video video-frame" data-id="0dgNc5S8cLI"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</div>
<div class="container with-curtain">
<svg class="playf thePlay" viewBox="0 0 90 90">
<use href="#play" />
</svg>
<div class="inner-container curtain curtain6">
<div class="ratio-keeper">
<div class="wrapc">
<div class="video video-frame" data-id="0dgNc5S8cLI"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</div>
<div class="container with-curtain">
<svg class="playg thePlay" viewBox="0 0 90 90">
<use href="#play" />
</svg>
<div class="inner-container curtain curtain7">
<div class="ratio-keeper">
<div class="wrapc">
<div class="video video-frame" data-id="0dgNc5S8cLI"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</div>
<div class="container with-curtain">
<svg class="playh thePlay" viewBox="0 0 90 90">
<use href="#play" />
</svg>
<div class="inner-container curtain curtain8">
<div class="ratio-keeper">
<div class="wrapc">
<div class="video video-frame" data-id="0dgNc5S8cLI"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</div>
<div class="container with-curtain">
<svg class="playi thePlay" viewBox="0 0 90 90">
<use href="#play" />
</svg>
<div class="inner-container curtain curtain9">
<div class="ratio-keeper">
<div class="wrapc">
<div class="video video-frame" data-id="0dgNc5S8cLI"></div>
</div>
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
</div>
</div>
I think these all mean the same thing.
clip-path: circle(45%);
clip-path: circle(45px);
clip-path: circle(45% at center);
clip-path: circle(45px at center);
You are adding the click event listener to the <svg> elements. They need to be added to the <circle> elements so only clicking the circle works. Very near the bottom of your JavaScript, change playButton: ".thePlay" to playButton: "circle".
In fact you are adding an event listener twice so coverClickHandler is being called twice on click. I will leave you to sort that out.
Note the <polygon> code is before the <circle> code so the circle overlays the polygon (circle has transparent fill). If the order in the code is reversed, clicking on the polygon will not do anything.
Then what?
https://jsfiddle.net/0ye38rzd/
manageCover.init({
container: ".container",
playButton: "circle"
});
}
That’s working as you want isn’t it?
I click on the svg’s and nothing appears.
https://jsfiddle.net/0ye38rzd/
Just a blank white screen.
You can see here. after clicking on the svg’s, it’s supposed to open.
https://jsfiddle.net/kyvxc96o/
Clicking on the circle calls coverClickHandler so something must be wrong after that. At least clicking outside the circle now doesn’t do anything.
Make the square/rectangle containing the circles a rounded corner rectangle with radii the same as the circle. then the circle will be contained within the rounded corner rectangle and the click events will only occur when clicked within the circle. Beware each corner has two radii, not just one.
That works in Firefox but not in Chrome (assuming you are referring to use of CSS border-radius).
1 Like
No I was referring to svg.
<rect x="100" y="100" rx="50" ry="50" width="100" height="100" width="100" style="fill:??;stroke:??" />
Or you could use a svg circle but whereas the rectangles origin is it’s top-left hand corner the circle element is it’s centre.
And as you already use a rect it makes more sense to modify the rect to give a circle.
I don’t know if a click event is restricted to the area inside the circle or whether it covers the full rectangle. If it covers the full rectangle then use a circle. You will just have to calculate the circle’s centre.
Syntax is
<circle cx="100" cy="100" r="50" style="????" />
r is radius, cx and cy is the circle centre.
You could use a rounded <rect> instead of a <circle> and clicks would only work within the rounded rectangle (if the event listener is applied to the rectangle).
There’s no point containing a circle within a rounded rectangle.
I’ve just looked at your js code and you are using
const cover = evt.currentTarget;
evt.currentTarget means that cover is the element where the event listener was attached to and not necessarily the element which received the click.
use
const cover = evt.target;
cover will now be the element that was clicked.
You will still need to check that the cover is a circle or has a parent or ancestor which is a circle.
I would be using the identifier target at this stage as the clicked element may not be the cover.
I tried that here, it is not working:
https://jsfiddle.net/9zghsvyf/1/
function coverClickHandler(evt) {
hideAll(config.containers);
const cover = evt.target;
showCovers(cover);
document.querySelector('.outer').classList.add('isOpen');
}
What element are you expecting cover to be?
And why are you not checking that cover is actually the element that you are expecting?
You should always check what element is the event target.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.