Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


A jQuery plugin for effortlessly creating single page web sites. Demo


  • Simple - include pagify.js, create a div, make one jQuery call and you're done!
  • Lightweight - pagify.js is far less than 100 lines of code, well commented and easy to understand and extend!
  • Flexible - Get started by only specifying a list of pages or customize animations, default pages and caching!
  • Fast - Load all pages upfront or load on the fly; a simple $.get() is used to get content with minimal proccessing!
  • Clean - Replace long HTML files broken up into sections and verbose JS to do the simple task of switching content!
  • Couldn't find an adjective... - Uses only Javascript and HTML so it can be uploaded like any other static site!


Checkout the simple demo to see how it works, or...

Create a container page:

Load Pagify and jQuery:

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

Create a div that will contain page content:

<div id='page_holder' />

Call pagify on the aforementioned div and pass in options. The only required option is pages.

    pages: ['home', 'about', 'contact'],
    'default': 'home' // The name of a page or null for an empty div

Link to other pages by linking to hashes of their page names:

<a href='#contact'>Contact</a>
<a href='#about'>About</a>

Write other pages

Create content pages in the same directory as the container as [page_name].html

i.e. about.html

<h1>About us</h1>
<p>This is an about page!</p>


pages - an array of page names. Required.

default - the page that is loaded on startup. null is default (for an empty div).

animation - the jQuery animation that is used to show pages, i.e. fadeIn, show, slideUp, slideDown. show is default.

animationSpeed - the speed of the animation, i.e. fast, slow, 1000. 'normal' is default.

animationOut - the jQuery animation that is used to hide pages, i.e. fadeOut, hide, slideUp, slideDown. hide is default.

animationOutSpeed - the speed of the animationOut, i.e. fast, slow, 1000. 0 is default.

cache - true or false. Determines if all pages are loaded upfront or not. false is default.

onChange - a function that takes the page name as a parameter and is executed when the page changes. empty function is default.


Created by @ChrisPolis, blog

MIT License


Effortlessly create single page web sites with this jQuery plugin.






No releases published


No packages published

Contributors 4