Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
   <head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
     
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
      <link rel="stylesheet" href="http://jautochecklist.googlecode.com/svn/src/css/jAutochecklist.css" />
   
      <script src="http://jautochecklist.googlecode.com/svn/src/js/jAutochecklist.js"></script>
      <script>
         $(function(){
            $('.list').jAutochecklist();
            $('.list2').jAutochecklist({
               absolutePosition: true
            });
            var dialog = $('#dialog').dialog({
               autoOpen: false,
               height: 300,
               modal: true,
               buttons: {
                    Close: function(){
                        $(this).dialog('close');
                    }
               }
            });
            $('#open_dialog').click(function(){
               dialog.dialog('open');
            });
          
         });
      </script>
   </head>
   <body>
      <!-- Button to trigger modal -->
      <button id="open_dialog" class="btn">jQuery dialog</button>
      <!-- Modal -->
      
      <div id="dialog">
         <input value="prevent jquery-ui autofocus bug" style="width:250px" />
         <div>
            List normal
            <select class="list">
               <option>Item</option>
               <option>Item</option>
               <option>Item</option>
               <option>Item</option>
               <option>Item</option>
               <option>Item</option>
               <option>Item</option>
               <option>Item</option>
               <option>Item</option>
               <option>Item</option>
               <option>Item</option>
               <option>Item</option>
               <option>Item</option>
            </select>
         </div>
         <br/>
         <div>
            List uses absolute position
            <select class="list2">
               <option>Item</option>
               <option>Item</option>
               <option>Item</option>
               <option>Item</option>
               <option>Item</option>
               <option>Item</option>
               <option>Item</option>
               <option>Item</option>
               <option>Item</option>
               <option>Item</option>
               <option>Item</option>
               <option>Item</option>
               <option>Item</option>
            </select>
         </div>
      </div>
   </body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers