Simple Timeline With CSS And JavaScript
The timeline is using when we have a short or long list of dates with links to page for reports.
This list we can retrieve from some database table and the problem is that the list can be short or too long.Every date has anchor tag and two divs with classes point and val.
The divs with id #timeline, left and right I will use for JavaScript Events.
I add CSS style for the timeline id. This style set width, height and overflow properties. The white-space with value nowrap will set one row for text. I want to add style for the div val. This style will transform the dates and will rotate the text. First we can not show the list - there is not enough place for dates. After adding style for the div point that is changing display properties as inline-block we can show the list in horizontal line. I will add pseudo element "before" and with this we can see timeline image.
.point{
display:inline-block;
margin-left:-10px;
font-weight: bold;
font-family: Arial;
}
.point::before{
content:'__O_______________';
}
.val{
margin-top:-80px;
width:5em;;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg); /* Safari 3-8 */
transform: rotate(-45deg);
font-size:1em;
}
The next step is to set two buttons in left and right from the timeline image. After saving and refreshing the browser screen we can see two buttons on the left and right side the timeline. Now I will add JavaScript code to allow the timeline to move left and right.
document.addEventListener('DOMContentLoaded', function () {
var button = document.getElementById('left');
button.onclick = function () {
document.getElementById('timeline').scrollLeft += 20;
};
}, false);
document.addEventListener('DOMContentLoaded', function () {
var button = document.getElementById('right');
button.onclick = function () {
document.getElementById('timeline').scrollLeft -= 20;
};
}, false);
Here is using JavaScript event listener. By clicking the left button will change the properties of timeline "scroll left" with twenty. The text will be moved from right. The same code we using for the right button but the value of "scroll left" property has be changed with minus twenty. With this the text will be moved to left.
