DragOn

Smart scrolling.
No more scroll paradox!

Scroll on drag

Click and drag for scroll content in both direction. Accelerated and inertial motion for all child blocks.

BarOn - Customizable scrollbars (beta)

Plug-in to changing scrollbars style BarOn...

Wheel fullfil

Scroll page with mouse wheel in both direction. Automatic switching between Horizontal or vertical scroll direction for blocks in best visual position.

Smoth pagination plugin (in developing)

Smoth automatic scroll to anchor in contents. Anchors works without any plugin, but is not smoth.

Extended keyboard scrolling

Smoth scrolling with keyboard control keys. Suport horizontal and vertical scrolling for blocks in best visual position.

Metro style

No limits to use scroll. Use horizontal scroll in own projects with Metro style. Or use vertical scroll, as well as combine both.

Get script

Download file & use instruction...

Why ?

problems
and solutions ...

Dragons fight

How it was!

  1. Side scrolling wheel worked through modifier or not work at all;
  2. Block with scrolling inside another block with scrolling, scroll started at running over it, even when there showing a 1 pixel;
  3. On the tablet is not possible to scroll through the page vertically, if the block that scrolls horizontally, occupying the entire display area;
  4. Intuitive scrolling by dragging is not applicated. For example, the large image within the preview area, just do not implemented in any browser.
  5. Scroll through the pages on the keyboard occurred intermittently. Difficult to predict what the block will be scrolled.

So it will be!

  1. Side scrolling must always be running, without any keyboard modifier;
  2. Scrolling should work then when it's convenient. For example: on Scroll down block must scrolled only when block is visible at 100% or when the middle of the block reached middle of the display;
  3. Scrolling not limited in different directions on the touchable devices;
  4. Implement drag-style scroll with easing.
  5. Scroll control buttons smoothly moves the page without causing the gap in perception. Blocks are selected automatically when their optimal location.

Toggle DragOn

Toggle DragOn.js functionality...

Demo

No one line
JavaScript code…

Smoth scrolling…


List of <input> blocks inside blocks <div> as container.

Layout
<div class="select"><div>
<input id="c00" name="[name]" type="radio" checked="checked"/><label for="c00">[text]</label>
<input id="c01" name="[name]" type="radio" /><label for="c01">[text]</label>
…
<input id="c0n" name="[name]" type="radio" /><label for="c0n">[text]</label>
</div></div>
				
Style
.select { width : 200px; overflow : show; min-height : 1.25em; }
.select:hover:before { content : ' '; }
.select input { display : none; }
.select input:checked + label { display : block; font-weight : bold; }
.select > div { position : relative; }
.select:hover > div { position : absolute; max-height : 20em; overflow-y : scroll; z-index : 10; }
.select label { width : 200px;	display : none; }
.select:hover label { display : block; }
				

Blocks panning…



Dragon fractal

Block <img> inside container automatic has panning.

Layout
<div class="container">
<img alt="[alt text]" src="[source image]">
</div>
				
Style
.container { width : 200px; overflow : scroll; max-height : 200px; }
				

DragOn

Let´s fly...

Automatically link the latest version

<script src="http://dragon.deparadox.com/drag-on.js">
</script>

Download

Download source code...

How to use...

<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="[path]/drag-on.js"></script>

<body class='dragon'>
  [content]
</body>

Add a class "dragon" to the <body> block or any other blocks. All block elements with active scrolling inside root element with a class "dragon", will be connected.


Be careful. Event capturing mousedown, between the root and the block with scrolling probably forbid smart scrolling. In this case, you can assign multiple nested root blocks.

<script>
$( function(){
  $( [selector] ).dragOn()
});
</script>

BarOn

Lite scrollbars.
No more wrapers!

Only one instance

Only one instance of object BarOn will support Scrollbars for all child blocks.

Style in CSS

All visual properties of scrollbars can be changed in CSS.

Wrappers free

Do not created any wrappers for scrolled block.

Unique

Scrollbar will be located on the border of the visible part of the block. Even if the other part of block is beyond the boundaries of the parent.

No garbage

Only two auxiliary blocks will created for each instance of object BarOn.

Event based

Worked under model of scroll event.

Get plug-in
& style

Download files & use instruction on GitHub

About!

every problem will be solved,
just attach

I am a graphic designer and creative code developer. Hobby different areas (communication / programming / graphic design / prepress / protection) formed a special skills that help you to thoroughly analyze the development.

My experience in graphic design for 17 years. Been programming since the Zilog Z80. Take a great interest in web development for 8 years.

I love to experiment,
I love art, and I believe —
knowledge does not apply without imagination.

Contacts

Anyone who is looking
will always find

 
2013 © DeParadox LLC.
HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Performance & Integration, and Offline & Storage

Body loaded...

Server Ready...


Fork me on GitHub