jQuery Forum

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>
   

Hey all, my first post, yay!

I have a jquery dialog window that pops up with a form:

1. <!--- FORM STARTS HERE --->
           <div id="dialog" title="Send Request Form">
               <p id="validateTips">All form fields are required.</p>
               <div id="contact_form">
               <form id="request" method="post" action="#CGI.SCRIPT_NAME#" enctype="multipart/form-data" class="yform columnar">
                   <fieldset>
                       <label for="name">Name</label>
                       <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
                       <label for="email">Email</label>
                       <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
                       <label for="cell">cell</label>
                       <input type="cell" name="cell" id="cell" value="" class="text ui-widget-content ui-corner-all" />
                       <input type="submit" name="sendBTN" value="submit" class="contact_button">
                   </fieldset>
               </form>
               </div>
           </div>
           <!--- REQUEST BUTTON HERE --->
   <button id="create-user" class="ui-button ui-state-default ui-corner-all">Request this item</button>
   </div>

 Then I have the script that I got from the demo on the jquery website:

1. $("#dialog").dialog({
               bgiframe: true,
               autoOpen: false,
               height: 600,
               width: 500,
               modal: true,
               buttons: {
                   'Send Request': function() {
                       var bValid = true;
                       allFields.removeClass('ui-state-error');
   
                       bValid = bValid && checkLength(name,"username",3,16);
                       bValid = bValid && checkLength(email,"email",6,80);
                       bValid = bValid && checkLength(cell,"cell",5,16);
    
                       if (bValid) {
                           $("form").submit(); I DONT KNOW WHAT GOES HERE TO SEND MY FORM :(
                           
                           
                           //$(this).dialog('close');
                       }
                   },
                   Cancel: function() {
                       $(this).dialog('close');
                   }
               },
               close: function() {
                   allFields.val('').removeClass('ui-state-error');
               }
           });
   

Im really stuck, I've google for hours.
The form submits perfectly if I use the submit button (Pictured)

Can I make it so if someone clicks the "send request" button, it does the validation, then clicks the "submit" button?