How come the image shows on jsfiddle, but it won’t show on blogger?
Blogger
https://testpage34567.blogspot.com/
<style>
#playButton2 {
width: 180px;
height: 180px;
cursor: pointer;
border: 1px solid #0059dd;
position: relative;
}
#playButton2 svg {
position: absolute;
z-index: -1;
}
.button div:hover {
border: 1px solid red;
}
.button div {
width: 36px;
height: 36px;
margin: 69px 71px;
background-color: rgba(0, 0, 0, .7);
background-size: 14px 18px;
background-repeat: no-repeat;
border-radius: 50%;
border: 1px solid white;
}
.initial{
background-image: url('https://i.imgur.com/Lj57czy.png');
background-position: 58% 50%;
}
.pause {
background-image: url('https://i.imgur.com/LgmfKda.png');
background-position: 50%;
display: none;
}
.play {
background-image: url('https://i.imgur.com/Lj57czy.png');
background-position: 58% 50%;
display: none;
}
</style>
<div id="playButton2" onclick="
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
button.querySelector('.initial').style.display='none';
button.querySelector('.pause').style.display='none';
button.querySelector('.play').style.display='none';
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
player.play();
} else {
button.querySelector('.play').style.display='inline-block';
player.pause();
}">
<svg width="180" height="180">
<defs>
<clippath id="circleView">
<circle cx="90" cy="90" r="85" fill="orange" />
</circle></clippath>
</defs>
<image width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />
<image width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" />
</image></image></svg>
<div class="button">
<div class="initial"> </div>
<div class="pause"> </div>
<div class="play"> </div>
</div>
</div>
<audio id="player2" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>
1 Like
ronpat
October 29, 2017, 6:27am
2
try this
#playButton2 svg {
position: absolute;
/* z-index: -1; */
}
Removing: z-index: -1;
That removed the playbutton:
https://testpage34567.blogspot.com/
ronpat
October 29, 2017, 6:40am
4
Is it remotely possible that you have changed your code otherwise from that which you initially posted?
You told me to remove z-index: -1;, correct?
This is with z index turned on.
This is with z index turned off.
ronpat
October 29, 2017, 6:59am
7
Probably my mistake, asasass. Why don’t you restore the negative z-index.
PaulOB
October 29, 2017, 12:11pm
9
Because on blogger .main-inner .widget has a background-color applied and your negative z-index puts the image under the background color. Rather than using negative indexes you can usually stack positioned element more positively (in both senses of the word).
e.g.
#playButton2 svg{z-index:0}
#playButton2 .button {position:relative;z-index:2;}
Or remove the background from .main-inner .widget if you are not using it.
.main-inner .widget{background:transparent;}
1 Like
asasass
October 29, 2017, 6:21pm
10
I added:
#playButton2 svg{z-index:0}
#playButton2 .button {position:relative;z-index:2;}
And I still see this.
http://www.sitepoint.com/community/uploads/short-url/eMtDCkWUBd4rPwt5fAm1OBDtyXe.png
https://testpage34567.blogspot.com/
<style>
#playButton2 svg{z-index:0}
#playButton2 .button {position:relative;z-index:2;}
#playButton2 {
width: 180px;
height: 180px;
cursor: pointer;
border: 1px solid #0059dd;
position: relative;
}
#playButton2 svg {
position: absolute;
z-index: -1;
}
.button div:hover {
border: 1px solid red;
}
.button div {
width: 36px;
height: 36px;
margin: 69px 71px;
background-color: rgba(0, 0, 0, .7);
background-size: 14px 18px;
background-repeat: no-repeat;
border-radius: 50%;
border: 1px solid white;
}
.initial{
background-image: url('https://i.imgur.com/Lj57czy.png');
background-position: 58% 50%;
}
.pause {
background-image: url('https://i.imgur.com/LgmfKda.png');
background-position: 50%;
display: none;
}
.play {
background-image: url('https://i.imgur.com/Lj57czy.png');
background-position: 58% 50%;
display: none;
}
</style>
<div id="playButton2" onclick="
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
button.querySelector('.initial').style.display='none';
button.querySelector('.pause').style.display='none';
button.querySelector('.play').style.display='none';
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
player.play();
} else {
button.querySelector('.play').style.display='inline-block';
player.pause();
}">
<svg width="180" height="180">
<defs>
<clippath id="circleView">
<circle cx="90" cy="90" r="85" fill="orange" />
</circle></clippath>
</defs>
<image width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />
<image width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" />
</image></image></svg>
<div class="button">
<div class="initial"> </div>
<div class="pause"> </div>
<div class="play"> </div>
</div>
</div>
<audio id="player2" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>
1 Like
You did, but you left the old CSS in place further down the <style>
block and overrode it again.
4 Likes
asasass
October 29, 2017, 6:43pm
12
You mean, just remove this?
z-index: -1;
And leave it as this.
#playButton2 svg {
position: absolute;
}
Now it’s working.
https://testpage34567.blogspot.com/
asasass
October 30, 2017, 10:27am
16
I changed it to this:
And it works fine without the z-index.
About: .button div
Should that be relative, or absolute?
But according to what you have.
#playButton2 svg {
position: absolute;
#playButton2 .button {position:relative;
How can playButton2 be both relative / and absolute?
But, whatever you place on .button, that feeds the same code to the svg's.
<style>
.button div{ width:37px;height: 37px;
margin: 70px 72px;
background-color:black;
background-size: 14px 18px;
background-repeat: no-repeat;
border-radius: 50%;
box-Shadow:inset 0 0 0 3px lime;
position:relative;
}
</style>
<div id="playButton2" style="position:relative;background-image: linear-gradient( to right,transparent 86px,#0059dd 86px, #0059dd 89px, transparent 89px, transparent 177px, #0059dd 177px, #0059dd 180px, transparent 180px );border: 3px solid #0059dd; width: 266px; height: 180px;cursor: pointer;" onclick="
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
button.querySelector('.play').style.display='none';
button.querySelector('.pause').style.display='none';
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
player.play();
} else {
button.querySelector('.play').style.display='inline-block';
player.pause();
}">
<svg width="180" height="180" style="position: absolute;">
<defs>
<clippath id="circleView">
<circle cx="90" cy="90" r="85" fill="orange" />
</circle></clippath>
</defs>
<image width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />
<image width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" /></image></image></svg>
<div class="button" >
<div class="play" style="background-image: url('https://i.imgur.com/Lj57czy.png'); background-position: 58% 50%;"> </div>
<div class="pause" style="background-image: url('https://i.imgur.com/LgmfKda.png');background-position: 50%;display: none;"> </div>
</div>
</div>
<audio id="player2" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'>
</audio>
system
Closed
January 29, 2018, 5:27pm
17
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.