I am using Timeline JS with JSON version in my application. Here I use 'start_at_end : true' - to select recent slide as first one. It works fine, but I am in need to position the start-slide-indicator to the extreme right instead of center (default style).
1) How to align start slide position to right? This is the required design:
2) Also I used "endDate": "2025,2,23" - in my example. But still I can able to scroll the slider upto the year 2040. Is there any way to restrict the slider to show upto endDate alone?
This is the sample code JSFiddle link
HTML Code:
<div id="my-timeline"></div>
JS Code:
$(document).ready(function () {
var slides = [
{
"startDate": "2012,5",
"headline": "HL7 FHIR",
"text": "<p>Fast Healthcare Interoperability Resources made its debut at
a 2012 HL7 WGM I attended in Vancouver; I have been involved with the
standard as a champion since then.<br><br>HL7 FHIR is an emerging
standard developed by HL7, based on HTTP-JSON and RESTful
principles./p>",
"asset": {
"media": "http://youtu.be/ygBmEqLC1G8",
"credit": "HL7 International",
"caption": ""
}
}, {
"startDate": "2013,6",
"headline": "PMIX View",
"text": "<p>Around June, 2013, I started working on some Prescription
Drug Monitoring use cases from HHS, using Saxon-CE for client-side XML
and AngularJS for client-side JSON, NIEM and HL7 FHIR.<br><br>I called
this approach Angular-Saxon, and eventually settled on Angular as my
framework of choice.</p>"
}, {
"startDate": "2014,3",
"headline": "University of Alberta RFP",
"text": "<p>In March 2014, I was contacted by Dennis Hulme, Sierra
Edmonton, to help with bid/no-bid for a small RFP for a native
mobile questionnaire application. We ended up not bidding because
the RFP was small, but the idea for a standards-compliant
questionnaire app stuck with me, especially if it could retain the
look and feel of the original questionnaire.</p>"
}, {
"startDate": "2015",
"headline": "In the next 5 years, changes will take place that
demonstrate some of the things that I am talking about today.</p>"
}, {
"startDate": "2016,1",
"headline": "The Next 5 Years: Mobile",
"text": "<p>Mobile devices become prevalent, providing information
access and identity assurance. Since these devices have a shorter
lifespan and automatic updates, browser fragmentation becomes less of an
issue.</p>",
"asset": {
"media": "http://pintos-salgado.com/wp-content/uploads/2010/02/ipad-
02.jpg",
"credit": "Glenn Fleishman",
"caption": "CC NC-AT-SA"
}
}, {
"startDate": "2017,6",
"headline": "The Next 5 Years: Polyfill",
"text": "<p>A polyfill is a small piece of code that fills in the gaps
between browser implementations. Over time, functionality moves from
polyfill libraries like JQuery and AngularJS into the modern browsers.
For instance, once Ajax and Query Selectors are consistently implemented
in the browser, why do you need these features in JQuery?<br><br>Server-
side adaptation will move into application servers like WebSphere and
WebLogic, which in turn will move into the cloud.</p>"
}, {
"startDate": "2018,4",
"headline": "The Next 5 Years: Consonance",
"text": "<p>XML, JSON, RDF, and HTML become virtually interchangeable.
You use whichever format makes the most sense for your business case.
</p>",
"asset": {
"media": "http://youtu.be/0K_CAiVyqTQ",
//"http://youtu.be/Oe6H4lVauGw",
"credit": "Jeni Tennison",
"caption": "Jeni Tennison (ODI OBE), Keynote address at
XMLPrague 2012"
}
}, {
"startDate": "2019,2",
"headline": "The Next 5 Years: Responsive Web",
"text": "<p>Responsive Web Design allows a web or mobile application to
render cleanly on any screen size. There is no good reason why a web
application should not use RWD, using Bootstrap or a similar library
</p>"
}, {
"startDate": "2019,8",
"headline": "The Next 5 Years: Web Components",
"text": "<p>Once the W3C Web Components specification (Mozilla Brick,
Google Paper and Polymer) is released in the modern browsers, the
Worldwide Web becomes a first class application platform, as opposed to
a document sharing platform.</p>",
"asset": {
"media": "http://youtu.be/kV0hgdMpH28",
"credit": "Rob Dodson",
"caption": "Rob Dodson, Chrome Dev Summit 2014"
}
}, {
"startDate": "2022",
"headline": "AngularJS",
"text": "<p>AngularJS is a JavaScript framework from Google that
supports MV*, templating, routing, dependency injection, data-binding
and client-side services. With custom directives, you can create your
own HTML tags, an idea which is borrowed from Web Components.</p>"
}, {
"startDate": "2023",
"headline": "jsFiddle and GitHub",
"text": "<p>To make this work more portable, I have recently been moving
these demonstrators from IBM Worklight to GitHub and jsFiddle. This work
is ongoing, but suffice it to say that I love jsFiddle because it
exposes how few lines of code are required when you have proper library
support.</p>",
"asset": {
"media": "http://youtu.be/0fKg7e37bQE",
"credit": "",
"caption": ""
}
}, {
"startDate": "2025",
"headline": "Rhizome Project",
"text": "<p>Rhizome is a set of services and templates I have assembled
using AngularJS to support Mobile Health use cases. It stands for
<em>Resource-based Health Information Zone for Mobile Enterprise</em>.
<br><br>By design, this project is: Standards-based, Resource-based
(REST-enabled), and modular, with a strong emphasis on client-side
development, social and mobile use cases, and rich User Experience.</p>"
}]
var dataObject = {
"timeline": {
"headline": "Client-side Development",
"type": "default",
"text": "An Emerging Technologies Presentation<br>Find me on GitHub - @phollott",
"startDate": "2015,2,23",
"endDate": "2025,2,23",
"date": slides
}
};
createStoryJS({
type: 'timeline',
width: '100%',
height: '600',
source: dataObject,
embed_id: 'my-timeline',
start_zoom_adjust: 1,
start_at_end : true
});
});
