asasass
December 3, 2016, 10:45pm
1
My Code: https://jsfiddle.net/y2ug0xgv/1/
<button id="playButton" style="display:block;width: 606px;height:50px;border-radius:50px;background-image: linear-gradient( to right,#000000 199px,#0059dd 199px, #0059dd 202px, #000000 202px, #000000 399px, #0059dd 399px, #0059dd 402px, #000000 402px );border: 3px solid #0059dd; cursor: pointer;font-family: Tahoma; font-weight: bold;font-size:23px; color:#000000;"
onclick="
var button = document.getElementById('playButton');
var player = document.getElementById('player'); player.volume=1.0;
if (player.paused) {
playButton.innerHTML = '1980s.fm';
playButton.style.background = 'linear-gradient( to right, #00ffff 199px,#0059dd 199px, #0059dd 202px, #ffffff 202px, #ffffff 399px, #0059dd 399px, #0059dd 402px, #ff00ff 402px )';
player.play();
} else {
playButton.innerHTML = '';
playButton.style.background = 'linear-gradient( to right, #000000 199px,#0059dd 199px, #0059dd 202px, #000000 202px, #000000 399px, #0059dd 399px, #0059dd 402px, #000000 402px )';
player.pause();
}">
</button>
<audio id="player" style="display:none;">
<source src='' type='audio/mpeg' />
</source></audio>
I wanted to put text in each of the empty boxes, is there any possible way to do this?
PaulOB
December 4, 2016, 11:34am
3
Assuming you want only inline styles and that you are only looking for text that isn’t going to wrap then one way is like this:
<button id="playButton" style="display:block;width: 606px;height:50px;border-radius:50px;background-image: linear-gradient( to right,#000000 199px,#0059dd 199px, #0059dd 202px, #000000 202px, #000000 399px, #0059dd 399px, #0059dd 402px, #000000 402px );border: 3px solid #0059dd; cursor: pointer;font-family: Tahoma; font-weight: bold;font-size:23px; color:#000000;"
onclick="
var button = document.getElementById('playButton');
var player = document.getElementById('player'); player.volume=1.0;
if (player.paused) {
playButton.innerHTML = '1980s.fm';
playButton.style.background = 'linear-gradient( to right, #00ffff 199px,#0059dd 199px, #0059dd 202px, #ffffff 202px, #ffffff 399px, #0059dd 399px, #0059dd 402px, #ff00ff 402px )';
player.play();
} else {
playButton.innerHTML = '';
playButton.style.background = 'linear-gradient( to right, #000000 199px,#0059dd 199px, #0059dd 202px, #000000 202px, #000000 399px, #0059dd 399px, #0059dd 402px, #000000 402px )';
player.pause();
}">
<span style="float:left;width:33.3%;height:44px;line-height:44px;text-align:center;color:#fff">text here</span>
<span style="float:left;width:33.3%;height:44px;line-height:44px;text-align:center;color:#fff">text here</span>
<span style="float:left;width:33.3%;height:44px;line-height:44px;text-align:center;color:#fff;">text here</span>
</button>
<audio id="player" style="display:none;">
<source src='' type='audio/mpeg' />
</source></audio>
1 Like
How would I then get the text to stay after you click on it, then click on it again. The text disappears but won’t come back. How would I get the text to come back?
It disappears because you destroy it.
playButton.innerHTML = '1980s.fm';
...
playButton.innerHTML = '';
Instead of destroying it, save it aside so that you can then put it back later.
2 Likes
system
Closed
March 6, 2017, 11:16am
6
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.