jQuery Slidious

jQuery Slidious is a plugin for creating a fancy responsive, ajaxified Website. It's pretty much an experiment and a fun project of myself. Anyway I thought this might be useful for someone for really special usecases.

For example this could be the base for creating a responsive website, a presentation or a game with a starship travelling from one planet to another.

Slidious' basic feature is, that it creates the website itself from a supplied sitemap or an array of links & positions. It stays fully responsive, because all containers are created & animated using percentage values.

Check below for further details and don't hesitate to ask questions.

Browser Support:

Supports: Firefox, Safari, Chrome, Opera, IE8+. Should also work on most mobile browsers.
Please use the issue queue if you encounter any browser specific problems.

Example:

Demo: http://demo.christianhanne.de/jquery_slidious

Let me give you an example on how to use Slidious to create a fully responsive website. First you will need to define some kind of sitemap. It should be a container with links inside.

You will have to apply two custom attributes per A-element: data-x & data-y. These attributes describe the position the links contents should be placed.

<div id="menu">
<a href="page-1.html" data-x="0" data-y="0">Link 1</a>
<a href="page-2.html" data-x="2" data-y="3">Link 2</a>
<a href="page-3.html" data-x="5" data-y="2">Link 3</a>
<a href="page-4.html" data-x="4" data-y="1">Link 4</a>
</div>

After defining our sitemap (and creating the additional pages of course), you can run Slidious on it.

$('#menu').slidious();

Your resulting page will look like this. Note that the position is measured from the top-left corner, starting with 0. The page will be exactly as big as it needs to be.

[1][0][0][0][0][0]
[0][0][0][0][4][0]
[0][0][0][0][0][3]
[0][0][2][0][0][0]

Options:

There is a bunch of options you can change. Check the list below for details:

Option	Default	Description
wrapper	''	A css selector for your content wrapper in all linked pages. If you define one, all other content will be ignored when loading pages. I recommend using a wrapper, if you want to let your page degrade gracefully.
autoScan	true	Defines if Slidious should automatically scan all newly added contents for links & add event handlers. This is the default behaviour. If you deactivate this, you will have to process the links on your own.
preLoad	'linked'	Defines which pages Slidious should preload to provide a seemless user experience. Possible values: 'linked': Preload all pages linked within the active content. 'all': Preload all pages on init. '': Preloading deactived. Page will be loaded after entering.
aniSpeed	500	How fast should we go? This is the animation speed for all element-to-element-transitions.
links	[]	Provide an array of objects with values for x, y & url added. These will be added to your sitemap's links. It is also possible to skip the sitemap entirely and just use this array. Call like this: $.slidious(yourOptions);
initUrl	''	The Url this page should start with. By default this is the first url of the links array.

Callbacks:

This is a list of all available callbacks. The params should be understandable without further explanation (except: $ marks variables as jQuery objects).

Function	Params	Description
onInit	settings	Called right after Slidious is initialized. You will be able to modify the settings object.
onEnter	settings $oldElement $newElement	Called right after entering an element.
onLeave	settings $oldElement $newElement	Called right before leaving an element.
onLoad	settings $oldElement $element	Called after successfully preloading an element's contents.

Methods:

There are some methods you may use to communicate with jQuerySlidious.

Function	Params	Description	Example
local	url	Checks if a provided url is part of the jQuerySlidious sitemap. Returns true or false.	$('#yourSitemap').slidious('local', 'path/to/content.html');
goto	x & y or url	Lets Slidious scroll to the provided location and/or element container.	$('#yourSitemap').slidious('goto', 1, 3); $('#yourSitemap').slidious('goto', 'path/to/content.html');

Note that it is also possible to skip the sitemap & call these functions directly using $.slidious().

Markup & CSS Selectors:

Just for your (& my) information: The basic html markup & css selector usage.

<div id="slidious">
  <div class="slidious-element [slidious-loading|slidious-loaded]">
    <div class="slidious-content">[PAGE CONTENT]</div>
  </div>
  <div class="slidious-element [slidious-loading|slidious-loaded]">
    <div class="slidious-content">[PAGE CONTENT]</div>
  </div>
  ...
</div>

Selector	Usage
#slidious	Unique ID of the slidious container.
.slidious-element	Every element will get this class.
.slidious-content	Wrapper element for every elements' content.
.slidious-loading	Added to the corresponding .slidious-element when trying to load it's contents.
.slidious-loaded	Added to the corresponding .slidious-element as soon as content is loaded.
.slidious-scanned	Added to all links inside an slidious-element after scanning (& preloading) them.