Use margins or absolute positioning?

No it isn’t. It is inside – it is not on top. There’s a big difference. Previously you were using negative margins to drag an element back on top of something else. In the latest example there is nothing to drag it on top of as it is just inside.

2 Likes

I don’t know this is the CSS forum!

That’s a completely different question and will require a JS answer.

Do you know javascript?

How would I make the javascript not specific, and what does that even mean?

I just meant that when you moved the div the js didn’t work so obviously the js expected it to be where it was.

If I showed you this, would you be able to say if it’s correct or not?

<script>
  (function iife() {
    "use strict";
    
    document.querySelector(".myLink").classList.add("hide");
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", firstClick);
     
		function firstClick() {
      document.querySelector(".myLink").classList.remove("hide");
      var button = document.querySelector(".playButton");
      var player = document.querySelector("#player");
      document.querySelector('.playButton .initial').style.display = 'none';
      playButton.addEventListener("click", playButtonClickHandler);
      document.querySelector(".playButton .play").style.display = "inline-block";
      document.querySelector(".playButton .pause").style.display = "none";
      button.classList.add("playing");
    }
    function playButtonClickHandler() {
 
      player.volume = 1.0;
     
      if (player.paused) {
        document.querySelector(".playButton .play").style.display = "none";
        document.querySelector(".playButton .pause").style.display = "inline-block";
        player.play();
      } else {
        document.querySelector(".playButton .play").style.display = "inline-block";
        document.querySelector(".playButton .pause").style.display = "none";
        player.pause();
      }
    }
    
   
  }());

</script>

To me it seems like a lot of code to do one thing. Maybe less code could be used, I’m not sure.

Looks ok to me but I’m sure Paul W or one of the other JS gurus could help streamline it.

1 Like

Exactly. We’ll be working on this some more next week. You helped a lot and thank you.

1 Like

What exactly do you mean by auto center, I don’t get that?

Can you show me what you mean here?

Add this:

  .play3,
  .pause3 {
  display: block;
  margin:16px auto 0;
  }

You would then need to change the JS to block instead of inline-block here.

  if (player.paused) {
        play.style.display = "none";
        pause.style.display = "block";
        player.play();
      } else {
        play.style.display = "block";
        pause.style.display = "none";
        player.pause();
      }
    }

The absolute method would also be fine in this case except it is more code but benefits from not having to work out the top margin as absolute elements auto centre vertically as well as horizontally for fixed width and height elements.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.