Skip to content

Instantly share code, notes, and snippets.

@ka215

ka215/gist:c0d3245c2b35d8fbfdbe49a57de050aa

Created April 7, 2021 09:11
Show Gist options
  • Save ka215/c0d3245c2b35d8fbfdbe49a57de050aa to your computer and use it in GitHub Desktop.
Save ka215/c0d3245c2b35d8fbfdbe49a57de050aa to your computer and use it in GitHub Desktop.
Download ZIP
How to pseudo-appear dynamically row-height on the jQuery.Timeline
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery.Timeline Views</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/gh/ka215/jquery.timeline@main/dist/jquery.timeline.min.css" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<style>
.main-content,
#myTimeline {
font-family: sans-serif;
}
.jqtl-ruler-line-item {
font-family: sans-serif !important;
}
.jqtl-side-index-item label {
padding-left: 1em;
padding-right: 1em;
}
.jqtl-event-node[data-align=right] {
display: inline-flex;
justify-content: end;
}
.jqtl-event-detail-container {
position: relative;
margin: 15px;
padding: 1em;
min-height: 3em;
border: solid 1px #c0c0c0;
}
.jqtl-event-detail-container::before {
position: absolute;
content: 'Event Viewer: <div class="jqtl-event-view"></div>';
left: 50%;
top: 50%;
font-family: monospace;
transform: translate(-50%, -50%);
}
.jqtl-event-view .jqtl-event-title {
display: block;
width: 100%;
padding: 0.5em;
background: #fff;
border-bottom: dotted 1px #c0c0c0;
font-weight: bold;
}
.jqtl-event-view .jqtl-event-content {
display: block;
width: 100%;
padding: 1em 0.5em;
background: #fff;
}
</style>
</head>
<body>
<div class="main-content">
<div id="myTimeline"></div>
<div class="jqtl-event-detail-container">
<div class="jqtl-event-view"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/gh/ka215/jquery.timeline@main/dist/jquery.timeline.min.js"></script>
<script>
$(function(){
var JQTL_VER = $.fn.Timeline ? $.fn.Timeline.Constructor.VERSION : '2.1.x',
JQUERY_VER = '3.5.1',
eventNodes = [],
sidebarList = [
'<label class="row-group-1">Row 1</label>',
'<label class="row-group-1"></label>',
'<label class="row-group-2">Row 2</label>',
'<label class="row-group-2"></label>',
'<label class="row-group-2"></label>',
'<label class="">Row 3</label>',
];
eventNodes = createEvents(sidebarList.length)
$("#myTimeline").Timeline({
type: "bar",
scale: "day",
range: 1,
rows: sidebarList.length,
minGridSize: 60,
loader: "selector",
sidebar: {
sticky: true,
overlay: false,
list: sidebarList,
},
headline: {
display: true,
title: 'jQuery.Timeline ' + JQTL_VER + ' with jQuery ' + JQUERY_VER,
range: true,
format: { custom: "%Y-%m-%d" }
},
ruler: {
truncateLowers: false,
top: {
lines: ["year", "month", "weekday", "day"],
height: 26,
fontSize: 12,
color: "#333",
background: "transparent",
format: {
timeZone: "UTC", weekday: "short", year: "numeric", month: "long", day: "numeric"
}
},
bottom: {
lines: ["week"],
}
},
debug: false,
eventData: eventNodes,
zoom: true
})
$("#myTimeline").Timeline("initialized", function (instance) {
groupRows(instance);
})
});
function groupRows(instance) {
var sidebar = $(instance).find('.jqtl-side-index-item');
sidebar.each(function(){
var rowGroup = $(this).children('[class^="row-group"]');
if (rowGroup.length) {
var groupId = rowGroup.attr('class').replace('row-group-', '');
endGroup = $($(this).get(0).nextElementSibling).children('.row-group-'+groupId).length == 0;
if (!endGroup) {
$(this).css('borderBottom', 'solid 1px transparent');
}
}
});
}
function createEvents(number) {
var DAYTIME = 24 * 60 * 60 * 1000,
getRandomInt = function(min, max) {
min = Math.ceil(min)
max = Math.floor(max)
return Math.floor(Math.random() * (max - min) + min);
},
contents = [
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dictum commodo enim, et varius odio scelerisque non. Quisque volutpat volutpat sagittis. Vestibulum ac euismod neque. Morbi molestie at metus id tempus. Aliquam in odio in velit ultrices tincidunt eu ut nibh. Mauris quis odio tempus, dignissim felis sit amet, tempor urna. Nam euismod enim nec velit mollis, vel pharetra metus rhoncus. Nulla vulputate sollicitudin est, ac lobortis neque commodo eu. Vivamus lobortis massa purus, dictum euismod odio ullamcorper ut. Sed fringilla nibh ut nibh auctor, ut consectetur eros commodo.',
'Mauris eget venenatis erat, eu consectetur purus. Vestibulum dictum sollicitudin fermentum. Mauris sed orci id est pharetra pellentesque. Aenean sodales urna at ligula semper bibendum. Nam quis augue eget ex ullamcorper maximus. Phasellus non felis ut neque tincidunt iaculis et a elit. Vestibulum vel eros quis magna ornare aliquam. Quisque efficitur aliquet elit vitae sagittis. Nam dictum leo et augue tristique gravida. Cras sed convallis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam tempor lacus sed vulputate molestie. Nulla facilisi. Cras sed eros consectetur, bibendum lectus sit amet, sodales lacus.',
'Morbi auctor lacus vitae augue iaculis blandit. Nunc vulputate lectus ac tortor ultricies aliquam. Fusce commodo porta augue sit amet dignissim. Integer aliquet pellentesque lectus, vel rhoncus arcu efficitur at. Aliquam lacus dui, dictum quis nibh ac, malesuada pellentesque mi. Integer tortor tellus, vehicula eu felis ut, luctus suscipit sem. Quisque quis tincidunt magna. Quisque sit amet lectus eu erat blandit laoreet. Vivamus vestibulum ultrices dui, non malesuada nibh pretium nec. Nam lacus mauris, maximus sed ante vel, consectetur aliquet est. Duis ullamcorper sit amet nunc eget imperdiet. Mauris vehicula enim sapien, non lacinia purus ultricies ut. Sed et lorem porta, hendrerit mauris at, ornare ligula. Nunc sollicitudin leo hendrerit, tempus nisl vitae, posuere turpis. Donec ac diam gravida massa ultrices pellentesque. Duis diam massa, tempor at enim vestibulum, auctor iaculis diam.',
'In a nisl id erat dapibus sagittis. Phasellus nec porttitor massa. Nulla gravida pellentesque ipsum eu posuere. Sed at eros mattis velit pellentesque fermentum. Fusce commodo purus a magna varius sodales. Sed nisl ex, imperdiet quis nunc a, fringilla interdum nisl. Aenean placerat aliquet lorem a volutpat. Aliquam consectetur leo est, ac malesuada dolor consectetur dapibus. In hac habitasse platea dictumst. Maecenas convallis convallis quam. Nulla sagittis libero egestas tempus molestie. Nam quis tempor elit, eget ullamcorper massa. Nullam eleifend porta aliquam. Pellentesque hendrerit lobortis lacus in ullamcorper.',
'Nulla commodo iaculis massa, vitae varius nisi efficitur eu. Cras in lorem quis enim commodo dapibus. Pellentesque tellus felis, interdum in mauris vel, rutrum iaculis arcu. In rhoncus suscipit placerat. Nullam vel est ante. Sed quis lorem scelerisque dolor vulputate dignissim. Ut non leo sem. Aenean vehicula pretium massa nec mollis. Pellentesque maximus lorem id elit feugiat, a ultricies lorem mattis. Duis at eros sollicitudin, rhoncus mauris eget, hendrerit enim. Nam id leo et magna porttitor semper at ac mi. Nulla semper mi nec neque vehicula laoreet.',
'Quisque quis luctus diam. Donec tincidunt congue libero vel elementum. Etiam cursus tellus at velit vehicula tristique. Donec ut imperdiet nulla, vel interdum turpis. Fusce tristique rutrum sapien, eget dictum velit condimentum a. Etiam ac enim et dolor vestibulum blandit. Suspendisse non egestas nisi, vitae vestibulum neque. Vestibulum sollicitudin libero elementum tempor facilisis. Praesent ac lorem blandit, sollicitudin nulla et, faucibus massa. Nullam rhoncus quis arcu in ultrices. Maecenas a pretium elit. Vivamus a imperdiet diam. Proin a augue ex. Aenean neque lorem, blandit id odio ac, euismod tempor ante. Sed condimentum ultrices venenatis.',
],
colors = [
{ bg: '#82B1FF', txt: '' },
{ bg: '#8E24AA', txt: '#FFF' },
{ bg: '#80CBC4', txt: '' },
{ bg: '#DCE775', txt: '#0277BD' },
{ bg: '#FB8C00', txt: '#FFF' },
{ bg: '', txt: '#999999' },
],
events = [];
for (var i = 1; i <= number; i++ ) {
var nowTime = new Date().getTime(),
startDate = new Date(nowTime + getRandomInt(DAYTIME, DAYTIME * 7)),
endDate = new Date(startDate.getTime() + getRandomInt(DAYTIME, DAYTIME * 14))
events.push({
start: startDate,
end: endDate,
row: i,
label: 'Event Node ' + i,
content: contents[i - 1],
bgColor: colors[i - 1].bg,
color: colors[i - 1].txt,
});
}
return events;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment