Timeline Slider jQuery Timespace - Download Draggable Event Timeline Slider With jQuery - Timespace

Download Draggable Event Timeline Slider With jQuery – Timespace

By Posted on

This time I will share jQuery Plugin and tutorial about Draggable Event Timeline Slider With jQuery – Timespace, hope it will help you in programming stack.

Timeline Slider jQuery Timespace - Download Draggable Event Timeline Slider With jQuery - Timespace
File Size: 22.3 KB
Views Total: 15869
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Timespace is a jQuery plugin for creating a dynamic, responsive, horizontal, draggable, touch-friendly timeline to display custom events in a slider manner. Click on the event slot you will sell more details about the event.

How to use it:

1. Load the latest version of jQuery (slim build) and the Timespace plugin’s JavaScript in the html page.

view source
1 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
2         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
3         crossorigin="anonymous"></script>
4 <script src="jquery.timespace.js"></script>

2. Load a theme CSS of your choice in the head section of the page.

view source
1 <!-- Dark theme -->
2 <link href="css/jquery.timespace.dark.css" rel="stylesheet">
3  
4 <!-- Light theme -->
5 <link href="css/jquery.timespace.light.css" rel="stylesheet">

3. Create a container where the event timeline should appear.

view source
1 <div id="timeline"></div>

4. Call the function on the container element and define your own events displayed in the timeline.

view source
01 $('#timeline').timespace({
02  
03   // 24-hour timeline
04   data: {
05     headings: [
06       {start: 0, end: 6, title: 'Night'},
07       {start: 6, end: 12, title: 'Morning'},
08       {start: 12, end: 18, title: 'Afternoon'},
09       {start: 18, title: 'Evening'},
10     ],
11     events: [
12       {
13         start: 6.50,
14         title: 'Breakfast',
15         description: 'Eat a healthy breakfast.',
16         // width: number
17         // noDetails: false,
18         // class:string,
19         // callback: Function
20       },
21       {start: 8, end: 10, title: 'Walk', description: 'Go for a walk.'},
22       {start: 14, title: 'Lunch', description: 'Eat a healthy lunch.'},
23       {start: 14.75, title: 'Meeting', description: 'Meeting with Co-workers.'},
24     ]
25   },
26  
27 });

5. All default options to customize the event timeline.

view source
01 $('#timeline').timespace({
02  
03   // max width in pixels
04   maxWidth: 1000,
05  
06   // max height in pixels
07   maxHeight: 280,
08  
09   // the amount of pixels to move the Timespace on navigation
10   // 0 to disable
11   navigateAmount: 200,
12  
13   // The multiplier to use with navigateAmount when dragging the time table horizontally
14   dragXMultiplier: 1,
15  
16   // The multiplier to use with navigateAmount when dragging the time table vertically
17   dragYMultiplier: 1,
18  
19   // selected event
20   // 0 for first event, -1 to disable
21   selectedEvent: 0,
22  
23   // if the time table should shift when an event is selected
24   shiftOnEventSelect: true,
25  
26   // If the window should scroll to the event display box on event selection (only applies if the time table height is greater than the window height)
27   scrollToDisplayBox: true,
28  
29   // jQuery object to use for the event display box
30   customEventDisplay: null,
31  
32   // or '<a href="https://www.jqueryscript.net/time-clock/">date</a>'
33   timeType: 'hour',
34  
35   // using 12-Hour time
36   use12HourTime: true,
37  
38   // if a suffix should be added to the displayed time (e.g. '12 AM' or '300 AD')
39   useTimeSuffix: true,
40  
41   // receives the lowercase suffix string and returns a formatted string
42   timeSuffixFunction: s => ' ' + s[0].toUpperCase() + s[1].toUpperCase(),
43  
44   // start/end time
45   startTime: 0,
46   endTime: 23,
47  
48   // the amount of time markers to use
49   // 0 to calculate from startTime, endTime, and markerIncrement
50   markerAmount: 0,
51  
52   // the amount of time between each marker
53   markerIncrement: 1,
54  
55   // width of marker
56   markerWidth: 100,
57  
58   controlText: {
59     navLeft: 'Move Left',
60     navRight: 'Move Right',
61     drag: 'Drag',
62     eventLeft: 'Previous Event',
63     eventRight: 'Next Event',
64   }
65  
66 });

Change log:

v1.3.1 (2018-04-28)

  • Removed background lines for better performance

v1.3.0 (2018-04-28)

  • Fixed y navigation on left or right nav button click

v1.2.0 (2018-04-26)

  • Removed Google font to fix getting incorrect width on text span.
  • Changed navigateTime direction argument to Array [x,y] for shifting both planes.

2018-04-25

  • Fixed for IE.
  • Changed transparent colors to rgba

2018-04-21

  • Fixed event border and wide event title clamp on nav button hold
  • Fixed transition for wide event title clamp

2018-04-20

  • Added controlText option and event box element getter from within callback

2018-04-19

  • Fixed mousedown on titleClamp not moving time table

2018-04-17

  • Added smoother time shift for end of drag.
  • Added support for Touch events, and converted table to html5 for drag compatibility.
  • Fixed event box overlaying other events.

2018-04-16

  • General code tweaks

2018-04-15

  • Changed time headings to be static within the thead

2018-04-14

  • Added height constraint and Y table shifting

2018-04-13

  • Added event navigation.
  • Fixed display time.

2018-04-12

  • Added nav button hold and other tweaks
  • Fixed event overhang
  • Added title for events

2018-04-11

  • Added Time Heading Clamp for wide headings
  • Fixed heading clamp and Added scrollToDisplayBox option

2018-04-10

  • CSS & example update

This awesome jQuery plugin is developed by AdventCoding. For more Advanced Usages, please check the demo page or visit the official website.

source : jquery.net

Related posts: