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.

1. jQuery example 1: horizontal timeline (Article | Demo)
2. 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:

After my modifications:

Main modifications were: - the timeline-line- size of slides - outlines for references - big dots on the timeline (need to figure out how to label these) - overflow to ensure that the content doesn’t wrap strangely on a mobile device. There is still a lot to do and I need to fix an issue when the keyboard keys, when used for navigation make the web page scroll-right in a strange way. I also need to unite this with the other parts of the page that I have started to build. Finally, Flickity is a paid solution unless it is used under a GPLv3 license. I am passionate about open source and was already licensing my work under an MIT license so I have decided to set the rest of my project to comply with the GPLv3 license. This means that the license information needs to be included in the header of each source file. As the portfolio site will not contain any original research and will only provide an overview of the project this will also comply with the University’s Intellectual Property rulesAs a student and employee I need to be aware of the university’s Intellectual Property rules, which are available here: https://staff.brighton.ac.uk/ease/ip/Pages/IP-Information.aspx . However as portfolio site will not provide software with potential for commercial value and the project information itself is in the early stages it complies with the rules.. Also in the markup of the html, CSS and Javascript I have indicated where pieces of code have come from and if/when licenses apply. Update: Shortly after writing this post I solved the issues outlined above (see: “There is still a lot to do…”) and these discoveries are outlined in the next couple of posts. I realise that I forgot to mention how I solved the issue of the number labels on the dots below the Flickity carousel. This problem turned out to offer me a very valuable lesson in the pseudo element “before::” or “before:”. I have used the former, “before::” as this was introduced in CSS3 and is compatible with IE9 based on my testing. I figured out that the dots themselves could be used as a counter-increment for the addition of the number labels. .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