Rolodex
This is a port of a component from the Royal Society: http://styleguide.royalsociety.org/#rolodex for use in an upcoming Royal Society website.
original credits
Script name: Rolodex
Author: Paul Cowtan
Created date: 28/11/2014
Notes: Rolodex widget to display various panels of information selectable from a scrollable list
Installation
You need to include the Javascript on your page:
You can also include it in your application bundle using npm:
$ npm install digirati-rolodex --save
You can also grab our base CSS implementation as a starting point from here or view the SCSS file in this repository.
Usage
An example of the minimum markup required:
Choice A Choice B Card 1 Card 2
A complete example with comments:
<!-- The rolodex container can be as large as you want, the options will automatically translate so that the selected option in vertically in the middle. There is a requirement that this is positioned relative and a recommendation to hide overflow.--> <!-- The rolodex options are the list of items that allow you select different cards. The options container can be positioned anywhere that is required in the X axis. The Y axis is done automatically depending on what the user has selected using translations. These can be transitioned for an animation. --> <!-- Each choice needs to be a .rolodex__choice with an anchor tag somewhere inside. --> <!-- The anchor tag needs to point to the ID of the HTML element that it wants to show. --> Choice A <!-- When a choice is chosen by the user, it moves to be in the vertical center of the rolodex. It is also given a selected class that can be targeted with classes. --> Choice B <!-- The cards themselves are very easy. they are simply containers that are stacked on top of each other. The best way to style these is to position them absolutely and change their opacity when selected. This is in the base CSS. This is completely open to implementation. --> Card 1 Card 2 <!-- You can also create custom controls that bind to whatever you need. This first example will default to a click event, and move the rolodex to the next item (down). --> Next <!-- This second example defines a custom event "doubleclick" so that only when the element is double-clicked it will go to the previous item (up) --> Prev