OnMouseOver; how to centre icons in updated code


#140

Remember when I became aware of the problem? I gave one best solution to center both vertically and horizontally.


#141

I don't remember.


#142

The one at https://css-tricks.com/centering-css-complete-guide/#both-fixed


#143

There are hundreds of different things in there.


#145

Open "Both horizontally and vertically", and then "fixed width and height". That's the one.


#146

The example that they give there is:

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

Where the -70 is half the 100 plus the 20 padding, and the -170 is half the 300 plus the 20 padding.


#147

Can you show me how I input it into this, just as a template to go by.
https://jsfiddle.net/yar9tq2v/


#148

It's 1AM here. That's a no.


#149

I'll wait then.

All I'm asking for is an example shown to me, that's all.

But I don't mind waiting.


#150

Saturday morning I'm out signing papers to transfer ownership of a vehicle to someone else.
Saturday afternoon I'm being taken out to a board games day, featuring Brass.
Sunday I spend offline with a friend.
Monday is a public holiday, I'm most likely going to be putting together the vehicle I sold, so that it can be handed over.
Tuesday, is looking better.

That's my current schedule.


#151

ok, I'll wait till Tuesday then.


#152

You are currently in the JavaScript forum with a serious CSS issue. I recommend that this thread be moved over to the CSS forum. There are people there are much better placed to help you with this existing CSS issue of yours.


#153

Welcome to the CSS forum, where they should be able to help apply the CSS vert/horiz centering technique from #146 to help with the issue that you're having in https://jsfiddle.net/r7puqxno/19/


#154

I was given this piece of code, but I don't know how to use it.

Can someone show me how to use it with my code?
https://jsfiddle.net/zLtk9n4p/

If I have an example to go by, a template if you will, that'll help a lot.

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

<div id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer;background-color: #000000 ;background-image: linear-gradient( to right,transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent  174px, #0059dd 174px, #0059dd 177px, transparent 177px ); border: 3px solid #0059dd;"

onclick=" 
        var button = document.getElementById('playButton2');
        var player = document.getElementById('player2');
          document.querySelector('#playButton2 .initial').style.display='none';
          document.querySelector('#playButton2 .speaker').style.display='none';
          document.querySelector('#playButton2 .play').style.display='none';
        player.volume=1.0; if (player.paused) {
        playButton2.style.border='3px solid #e77d19';
        playButton2.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'http://via.placeholder.com/260x260\')';
        playButton2.style.backgroundColor = 'transparent';
        playButton2.style.backgroundRepeat = 'no-repeat';
        playButton2.style.backgroundPosition = 'center'; 
        document.querySelector('#playButton2 .pause').style.display='inline-block';
        document.querySelector('#playButton2 .play').style.display='none';
        player.play();
        } else {
        playButton2.style.border='3px solid #e77d19';
        playButton2.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'http://via.placeholder.com/260x260\')';
        playButton2.style.backgroundColor = 'transparent';    
        playButton2.style.backgroundRepeat = 'no-repeat';
        playButton2.style.backgroundPosition = 'center'; 
        document.querySelector('#playButton2 .pause').style.display='none';
        document.querySelector('#playButton2 .play').style.display='inline-block';
        player.pause();
        }"onmouseover="
var player = document.getElementById('player2');
player.isPlaying = function () {
    return player.paused === false;
}
if  (player.isPlaying()) {
  document.querySelector('#playButton2 .speaker').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='inline-block';
}"

onmouseout="
var player = document.getElementById('player2');
player.isPlaying = function () {
    return player.paused === false;
}
if  (player.isPlaying()) {
  document.querySelector('#playButton2 .pause').style.display='none';
  document.querySelector('#playButton2 .speaker').style.display='inline-block';
}">

  <svg class="initial" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " 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;" width="90" height="108" viewbox="-13 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent;" 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>

  <svg class="speaker" style="display: none;" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
    fill="#1ed760 " fill-rule="evenodd"></path>
  </svg>

  <svg class="play" style="display: none;" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent; " 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>


</div>

<audio id="player2" style="display:none;">
  <source src='' type='audio/mpeg'></source>
</audio>

#156

Topics merged.


#157

Thank you.


#158

That code doesn't have the working hover CSS red circle border.

I recommend that you make it easier for them to help you, with https://jsfiddle.net/r7puqxno/19/ and then when it is working, you can transfer over what works.


#159

This.
https://jsfiddle.net/r7puqxno/22/

And like this.
https://jsfiddle.net/dm0auxmx/

This helps.
https://jsfiddle.net/ar2L2q22/


#160

What is the current question?


#161

It was using this piece of code, but figured out I could do it with just margin alone.

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}