Divergence Meter
Create divergence meters in your web page just like in Steins;Gate!
Update (2016-01): New version adds new properties: type
, clock
, interval
.
Divmeter now defaults to type live
, so if you are using a "static" Divmeter, you need to set type: 'static'
in your Divmeter settings (or data-type="static"
in HTML).
How to install
- Download the latest ZIP file
bower install divergence-meter
- Clone the repo
How to use
Add divmeter.js
to your page.
1. Use a <divmeter> element or a <div> element
Using <divmeter>
:
Using <div>
:
If you change data-time
to local
, your divergence meter will automatically update itself to the local time.
Use the properties below to customize your divergence meter!
2. Add with JavaScript
var meter = height: '100px' element: document; meter;
Configuration
You can initiate Divmeter with an object with these properties:
Properties
element
(required) Accepted values:
- A CSS selector string (
querySelectorAll
is used) - A
NodeList
orHTMLCollection
- An
HTMLElement
orElement
orNode
type
(optional) Default value: live
Accepted values:
live
- null,
static
time
(optional) Default value: local
Accepted values: local
or anything that is parsable by Date.parse
function
height
(optional) This property sets height of each image.
Default value: 90px
Accepted values: CSS height, fluid
width
(optional) This property sets width of each image.
Accepted values: CSS width, fluid
prefix
(optional) Prefix for image URLs.
Accepted values: A string
suffix
(optional) Suffix for image URLs.
Accepted values: A string
clock
(optional) This function is called every time clock ticks, the return value of this function will set clock date to the returned Date.
Default value: A function that adds 1 second to the defined date.
interval
(optional) Clock tick interval in milliseconds
Default value: 1000
Accepted values: Any integer
Change default values
Use window.DivmeterInitConfig
to set the initial values for window.Divmeter.defaultConfig
. DivmeterInitConfig
is
only processed once so if you want to change default values after script initialization,
use window.Divmeter.defaultConfig
instead.
Put DivmeterInitConfig definition before the script itself:
Disable auto-init on page load
By default, the library will automatically create Divmeters for you but if you don't want that, you can disable it with:
windowDivmeterAutoInit = false;
Start/stop clock on an existing meter
When you create a new divergence meter, it will assign a new ID to its parent element (div
or divmeter
):
The initialized meters look like this:
...
You can access a divergence meter's methods using Divmeter.getById
method:
var el = document;var divmeter = Divmeter; divmeter;divmeterstart; // Start the clock if it's "local"divmeter;
To do:
- Moment.js support
- Write tests
- Responsive container