Giter Club home page Giter Club logo

slidebox's Introduction

Slidebox

AngularJS Directive for horizontal scrolling

Horizontal scrolling on the web always seems better on paper than in practice. This is my attempt at a sane, user-friendly approach to that problem. Slidebox is friendly to both desktop computers and touch devices.

This will overlay two large buttons on either side of the content for scrolling left and right. Hover the mouse over a button to scroll in that direction; the closer to the edge the mouse goes, the faster the content scrolls. And the regular old scrollbar is still there for use. On a touch device, the content scrolls at a constant speed while one of the control buttons is pressed.

Live demo

http://codepen.io/keithjgrant/pen/vqnaA

To Use

All you need is js/slidebox.js, css/slidebox.css, and the images. Add those to your project and include the 'Slidebox' module. Everything else in this repository has to do with the demo and unit tests.

To view the demo, clone the repository into a local directory and open demo.html.

Markup example

    Your content here!
</slidebox>```

All attributes are optional.

**speed** -- Default value is 25.

**content-width** -- Width of the *inner* content.  May be specified in 
px, em, or any other standard CSS unit Alternately, you may specify the
width in your stylesheet by selecting either the "slidebox-content" class
or another class specified with the "content-class" attribute.

**content-class** -- Space-seperated class names to be applied to the
*inner* content div.

slidebox's People

Contributors

keithjgrant avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

slidebox's Issues

contents of a model are not updating after binding to the directive

I have a custom model inside the directive. On modifying the model the changes are not reflected when I use the directive.

<slidebox content-width="5000px" class="my-slidebox" content-class="my-slidebox-content">
     <div ng-repeat="item in customModel">
     </div>
</slidebox>

Is there any way to update the content inside the directive after loading it?

Test/support dynamic width

No idea how this will handle dynamically changing width of the contents yet. Test this out... the width will probably need a $watch.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.