File: testsample.html

Recommend this page to a friend!
  Classes of Emmanuel Podvin   One Page Sticky   testsample.html   Download  
File: testsample.html
Role: Example script
Content type: text/plain
Description: Example
Class: One Page Sticky
jQuery plugin to perform vertical sticky animation
Author: By
Last change: Update of testsample.html
Date: 2 years ago
Size: 2,352 bytes
 

Contents

Class file image Download
<!doctype html> <html> <head> <style> body{padding:0px;margin:0px;} #menu { z-index:100;position: fixed;top:10px; } #wrap-site-content {margin-top:50px;width:100%;} #wrap-site-content article {width:100%;min-height:400px;position:relative;} .ajax-loader { background-image: url("img/ajax-loader.gif"); background-repeat: no-repeat; background-position: center 33%; background-color: rgba(240, 240, 240, .84); position: fixed; z-index: 9999; display:none; } </style> <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://www.intersel.fr/assets/gitdemos/iFSM/extlib/jquery.attrchange.js"></script> <script src="http://www.intersel.fr/assets/gitdemos/iFSM/extlib/jquery.dotimeout.js"></script> <script src="http://www.intersel.fr/assets/gitdemos/iFSM/iFSM.js"></script> --> <script src="../ifsm/extlib/jquery-2.1.1.min.js"></script> <script src="../ifsm/extlib/jquery.attrchange.js"></script> <script src="../ifsm/extlib/jquery.dotimeout.js"></script> <script src="../ifsm/iFSM.js"></script> <script src="jquery.stickyplus.js"></script> <script src="jquery.mousewheel.js"></script> <script src="onepage-display.js"></script> </head> <body> <div id="menu" style=""> <button data-pageid="1">Goto Page 1</button> <button data-pageid="2">Goto Page 2</button> <button data-pageid="3">Goto Page 3</button> </div> <div id="wrap-site-content"> <section class="onePage" data-onepage="enabled"> <article data-pageid="pageid_1" style="background-color:green;"> <h1>Page 1</h1> contenu page 1 </article> <article data-pageid="pageid_2" style="background-color:blue;"> <h1>Page 2</h1> contenu page 2 </article> <article data-pageid="pageid_3" style="background-color:grey;"> <h1>Page 3</h1> contenu page 3 </article> </section> </div> <script> $(document).ready(function() { var aOnePageToDisplay = new OnePageDisplay(); aOnePageToDisplay.init(); $(document).trigger('ajax-success-call'); $("button").click(function(){ $(aOnePageToDisplay.opts.GeneralContainer).trigger("OP_PageToGo",$(this).attr("data-pageid")); }); }); </script> </body> </html>