Eco-Scroll.js

Eco-friendly jQuery scroll plugin with infinite possibilities

Github

Example

<html>
<head>
  <title>Demo</title>
    <style>
        html, body
        {
            height: 100%;
            width: 100%;
            margin-top:50px;

            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none; 
        }
        
        #divContainer 
        {
            margin: 10px auto;
            position: relative;
            width: 300px; 
            height: 300px;                
            border: 5px #000 solid;
        }
        
        .eCell 
        {
            position: absolute;
            border: 1px #000 solid;
            -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
            -moz-box-sizing: border-box;    /* Firefox, other Gecko */
            box-sizing: border-box;
        }
    </style>
</head>
<body>        
    <h1><center>Demo</center></h1>
    
    <div id="divContainer">
        <div class="wrapper">                                
        </div>        
    </div>        
    
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
    <script src="../js/jquery.eco-scroll.js"></script>        
  <script>            
  $(function()
    {   
        $("#divContainer").ecoScroll(
        {
            itemWidth: 150,
            itemHeight: 150,
            rangeX : [-10, 10],
            rangeY : [-10, 10],
            axis : "yx",
            snap : false,                     
            momentum : true,
            momentumSpeed : 10,
            onStart: function(oParam)
            {
                return true;
            },
            onShow: function(oParam) 
            {
                if (oParam.bNew) 
                    oParam.$e.text(oParam.x + ":" + oParam.y);
            },
            onStop: function(oParam)
            {
                console.log("stop");
            },
            onResize: function(oParam)
            {
                console.log("resize");
            },
            onClick: function(oParam)
            {
                console.log("click");
            },           
        });
    });
  </script>
</body>
</html>

Options

Nametypedescription
itemWidthString (default - "100")Width of the cell
itemHeightString (default - "100")Height of the cell
rangeXArray (default - [undefined, undefined] )X Range [-x, +x]
rangeYArray (default - [undefined, undefined] )Y Range [-y, +y]
axisString (default - "xy" )Drag Direction. it would be "x", "y" or "xy"
snapBoolean (default - false)Snap cell into position
momentumBoolean (default - false)Enable momentum
momentumSpeedfloat (default - 8)Speed of momentum. Value must be > 0 and < 10

Events

NameParameterDescription
onShow oParam (object)
{
bNew: true - new cell, false - existing cell
$e: jQuery object of the cell,
x: x coordinate,
y: y coordinate,
left: left position of the cell relative to the wrapper div,
top: top position of the cell relative to the wrapper div
}
This event fires when cell is rendered.
onStart oParam (object)
{
target: Dom element that targets the drag event
$e: jQuery object of the cell,
x: x coordinate,
y: y coordinate,
left: left position of the cell relative to the wrapper div
top: top position of the cell relative to the wrapper div
}
This event fires when cell is dragged. Returning true will allow cell to be dragged.
onStop oParam (object)
{
containerWidth: control width in pixel
containerHeight: control height in pixel
cellWidth: width of cell
cellHeight: height of cell
wrapperLeft: Left position of the wrapper div
wrapperTop: Top position of the wrapper div
}
This event fires when drag is ended.
onClick oParam (object)
{
target: Dom element that targets the drag event
$e: jQuery object of the cell,
x: x coordinate,
y: y coordinate,
left: left position of the cell relative to the wrapper div,
top: top position of the cell relative to the wrapper div
}
This event fires when cell is clicked (not dragged).
onResize oParam (object)
{
containerWidth: control width in pixel
containerHeight: control height in pixel
cellWidth: width of cell
cellHeight: height of cell
wrapperLeft: Left position of the wrapper div
wrapperTop: Top position of the wrapper div
}
This event fires when content window is resized.