Timeline Demo

Developer
Hamza Erbay
Size
6,599 Kb
Views
44,528
  1. Timeline Demo Previews
  2. Timeline Demo HTML Codes
  3. Timeline Demo CSS Codes
  4. Timeline Demo JS Codes

How do I make an timeline demo?

Performans ölçüm uygulaması için yapmış olduğum timeline çalışması halen geliştirmekteyim. hoverlarda tooltipster tooltipi kullanılabilir. What is a timeline demo? How do you make a timeline demo? This script and codes were developed by Hamza Erbay on 12 June 2022, Sunday.

Timeline Demo Previews
IQ Test

Timeline Demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Timeline Demo</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body
{
background:#fafafa url(http://subtlepatterns.com/patterns/pw_maze_black.png);
font-family: 'Noto Sans', sans-serif;
font-weight:bold;
}
.content{	display:block;	width:960px;	background:#fafafa;	height:50px;	box-shadow:0px 0px 3px #999;	position:relative;	margin-bottom:5px;	border-radius:3px;
}
.content .userInfo
{	position:absolute;	top:5px;	left:10px;	font-weight:bold;	font-size:12px;
}
.hour
{	position: absolute;	display: inline-block;	bottom:0px;	margin: 0px;	padding: 0px;	border-bottom:1px solid #bbb;
}
.hour li
{	display: block;	float: left;	width: 12px; padding:0px; margin: 0px 1px;	position: relative;	height: 10px;
}
.hour li a
{	width:100%;	height:10px;	display:block;	background:rgb(206, 206, 206);	-moz-transition:.25s ease-in-out;	-webkit-transition:.25s ease-in-out;	transition:.25s ease-in-out;	-moz-border-radius:2px 2px 0px 0px;	-webkit-border-radius:2px 2px 0px 0px;	border-radius:2px 2px 0px 0px;	position: absolute;	bottom: 0px;	left: 0px;
}
.hour li a.info
{	background:#0883bd;	height:20px;
}
.hour li a.warning
{	background:#b31d33;	height:20px;
}
.hour li a.correct
{	background:#6ca138;	height:20px;
}
.hour li a.complete
{	background:#e35909;	height:20px;
}
.hour li a:hover
{	height:30px;	background:#404040;/*f0a400;*/
}
.hour li .note
{	border-top:5px solid #404040;
}
/*tooltipster css*/
html { -webkit-font-smoothing: antialiased;
}
/* This is the base styling required to make all Tooltipsters work */
.tooltipster-base {	padding: 0;	font-size: 0;	line-height: 0;	position: absolute;	font-family:arial,tahoma,verdana;	font-size:12px;	font-weight:normal;	z-index: 9999999;	pointer-events: none;	width: auto;	overflow: visible;
}
.tooltipster-base .tooltipster-content {	overflow: hidden;
}
/* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */
.tooltipster-arrow {	display: block;	text-align: center;	width: 100%;	height: 100%;	position: absolute;	top: 0;	left: 0;	z-index: -1;
}
.tooltipster-arrow span, .tooltipster-arrow-border {	display: block;	width: 0;	height: 0;	position: absolute;
}
.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span {	border-left: 8px solid transparent !important;	border-right: 8px solid transparent !important;	border-top: 8px solid;	bottom: -8px;
}
.tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border {	border-left: 9px solid transparent !important;	border-right: 9px solid transparent !important;	border-top: 9px solid;	bottom: -8px;
}
.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span {	border-left: 8px solid transparent !important;	border-right: 8px solid transparent !important;	border-bottom: 8px solid;	top: -8px;
}
.tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {	border-left: 9px solid transparent !important;	border-right: 9px solid transparent !important;	border-bottom: 9px solid;	top: -8px;
}
.tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border {	left: 0;	right: 0;	margin: 0 auto;
}
.tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span {	left: 6px;
}
.tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {	left: 5px;
}
.tooltipster-arrow-top-right span, .tooltipster-arrow-bottom-right span {	right: 6px;
}
.tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border {	right: 5px;
}
.tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border {	border-top: 8px solid transparent !important;	border-bottom: 8px solid transparent !important;	border-left: 8px solid;	top: 50%;	margin-top: -7px;	right: -8px;
}
.tooltipster-arrow-left .tooltipster-arrow-border {	border-top: 9px solid transparent !important;	border-bottom: 9px solid transparent !important;	border-left: 9px solid;	margin-top: -8px;
}
.tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border {	border-top: 8px solid transparent !important;	border-bottom: 8px solid transparent !important;	border-right: 8px solid;	top: 50%;	margin-top: -7px;	left: -8px;
}
.tooltipster-arrow-right .tooltipster-arrow-border {	border-top: 9px solid transparent !important;	border-bottom: 9px solid transparent !important;	border-right: 9px solid;	margin-top: -8px;
}
/* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */
.tooltipster-fade {	opacity: 0;	-webkit-transition-property: opacity;	-moz-transition-property: opacity;	-o-transition-property: opacity;	-ms-transition-property: opacity;	transition-property: opacity;
}
.tooltipster-fade-show {	opacity: 1;
}
.tooltipster-grow {	-webkit-transform: scale(0,0);	-moz-transform: scale(0,0);	-o-transform: scale(0,0);	-ms-transform: scale(0,0);	transform: scale(0,0);	-webkit-transition-property: -webkit-transform;	-moz-transition-property: -moz-transform;	-o-transition-property: -o-transform;	-ms-transition-property: -ms-transform;	transition-property: transform;	-webkit-backface-visibility: hidden;
}
.tooltipster-grow-show {	-webkit-transform: scale(1,1);	-moz-transform: scale(1,1);	-o-transform: scale(1,1);	-ms-transform: scale(1,1);	transform: scale(1,1);	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);	-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}
.tooltipster-swing {	opacity: 0;	-webkit-transform: rotateZ(4deg);	-moz-transform: rotateZ(4deg);	-o-transform: rotateZ(4deg);	-ms-transform: rotateZ(4deg);	transform: rotateZ(4deg);	-webkit-transition-property: -webkit-transform, opacity;	-moz-transition-property: -moz-transform;	-o-transition-property: -o-transform;	-ms-transition-property: -ms-transform;	transition-property: transform;
}
.tooltipster-swing-show {	opacity: 1;	-webkit-transform: rotateZ(0deg);	-moz-transform: rotateZ(0deg);	-o-transform: rotateZ(0deg);	-ms-transform: rotateZ(0deg);	transform: rotateZ(0deg);	-webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1);	-webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);	-moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);	-ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);	-o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);	transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
}
.tooltipster-fall {	top: 0;	-webkit-transition-property: top;	-moz-transition-property: top;	-o-transition-property: top;	-ms-transition-property: top;	transition-property: top;	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);	-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}
.tooltipster-fall-show {
}
.tooltipster-fall.tooltipster-dying {	-webkit-transition-property: all;	-moz-transition-property: all;	-o-transition-property: all;	-ms-transition-property: all;	transition-property: all;	top: 0px !important;	opacity: 0;
}
.tooltipster-slide {	left: -40px;	-webkit-transition-property: left;	-moz-transition-property: left;	-o-transition-property: left;	-ms-transition-property: left;	transition-property: left;	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);	-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}
.tooltipster-slide.tooltipster-slide-show {
}
.tooltipster-slide.tooltipster-dying {	-webkit-transition-property: all;	-moz-transition-property: all;	-o-transition-property: all;	-ms-transition-property: all;	transition-property: all;	left: 0px !important;	opacity: 0;
}
/* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */
.tooltipster-content-changing {	opacity: 0.5;	-webkit-transform: scale(1.1, 1.1);	-moz-transform: scale(1.1, 1.1);	-o-transform: scale(1.1, 1.1);	-ms-transform: scale(1.1, 1.1);	transform: scale(1.1, 1.1);
}
/**/
.tooltipster-warning {	border-radius: 2px;	background: #b31d33;	color: #fff;
}
.tooltipster-warning .tooltipster-content {	line-height: 16px;	padding: 8px 10px;
}
/**/
.tooltipster-info {	border-radius: 2px;	background: #0883bd;	color: #fff;
}
.tooltipster-info .tooltipster-content {	line-height: 16px;	padding: 8px 10px;
}
/**/
.tooltipster-correct {	border-radius: 2px;	background: #6ca138;	color: #fff;
}
.tooltipster-correct .tooltipster-content {	line-height: 16px;	padding: 8px 10px;
}
/**/
.tooltipster-complete {	border-radius: 2px;	background: #e35909;	color: #fff;
}
.tooltipster-complete .tooltipster-content {	line-height: 16px;	padding: 8px 10px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="content"> <div class="userInfo"><span class="gray">2340032245</span> - Emrah DEDEOĞLU</div>	<ul class="hour" id="hour1">	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#" class="warning" title="warning Message"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li> <li><a href="#" class="complete" title="<table cellspacing='3' style='text-align:left;'> <tr> <th scope='col' style='color:#303030;'>Kriterler</th> <th scope='col' style='color:#303030;'>Ağırlık</th> </tr> <tr> <td>Kalite Puanı</td> <td>% 30,00</td> </tr> <tr> <td>Kısa Mola Aşımı</td> <td>% 3,75</td> </tr>
</table>"></a></li>	</ul>
</div>
<div class="content"> <div class="userInfo"><span class="gray">2340032245</span> - Hamza dwqeqw</div>	<ul class="hour" id="hour2">	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#" class="warning" title="warning Message"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#" class="complete note" title="Complete Message"></a></li>	<li><a href="#" class="info" title="Info Message"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#" class="complete" title="Complete Message"></a></li>	<li><a href="#"></a></li>	<li><a href="#" class="info" title="Info Message"></a></li>	<li><a href="#"></a></li>	<li><a href="#" class="correct" title="correct Message"></a></li>	<li><a href="#"></a></li>	<li><a href="#" class="complete" title="Half"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#" class="warning" title="warning Message"></a></li>	<li><a href="#"></a></li>	<li><a href="#" class="correct" title="correct Message"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#" class="info" title="Info Message"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#" class="warning" title="warning Message"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li> <li><a href="#" class="complete" title="<table cellspacing='3' style='text-align:left;'> <tr> <th scope='col' style='color:#303030;'>Kriterler</th> <th scope='col' style='color:#303030;'>Ağırlık</th> </tr> <tr> <td>Kalite Puanı</td> <td>% 30,00</td> </tr> <tr> <td>Kısa Mola Aşımı</td> <td>% 3,75</td> </tr>
</table>"></a></li>	</ul>
</div>
<div class="content"> <div class="userInfo"><span class="gray">2340032245</span> - Emrah DEDEOĞLU</div>	<ul class="hour" id="hour3">	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#" class="warning" title="warning Message"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#" class="complete note" title="Complete Message"></a></li>	<li><a href="#" class="info" title="Info Message"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#" class="complete" title="Complete Message"></a></li>	<li><a href="#"></a></li>	<li><a href="#" class="info" title="Info Message"></a></li>	<li><a href="#"></a></li>	<li><a href="#" class="correct" title="correct Message"></a></li>	<li><a href="#"></a></li>	<li><a href="#" class="complete" title="Half"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#" class="warning" title="warning Message"></a></li>	<li><a href="#"></a></li>	<li><a href="#" class="correct" title="correct Message"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#" class="info" title="Info Message"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#" class="warning" title="warning Message"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li>	<li><a href="#"></a></li> <li><a href="#" class="complete" title="<table cellspacing='3' style='text-align:left;'> <tr> <th scope='col' style='color:#303030;'>Kriterler</th> <th scope='col' style='color:#303030;'>Ağırlık</th> </tr> <tr> <td>Kalite Puanı</td> <td>% 30,00</td> </tr> <tr> <td>Kısa Mola Aşımı</td> <td>% 3,75</td> </tr>
</table>"></a></li>	</ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://raw.github.com/iamceege/tooltipster/master/js/jquery.tooltipster.js'></script> <script src="js/index.js"></script>
</body>
</html>

Timeline Demo - Script Codes CSS Codes

body
{
background:#fafafa url(http://subtlepatterns.com/patterns/pw_maze_black.png);
font-family: 'Noto Sans', sans-serif;
font-weight:bold;
}
.content{	display:block;	width:960px;	background:#fafafa;	height:50px;	box-shadow:0px 0px 3px #999;	position:relative;	margin-bottom:5px;	border-radius:3px;
}
.content .userInfo
{	position:absolute;	top:5px;	left:10px;	font-weight:bold;	font-size:12px;
}
.hour
{	position: absolute;	display: inline-block;	bottom:0px;	margin: 0px;	padding: 0px;	border-bottom:1px solid #bbb;
}
.hour li
{	display: block;	float: left;	width: 12px; padding:0px; margin: 0px 1px;	position: relative;	height: 10px;
}
.hour li a
{	width:100%;	height:10px;	display:block;	background:rgb(206, 206, 206);	-moz-transition:.25s ease-in-out;	-webkit-transition:.25s ease-in-out;	transition:.25s ease-in-out;	-moz-border-radius:2px 2px 0px 0px;	-webkit-border-radius:2px 2px 0px 0px;	border-radius:2px 2px 0px 0px;	position: absolute;	bottom: 0px;	left: 0px;
}
.hour li a.info
{	background:#0883bd;	height:20px;
}
.hour li a.warning
{	background:#b31d33;	height:20px;
}
.hour li a.correct
{	background:#6ca138;	height:20px;
}
.hour li a.complete
{	background:#e35909;	height:20px;
}
.hour li a:hover
{	height:30px;	background:#404040;/*f0a400;*/
}
.hour li .note
{	border-top:5px solid #404040;
}
/*tooltipster css*/
html { -webkit-font-smoothing: antialiased;
}
/* This is the base styling required to make all Tooltipsters work */
.tooltipster-base {	padding: 0;	font-size: 0;	line-height: 0;	position: absolute;	font-family:arial,tahoma,verdana;	font-size:12px;	font-weight:normal;	z-index: 9999999;	pointer-events: none;	width: auto;	overflow: visible;
}
.tooltipster-base .tooltipster-content {	overflow: hidden;
}
/* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */
.tooltipster-arrow {	display: block;	text-align: center;	width: 100%;	height: 100%;	position: absolute;	top: 0;	left: 0;	z-index: -1;
}
.tooltipster-arrow span, .tooltipster-arrow-border {	display: block;	width: 0;	height: 0;	position: absolute;
}
.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span {	border-left: 8px solid transparent !important;	border-right: 8px solid transparent !important;	border-top: 8px solid;	bottom: -8px;
}
.tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border {	border-left: 9px solid transparent !important;	border-right: 9px solid transparent !important;	border-top: 9px solid;	bottom: -8px;
}
.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span {	border-left: 8px solid transparent !important;	border-right: 8px solid transparent !important;	border-bottom: 8px solid;	top: -8px;
}
.tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {	border-left: 9px solid transparent !important;	border-right: 9px solid transparent !important;	border-bottom: 9px solid;	top: -8px;
}
.tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border {	left: 0;	right: 0;	margin: 0 auto;
}
.tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span {	left: 6px;
}
.tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {	left: 5px;
}
.tooltipster-arrow-top-right span, .tooltipster-arrow-bottom-right span {	right: 6px;
}
.tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border {	right: 5px;
}
.tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border {	border-top: 8px solid transparent !important;	border-bottom: 8px solid transparent !important;	border-left: 8px solid;	top: 50%;	margin-top: -7px;	right: -8px;
}
.tooltipster-arrow-left .tooltipster-arrow-border {	border-top: 9px solid transparent !important;	border-bottom: 9px solid transparent !important;	border-left: 9px solid;	margin-top: -8px;
}
.tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border {	border-top: 8px solid transparent !important;	border-bottom: 8px solid transparent !important;	border-right: 8px solid;	top: 50%;	margin-top: -7px;	left: -8px;
}
.tooltipster-arrow-right .tooltipster-arrow-border {	border-top: 9px solid transparent !important;	border-bottom: 9px solid transparent !important;	border-right: 9px solid;	margin-top: -8px;
}
/* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */
.tooltipster-fade {	opacity: 0;	-webkit-transition-property: opacity;	-moz-transition-property: opacity;	-o-transition-property: opacity;	-ms-transition-property: opacity;	transition-property: opacity;
}
.tooltipster-fade-show {	opacity: 1;
}
.tooltipster-grow {	-webkit-transform: scale(0,0);	-moz-transform: scale(0,0);	-o-transform: scale(0,0);	-ms-transform: scale(0,0);	transform: scale(0,0);	-webkit-transition-property: -webkit-transform;	-moz-transition-property: -moz-transform;	-o-transition-property: -o-transform;	-ms-transition-property: -ms-transform;	transition-property: transform;	-webkit-backface-visibility: hidden;
}
.tooltipster-grow-show {	-webkit-transform: scale(1,1);	-moz-transform: scale(1,1);	-o-transform: scale(1,1);	-ms-transform: scale(1,1);	transform: scale(1,1);	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);	-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}
.tooltipster-swing {	opacity: 0;	-webkit-transform: rotateZ(4deg);	-moz-transform: rotateZ(4deg);	-o-transform: rotateZ(4deg);	-ms-transform: rotateZ(4deg);	transform: rotateZ(4deg);	-webkit-transition-property: -webkit-transform, opacity;	-moz-transition-property: -moz-transform;	-o-transition-property: -o-transform;	-ms-transition-property: -ms-transform;	transition-property: transform;
}
.tooltipster-swing-show {	opacity: 1;	-webkit-transform: rotateZ(0deg);	-moz-transform: rotateZ(0deg);	-o-transform: rotateZ(0deg);	-ms-transform: rotateZ(0deg);	transform: rotateZ(0deg);	-webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1);	-webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);	-moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);	-ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);	-o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);	transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
}
.tooltipster-fall {	top: 0;	-webkit-transition-property: top;	-moz-transition-property: top;	-o-transition-property: top;	-ms-transition-property: top;	transition-property: top;	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);	-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}
.tooltipster-fall-show {
}
.tooltipster-fall.tooltipster-dying {	-webkit-transition-property: all;	-moz-transition-property: all;	-o-transition-property: all;	-ms-transition-property: all;	transition-property: all;	top: 0px !important;	opacity: 0;
}
.tooltipster-slide {	left: -40px;	-webkit-transition-property: left;	-moz-transition-property: left;	-o-transition-property: left;	-ms-transition-property: left;	transition-property: left;	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);	-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
}
.tooltipster-slide.tooltipster-slide-show {
}
.tooltipster-slide.tooltipster-dying {	-webkit-transition-property: all;	-moz-transition-property: all;	-o-transition-property: all;	-ms-transition-property: all;	transition-property: all;	left: 0px !important;	opacity: 0;
}
/* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */
.tooltipster-content-changing {	opacity: 0.5;	-webkit-transform: scale(1.1, 1.1);	-moz-transform: scale(1.1, 1.1);	-o-transform: scale(1.1, 1.1);	-ms-transform: scale(1.1, 1.1);	transform: scale(1.1, 1.1);
}
/**/
.tooltipster-warning {	border-radius: 2px;	background: #b31d33;	color: #fff;
}
.tooltipster-warning .tooltipster-content {	line-height: 16px;	padding: 8px 10px;
}
/**/
.tooltipster-info {	border-radius: 2px;	background: #0883bd;	color: #fff;
}
.tooltipster-info .tooltipster-content {	line-height: 16px;	padding: 8px 10px;
}
/**/
.tooltipster-correct {	border-radius: 2px;	background: #6ca138;	color: #fff;
}
.tooltipster-correct .tooltipster-content {	line-height: 16px;	padding: 8px 10px;
}
/**/
.tooltipster-complete {	border-radius: 2px;	background: #e35909;	color: #fff;
}
.tooltipster-complete .tooltipster-content {	line-height: 16px;	padding: 8px 10px;
}

