vPageScroll.js

vPageScroll.js is a simple jQuery plugin that initializes a responsive one page layout. Perfect for your nex one page design

It has two main functionalities. At first it resizes your container to the width and height of your browser and centers your content, second it creates a navigation to scroll through your page.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: vir2al.ch

1. INCLUDE CSS AND JS FILES

<!-- responsive grid system -->
<link href="vpagescroll/src/css/jquery.vpagescroll.grid.css" rel="stylesheet" type="text/css" media="screen" />
<!-- some custom styles for the Demo - can be customized -->
<link href="vpagescroll/src/css/jquery.vpagescroll.styles.css" rel="stylesheet" type="text/css" media="screen" />
<!-- important for the functionality -->
<link href="vpagescroll/src/css/jquery.vpagescroll.css" rel="stylesheet" type="text/css" media="screen" />
<!-- font-awesome Icons -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- js -->
<script type="text/javascript" src="vpagescroll/src/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="vpagescroll/src/js/jquery.vpagescroll.js"></script>

2. HTML

<div id="navigation"></div>
<div id="main">
  <section><div class="container-12">
    <div class="inner">
      <div class="grid-12">...</div>
    </div>
  </div></section>
</div>

3. JAVASCRIPT

$(document).ready(function(){
    $(".main").vpagescroll();
});

4. ADVANCED

Advanced html

<div id="navigation"></div>
<div id="main">
  <section data-title="Title 1" data-icon="fa-gavel" data-color="#16a085"><div class="container-12">
    <div class="inner">
      <div class="grid-12">...</div>
    </div>
  </div></section>
</div>

data-title: Title shown in the navigation data-icon: Icon for the navigation - FontAwesome data-color: Container Background-color

Advanced JS

include the following right before the end of the body and after the JS-files

<script type="text/javascript">
  $(document).ready(function(){
    $(".main").vpagescroll({
      sectionContainer: "section",      //the container
      sectionInner    : ".inner",       //the inner container
      navigation      : "#navigation"   //the navigation container
    });
  });
</script>

Grid System

vPageScroll.js comes with a responsive grid system:

<div class="inner">
  <div class="grid-6"></div>
  <div class="grid-6"></div>
</div>