Page Life Cycle

Tiny Scollbar - Horizontal setup

Dear AAPNAites here is a superb jquery & javascript enabled scrollbar. Follow the link to avail the same

http://baijs.nl/tinyscrollbar/

Few modifications has been made to adjust it horizontally.

Steps:

1) Rotate all Image horizontally and adjust size accordingly.

2) Javascript code on the page to be modified as

   <script type='text/javascript'>

        //$(document).ready(function () {

        $(window).bind("load", function() {   

            $('#scrollbar1').tinyscrollbar({ axis: 'x' });

        });

    </script>

3) Change the css as follows

/*Scroll*/

/* Tiny Scrollbar */

#scrollbar1

{

       /*height:200px;*/

       margin: 0px 0 10px;

}

#scrollbar1 .viewport

{

       min-height: 140px;

       width: 1000px;

       overflow: hidden;

       position: relative;

}

/*#scrollbar1 { width: 1000px; margin: 20px 0 10px; }

#scrollbar1 .viewport { width: 1000px; height: 125px; overflow: hidden; position: relative; }*/

#scrollbar1 .overview

{

       list-style: none;

       padding: 0;

       margin: 0;

       position: absolute;

       left: 0;

       top: 0;

}

#scrollbar1 .overview img

{

       float: left;

}

#scrollbar1 .scrollbar

{

       background: #EDEDED url(../images/bg-scrollbar-track-x.png) no-repeat 0 0;

       position: relative;

       margin: 0 0 5px;

       clear: both;

       height: 15px;

}

#scrollbar1 .track

{

       background: transparent url(../images/bg-scrollbar-trackend-x.png) no-repeat 100% 0;

       width: 100%;

       height: 15px;

       position: relative;

}

#scrollbar1 .thumb

{

       background: transparent url(../images/bg-scrollbar-thumb-x.png) no-repeat 100% 50%;

       height: 25px;

       cursor: pointer;

       overflow: hidden;

       position: absolute;

       left: 0;

       top: -5px;

}

#scrollbar1 .thumb .end

{

       background: transparent url(../images/bg-scrollbar-thumb-x.png) no-repeat 0 50%;

       overflow: hidden;

       height: 25px;

       width: 5px;

}

#scrollbar1 .disable

{

       display: none;

}

.noSelect

{

       user-select: none;

       -o-user-select: none;

       -moz-user-select: none;

       -khtml-user-select: none;

       -webkit-user-select: none;

}

Done. Enjoy the show