Timeline Demo - Script Codes JS Codes

$(document).ready(function(){ /*tooltipster*/ $('.warning').tooltipster({theme: '.tooltipster-warning'});	$('.info').tooltipster({theme: '.tooltipster-info'});	$('.correct').tooltipster({theme: '.tooltipster-correct'});	$('.complete').tooltipster({theme: '.tooltipster-complete'}); /**/	var contentCount=$(".content").length; $(".userInfo").text(contentCount); function idcreator() { $( ".content" ).each(function ( index) { }); }	var barCount1=$('#hour1').find('li').length;	var hour1=$('#hour1').find('li');	var contentWidth1=$('.content').width()-barCount1*2;	hour1.css('width', contentWidth1 / barCount1);	$(".half").css("left",(barCount1/2)*(hour1.width()+2));	$(".half").text(start+ ":" +barCount1/2);	if(barCount1>60)	{	var addBar1=barCount1-60;	contentWidth1=parseInt($('.content').width())+parseInt(addBar1*14);	$('.content').width(contentWidth1);	hour1.css('width', contentWidth1 / barCount1-2);	} /**/	var barCount3=$('#hour3').find('li').length;	var hour3=$('#hour3').find('li');	var contentWidth3=$('.content3').width()-barCount3*2;	hour3.css('width', contentWidth3 / barCount3);	if(barCount3>60)	{	var addBar3=barCount3-60;	contentWidth3=parseInt($('.content3').width())+parseInt(addBar3*14);	$('.content3').width(contentWidth3);	hour3.css('width', contentWidth3 / barCount3-2);	} /**/	var barCount2=$('#hour2').find('li').length;	var hour2=$('#hour2').find('li');	var contentWidth2=$('.content2').width()-barCount2*2; hour2.css('width', contentWidth2 / barCount2);	if(barCount2>60)	{	var addBar2=barCount2-60;	contentWidth2=parseInt($('.content2').width())+parseInt(addBar2*14);	$('.content2').width(contentWidth2);	hour2.css('width', contentWidth2 / barCount2-2);	}	$('body').css('overflow-x','auto !important');
});
Timeline Demo - Script Codes
Timeline Demo - Script Codes
Home Page Home
Developer Hamza Erbay
Username hamzaerbay
Uploaded June 12, 2022
Rating 3
Size 6,599 Kb
Views 44,528
Do you need developer help for Timeline Demo?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Hamza Erbay (hamzaerbay) Script Codes
Name
Udemy loader stroke
Quickviewbox
Badge
Udemy page transitions
Tooltip
React Sample
Flexbox experiment
Flexbox mixins with sass
Css counters
Old Course Cards
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!