Please help a noob make the vertical slider scroll divs.

Please help a noob make the vertical slider scroll divs.

The vertical demo demonstrates a volume control thingy, I want it to scroll content vertically.
I cant find a demo anywhere on the web :(

I have tried making the side scroll demo scroll vertically but I just broke the whole thing.
The following lines of code is the original code from the side scroll demo.

Could someone please help or point me in the right direction to change this code to make it scroll vertical.

I have a good grasp of css but with jquery im clueless.


  1. <style type="text/css">
            #demo-frame > div.demo { padding: 10px !important; }
            .scroll-pane { overflow: auto; width: 99%; float:left; }
            .scroll-content { width: 2440px; float: left; }
            .scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; }
            * html .scroll-content-item { display: inline; } /* IE6 float double margin bug */
            .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; }
            .scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto;  }
            .scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }
            .scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; }
            .scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; }
        </style>
        <script type="text/javascript">
        $(function() {
            //scrollpane parts
            var scrollPane = $('.scroll-pane');
            var scrollContent = $('.scroll-content');
           
            //build slider
            var scrollbar = $(".scroll-bar").slider({
                slide:function(e, ui){
                    if( scrollContent.width() > scrollPane.width() ){ scrollContent.css('margin-left', Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() )) + 'px'); }
                    else { scrollContent.css('margin-left', 0); }
                }
            });
           
            //append icon to handle
            var handleHelper = scrollbar.find('.ui-slider-handle')
            .mousedown(function(){
                scrollbar.width( handleHelper.width() );
            })
            .mouseup(function(){
                scrollbar.width( '100%' );
            })
            .append('<span class="ui-icon ui-icon-grip-dotted-vertical"></span>')
            .wrap('<div class="ui-handle-helper-parent"></div>').parent();
           
            //change overflow to hidden now that slider handles the scrolling
            scrollPane.css('overflow','hidden');
           
            //size scrollbar and handle proportionally to scroll distance
            function sizeScrollbar(){
                var remainder = scrollContent.width() - scrollPane.width();
                var proportion = remainder / scrollContent.width();
                var handleSize = scrollPane.width() - (proportion * scrollPane.width());
                scrollbar.find('.ui-slider-handle').css({
                    width: handleSize,
                    'margin-left': -handleSize/2
                });
                handleHelper.width('').width( scrollbar.width() - handleSize);
            }
           
            //reset slider value based on scroll content position
            function resetValue(){
                var remainder = scrollPane.width() - scrollContent.width();
                var leftVal = scrollContent.css('margin-left') == 'auto' ? 0 : parseInt(scrollContent.css('margin-left'));
                var percentage = Math.round(leftVal / remainder * 100);
                scrollbar.slider("value", percentage);
            }
            //if the slider is 100% and window gets larger, reveal content
            function reflowContent(){
                    var showing = scrollContent.width() + parseInt( scrollContent.css('margin-left') );
                    var gap = scrollPane.width() - showing;
                    if(gap > 0){
                        scrollContent.css('margin-left', parseInt( scrollContent.css('margin-left') ) + gap);
                    }
            }
           
            //change handle position on window resize
            $(window)
            .resize(function(){
                    resetValue();
                    sizeScrollbar();
                    reflowContent();
            });
            //init scrollbar size
            setTimeout(sizeScrollbar,10);//safari wants a timeout
        });
        </script>