Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Scrollable Demo</title>
    <!-- JS -->
    <script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>
    <style type="text/css"> 
    #Container1,#Container2 {
        width: 237px;
        position: relative;
        background-color: #000;
        padding-top: 84px;
        padding-left: 19px;
        height: 402px;
        margin-top: 100px;
        float: left;
        margin-right: 20px;
    }
    #inner1,#inner2 {
        width: 220px;
        height: 330px;
        position: relative;
        overflow: hidden;
    }
    #inner1 .items,#inner2 .items {
        width: 6600px;
        height: 330px;
        position: absolute;
        clear: both;
    }
    #inner1 img,#inner2 img {
        width: 220px;
        height: 330px;
        float: left;
        background-color: #ddd;
    }
    a.browse {
        background: url(http://static.flowplayer.org/tools/img/scrollable/arrow/hori_large.png) no-repeat;
        display: block;
        width: 30px;
        height: 30px;
        cursor: pointer;
        font-size: 1px;
        top: -30px;
        position: absolute;
    }
    /* right */
    a.right {
        background-position: 0 -30px;
        right: 0;
    }
    a.right:hover {
        background-position: -30px -30px;
    }
    a.right:active {
        background-position: -60px -30px;
    }
    /* left */
    a.left {
        left: 0px;
    }
    a.left:hover {
        background-position: -30px 0;
    }
    a.left:active {
        background-position: -60px 0;
    }
    /* up and down */
    a.up, a.down {
        background: url(http://static.flowplayer.org/tools/img/scrollable/arrow/vert_large.png) no-repeat;
        float: none;
        margin: 10px 50px;
    }
    /* up */
    a.up:hover {
        background-position: -30px 0;
    }
    a.up:active {
        background-position: -60px 0;
    }
    /* down */
    a.down {
        background-position: 0 -30px;
    }
    a.down:hover {
        background-position: -30px -30px;
    }
    a.down:active {
        background-position: -60px -30px;
    }
    /* disabled navigational button */
    a.disabled {
        visibility: hidden !important;
    }
    .navi {
        height: 20px;
        position: absolute;
        top: -21px;
        width: 70px;
        left: 94px;
    }
    /* items inside navigator */
    .navi a {
        width: 8px;
        height: 8px;
        float: left;
        margin: 3px;
        background: url(http://static.flowplayer.org/tools/img/scrollable/arrow/navigator.png) 0 0 no-repeat;
        font-size: 1px;
    }
    /* mouseover state */
    .navi a:hover {
        background-position: 0 -8px;
    }
    /* active state (current page state) */
    .navi a.active {
        background-position: 0 -16px;
    }
    </style>
</head>
  
<body>
<p><a href="#" id="rotateLeft" >Rotate Left (-45 degrees)</a></p>
<p><a href="#" id="rotateToOrigin" >Rotate back to Origin (0 degrees)</a></p>
​
    <div id="Container1" class="fl">
        <div class="navi"></div>
        <div id="inner1" class="scrollable">
            <div class="items">
                <img src="images/IMG_0005b.PNG" alt="IMG_0005" width="220"/>
                <img src="images/IMG_0086.PNG" alt="IMG_0086" width="220"/>
                <img src="images/IMG_0089.PNG" alt="IMG_0089" width="220"/>
                <img src="images/IMG_0086.PNG" alt="IMG_0086" width="220"/>
                <img src="images/IMG_0089.PNG" alt="IMG_0089" width="220"/>
            </div><!-- / .items -->
        </div><!-- / #inner1.scrollable -->
        <a class="prev browse left"></a>
        <a class="next browse right"></a>
    </div><!-- / #Container1 -->
    
    <div id="Container2" class="fl">
        <div class="navi"></div>
        <div id="inner2" class="scrollable">
            <div class="items">
                <img src="images/IMG_0005b.PNG" alt="IMG_0005" width="220"/>
                <img src="images/IMG_0086.PNG" alt="IMG_0086" width="220"/>
                <img src="images/IMG_0089.PNG" alt="IMG_0089" width="220"/>
                <img src="images/IMG_0086.PNG" alt="IMG_0086" width="220"/>
                <img src="images/IMG_0089.PNG" alt="IMG_0089" width="220"/>
            </div><!-- / .items -->
        </div><!-- / #inner2.scrollable -->
        <a class="prev browse left"></a>
        <a class="next browse right"></a>
    </div><!-- / #Container2 -->
</body>
</html>
​
 
//jQuery Scrollable
$(document).ready(function(){       
    //Scrollable - Horizontal App Screenshots
        $("#inner1, #inner2").scrollable({
            size: 1
        }).navigator().mousewheel();
});
​
//Raphael Code
var src = document.getElementById("latestWrapper").src,angle = 0;
var rotateLeft = document.getElementById("rotateLeft").src,angle = 0;
rotateLeft.click(function () {
                    angle -= -90;
                    src.animate({rotation: angle}, 1000, "<>");
                });
var rotateToOrigin = document.getElementById("rotateToOrigin").src,angle = 0;
rotateToOrigin.click(function () {
                    angle -= 0;
                    src.animate({rotation: angle}, 1000, "<>");
                });
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers