• Tweet
• Email

• Tweet
• Email

• Overview
• Syntax
• Compatibility
• Example

Overview

Horve (HORizontal-VErtical Scrool) is a simple and light MooTools class that allows you to create an immediate page with horizontal or vertical navigation.

Syntax

Html

<div id="DivWindow">
    <div id="container">
        <div id="screen1" num="1" class="screen">
               <div id="content1">Screen 1</div>
        </div>
        <div id="screen2" num="2" class="screen">
            <div id="content2">Screen 2</div>
        </div>
        <div id="screen3" num="3" class="screen">
            <div id="content3">Screen 3</div>
        </div>
        <div id="screen4" num="4" class="screen">
            <div id="content4">Screen 4</div>
        </div>
        <div id="screen5" num="5" class="screen">
            <div id="content5">Screen 5</div>
        </div>
        <div id="screen6" num="6" class="screen">
            <div id="content6">Screen 6</div>
        </div>
    </div>
</div>

As you can see the page is divided in 6 screens delimited by div with class “screen”. Inside that div you can put the elements of your page. In this case we have 6 screens, but you can have all you want, always within the limits of performance!

<div id="nav">
    <div id="to1" class="buttonSwitch buttonSwitchTo2 buttonSwitchCurrent">To 1</div>
    <div id="to2" class="buttonSwitch buttonSwitchTo2 buttonSwitchCurrent">To 2</div>
    <div id="to3" class="buttonSwitch buttonSwitchTo3 buttonSwitchCurrent">To 3</div>
    <div id="to4" class="buttonSwitch buttonSwitchTo4 buttonSwitchCurrent">To 4</div>
    <div id="to5" class="buttonSwitch buttonSwitchTo5 buttonSwitchCurrent">To 5</div>
    <div id="to6" class="buttonSwitch buttonSwitchTo6 buttonSwitchCurrent">To 6</div>
</div>

Clicking on the elements with class =buttonSwitchTo# will change from one screen to another. You can put a lot of buttons that points to a screen. You can also choose a differnt way for switch from a screen to another. See below.

JavaScript

var hv=new horve("DivWindow","container",{
rows:3,
transition:Fx.Transitions.Quad.easeInOut,
duration:500,
defaultScreen:3,
haveButton:true,
screens:null,
_minX:1000,
_minY:500,
onStart:function(screen){
$('content'+screen).morph({'height':30, 'opacity':0.5,duration:20});
},
onComplete:function(screen){
$('content'+screen).morph({'height':200, 'opacity':1, duration:20});
}
});

Parameters

• divWindow: the id of the div that contains everything.
• Container: the id of the div that contains the screens.
• rows: number of rows of screens. Default value=1.
• transition: Fx.Transition to use when switch from a screen to another. Default value=Fx.Transitions.Quad.easeInOut.
• duration: millis. Default value=1000.
• defaultScreen: first Screen to display. Default value=1.
• haveButtons:set true if the page provides buttons for switching from screen to screen (view notes). Default value=true.
• screens:the array of screen to switch. If is set to null the class take all divs with
• _minX & _minY:the class sets the size of the screens based on the client resolution. These parameters are the minimum size of the screens. Default values=1000×500
• onComplete(screen) & onStart(screen): function called when the switch has completed or started. The screen var passed to the function contains the number of current screen

Css

The class don’t inject any element in the page and it setsimportant css attributes as inline css; below you can see the css styles used in the demo.

#nav{
border-bottom:1px solid #FFFFFF;
border-top:4px solid #0071BC;
position:absolute;
top:0;
z-index:2;
height:auto;
left:0;
right:0;
background:#FFFFFF url(navigation.gif) repeat-x scroll center bottom;
}
#extContainer{
position:absolute;
z-index:0;
}
#extContainer>*{
z-index:0;
}

.buttonSwitch, a{
text-align:center;
width:120px;
float:left;
text-transform:uppercase;
cursor:pointer;
border-right:1px solid white;
}
.buttonSwitch:hover, a:hover{
color:#0070BC
}
.buttonSwitchCurrent, .buttonSwitchCurrent:hover{
color:#F1F8FF;
background:#0070BC none repeat scroll 0 0;
}
.screen{
border:1px solid red;
position:absolute;
}
.content{
position:relative;
margin:auto;
width:200px;
height:200px;
margin-top:100px;
border:1px solid #222;
text-align:center;
font-size:20px;
background:#DDE4E7;
}
#container{
background:#c2d9f3 url(bg.jpg) repeat-x;
}

Compatibility

The class has been tested on IE 7+, Chrome 4+, Firefox 3+ and Android phone browser (on htc g1 running Android 1.6).

Example

Visit the demo page to see horve in action with 6 screens in 3 rows.