stori.js
GithubCreate decision trees, gamebooks, pathfinders, presentations, photo slide shows, and other multiple path tools easily using stori and jQuery.
Get Started
v0.8.0
Download stori.zipfile_download
The stori.zip file above includes the following files:
stori.min.js (~8k) Minified (production) codestori.js (~22k) Unminified (development) code with commentsstori.css (~3k) Default CSSOr get stori via Github.com/dhewer/stori.
Follow the installation & setup instructions in the docs to get going.
"Oh, yeah, that's cool I guess."
– Some guy
Use the decision helper tool below to find the best package for you!
The number of employees at my company is:
Choose the location you most frequently use the app:
Based on your responses, the best package for you is:
Based on your responses, the best package for you is:
Non-profit entities are eligible for a discount:
Based on your responses, the best package for you is:
Based on your responses, the best package for you is:
Please call us by phone or contact us at the email address below and we will discuss your company's needs and provide you with our best price! Thank you!
This one remembers your history ("forever" via localStorage) if you reload the page.
You're a treasure hunter who has heard that there may be treasure hidden on the Mountain of Plentiful Treasure. As you climb the mountain, you notice the path forks off in two directions. There is a path which winds further up the mountain. A second path heads downwards into a cave. You also notice an animal digging in the dirt nearby.
MAKE YOUR CHOICE:
Go up the path - Climb further up the mountain
Go down towards the cave - Climb down and enter the cave
Go towards the animal - See what the animal is doing
You continue to climb further up the mountain. Suddenly, you hear a mighty rumble from above! It could be that an avalanche is headed your way!
MAKE YOUR CHOICE:
Go back down - Head back where you came from
Keep going - It's probably nothing ...
Not heeding the obvious imminent danger, you continue forward, only to be crushed by a multitude of rocks.
☹ You are dead.
Restart - Go back to the beginning
As you enter the cave, you are confronted by a large, less-than-happy looking bear.
MAKE YOUR CHOICE:
Fight the bear - With your pocket knife
Play dead - Maybe it'll lose interest ...
Your attack with the pocket knife seems ill-advised, but it's surprisingly effective, and the bear retreats further into the cave. Nearby you find a treasure chest, and inside is a ruby the size of a chihuahua's head.
☺ You win!
Restart - Go back to the beginning
The enraged bear is not fooled by your ruse. You are quickly mauled and eaten.
☹ You are dead. Like, not just playing dead. Actually dead. Dead-dead.
Restart - Go back to the beginning
The animal appears to be a large rodent of some sort. It seems to be trying to bury a large object in the ground.
MAKE YOUR CHOICE:
Grab the object - It might be valuable
Bargain with the rodent - Perhaps it's open to negotiation
The rodent doesn't take too kindly to your meddling; it goes for the throat, and is super effective!
☹ You are dead.
Restart - Go back to the beginning
Your superior intellect and negotiation skills overpower the rodent, and it eventually yields its prize to you: A shiny gold nugget!
☺ You win!
Restart - Go back to the beginning
This one is 'linear' type which makes all pages available via forward / back from the beginning and proceeds linearly. There is no need for you to create additional navigation or to put ID's on all the pages.
Your creation is limited only by your creativity
(And technical constraints ... and time ... and skills ...)
See below for instructions on how to get started
<link href="stori.css" rel="stylesheet" media="screen,projection">And the js files at the bottom of your body (or wherever, just include jQuery first):
<script src="jquery-2.1.1.min.js"></script>
<script src="stori.min.js"></script>
Your base/root element must contain a unique id. Each of your pages should be a direct child of the parent (root) element. Each page also requires a unique id, except if you are using the "linear" mode (see below).
Normal (branching) storis: (See demos #1 and #2 above.)
<div id="mything">
<div id="coverpage"> ... </div>
<div id="page1"> ... </div>
<div id="page2"> ... </div>
<div id="lastpage"> ... </div>
</div>
Linear (sequential) storis: These proceed from first to last, all pages are available from the beginning, and the user can jump to any page via the dropbox box. (See demo #3 above.) Make sure to set the "linear" option when initializing (see options section below).
<div id="mything">
<div> ... </div>
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>
Use normal links like <a href="#page1">Go to page 1</a> to link between pages.
You can also use the data-page attribute on any element, and when clicked, stori will go to that page, ex: <div data-page="page1">Go to page 1</div>
See the code for the examples above for more information.
<script> var s1 = $('#thing').stori().data('stori'); </script>
Include these options when intitializing your stori, like this:
<script> var s1 = $('#thing').stori({
transition: 'none',
buttonForward: false
}).data('stori'); </script>
| Option | Default | Valid values | Description |
|---|---|---|---|
| buttonBack | true | true / false | Displays or hides the back button in the controls. (true = show, false = hide) |
| buttonBackHtml | <button class="stori-button stori-back" title="Back"></button> | String containing HTML | Replaces the default back button in the controls with HTML of your choice. |
| buttonForward | true | true / false | Displays or hides the forward button in the controls. (true = show, false = hide) |
| buttonForwardHtml | <button class="stori-button stori-forward" title="Forward"></button> | String containing HTML | Replaces the default forward button in the controls with HTML of your choice. |
| buttonRestart | true | true / false | Displays or hides the restart button in the controls. (true = show, false = hide) |
| buttonRestartHtml | <button class="stori-button stori-restart" title="Restart"></button> | String containing HTML | Replaces the default restart button in the controls with HTML of your choice. |
| controls | 'top' | 'top' 'bottom' 'both' 'none' |
Positions the controls on top, bottom, both, or none (hidden). |
| controlsHtml | false | String containing HTML | Replaces the default controls with HTML of your choice. Note that this will override any custom button options (see above). |
| debug | true | true / false | Logs warnings and errors to the console. Set to false to disable console warnings / errors. |
| focus | true | true / false | On page change, sets focus to first "focusable" element on the page. Set to false to disable automatic focus setting. (Note that it will not set focus on first load of the page; otherwise the view would be dragged down to the stori element whenever the page first loads. If necessary you can use the HTML attribute 'autofocus' to manually set the focus upon first loading.) |
| history | 'clear' | 'keep' 'session' 'clear' |
Determines whether the user's position is remembered after they leave the page: 'clear' - User's history is cleared when they leave the page. 'keep' - User's history is retained via localStorage (ie, "forever") in the browser. 'session' - User's history is retained via sessionStorage (ie, until they close the browser window) |
| linear | false | true / false | Changes stori behavior to linear / sequential style. If set to true, all pages will be available from the outset, and the user can step through the pages in order using the back/forward buttons. This style is appropraite for things like a presentation, photo slideshow, book that is read front to back, etc. Note: Do not put id's on pages when setting linear to true; stori will automatically replace them with its own ids. |
| linearDropdown | true | true / false | Adds a select box to allow the user to select which page to view. This is displayed in the controls. This setting only has effect if both linear and controls options are on. Add page titles to pages by adding the title attribute to the page, ex:<div title="Sales forecast for 2018">...</div> |
| start | false | Page id | Initial starting page. By default, the first page (element) in your root element will be the starting page. To specify a different start page, specify its id here. |
| transition | 'fade' | 'fade' 'slide' 'none' |
Specifies the type of transition when changing pages. This uses jQuery fade/slide transitions, or changes pages immediately if 'none' is specified. ('fade' or 'none' are recommended; 'slide' seems buggy under some circumstances.) |
| transitionSpeed | 250 | Integer (milliseconds) | The number of milliseconds that page transitions take. (Ignored if transition is set to 'none'.) |
| warn | false | true / false | Confirm the user wants to leave the page and lose their progress. (If set to true, only pops if 'history' is set to 'clear' or 'session' since 'keep' would not be cleared.) |
Include these classes on elements to control / trigger stori's behavior:
| Class Name | Description |
|---|---|
| .stori-ignore | Causes stori to ignore the element. It will ignore any anchor link and/or data-page attribute, and if this class is added to one of the children of your root, that element will be ignored when processing pages. So for example you can add your own elements to the bottom or top of your stori and then add .stori-ignore to them so that they won't be processed like the other pages. |
| .stori-back | Clicks on the element will trigger page back action. |
| .stori-forward | Clicks on the element will trigger page forward action. |
| .stori-restart | Clicks on the element will trigger page restart action. |
All of stori's own methods are available after initialization. Call them like this (this would move the user one page back in their history):
<script>
var s1 = $('#thing').stori().data('stori');
s1.pageBack();
</script>
For example, if you wanted to add swipe touch controls using another library like hammer.js or jQuery Mobile or something else, you could call s1.pageBack() when the swipe left is detected on the root stori element.
Refer to the JSDoc for the functions in the unminified stori.js file for information on the available methods.
stori by Darren Hewer is licensed under the
MIT License
If you use stori, please include an attribution somewhere. Thanks!