CODEWITHSUNDEEP
htmlcss
Louis P. Taylor
Louis P. Taylor

Reputation: 247

Keep custom video controls out of sight

Up until a couple days ago using position:absolute; and bottom:-36px was enough to hide the controls down the page, and they would popup whenever the mouse was hovered over the player. Now I'm able to scroll down to see them. How can I fix this while keeping the same slide-up effect?

Also, one more thing... I set the controls div with line-height:36px expecting it to be 36px in height but it is actually 38px (making bottom:-36px kind of useless since 2px are visible). The timer and the P, M and F divs get two extra px on the top and the seek bar gets them on the bottom. Where are these extra px coming from?

Sample

Any help on how to fix these issues and understand what's going on will be greatly appreciated. Thank you.

EDIT1:

Thanks to Fahad I managed to solve my first issue. The snippet didn't work outside of codepen but I fixed it adding position:relative; to the parent div. It still is unclear to me why line-height adds those extra px, though.

Giving the parent div a relative position raised another problem, don't ask me why but sometimes I need to scroll inside the "player" (well, you can ask) and when I do the controls don't stay at the bottom. Please see for yourselves:

Sample

EDIT2:

Apparently that can be easily solved by replacing position:absolute; with position:fixed; in the controls div. I'm still testing just in case this little change is messing with anything else.

Upvotes: 0

Views: 63

Answers (1)

Fahad Hasan
Fahad Hasan

Reputation: 10506

You can assign overflow-y: hidden; to your body tag using CSS (to disable vertical scrolling) and change the bottom value to -38px.

html,
body {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  color: #EEE;
  margin: 0;
  overflow-y: hidden;
}
#player {
  background-color: #333;
  text-align: center;
  height: 100vh;
}
#toggle {
  margin: auto;
  width: 500px;
  font-size: 24px;
  line-height: 60px;
  background-color: #B83B3B;
}
#toggle:hover + #controls {
  bottom: 0;
}
#controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -38px;
  line-height: 36px;
  background-color: #B83B3B;
  transition: bottom 0.3s ease;
}
#left {
  float: left;
}
#right {
  float: right;
}
#curTime {
  font-size: 13px;
  font-weight: bold;
  margin: 0px 8px;
  display: inline-block;
  vertical-align: middle;
}
#center {
  overflow: hidden;
}
#seekBar {
  -webkit-appearance: none;
  outline: none;
  background-color: #1F7783;
  height: 6px;
  margin: 0;
  width: 100%;
}
#seekBar::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #EEE;
  height: 12px;
  width: 12px;
  border-radius: 12px;
  cursor: pointer;
  opacity: 0.8;
}
.button {
  margin: 0px 8px;
  font-size: 24px;
  display: inline-block;
  vertical-align: middle;
}
<div id="player">
  <div id="toggle">Hover to show controls.</div>
  <div id="controls">
    <div id="left">
      <div class="button">P</div>
      <span id="curTime">0:01</span>
    </div>
    <div id="right">
      <div class="button">M</div>
      <div class="button">F</div>
    </div>
    <div id="center">
      <input type="range" id="seekBar" step="any">
    </div>
  </div>
</div>

Here's the example on CodePen.

Upvotes: 4

Related Questions