Timelinr Horizontal Custom

Developer
Harley Santos Garzón
Size
6,171 Kb
Views
12,144
  1. Timelinr Horizontal Custom Previews
  2. Timelinr Horizontal Custom HTML Codes
  3. Timelinr Horizontal Custom CSS Codes
  4. Timelinr Horizontal Custom JS Codes

How do I make an timelinr horizontal custom?

What is a timelinr horizontal custom? How do you make a timelinr horizontal custom? This script and codes were developed by Harley Santos Garzón on 15 October 2022, Saturday.

Timelinr Horizontal Custom Previews
IQ Test

Timelinr Horizontal Custom - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>timelinr Horizontal Custom</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://www.csslab.cl/ejemplos/timelinr/latest/css/style.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <div id="timeline"> <ul id="dates"> <li><a #1900="#1900">1900 </a></li> <li><a #1910="#1910">1910 </a></li> <li><a #1920="#1920">1920 </a></li> <li><a #1930="#1930">1930 </a></li> <li><a #1940="#1940">1940 </a></li> <li><a #1950="#1950">1950 </a></li> <li><a #1960="#1960">1960 </a></li> <li><a #1970="#1970">1970 </a></li> <li><a #1980="#1980">1980 </a></li> <li><a #1990="#1990">1990</a></li> <li><a #2000="#2000">2000</a></li> </ul> <ul id="issues"> <li id="1900"><img src="https://unsplash.it/300/300?ramdom"/> <div> <h1 class="title">title</h1> <h2 class="subTitle">subtitle</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, nulla. Id iure similique assumenda animi recusandae quaerat laboriosam aliquid doloremque blanditiis libero, eveniet, ut harum. Tenetur voluptates accusantium, quae commodi cumque harum? Repudiandae cupiditate est distinctio perferendis, ducimus id numquam odio vitae, incidunt, aliquam, officia. Quod, iusto eveniet voluptates maxime, officiis rerum veritatis ad quae unde cum sapiente ea. Corrupti quae nesciunt officiis in dolorum recusandae debitis error numquam repellendus, dolorem reiciendis, vitae iusto, impedit at sequi? Perspiciatis distinctio soluta, ipsum, officiis maxime hic dolorum mollitia tempore repellendus odio eum. Nulla debitis fuga sit, quidem blanditiis consectetur quaerat asperiores eaque.</p> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, nulla. Id iure similique assumenda animi recusandae quaerat laboriosam aliquid doloremque blanditiis libero, eveniet, ut harum. Tenetur voluptates accusantium, quae commodi cumque harum? Repudiandae cupiditate est distinctio perferendis, ducimus id numquam odio vitae, incidunt, aliquam, officia. Quod, iusto eveniet voluptates maxime, officiis rerum veritatis ad quae unde cum sapiente ea. Corrupti quae nesciunt officiis in dolorum recusandae debitis error numquam repellendus, dolorem reiciendis, vitae iusto, impedit at sequi? Perspiciatis distinctio soluta, ipsum, officiis maxime hic dolorum mollitia tempore repellendus odio eum. Nulla debitis fuga sit, quidem blanditiis consectetur quaerat asperiores eaque.</p> </div> </li> <li id="1910"><img src="https://unsplash.it/400/400?ramdom"/> <h1 class="title">title</h1> <h2 class="subTitle">sutitle</h2> <p> Lorem ipsum dolor sit amet.</p> </li> <li id="1920"><img src="https://unsplash.it/300/300?ramdom"/> <h1 class="title">title</h1> <p> Lorem ipsum dolor sit amet.</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, nulla. Id iure similique assumenda animi recusandae quaerat laboriosam aliquid doloremque blanditiis libero, eveniet, ut harum. Tenetur voluptates accusantium, quae commodi cumque harum? Repudiandae cupiditate est distinctio perferendis, ducimus id numquam odio vitae, incidunt, aliquam, officia. Quod, iusto eveniet voluptates maxime, officiis rerum veritatis ad quae unde cum sapiente ea. Corrupti quae nesciunt officiis in dolorum recusandae debitis error numquam repellendus, dolorem reiciendis, vitae iusto, impedit at sequi? Perspiciatis distinctio soluta, ipsum, officiis maxime hic dolorum mollitia tempore repellendus odio eum. Nulla debitis fuga sit, quidem blanditiis consectetur quaerat asperiores eaque.</p> </li> <li id="1930"><img src="https://unsplash.it/300/300?ramdom"/> <h1 class="title">title</h1> <p> Lorem ipsum dolor sit amet.</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, nulla. Id iure similique assumenda animi recusandae quaerat laboriosam aliquid doloremque blanditiis libero, eveniet, ut harum. Tenetur voluptates accusantium, quae commodi cumque harum? Repudiandae cupiditate est distinctio perferendis.</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, nulla. Id iure similique assumenda animi recusandae quaerat laboriosam aliquid doloremque blanditiis libero, eveniet, ut harum. Tenetur voluptates accusantium, quae commodi cumque harum? Repudiandae cupiditate est distinctio perferendis, ducimus id numquam odio vitae, incidunt, aliquam, officia. Quod, iusto eveniet voluptates maxime, officiis rerum veritatis ad quae unde cum sapiente ea. Corrupti quae nesciunt officiis in dolorum recusandae debitis error numquam repellendus, dolorem reiciendis, vitae iusto, impedit at sequi? Perspiciatis distinctio soluta, ipsum, officiis maxime hic dolorum mollitia tempore repellendus odio eum. Nulla debitis fuga sit, quidem blanditiis consectetur quaerat asperiores eaque.</p> </li> <li id="1940"><img src="https://unsplash.it/300/300?ramdom"/> <h1 class="title">title</h1> <p> Lorem ipsum dolor sit amet.</p> </li> <li id="1950"><img src="https://unsplash.it/300/300?ramdom"/> <h1 class="title">title</h1> <p> Lorem ipsum dolor sit amet.</p> </li> <li id="1960"><img src="https://unsplash.it/300/300?ramdom"/> <h1 class="title">title</h1> <p> Lorem ipsum dolor sit amet.</p> </li> <li id="1970"><img src="https://unsplash.it/300/300?ramdom"/> <h1 class="title">title</h1> <p> Lorem ipsum dolor sit amet.</p> </li> <li id="1980"><img src="https://unsplash.it/300/300?ramdom"/> <h1 class="title">title</h1> <p> Lorem ipsum dolor sit amet.</p> </li> <li id="1990"><img src="https://unsplash.it/300/300?ramdom"/> <h1 class="title">title</h1> <p> Lorem ipsum dolor sit amet.</p> </li> <li id="2000"><img src="https://unsplash.it/300/300?ramdom"/><img src="https://unsplash.it/300/300?ramdom"/> <h1 class="title">title</h1> <p> Lorem ipsum dolor sit amet.</p> </li> </ul> <div id="grad_left"></div> <div id="grad_right"></div> </div>
</div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script src='http://www.csslab.cl/ejemplos/timelinr/latest/js/jquery.timelinr-0.9.54.js'></script> <script src="js/index.js"></script>
</body>
</html>

