Simple overlay instructions for your apps.
Chardin.js is a jQuery plugin that creates a simple overlay to display instructions on existent elements. It is inspired by the recent Gmail new composer tour which I loved.
You can display instructions in a sequenced manner with automatic delay or by a simple click.
Simple! Fork this repo or download chardinjs.css and chardinjs.min.js and add the following assets to your HTML:
<link href="chardinjs.css" rel="stylesheet">
<script src="chardinjs.min.js"></script>
There's a chardinjs-rails
gem.
If you choose to fork the repo you can build the assets running
rake compile
Add the instructions to your container for sequenced mode:
data-sequenced
: True to run the sequenced mode
data-auto
: True if you want to pass to each instructions automatically
data-delay
: Number of milliseconds for the delay of the auto mode
Add the instructions to your elements:
data-intro
: Text to show with the instructions
data-position
: (left
, top
, right
, bottom
), where to place the text with respect to the element
data-sequence
: Number to sort ascending the instruction (only for sequenced mode)
<img src="img/chardin.png" data-intro="An awesome 18th-century painter, who found beauty in everyday, common things." data-position="right" />
Once you have your elements ready you can show instructions running
$('body').chardinJs('start')
If you would rather run ChardinJs confined to a particular container (instead of using the whole document) you can
change body
to some other selector.
$('.container').chardinJs('start')
In sequence mode, you can click to the right of the screen to pass to the next instruction and to the left of the screen to pass to the previous instruction.
Start ChardinJs in the selector.
Toggle ChardinJs.
Make your best guess. That's right! Stops ChardinJs in the selector.
Go to the next instruction (only in sequenced mode)
Return to the previous instruction (only in sequenced mode)
Triggered when chardinJs is correctly started.
Triggered when chardinJs is stopped.
Triggered when chardinJs pass to the next helper. (Only in sequenced mode).
Triggered when chardinJs pass to the previous helper. (Only in sequenced mode).
If you want to contribute, please:
- Fork the project.
- Make your feature addition or bug fix.
- Add yourself to the list of contributors in the README.md.
- Send me a pull request on Github.
Copyright 2013 Pablo Fernandez
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.