Multi-Screen.js

Separate your page into screens.

Building your multi-screen webpage is as simple as dividing up the <body> of your HTML into <div> elements, giving them all the ms-container class (the plugin needs at least two to run), and building each screen inside. Give the element you want as your default screen the class ms-default. If no default is specified, the top ms-container will be used, and if more than one default is found the top ms-default will be used.

To facilitate navigation between screens, each one requires a unique id attribute.

					<body>
						<div id="screen1" class="ms-container ms-default">
							<!-- screen1 content -->
						</div>
						<div id="screen2" class="ms-container">
							<!-- screen2 content -->
						</div>
					</body>

Back to introduction or move on to Building screen navigation.

Build navigation between screens.

To switch from one screen to another, simply give the class ms-nav-link to anything you can click on, and specify which screen to swap in for the current one by setting the data-ms-target attribute equal to its id.

You can specify the animations using the data-ms-animation, data-ms-enter-animation-animation, and data-ms-exit-animation-animation attributes. The valid commands are fade, top, topright, right, bottomright, bottom, bottomleft, left, topleft, fadetop, fadetopright, faderight, fadebottomright, fadebottom, fadebottomleft, fadeleft, and fadetopleft. The default is fade.

You can specify the animation time using the data-ms-time, data-ms-enter-animation-time, data-ms-exit-animation-time attributes, and data-ms-scroll-time which take in a valid integer value. To specify if the animations should occur synchronously or in sequence, use the data-ms-delay attribute, which takes in true or false. The defaults are 500 miliseconds and false (no delay).

You can also determine the starting distance between the edge of the entering and exiting screens with the data-ms-distance, data-ms-vertical-distance, and data-ms-horizontal-distance attributes. The default is 200 pixels.

				<!-- default animations -->
				<a class="ms-nav-link" data-ms-target="welcome" href="javascript:void(0)">link</a>

				<!-- specific animations -->
				<a class="ms-nav-link" data-ms-target="welcome" data-ms-animation="fadeleft" data-ms-vertical-distance="0" href="javascript:void(0)">link</a>
				<a class="ms-nav-link" data-ms-target="welcome" data-ms-exit-animation-time="700" data-ms-enter-animation-time="300" href="javascript:void(0)">link</a>
				<a class="ms-nav-link" data-ms-target="welcome" data-ms-delay="true" href="javascript:void(0)">link</a>

Navigate manually with JavaScript.

You can also navigate between screens within your own custom JavaScript code using the switch_screens function (see documentation):

				/**
				 * Navigates from the current screen to a target specified in the options
				 * `options` contains the target screen (REQUIRED) and animation commands (OPTIONAL) (see documentation)
    			 * Returns true if the animation was succesfully started, false if not
				 */
				MultiScreen.switch_screens(Object options);

Back to building screens or move on to Setting defaults.

Set default animations, times, distances, and delay.

Multi-Screen.js makes it easy to change the defaults for the animations, their times, the starting distance between the entering and exiting screens, and whether the animations should occur synchronously or asynchronously. Each function below returns a boolean (true if default was succesfully changed or false if not). You may also pass an options object into the init function (see documentation).

				/**
				 * Sets the default animation
				 * `command` must be a valid animation command
    			 * `type` must be 'enter' or 'exit' (OPTIONAL)
				 */
				MultiScreen.set_default_animation(String command, String type);

				/**
				 * Sets the default animation time in milliseconds
				 * `time` must be a valid integer greater than 0
    			 * `type` must be 'enter' or 'exit' or 'scroll' (OPTIONAL)
				 */
				MultiScreen.set_default_time(Number time, String type);

				/**
				 * Sets the default starting distance between the edge of the entering and exiting screens in pixels
				 * `distance` must be a valid integer (can be negative)
    			 * `dimension` must be 'vertical' or 'horizontal' (OPTIONAL)
				 */
				MultiScreen.set_default_distance(Number distance, String dimension);

				/**
				 * Sets the default delay between the enter and exit animations
				 * `delay` must be a boolean
				 */
				MultiScreen.set_default_delay(Boolean delay);

				/**
				 * Sets the defaults by property
				 * `options` must be an object containing a value for each property to set (see documentation)
				 */
				MultiScreen.set_defaults(Object options);

Back to building navigation or move on to Installation.

Install Multi-Screen.js in three simple steps.

Download the latest version from GitHub (documentation available) and extract the Multi-Screen JS and CSS files.
Link the JS and CSS files in the <head> tag of your page (or copy and paste the styles into your own stylesheet).
Call the MultiScreen.init() function in your JavaScript code (or do it like the example below).

					<head>
							<title>My Multi-Screen Page</title>
							<link href="multi-screen-css.css" type="text/css" rel="stylesheet"/>
							<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
							<script type="text/javascript" src="multi-screen.js"></script>
							<script type="text/javascript">$(document).ready(function() { MultiScreen.init(); });</script>
					</head>