Permalink
alvarotrigo
- Modified horizontalScroll.html example #11
a13e052
Oct 21, 2014
Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.
Sign up
alvarotrigo
- Modified horizontalScroll.html example #11
a13e052
| <!DOCTYPE html> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <title>pagePiling.js plugin - Horizontal scroll</title> | |
| <meta name="author" content="Alvaro Trigo Lopez" /> | |
| <meta name="description" content="pagePiling.js plugin by Alvaro Trigo." /> | |
| <meta name="keywords" content="pile,piling,piling.js,stack,pages,scrolling,stacking,touch,fullpile,scroll,plugin,jquery" /> | |
| <meta name="Resource-type" content="Document" /> | |
| <link rel="stylesheet" type="text/css" href="../jquery.pagepiling.css" /> | |
| <link rel="stylesheet" type="text/css" href="examples.css" /> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> | |
| <script type="text/javascript" src="../jquery.pagepiling.min.js"></script> | |
| <script type="text/javascript"> | |
| $(document).ready(function() { | |
| /* | |
| * Plugin intialization | |
| */ | |
| $('#pagepiling').pagepiling({ | |
| direction: 'horizontal', | |
| menu: '#menu', | |
| anchors: ['page1', 'page2', 'page3', 'page4'], | |
| sectionsColor: ['white', '#ee005a', '#2C3E50', '#39C'], | |
| navigation: { | |
| 'position': 'right', | |
| 'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Pgae 4'] | |
| }, | |
| afterRender: function(){ | |
| $('#pp-nav').addClass('custom'); | |
| }, | |
| afterLoad: function(anchorLink, index){ | |
| if(index>1){ | |
| $('#pp-nav').removeClass('custom'); | |
| }else{ | |
| $('#pp-nav').addClass('custom'); | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| <style> | |
| #section1 img{ | |
| margin: 20px 0; | |
| opacity: 0.7; | |
| } | |
| /* colors | |
| * --------------------------------------- */ | |
| #colors2, | |
| #colors3{ | |
| position: absolute; | |
| height: 163px; | |
| width: 362px; | |
| z-index: 1; | |
| background-repeat: no-repeat; | |
| left: 0; | |
| margin: 0 auto; | |
| right: 0; | |
| } | |
| #colors2{ | |
| background-image: url(imgs/colors2.gif); | |
| top:0; | |
| } | |
| #colors3{ | |
| background-image: url(imgs/colors3.gif); | |
| bottom:0; | |
| } | |
| /* Overwriting fullPage.js tooltip color | |
| * --------------------------------------- */ | |
| #pp-nav.custom .pp-tooltip{ | |
| color: #AAA; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <ul id="menu"> | |
| <li data-menuanchor="page1" class="active"><a href="#page1">Page 1</a></li> | |
| <li data-menuanchor="page2"><a href="#page2">Page 2</a></li> | |
| <li data-menuanchor="page3"><a href="#page3">Page 3</a></li> | |
| </ul> | |
| <div id="pagepiling"> | |
| <div class="section" id="section1"> | |
| <img src="imgs/pagePiling-plugin.gif" alt="pagePiling" /> | |
| <br /> | |
| <h1>Horizontal Scroll</h1> | |
| <p>pagePiling does it easy for you!</p> | |
| </div> | |
| <div class="section"> | |
| <div class="intro"> | |
| <h1>Simple to use</h1> | |
| <p>Just use the option direction: 'horizontal' to have it working!</p> | |
| </div> | |
| </div> | |
| <div class="section" id="section3"> | |
| <div class="intro"> | |
| <h1>Isn't it great?</h1> | |
| <p>Just as you expected!</p> | |
| <div id="colors2"></div> | |
| <div id="colors3"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |