Jquery Plugin Highlight - pagePiling.js

source

What Will I Learn?

• What is pagePiling.js
• How to import pagePiling.js
• How to use pagePiling.js in a HTML Project

Requirements

• Knowledge in HTML
• Knowledge in Javascript
• Knowledge in JQuery

Difficulty

Basic

Tutorial Contents

• Introduction
• Importing pagePiling.js
• Creating a simple app using pagePiling.js

Introduction

pagePiling.js is a unique JQuery plugin which allows developers to make scroll-able fullscreen websites with ease, it is also easy to customize with its wide array of options.

Importing pagePiling.js

Before we can start using the libraries in pagePiling we first need to import it.pagePiling requires jquery to be able to run successfully, so we need to import JQuery as well. We will be importing both jquery and pagePiling via CDN.

JQuery: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

pagePiling.js: https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.5/jquery.pagepiling.min.js

pagePiling.css: https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.5/jquery.pagepiling.min.css

Additionally, we will also be importing bootstrap just for presentation.
(**Note: This is not a requirement. pagePiling will still work without this. **)

bootstrap.js: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js

bootstrap.css: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css

Once you have all of the CDN we proceed to import them into a HTML file.

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.5/jquery.pagepiling.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pagePiling.js/1.5.5/jquery.pagepiling.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>

Creation

HTML File
<div id="pagepiling">
    <div class="section">Some Section</div>
    <div class="section">Some Section</div>
    <div class="section">Some Section</div>
    <div class="section">Some Section</div>
</div>

Javascript File
$(document).ready(function() {
  $('#pagepiling').pagepiling()
});

The code above shows the simplest way to use pagePiling.js. Now let's disect the code to get a better understanding.

<div id="pagepiling">
    <div class="section">Some Section</div>
    <div class="section">Some Section</div>
    <div class="section">Some Section</div>
    <div class="section">Some Section</div>
</div>

Let's start with the HTML file. The first line <div id="pagepiling"> is where we give our div an id so that later on we can easily tell the javascript that we want this particular div as the div where we put pagepiling on. This can be any valid id.

Next are the sections <div class="section">Some Section</div> this is where the magic happens. Each div with a class called section is a new page being piled on. So for the example we have four (4) pages. By default pagePiling uses the section class but that can cause conflicts when using other plugins, so later on we will be changing that using one of the built in function in pagePiling.

Moving on,

$(document).ready(function() {
  $('#pagepiling').pagepiling()
});

The Javascript is very simple. Basically, when the page loads $(document).ready(function() {}) we call the id of our div, in this case pagepiling, and call the pagepiling() function which basically binds all the css and javascript of the pagePiling library.

And there you go, the most basic way of using pagePiling.js, BUT it looks way too plain right? Also, if you look closely it doesn't hide the content of each section but just stacks them. This might be a compatibility issue with the latest version of JQuery. So what we'll do is make a workaround to remedy the issue. Let's start..

First to address the issue of the stacking content a simple workaround for this is by adding a background color per section. To do this we use one of the customization function of pagePiling which is the sectionsColor. sectionsColor accepts an array of colors (either hex, rgb, rgba or by name).
( Note: If the array of colors passed is less than the sections the remaining sections would be using the default background color)

$(document).ready(function() {
  $('#pagepiling').pagepiling({
    sectionsColor: ['#C39BD3', '#F7DC6F', '#AED6F1', '#A3E4D7'],
  });
});

Next, we want to change the id of the sections to avoid conflicts with different plugins. This can be done by using the sectionSelector function. We will give it a name .mySelection, this function accepts a class denoted by the .somename if passed with an id this won't work.

$(document).ready(function() {
  $('#pagepiling').pagepiling({
    sectionsColor: ['#C39BD3', '#F7DC6F', '#AED6F1', '#A3E4D7'],
    sectionSelector: '.mySection'
  });
});

We could also change the direction of the transition, the transition speed, whether we want it to loop from the last and first with the direction , scrollingSpeed, loopTop and loopBottom respectively. the direction function accepts either horizontal or vertical with vertical as the default. scrollingSpeed sets the speed where a user can scroll to the next section. The loopTop and loopBottom basically allows user to loop back when reaching the end of the sections both which are set to false by default.

$(document).ready(function() {
  $('#pagepiling').pagepiling({
    direction: 'horizontal',
    sectionsColor: ['#C39BD3', '#F7DC6F', '#AED6F1', '#A3E4D7'],
    sectionSelector: '.mySection',
    loopBottom: true,
    loopTop: false,
    scrollingSpeed: 100
  });
});

Lastly, pagePiling also allows us to setup callback functions. Namely onLeave, afterLoad and afterRender. onLeave gets triggered when the user changes sections and has three parameters, index (current section), nextIndex (next section), and direction (up or down). afterLoad gets called when the section has finished loading and has two parameters, anchorLink (section) and index (current section). afterRender is called when the pagePiling section is finished rendering.

For the demo I've added a neat feature of pagePiling wherein your section can be made scrollable (add pp-scrollable inside the section) when your content gets too long. Also, I've added a form inside the section.

Demo HTML file.

