jquery-stickypage

jQuery plugin to display a page with chronological sticky tags.

Demo

Features

• Sticky tag can be positioned anywhere you want them to be (x,y,rotation). x, y are percentage within the canvas area (not pixel)
• Responsive
• User can use scrollbar to reveal sticky tags that are buried beneath the others.

Installation

Just add both jquery-stickpage.css and jquery-stickpage.js, and create a ol/li elements like following.

<link rel="stylesheet" type="text/css" href="http://soichih.github.io/jquery-stickypage/jquery-stickypage.css" media="screen" />
<script type="text/javascript" src="http://soichih.github.io/jquery-stickypage/jquery-stickypage.js"></script>

<style>
#sticky {
    width: 40em;
    height: 30em;
    background-color: #efd;
}
</style>

<ol id="sticky" class="sticky-page">

<li data-pos="10,10,-3deg">
Happy New Year!
<time>1/4/2014</time>
</li>

<li data-pos="20,25,2deg">
Just published <a href="/whiteboard">whiteboard</a> app running on my node server on OpenShift. Check it out!
<time>1/3/2014</time>
</li>

<li data-pos="60,25,2deg">
I've created a jQuery plugin called <a href="https://github.com/soichih/jquery-stickypage" target="_blank">stickypage</a> for this page
<time>1/4/2014</time>
</li>

</ol>

Then initialize the ol element with stickypage().

<script>
$(function() {
    $("#sticky").stickypage();
});
</script>

See /sample for more detail!

Enjoy!