This is a simple plugin...

...for a simple purpose

It breaks down information into chunks and presents them one screen at a time.

About

Created by Dominik Gorecki. You can find the documentation here. The git-hub page here.

Current Version: 0.01a

Responsive Design

BlockScroll is responsive and will automatically adjust to any resolution.

Keyboard controls


Will go down one block

Will go up one block

Sticky

The blocks are "sticky" and the scroll automatically adjusts the location so that the active block sticks to the top

Download with git

Use the following git command to download

git clone https://github.com/DominikGorecki/block-scroll.git

Install the JS...

Include the js file

<script src="js/blockScroll.js"><script/>

...and the CSS

Include the css in the head

<link rel="stylesheet" type="text/css" href="css/blockScroll.css">

Add a wrapper

Add a wrapper that will hold all your blocks

<div id="main-wrap">

The blocks must be direct children <div>s of the wrapper

Run the JS

Assign the return to a var so you can control it

var blockScroller = $("#main-wrap").blockScroll();

Customize

The scrollBlock plugin takes several arguments passed in as a JSON:

$("#main-wrap").blockScroll({
   scrollDuration: [jQuery duration],
   fadeBlocks: [bool],
   fadeDuration: [jQuery duration]
});

Scroll Duration

Default: "fast"
Accepted input: Int or String
Check out the duration property in jQuery animate

$("#main-wrap").blockScroll({scrollDuration:[int or str]});

Fade Blocks?

Default: true
Accepted input: true or false
Set whether to fade in the block on first load.

$("#main-wrap").blockScroll({fadeBlocks:[true] or [false]});

Fade Duration

Default: "slow"
Accepted input: Int or String
Check out the duration property in jQuery animate

$("#main-wrap").blockScroll({fadeDuration: [int] or [string]});

Use - Up/Down buttons

Setting up & down buttons is easy. Follow the following format and names and they will automatically work (be sure to put them in a fixed block div):

<span id="block-up-arrow"><img/></span>
 
<span id="block-down-arrow"><img/></span>

Use - Goto Block

To go to a specific block use the code from the second line:

var blockScroller = $("#main-wrap").blockScroll();
blockScroller.goto([block #]);

Input: int

Apendix: known issues

Scroll wheel in firefox doesn't work as it should because Mozilla doesn't expose that event.

When resizing the window manually it can cause the view to adjust slowly (in special cases).

The height dimension for all images needs to be added in order for block scroll to perform the centering properly

Apendix: the future of block scroll

Add more options for setup such as turn off key bindings, ability to control height of a block.

Better integration for all cases--ensure that if a block is longer than a window, it doesn't cause problems

Find a more graceful way to handle up/down events when actively scrolling--currently the event is ignored

Intro About Features Download Install Customize Use ...