❤
npm
Sign UpSign In

sitepage.js

3.1.1 • Public • Published

sitePage.js

sitePage.js version Known Vulnerabilities npm License PayPal Donate jsDelivr Hits jsDelivr Hits jsDelivr Hits

A simple and easy to use library that creates single page scrolling websites with horizontal or vertical scrolling.

Introduction

Suggestion are more than welcome, not only for feature requests but also for coding style improvements. Let's make this a great library to make people's lives easier!

Compatibility

sitepage is fully functional on all modern browsers. It also provides touch support for mobile phones, tablets and touch screen computers.

License

Open source license

If you are creating an open source application under a license compatible with the GPL, you may use sitePage under the terms of the GPL.

The credit comments in the JavaScript and CSS files should be kept intact (even after combination or minification)

Usage

As you can see in the example files, you will need to include:

  • The JavaScript file sitepage (or its minified version sitepage.min.js)
  • The css file https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css
  • The css file sitepage.min.css

Install using npm

Optionally, you can install sitepage with bower or npm if you prefer:

Terminal:

// With npm
npm install sitepage.js

Including files:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="sitepage.min.css" />

<script type="text/javascript" src="sitepage.min.js"></script>

Optional use of CDN

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sitepage.js@3.1.0/dist/sitepage.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/sitepage.js@3.1.0/dist/style/sitepage.min.css" />

Required HTML structure

Start your HTML document with the compulsory HTML DOCTYPE declaration on the 1st line of your HTML code. You might have troubles with sections heights otherwise. The examples provided use HTML 5 doctype <!DOCTYPE html>.

Each section will be defined with an element containing the section class. The active section by default will be the first section, which is taken as the home page.

Sections will get placed inside a wrapper (<div id="sitepage"> in this case). The wrapper can not be the body element.

<div id="sitePage">
	
</div>

You can see a fully working example of the HTML structure in the index.html file.

Initialization

Initialization with Vanilla Javascript

All you need to do is call sitepage before the closing </body> tag.

new SitePage("sitePage", {
        //brandname
        brandName: "",
        brandLogoUrl:"",//
        backgroundColor:"#45b4f5",
        verticalAlignMiddle: true, // By default it would be true	
        //sections
        sections: [{
                anchor: "Home",
                template: "<h1>Home</h1>",
                backgroundColor: "#45b4f5",
            },
            {
                anchor: "Features",
                templateId: "feature",
                backgroundColor: "#fc6c7c"
            },
            {
                anchor: "Contact Us",
                template: "<h1>Contact Us</h1>",
                backgroundColor: "#1bbc9b"
            }
        ],
        //navigation
	    anchors:true,//true|false
        navigation: 'horizontal',//horizontal|vertical
        sameurl: true,//true|false
        hamburger:true,//true|{lineColor:"",backgroundColor:"",closeOnNavigation:true}
        pageIndicator:true,//true|false; Default is true
        //transition
        easing: "ease",//ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)
        transitionSpeed: 1000,//speed in ms
        //scrolling
        autoScrolling: true,//true|false
        keyboardNavigation: true,//true|false
        //callback events
        pageTransitionStart: (prevPage, currentPage) => {
            console.log(`prevPage: ${prevPage ? prevPage.id : ""} currentPage :${currentPage.id}`);
        },
        pageTransitionEnd: (currentPage) => {
            console.log(`currentPage :${currentPage.id}`);
        }
    });

Options

General

  • brandName: Logo Title of the website.This Option is optional 
 brandName: "Logo Title",
  • backgroundColor: background color of the website. This Option is optional If you don't want to give background color for every section you can mention backgroundColor.
 backgroundColor: "#ffffff",
  • verticalAlignMiddle: By Default it is true and apply to all the sections. It will align the content vertically.
 verticalAlignMiddle: false,

Navigation

  • anchors: Set true|false. If you require a menu set it as a true (By defaul it is false) and if not require set it as false.
  • sameurl: Set true|false. While navigating the url will change navigation: 'vertical',//horizontal|vertical hamburger: { lineColor: "",//line color of hamburger backgroundColor: "",//background color when hamburger open, closeOnNavigation:true//default true },
  • Hamburger: Set true or below properties If you require a menu set it as by defaul it is false { lineColor:"", backgroundColor:"", closeOnNavigation:true }

Sections

    sections: [{
                active:true,//set active|false
                anchor: "string",//link name
                templateId:"string"//Id of the template element which to be render
                templateUrl: "stringUrl",//use template or templateUrl
                template:"string",//use template or templateUrl
                backgroundColor: "string",
                verticalAlignMiddle:boolean,//By default it would be false, true|false
                sectionClass:"class1,class2"//comma separated string or string array class to be apply on sections 
                anchorClass:"class1,class2"//comma separated string or string array class to be apply on sections 
            }
        ],

Transition

        easing: "string",//ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)
        transitionSpeed: 1000,//speed in ms

Scrolling

        autoScrolling: boolean,//By default it would be false, true|false
        keyboardNavigation: boolean,//By default it would be false, true|false

Callback Events

    pageTransitionStart: (prevPage:HtmlElement, currentPage:HtmlElement) => {
    }
    pageTransitionEnd: (currentPage:HtmlElement) => {
    }

Public API

with sitePage 3.0.0 new API has been exposed to have more control on sitepage.js

  • gotoPage(pageId: string);
  • navigateToNextPage();
  • navigateToPrevPage();
  • getMenuItems();
  • getActiveSection();
        //for example
        var sitePage = new SitePage(id,options);
        sitePage.api.gotoPage('page3'); 
        sitePage.api.navigateToNextPage();
        sitePage.api.navigateToPrevPage();
        sitePage.api.getMenuItems();
        sitePage.api.getActivePage();

Reporting issues

Contributing to sitepage

Changelog

To see the list of recent changes, see Releases section.

Resources

Donations

Donations would be more than welcome :)

Donate

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

Readme

Keywords

Package Sidebar

Install

npm i sitepage.js

Repository

github.com/pixelbyaj/SitePage

Homepage

pixelbyaj.github.io/sitepage

Weekly Downloads

1

Version

3.1.1

License

MIT

Unpacked Size

64.8 kB

Total Files

5

Last publish

Collaborators

  • pixelbyaj
Try on RunKit
Report malware