HorizonScroll – Horizontal Scrolling Website – jQuery Tutorial

HorizonScroll  lets you create a horizontal scrolling website with mobile friendly features. Writing jQuery for horizontal website and to mechanize for every device becomes headache. Horizon Scroll enables the compatibility to every smart device, and works like a charm mobile app. Horizontal sliding website jquery Horizon. Smart phone app like Horizontal scrolling website using horizonJs. […]

HorizonScroll  lets you create a horizontal scrolling website with mobile friendly features. Writing jQuery for horizontal website and to mechanize for every device becomes headache. Horizon Scroll enables the compatibility to every smart device, and works like a charm mobile app. Horizontal sliding website jquery Horizon.

Smart phone app like Horizontal scrolling website using horizonJs. Horizon Scroll creates barrier between div’s which then can be scroll horizontally.

Horizon Scroll – Horizontal Sliding Website

1. Include jQuery library from Google API and Horizon Scroll in your page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.horizonScroll.js"></script>

2. Load jQuery touchSwipe plugin, enables touch, swipe and mouse dragging support.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>

3. Arrow keys enables to show next and previous navigation to forward and reverse the page.

 <div class="horizon-prev"><img src="images/l-arrow.png"></div>
 <div class="horizon-next"><img src="images/r-arrow.png"></div>

4. Creating Sections you can add anything but we just write Content of Section 1 and etc. You can change the ID’s of section according to need it depends on you.

 <section data-role="section" id="section-section1"></section>
 <section data-role="section" id="section-section2"></section>
 <section data-role="section" id="section-section3"></section>
 <section data-role="section" id="section-section4"></section>

5. We require some CSS to style up our One Page Website. It is necessary because we need to create 100% height body. Also we need to align the next and previous buttons in order to make it good looking.

html,
 body {
 width: 100%;
 height: 100%;
 padding: 0;
 margin: 0;
 overflow: hidden;
 }
 section {
 float: left;
 display: block;
 height: 100%;
 padding: 0;
 margin: 0;
 }
 .horizon-prev,
 .horizon-next {
 position: fixed;
 top: 50%;
 margin-top: -24px;
 z-index: 9999;
 }
 .horizon-prev { left: 20px; }
 .horizon-next { right: 20px; }

6. Making jQuery Horizon Work, initiliaze the plugin with horizon() keyword. Default values of horizonJs given in the section. zon this single line of code will initiliaze with default values but just see how to initialize the plugin.

$('section').horizon();

Initial Values of jQuery HorizonScroll

These are default options which needs to change if you need scroll delay and speed to be changed. If swipe touch not working then you need to double check either touch swipe library included or not. Callback functionality support to add your own callbacks.

$('section').horizon({
   scrollTimeout: null,
   scrollEndDelay: 250,
   scrollDuration: 400,
   i: 0,
   limit: 0,
   docWidth: 0,
   sections: null,
   swipe: true,
   fnCallback: function (i) {
 }
 });

Leave a Reply

Your email address will not be published. Required fields are marked *