Timelinr Horizontal Custom - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
body { background: #f8f8f8; font-family: Georgia, serif; color: #323232; font-size: 14px;
}
.container { width: 100%; max-width: 100vw; margin: auto;
}
@media all and (min-width: 1024px) { .container { width: 90%; max-width: 1280px; }
}
@media all and (min-width: 530px) and (max-width: 1023px) { .container { width: 95%; max-width: 1020px; }
}
@media all and (max-width: 529px) { .container { width: 100%; }
}
a { color: gray; text-decoration: none; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s;
}
a:hover, a.selected { color: #ffcc00;
}
h1, h2, h4, h5, h6 { text-align: center; color: gray; text-shadow: none; margin-bottom: 5px; font-weight: normal;
}
#timeline { width: 80%; padding: 0 40px; height: 600px; overflow: hidden; margin: 10px auto; position: relative;
}
#timeline #dates { width: 768px; height: 60px; overflow: hidden;
}
#timeline #dates li { list-style: none; float: left; width: 100px; height: 50px; font-size: 24px; text-align: center;
}
#timeline #dates li a { line-height: 38px; padding-bottom: 10px; cursor: pointer;
}
#timeline #dates .selected { font-size: 38px;
}
#timeline #issues { width: 768px; height: 600px; overflow: hidden;
}
#timeline #issues li { width: 1024px; height: 600px; list-style: none; float: left;
}
#timeline #issues li img { float: left; margin: 10px 30px 10px 50px; background: transparent; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE 6 & 7 */ zoom: 1; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -webkit-transform: scale(0.7, 0.7); -moz-transform: scale(0.7, 0.7); -o-transform: scale(0.7, 0.7); -ms-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7);
}
#timeline #issues li.selected img { -webkit-transform: scale(0.9, 0.9); -moz-transform: scale(0.9, 0.9); -o-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9);
}
#timeline #issues li .title { color: #383838; font-size: 3rem; margin: 20px 0 0 0; text-shadow: none; text-align: left;
}
#timeline #issues li .subTitle { text-shadow: none; text-align: left; font-size: 2rem; margin: -5px 0 20px 0;
}
#timeline #issues li p { font-size: 16px; margin-right: 0; font-weight: normal; line-height: 22px; text-shadow: none; padding-right: 40px; color: gray;
}
#timeline #grad_left,
#timeline #grad_right { width: 100px; height: 600px; position: absolute; top: 0; background: none; background: #000;
}
#timeline #grad_left { left: 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+1,ffffff+100&0.65+66,0+100 */ background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.65) 1%, rgba(255, 255, 255, 0.65) 66%, rgba(255, 255, 255, 0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.65) 1%, rgba(255, 255, 255, 0.65) 66%, rgba(255, 255, 255, 0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255, 255, 255, 0.65) 1%, rgba(255, 255, 255, 0.65) 66%, rgba(255, 255, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}
#timeline #grad_right { right: 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+99&0+0,0.65+34 */ background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 34%, rgba(255, 255, 255, 0.65) 99%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 34%, rgba(255, 255, 255, 0.65) 99%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 34%, rgba(255, 255, 255, 0.65) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#a6ffffff',GradientType=1 ); /* IE6-9 */
}
#timeline #next,
#timeline #prev { position: absolute; font-size: 70px; top: 170px; width: 38px; height: 38px; background-position: 0 0; background-repeat: no-repeat; text-indent: -9999px; overflow: hidden; cursor: pointer;
}
#timeline #next:hover,
#timeline #prev:hover { background-position: 0 -76px;
}
#timeline #next #next,
#timeline #prev #next { right: 0;
}
#timeline #next #prev,
#timeline #prev #prev { left: 0;
}
#timeline #next.disabled,
#timeline #prev.disabled { opacity: 0.5;
}

Timelinr Horizontal Custom - Script Codes JS Codes

$(function(){	$().timelinr({	orientation:	'horizontal',	issuesSpeed:	300,	datesSpeed:	100,	arrowKeys:	'true',	startAt:	3	})	});
Timelinr Horizontal Custom - Script Codes
Timelinr Horizontal Custom - Script Codes
Home Page Home
Developer Harley Santos Garzón
Username HarleySG
Uploaded October 15, 2022
Rating 3
Size 6,171 Kb
Views 12,144
Do you need developer help for Timelinr Horizontal Custom?

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!

Harley Santos Garzón (HarleySG) Script Codes
Name
Template page
SVG loading infinite
JavaScript insertAdjacentElement
Custom Layout with Flexbox
Vertical Timeline
Hangman
Simple Exercise angular app
Snow machine
Custom Controls like Youtube for HTML5 Videos
Dinamic Filter - Angularjs
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!