Bootstrap 3 module - timeline layout
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I have a design like which will layout a series of dates both in the past and in the future. we want the module to take a series of dates/title/location and layout this control. it will automatically move on page load to show the last 1 and the next 2 and then keep going until the page width is filled. as the page gets smaller we want it to gracefully get smaller to show fewer items.

as the user scrolls the next item will get the larger orange style, animation here would be cool but I want to make sure it doesnt lag a lot in performance.

This module should follow normal cascading bootstrap rules for its width. lets use bootstrap 3.

Let me know questions or if you need the psd.

needs to work in ie8+, FF, chrome
Qdev over 7 years ago
awarded to Be The Match

Crowdsource coding tasks.

1 Solution

I think it could be hard to make without JS

in that example whole ticker expands to 100% within container (it could be any width from bootstrap) then it checks how many elements will fit in there (in js there is a need to put desired width for elements) and lastly it expands every element equaly to remove any gaps

I started with bootstrap as You wanted but there is small problem - in different widths number of visible elements is changing so I cannot make it work as expected

Firstly I agree that it requires the use of JS but I'm not sure if a jQuery plugin is necessary. While OWL Carousel seems to be responsive, your implementation isn't. Is this related to bootstrap? Also I would expect when I click on a non-highlighted event to become highlighted. Finally if you want to use an animation, I think that it should animate both width and height (to give the effect that the square gets bigger).
tomtoump over 7 years ago
Just noticed that it doesn't seem to work on IE8.
tomtoump over 7 years ago
The effect on mobile seem not optimal. Can you check it out?
Qdev over 7 years ago