wmh/jquery-scrollbox

Default actions and backward button not working

Closed this issue · 0 comments

Oppfields commented

Hi,

I have a simple set up using query-scrollbox but for some reason I can't get the default behaviours to work; also the forward button works but not the backwards button.

Here's the code:

HTML:


<head>
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="/lib/js/jquery.scrollbox.js"></script>
</head>

<div id="video-bar">
    <div id="scrollbox">
        <ul>
            <li>[content]</li>
            <li>[content]</li>
            <li>[content]</li>
            <li>[content]</li>
            <li>[content]</li>
        </ul>
    </div>
    <div id="video-bar-control">
        <div id="scrollup" class="up-btn"></div>
        <div id="scrolldown" class="down-btn"></div>
    </div>
</div>

<script>

    $(function () {

        // Home page video thumb scroll
        $('#scrollbox').scrollbox({
            //distance: 156
        });

        // Scroll btn down (backward)
        $('#scrolldown').click(function () {
            $('#scrollbox').trigger('backward');
        });

        // Scroll btn up (forward)
        $('#scrollup').click(function () {
            $('#scrollbox').trigger('forward');
        });

    });

</script>

CSS:

/* ----- Banner Home - Video list ----- */
#video-bar { position: absolute; top: 0; right: 2px; overflow: hidden; width: 235px; height: 393px; } 
#video-bar ul { list-style: none; width: 235px; padding: 0; margin: 0; }  
#video-bar li { height: 156px; background: #e8f2f3; }

The development site can be found here: http://sandbox.productionarea.com/