Timeline tool identified
After a lot of consideration, struggle and annoyance I finally gave in and decided to use a pre-existing tool for the timeline section of my front page. I looked a few different contenders in this final pass. Essentially, I came to the realisation that I would not be able to learn the requisite Javascript in order to build something sophisticated enough from scratch. I did a bit of trying out in this jsFiddle project, but kept running into deadends (this project is in a partially built state - so please do not judge me - the javascript is largely erased by this point): https://jsfiddle.net/43gg6x3v/7/ Initially I found only jQuery examples - but as I have previously stated, I really wanted to work with Vanilla Javascript, due to load times, future proofing the code content. I also feel that it will be more beneficial to my learning to stick to learning Vanilla Javascript (or rather Ecmascript 6) so that I truly get the language prior to becoming too invested in specific frameworks. Also having looked at these two resources: jQuery vs. Javascript gist and then the From jQuery to Javascript: A Reference - vanilla makes much more sense to me.
- jQuery example 1: horizontal timeline (Article | Demo)
- jQuery example 2: vertical timeline (Article | Demo)
After looking at these and searching quite a bit, I came across a tool called lory (http://meandmax.github.io/lory/). It is essentially a code package or widget for creating interactive slideshows or gallery. I thought that there might be some milleage in creating a slideshow or gallery and somehow customising it as a timeline. After testing I found that lory also was overly complex for my needs. Then I came across a really helpful article about a widget tool called Flickity on css-tricks.com (https://css-tricks.com/creating-responsive-touch-friendly-carousels-with-flickity/). It was love at first sight! Here is an example on codepen showing how the Flickity slideshow originally looked: http://codepen.io/desandro/pen/bNLGNZ - Flickity is both responsive and touch optimised and had a vanilla option in addition to jQuery. It seemed like a good solution. Before my modifications:
.dot { position: relative; overflow: hidden; display: inline-block; width: 40px; height: 40px; margin: 0 20px; background: #a9a9a9; border-radius: 50%; cursor: pointer; counter-increment: flickity-page-dots; }
.dot::before { display: block; text-align: center; content: counter(flickity-page-dots); padding-top: 11px; font-size: 20px; color: #FFF; }
As the dots themselves are automatically produced by the Flickity Javascript, this meant that my number labels were now produced too. A nice solution.
References
Coyier, C. (2015, March 5). Creating responsive, touch-friendly carousels with Flickity [Blog post]. Retrieved from https://css-tricks.com/creating-responsive-touch-friendly-carousels-with-flickity/ Flickity - freeScroll. Retrieved November 26, 2016, from http://codepen.io/desandro/pen/bNLGNZ Flickity License. Retrieved November 26, 2016, from http://flickity.metafizzy.co/license.html Flickity. Retrieved November 26, 2016, from http://flickity.metafizzy.co/ Free Software Foundation. (2007). GNU General Public License. Retrieved November 26, 2016, from https://www.gnu.org/licenses/gpl-3.0.html Heinz, M. (2015). Lory minimalistic slider. Retrieved November 26, 2016, from http://meandmax.github.io/lory/ Horizontal Timeline in CSS and jQuery. (2014, February 28). Retrieved November 26, 2016, from https://codyhouse.co/gem/horizontal-timeline/ Mozilla Developer Network. (2016, July 24). :Before (:Before). Retrieved November 26, 2016, from https://developer.mozilla.org/en-US/docs/Web/CSS/::before Open Source Initiative. The MIT license. Retrieved November 26, 2016, from https://opensource.org/licenses/MIT Saunders, S. Intellectual property (IP). Retrieved January 4, 2017, from https://staff.brighton.ac.uk/ease/ip/Pages/IP-Information.aspx Vanilla JS vs jQuery. (2017). Gist. Retrieved 26 November 2016, from https://gist.github.com/liamcurry/2597326 Vertical Timeline. (2014, June 12). Retrieved November 16, 2016, from https://codyhouse.co/gem/vertical-timeline/ Way, J. (2012, January 19). From jQuery to JavaScript: A reference. Retrieved November 26, 2016, from https://code.tutsplus.com/tutorials/from-jquery-to-javascript-a-reference–net-23703