mooElementScroller 0.0.2

Allows you to convert (wrap) an element to make it scrollable. Automatically inserts a scroll-area and up/down scroll elements.



Details

Author
Alex Hofbauer
Current version
0.0.2
GitHub
aleho/mootools-ElementScroller
Downloads
4188
Category
Interface
Tags
Report
GitHub Issues

Releases


Dependencies

  • core/1.2.4:
    • Class
    • Class.Extras
    • Element.Dimensions
    • Event

How to use

Javascript:

var myScroller = new mooElementScroller('element', {
    resize: {
        enabled: true,
        offset: 180
    },
    slow: 2
});

Stylesheet:

#somelist-mes-wrapper {
    height: 100px;
    overflow: hidden;
    border: 1px solid black;
}

#somelist {
    list-style: none;
    padding-right: 100px;
}

#somelist li {
    padding: 10px;
    margin: 20px 0px;
    border: 1px solid gray;
    background-color: lightgreen;
}

.mes-scrollarea {
    position: fixed;
    top: 50%;
    margin-top: -58px;
    height: 156px;
    right: 20px;
    z-index: 3;
}

.mes-up, .mes-down {
    height: 48px;
    width: 51px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-color: transparent;
}

.mes-up {
    background-image: url('go-up.png');
    background-position: top left;
    margin-bottom: 60px;
}

.mes-down {
    background-image: url('go-down.png');
    background-position: bottom left;
}

HTML:

<ul id="somelist">
    <li>One</li>
    <li>Two</li>

    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
</ul>

Options

The plugin uses a modifier internally that controlls the scroll speed.

  • slow: Default: 5. MouseOver speed.
  • fast: Default: 25. MouseDown speed.
  • scrollSpeed: Default: 30. Pixels to move with each scroll event.

The resize hash controlls whether the wrapping element should be resized if the page is resized. Offset will be substracted from the maxmimum width available.

  • resize: Default: { enabled: false, offset: 0 }.

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus