-
Posts
-
Hello.
How can I add this script https://github.com/AdventCoding/Timespace to the any page?The timeline script has the following code. I need to insert it on the page. How to make the timeline work?
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>
<title>jQuery Timespace Example</title>
<link href=”css/jquery.timespace.dark.css” rel=”stylesheet”>
<style>
body {
background:#262727;
}
a {
color: #8baac0;
}
h1 {
text-align: center;
color: white;
}
#timeline, #timelineClock {
box-sizing: border-box;
padding: 10px;
width: 100%;
}
</style>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script src=”jquery.timespace.js”></script>
</head>
<body>
<h1>24-Hour Timeline</h1>
<div id=”timelineClock”></div>
<h1>Event Timeline</h1>
<div id=”timeline”></div>
<script>
$(function () {$(‘#timelineClock’).timespace({
// Set the time suffix function for displaying as ’12 A.M.’
timeSuffixFunction: s => ‘ ‘ + s[0].toUpperCase() + ‘.’ + s[1].toUpperCase() + ‘.’,
selectedEvent: -1,
data: {
headings: [
{start: 0, end: 6, title: ‘Night’},
{start: 6, end: 12, title: ‘Morning’},
{start: 12, end: 18, title: ‘Afternoon’},
{start: 18, end: 24, title: ‘Evening’},
],
events: [
{start: 6.50, title: ‘Breakfast’, description: ‘Eat a healthy breakfast.’},
{start: 8, end: 10, title: ‘Walk’, description: ‘Go for a walk.’},
{start: 14, title: ‘Lunch’, description: ‘Eat a healthy lunch.’},
{start: 14, title: ‘Call Bob’, noDetails: true},
{start: 14.75, title: ‘Confirm Appointment’, noDetails: true},
{start: 14.75, title: ‘Meeting’, description: ‘Meeting with Co-workers.’},
{start: 14.75, title: ‘Bring Supplies’},
]
},});
$(‘#timeline’).timespace({
timeType: ‘date’,
useTimeSuffix: false,
startTime: 500,
endTime: 2050,
markerIncrement: 50,
data: {
headings: [
{start: 500, end: 1750, title: ‘Dark Ages’},
{start: 1750, end: 1917, title: ‘Age of Revolution’},
{start: 1971, title: ‘Information Age’},
],
events: [
{start: 1440, end: 1700, title: ‘Gutenberg\’s Printing Press’},
{start: 1517, end: 1648, title: ‘The Reformation’,
description: $(‘<p>The Reformation was a turning point in the history of the world. ‘
+ ‘Martin Luther was a key player in this event as he stood up against Papal tyranny ‘
+ ‘and church apostasy.</p><p>Many other reformers followed in the steps of Luther ‘
+ ‘and followed the convictions of their hearts, even unto death.</p>’)},
{start: 1775, end: 1783, title: ‘American Revolution’, description: ‘Description:’, callback: function () {this.container.find(‘.jqTimespaceDisplay section’).append(
‘<p>This description was brought to you by the callback function. For information on the American Revolution, ‘
+ ‘visit the Wikipedia page.</p>’
);}},
{start: 1789, title: ‘French Revolution’},
{start: 1914, end: 1918, title: ‘World War I’, noDetails: true},
{start: 1929, end: 1939, title: ‘Great Depression’,
description: ‘A period of global economic downturn. Many experienced unemployment and the basest poverty.’
},
]
},}, function () {
// Edit the navigation amount
this.navigateAmount = 500;});
});
</script>
</body>
</html>Hi,
Ok, thanks for that. Did you try it in a code block element? It might now work since the code you pasted is including another version of jQuery.
Best regards,
RikardFor example, code i use now in code block element and it not working:
<script src=”http://isk.rakursib.beget.tech/timeline/jquery.timespace.js”></script>
<script>
$(function () {$(‘#timeline’).timespace({
timeType: ‘date’,
useTimeSuffix: false,
startTime: 500,
endTime: 2050,
markerIncrement: 50,
data: {
headings: [
{start: 500, end: 1750, title: ‘Эпоха 1’},
{start: 1750, end: 1917, title: ‘Эпоха 2’},
{start: 1971, title: ‘Эпоха 3’},
],
events: [
{start: 1440, end: 1700, title: ‘Событие 1’},
{start: 1517, end: 1648, title: ‘Реформы’,
description: $(‘<p>The Reformation was a turning point in the history of the world. ‘
+ ‘Martin Luther was a key player in this event as he stood up against Papal tyranny ‘
+ ‘and church apostasy.</p><p>Many other reformers followed in the steps of Luther ‘
+ ‘and followed the convictions of their hearts, even unto death.</p>’)},
{start: 1775, end: 1783, title: ‘Американская революция’, description: ‘Описание:’, callback: function () {this.container.find(‘.jqTimespaceDisplay section’).append(
‘<p>This description was brought to you by the callback function. For information on the American Revolution, ‘
+ ‘visit the Wikipedia page.</p>’
);}},
{start: 1789, title: ‘Французская революция’},
{start: 1914, end: 1918, title: ‘Первая Мировая Война’, noDetails: true},
{start: 1929, end: 1939, title: ‘Великая депрессия’,
description: ‘A period of global economic downturn. Many experienced unemployment and the basest poverty.’
},
]
},}, function () {
// Edit the navigation amount
this.navigateAmount = 500;});
});
</script>Hi,
Ok, so you removed the other jQuery reference? I don’t think that will work since that script likely needs that version in order to work. This is not theme related really so it’s not actually covered by our support. The theme only supports the jQuery version included in WordPress itself.
Best regards,
RikardMade using https://kriesi.at/support/topic/embedding-external-site-in-enfold-iframe/
Please close the topic.
- The topic ‘jQuery Timeline’ is closed to new replies.