[PDF]

Creating an Online Visual Timeline with Timeline JS PDF Free Download

1 / 5
2 views•5 pages

Creating an Online Visual Timeline with Timeline JS PDF Free Download

Creating an Online Visual Timeline with Timeline JS PDF free Download. Think more deeply and widely.

Creating an Online Visual Timeline with Timeline JS
Printed on 28 October 2025
by
<style>
/* Course Entry Route */
.row.courseRoute{
margin-left:0;
margin-right:0;
padding-bottom:1em;
margin-bottom:1em;
border-bottom: 1px solid rgb(51, 51, 51);
}
.courseRoute div.caption{
display: block;
font-size: 0.75em;
font-weight: 400;
}
.courseRoute .courseTitle,
.courseRoute .courseLength,
.courseRoute .courseType,
.courseRoute .courseDeadline{
font-weight: bold;
padding:6px 0;
}
.courseRoute .courseTitle{
color: #2993d0;
}
.courseRoute .courseApply{
padding-top:7px;
padding-left:0;
padding-right:0;
}
/*ACCORDIONS / COLLAPSE
***********************************************************************/
.panel-group .panel {
border-radius: 0;
}
.panel-group .panel+.panel {
margin-top: 10px;
}
.panel-default {
border-color: #e7e7e7;
border-radius: 0;
}
.panel-default .panel-heading {
padding: 0;
background: transparent;
border-radius: 0;
}
.panel-default .panel-title > a {
display: block;
padding: 28px 30px 28px 20px;
font-size: 18px;
color: #2993d0;
text-decoration: none;
}
.panel-default .panel-title > a .prefix{
display:none;
}
.panel-default .panel-title > a .fa {
float: right;
}
Page 1 of 5
Creating an Online Visual Timeline with Timeline JS
Printed on 28 October 2025
by
.accordionStandard .panel-default .panel-title > a{
position: relative;
}
.accordionStandard .panel-default .panel-title > a .fa.fa-caret-right {
float: none;
display:block;
position:absolute;
right:20px;
top:40%;
top:calc(50% - 10px);
}
.panel-default .panel-title > a:not(.collapsed) .fa:before {
content:"\f0d7";
}
.panel-body {
background: #eee;
padding: 20px;
}
.panel-open-all {
border-top: 1px solid #e7e7e7;
margin: 20px 0;
padding: 20px 20px 0;
font-size: 18px;
}
.panel-open-all .fa {
margin-left: 5px;
}
.panel-group > .panel-open-all > a.closeAll > i.closeAll:before {
content:"\f0d7";
}
.banner .accordion_box .panel-group .panel .panel-heading .panel-title a span.flagExternal{
background-image: url('https://www.ucd.ie/t4cms/ucdmaincore_new_window_icon.png');
background-repeat: no-repeat;
background-position: center center;
display: inline-block;
width:14px;
height:14px;
}
/
/*BUTTONS
*****************************************************************/
.btn {
border-radius: 0;
}
.btn-spacer{
height:34px;
}
.btn.default {
color: #0a4873;
background: #eee;
border: 0;
}
.btn.blue {
background: #2993d0;
color: #fff;
}
.btn.blue:hover {
Page 2 of 5
Creating an Online Visual Timeline with Timeline JS
Printed on 28 October 2025
by
background: #45a1de;
}
.btn.darkblue {
background: #0a4873;
color: #fff;
}
.btn.darkblue:hover {
background: #5F839E;
}
.btn.yellow {
background: #f0c650;
color: #0a4873;
}
.btn.yellow:hover {
background: #f8ce58;
}
main#single-column-content {
background-color: white;
}
.image.video img {
display: block;
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
img {
vertical-align: middle;
}
img {
border: 0;
}
img[Attributes Style] {
width: 100%;
}
</style>
<!--<h1 class="pageTitle">General Information</h1>-->
<h3>General Information</h3>
<p>To use this product you <strong>MUST</strong> have a Google Account.</p>
<p><br />
TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines.</p>
<p>Being able to visualise research data by plotting it on a map or timeline offers an alternative way of sharing and communicating research, engaging others, clarifying and
presenting events or topics.</p>
<p>Do you want to create an interactive timeline in order to show how or why something happened? Or to display a collection of objects in chronological order for viewing
on a website? Then this workshop will be of interest to you.&nbsp;</p>
<p>This <strong>in-person</strong> workshop (<strong>1 hour 15 mins</strong>), which is presented by Jane Nolan, UCD Geospatial Support Librarian,&nbsp;will provide
hands-on practice in using TimeLineJS so that you can assess how you may be able to employ these tools in your own research.</p>
<p>No prior experience with these tools is required.&nbsp;</p>
<p>To see some examples of TimeLine JS&nbsp;</p>
<p>&nbsp;</p>
Page 3 of 5
Creating an Online Visual Timeline with Timeline JS
Printed on 28 October 2025
by
<p><strong><em>For more information see our Library guide:&nbsp;</em></strong><a href="https://libguides.ucd.ie/findingmaps/show_your_data"
target="_blank">libguides.ucd.ie/findingmaps/show_your_data</a></p>
<div class="text">
<h3>General Details:</h3>
<h10></h10>
<dl>
<dt>Start Date:</dt>
<dd>12 Nov 2025</dd>
<dt>Start Time:</dt>
<dd>15:30</dd>
<dt>Duration(Hours):</dt><dd> 1.15</dd>
<dt>Location</dt><dd>Health Sciences Library - Information Skills Room</dd>
Health Sciences Centre
<dt>Contact Name:</dt>
<dd>jane.nolan@ucd.ie</dd>
<dt>Contact Number:</dt>
<dd></dd>
</dl>
<div class="image video">
<IMG
src=W_HU_REPORTING.P_WEB_IMAGE?p_parameters=3BD002D2D66839190F9CAE7FD8324C383FE26E1C2559674A0A56E085F6B1E6C0A93833D7274714593BD
7A63D9D5E0132940A591CAAD31419035E8505A1DC3FEF WIDTH=100%></div>
</div><!--/text-->
<h4><font color="black">Please note that you must be logged into to avail of the Book Now function. </h4>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading99">
<h4 class="panel-title"></h4>
</div>
<div id="collapse99" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading99">
<div class="panel-body">
<p><div class="row courseRoute">
<div class="col-xs-12 courseTitle">Creating Stories Using Timelines to Display on Websites - TimelineJS (LTJST)
</div>
<div class="col-xs-6 col-sm-3 courseLength"><div class="caption">Dates</div>12 Nov 2025</div>
<div class="col-xs-6 col-sm-3 courseTime"><div class="caption">Time</div>15:30</div>
<div class="col-xs-6 col-sm-3 duration"><div class="caption">Duration</div> 1.15</div> <div class="col-xs-6 col-sm-3 courseApply"><a
href="!W_HU_MENU.P_RUN_PROG?p_program=BP-BASKET-OR-BOOK&p_parameters=6E8C1839587415F32BBB3F99663FDC87EDCBDBC3C48AF9D15B1049FB30
4DD7BE5CA95E3E35DA4F690DAF5D26E82785792DBD623F826714E4AE52603DCE5624B6A5C13524BFC04F776D2B3D86F74D3068D430813D4339642F77F2EF492
E32CBBEA3DF3E5CBB65108DA3063E055FDC77E77095FD392830611F1A3C1196931E36780DCF9D97189E03658DA8F6E986135461A4D2C415B0E2CE0D455966D
CBC2F85609D18685A44332CBCB8D79E7D81EBE280FBCDAC8DB3071BDEB24CF423AB2DA246AF05655BA93055F43AE529F2F4B472624D7B7671E8A2BB6BDCA3
C79FED15D587DCB364C1CB132AC11866CD354F2288DE8C0CED75B096E838B9BF7268F3A9DBA8D613710C1C4FDF8877F342D04AE7B13BD799B94AEDC09ACC
185D2795B2472A38E5C74ADC25D5B16635671952885793CA0C0517AC5DC2B122A62A5FC8A2A667CC21154CCD1DA9363A3E36B29D7B91B38D52AE521698FB48
9C3FEE9A865BA92D174CA7A32A2201FF2E8D0728A863187334" class="btn blue">Waitlist</a></div></div></p>
</div>
</div>
</div><!--/panel-->
<iframe
width="100%"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyC54GPiiUtpxQhsRq9fwapW_SVhXsPBo1I&q=53.309395,-6.226193+Health Sciences
Page 4 of 5
Creating an Online Visual Timeline with Timeline JS
Printed on 28 October 2025
by
Centre,Belfield,,Dublin 4,Ireland"
allowfullscreen>
</iframe>
For help with the information on this report, please email https://www.ucd.ie/ithelp
Page 5 of 5