Tweet

Implementation

<div id='ascensor'>
 <div>Content 0</div>
 <div>Content 1</div>
 <div>Content 2</div>
 <div>Content 3</div>
 <div>Content 4</div>
 <div>Content 5</div>
</div>
<script src='jquery.js'></script>
<script src='jquery.ascensor.js'></script>
<script>
 $('#ascensor').ascensor();
</script>

Options

ascensorName (string, default: ascensor)

The ascensor name (use for class & selector)

ascensorName:'myAscensor'

ascensorFloorName (string, default: null)

Choose and name for each floor

ascensorFloorName: ['content1','content2','content3']

childType (string, default: div)

Specify the child tag if no div ('section' or 'article')

childType:'article'

windowsOn (integer, default: 1)

Choose the floor to start on

windowsOn: 3

direction (string, default: y)

specify the direction ('x', 'y' or 'chocolate')

direction: 'chocolate'

ascensorMap (string, default: null)

If you choose chocolate for direction, speficy position for x/y (ex: AscensorMap:[[2,1],[2,2],[3,2]])

ascensorMap:[[2,1],[2,2],[3,2]]

time (string, default: 1000)

Specify speed of transition

time: 3000

easing (string, default: linear)

Specify easing option (don't forget to add the easing plugin)

easing: 'easeInElastic'

overflow (string, default: scroll)

Choose your main container overflow default behavior

overflow: 'hidden'

keyNavigation (boolean, default: true)

choose if you want direction key support

keyNavigation: false

queued (boolean, default: false)

choose if you want direction scroll queued

queued: true

queuedDirection (string, default: x)

choose if you want direction scroll queued 'x' or 'y'

queuedDirection: 'y'

loop (boolean, default: true)

specify if you want an loop

loop: false

CSS

To create next button, use class 'ascensorName'+LinkNext

<button class='myAscensorLinkNext'>Next floor</button>

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

<button class='myAscensorLinkPrev'>Previous floor</button>

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

<button class='myAscensorLink myAscensorLink3'>Go the the 4 floor (JS count from 0)</button>

Ascensor assign each floor has the class 'ascensorName'+Floor

class='myAscensorFloor'

Each floor has for id 'ascensorName'+Floor+Floor-Number

id='myAscensorFloor1'

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

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