<div id="pagepiling">
  <div class="mySection">
      <h1>Nothing Special Here, Just a normal section</h1>
  </div>
  <div class="mySection pp-scrollable">
    <h1>A Scrollable Section</h1>
    <h3>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nunc nulla, aliquet in mattis ac, commodo ut orci. Pellentesque fermentum sodales lacus. Nulla turpis dui, accumsan sit amet lorem nec, tincidunt convallis justo. Proin felis risus, dictum at
      mollis vel, commodo quis nisl. In nec egestas tortor, vel finibus neque. Nulla nec porttitor nisi. Donec euismod sagittis dui. Nullam augue justo, blandit quis tincidunt vitae, porta quis mi. Phasellus ultrices interdum dolor a dapibus. Nunc quis
      pharetra nunc, in facilisis arcu. Suspendisse scelerisque, enim viverra volutpat ultricies, nulla erat lacinia lacus, eu mollis velit turpis ut nulla. Suspendisse eu urna nec tortor semper euismod. Mauris quis purus in mi semper tincidunt quis ultricies
      orci. Proin aliquet dolor quis eros eleifend laoreet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas et nisl at lectus tempor accumsan non non enim. Sed ultricies at magna at consequat. Aliquam
      varius, nulla non convallis malesuada, dui massa pellentesque sem, ac consectetur nunc erat eget magna. Nunc risus diam, volutpat non ipsum rutrum, consectetur volutpat eros. Curabitur quis risus aliquam, sodales sapien sed, vulputate enim. Aenean
      vitae elit porta, rhoncus lectus sed, tincidunt nulla. Nulla est mauris, rutrum quis neque a, rutrum vehicula nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent lorem lectus, varius eget purus
      sit amet, ultricies accumsan enim. Duis non turpis eget tellus imperdiet tincidunt. In lacus est, volutpat sed urna quis, dignissim tincidunt sapien. Praesent tincidunt dolor lorem, vel dapibus est euismod quis. Fusce nec erat id lorem condimentum
      interdum et et tellus. Phasellus in tortor ut felis ullamcorper efficitur. Nam in augue eleifend, vestibulum libero non, placerat nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras sollicitudin felis arcu, sit amet varius magna
      scelerisque quis. Quisque scelerisque venenatis mauris non malesuada. Mauris diam massa, laoreet sed molestie eu, tempus nec mauris. Integer scelerisque tortor ac risus consequat vehicula. Duis nec tellus consectetur, sagittis nisl fringilla, sollicitudin
      urna. Vestibulum at varius ante. Praesent lobortis tristique hendrerit. Etiam malesuada ac dolor non mattis. Curabitur dui metus, mollis id auctor eu, pellentesque eu nisi. Phasellus placerat tellus in turpis bibendum, nec gravida lectus pellentesque.
      Ut vel sodales sapien. Cras non felis id turpis viverra malesuada eget fermentum tellus. Integer dignissim libero vel elit finibus pulvinar. Proin ex magna, suscipit in mollis nec, molestie dignissim elit. In sagittis vel turpis quis semper. Vivamus
      non vehicula elit. Etiam sit amet sagittis diam. Pellentesque cursus mollis laoreet. Suspendisse in neque pulvinar, fermentum magna vestibulum, pellentesque ipsum. Mauris pretium, magna in rutrum egestas, felis felis vestibulum sem, nec mollis magna
      risus ac mi. Donec vitae mi vitae ligula maximus finibus efficitur non neque. Curabitur vehicula varius sapien eget condimentum. Ut laoreet diam ac nibh feugiat rutrum. Donec luctus eu dui eu ultricies. Etiam ut metus nec arcu elementum placerat
      sit amet quis neque. Maecenas cursus, neque id convallis lobortis, augue diam interdum ipsum, et ullamcorper turpis eros ac diam. Aliquam nunc felis, eleifend sed suscipit commodo, porttitor eget justo. Etiam viverra odio libero, sed malesuada ligula
      faucibus non. Proin interdum nisi ac ex lacinia, et elementum lectus auctor. Praesent vestibulum non diam eget rutrum. Sed quis tellus vel dui venenatis ultricies a et leo. Mauris quis elementum quam. Aenean eleifend tincidunt interdum. Suspendisse
      turpis massa, lobortis in felis vestibulum, molestie semper mauris. Integer finibus sapien in est finibus efficitur. Fusce nec feugiat tellus. Maecenas mauris odio, vestibulum sit amet augue sit amet, faucibus bibendum tortor.
    </h3>
  </div>
  <div class="mySection no-align">
    <div class="container">
      <form>
        <h3>A Form inside a section</h3>
        <div class="row">
          <div class="col-md-12 col-sm-12 col-xs-12 form-group">
            <label class="">First Name</label>
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 col-sm-12 col-xs-12 form-group">
            <label class="">Last Name</label>
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 col-sm-12 col-xs-12 form-group">
            <label class="">Address</label>
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 col-sm-12 col-xs-12 form-group">
            <label class="">Phone Number</label>
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 col-sm-12 col-xs-12 form-group">
            <label class="">Favorite Subject</label>
            <input type="text" class="form-control">
          </div>
        </div>
        <input type="submit" class="btn btn-primary" value="Submit">
        <input type="reset" class="btn btn-danger" value="Reset">
      </form>
    </div>
  </div>
</div>

Demo JS File

$(document).ready(function() {
  $('#pagepiling').pagepiling({
    direction: 'horizontal',
    sectionsColor: ['#C39BD3', '#F7DC6F', '#AED6F1'],
    sectionSelector: '.mySection',
    loopBottom: true,
    loopTop: false,
    scrollingSpeed: 100,
    onLeave: function(index, nextIndex, direction) {
      console.log('leaving section ' + index + ' moving to section ' + nextIndex + ''); 
    },
    afterLoad: function(anchorLink, index) {
      console.log(anchorLink);
      console.log(index);
    },
    afterRender: function() {
      console.log('done rendering');
    }
  });
});

The full demo can be found here.

Curriculum

This is the first of a series wherein in I highlight a particular JQuery plugin.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---