View the top part of the text when applying css: "overflow: hidden;"

Question

I'm trying to create a timepicker, with the following elements:

Up buttons for the hour and time;
Two displays for next time, one for the next hour and the other for next minutes;
Two displays for current time, one for the current hour and the other for current minutes;
Two displays for the previous time, one for the previous hour and one for the previous minutes;
Down buttons for the hour and time.

I'm trying to create the idea of movement when you press any of the buttons.

This is the visual aspect I've achieved so far:

What I could not do:

To present the upper part of the numbers, on the previous time displays.

What am I doing wrong, and how can I fix it, using javascript, css, jquery and html?

To create the visual look of my timepicker, I used the following code:

$(document).ready(function() {
$("#th31").html("01");
$("#tm31").html("01");
$("#th3").html("00");
$("#tm3").html("00");
$("#th32").html("23");
$("#tm32").html("59");
} );

.modal-pop-up-time{
  background-color: WhiteSmoke   ;
  cursor:pointer;
  display:block;
  width: 200px;
  height: 150px;
  position: absolute;
  left: 52%;
  z-index:10001;
}
.flex-container{
  position: relative;
  /* Other styling stuff */
  width: 50px;
  height: 25px;
  background-color: #3498db;
}
.flex-container1{
  position: relative;
   display: inline-block;
  /* Other styling stuff */
  width: 50px;
  height: 10px;
  background-color: red;
}
.spinner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.spinner-input-wrapper {
	display: flex;
}
.spinner-input {
	margin: 0 3px;
}
.inner-element{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80%;
  height: 100%;
  transform: translate(-50%,-50%);
  /* or 3d alternative if you will add animations (smoother transitions) */
  transform: translate3d(-50%,-50%,0);
}
.triangle-up,
.triangle-down {
	width: 0;
  height: 0;
  border: 4px solid transparent;
}
.triangle-up {
	border-bottom-width: 8px;
	border-bottom-color: #555;
}
.triangle-down {
  border-top-width: 8px;
  border-top-color: #555;
}
.div-overflow-hide{
  overflow: hidden;
}
.input-line-height{
  line-height: 10% !important;
}
.input-text-center{
  text-align: center !important;
}
.input-background-color{
  background-color:  DeepSkyBlue  ;
}
.input-background-color-white{
  background-color:  white  ;
}
.input-text-color{
  color: White; 
}
.div-center-element{
	margin:auto;
}
.div-ml-40{
  margin-left: 40% !important;
}
.div-mlr-5{
  margin-right: 5% !important;
  margin-left: 5% !important;
}
.div-ml-10{
  margin-left: 10% !important;
}
.div-ml-5{
  margin-left: 20% !important;
}
.div-tiangles-background-color{
   background-color: yellow;
}

<link href="lib/noty.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>	
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div tabindex="-1" class = "modal-pop-up-time" id = "popupreg">
	<div class="spinner-input-wrapper div-ml-10">
		<div class="spinner div-mt-5">
			<label class="div-ml-5">HH</label>
			<div class="div-tiangles-background-color" tabindex="2">
				<div class="triangle-up div-ml-40" id="up4"></div>
			</div>
			<div class= "flex-container1" tabindex="1">
				<div tabindex="1" class = "input-text-center input-line-height inner-element div-overflow-hide input-background-color-white" id = "th31" ></div>
			</div>
			<div class= "flex-container " tabindex="2" >
				<div tabindex="2" class = "input-text-center input-background-color input-text-color inner-element" id = "th3" ></div>
			</div>
			<div class= "flex-container1" tabindex="1"> 
				<div tabindex="1" class = "input-text-center input-line-height inner-element div-overflow-hide input-background-color-white" id = "th32" ></div>
			</div>
			<div class="div-tiangles-background-color"  tabindex="2">
				<div class="triangle-down div-ml-40" id="down4"></div>
			</div>
		</div>
		<div class= "spinner div-mt-5">
			<label class="div-mlr-5" >:</label>
		</div>
		<div class="spinner divmarginhor div-mt-5" >
			<label class="div-ml-5" >MM</label>
			<div class="div-tiangles-background-color" tabindex="2">
				<div class="triangle-up div-ml-40" id="up5"></div>
			</div>
			<div class= "flex-container1" tabindex="1">
				<div tabindex="1" class = "input-text-center input-line-height inner-element div-overflow-hide input-background-color-white" id = "tm31" ></div>
			</div>
			<div class= "flex-container" tabindex="2">
				<div tabindex="2" class = "input-text-center input-background-color input-text-color inner-element" id = "tm3" ></div>
			</div >
			<div class= "flex-container1" tabindex="1">
				<div tabindex="1" class = "input-text-center input-line-height input-background-color-white inner-element div-overflow-hide" id = "tm32" ></div>
			</div>
			<div class="div-tiangles-background-color" tabindex="2">
				<div class="triangle-down div-ml-40" id="down5"></div>
			</div>
		</div>
	</div>
</div>

Yes vincent-d, and the bottom part of the number to be hidden, and not the upper part of the number. — Jose Marques
– Jose Marques, Commented Feb 25, 2019 at 16:26
@JoseMarques Check my answer bellow and tell me if it's what you meant — Richard
– Richard, Commented Feb 25, 2019 at 16:44
If you want to simplify it and not want the need for js, you can just limit it to three numbers (selected above and below): jsfiddle.net/k2azdwmj/10 — Pete
– Pete, Commented Feb 25, 2019 at 16:49

Pete · Accepted Answer · 2019-02-26 10:02:49Z

You can achieve what you want using some absolute positioning and line-height:

.timebox {
  display: inline-block;
  line-height: 2em;
  height: 4em;          /* only wants to be double the line-height */
  overflow: hidden;
  position: relative;
  width: 2em;           /* can be what you want */
}

.inner {
  height: 6em;                  /* timebox line-height multiplied by 3 (number of numbers */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.number {
  width: 2em;
  text-align: center;
}

<div class="timebox">
  <div class="inner">
    <div class="number">
      1
    </div>
    <div class="number">
      2
    </div>
    <div class="number">
      3
    </div>
  </div>
</div>
<div class="timebox">
  <div class="inner">
    <div class="number">
      21
    </div>
    <div class="number">
      22
    </div>
    <div class="number">
      23
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

View the top part of the text when applying css: "overflow: hidden;"

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related