HTML construction

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


    

        //floor one content here
    


    

        //floor two content here
    


    

        //floor three content here

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:

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