Implementation

Download the last jquery library

Download the plugin file or the minified version

in your html code, add this line

<script src="js/jquery-1.x.x.min.js" type="text/javascript"></script>
<script src="js/jquery.ascensor.js" type="text/javascript"></script>

HTML construction

You have to think like an architect. If you want build a house with three floor, you must do so:

<div id="ascensorBuilding">
    <section>
    	//floor one content here
    </section>

    <section>
    	//floor two content here
    </section>

    <section>
    	//floor three content here
    </section>
</div>

Jquery implementation (simple)

$('#house').ascensor();

Jquery implementation (parameters)

First, choose the ascensor name (default :'ascensor')

AscensorName:'myAscensor'

Choose name for each floor

AscensorFloorName:'Home | Presentation | Implementation | Fonctionnement | test'

Specify the child type if there are no 'div'

ChildType:'section'

Specify speed of transition (default:'1000')

Time:2000,

Specify easing option (default:'linear')

Easing:'easeInOutCubic',

Choose the floor to start on

WindowsOn:1

specify if direction is x,y or chocolate (default:'y');

Direction:'chocolate'

If you choose chocolate for direction, speficy position:

AscensorMap:'1|1 & 1|2 & 1|3 & 1|4 & 2|4'

choose if you want direction key support (default:true)

KeyNavigation:true

choose if you want direction scroll queued (default:false)

Queued:false

choose if you want direction scroll "x" or "y" (default : "x")

QueuedDirection:"x"
$('#ascensorBuilding').ascensor({
	AscensorName:'ascensor',
	ChildType:'section',
	AscensorFloorName:'Home | Implementation | HTML | Jquery | CSS | Smartphone | End',
	Time:1000,
	Easing:'easeInOutCubic',
	WindowsOn:1,
	Direction:'chocolate',
	AscensorMap:'1|1 & 1|2 & 2|2 & 1|3 & 1|4 & 2|4 & 1|5',
	KeyNavigation: true,
	Queued:false,
	QueuedDirection:"x"
});

CSS naming

each floor has the class 'ascensorName'+Floor

exemple:

class="myAscensorFloor"

each floor has for id 'ascensorName'+Floor+index

exemple:

id="myAscensorFloor1"

to create next button, use class 'ascensorName'+LinkNext"

exemple:

class="myAscensorLinkNext

to create prev button, use class 'ascensorName'+LinkPrev

exemple:

class="myAscensorLinkPrev"

to create direct button to one of the floor, use class 'ascensorName'+Link and 'ascensorName'+LinkPrev+index

exemple:

class="myAscensorLink myAscensorLink3"

the link related to the current page has the class 'ascensorName'+Link and 'ascensorName'+LinkActive

exemple:

class="myAscensorLinkActive"

Smartphone

for smartphone, i recommend the use of the next meta:

<meta name = "viewport" content = "user-scalable=0,width=device-width,initial-scale=1,maximum-scale=1" />

It will control the iphone zoom option and make a better view of your website