BidsHideShow

Click the buttons to hide or show the list items. Test works fine in firefox. But extremely slow in google chrome.

by oumichaelm

HTML

<script src="http://logapedia.com/css/jquery/vader/jquery-ui-1.8.custom.css&quot;"></script>
<!DOCTYPE HTML>
    
    <head>

    <title>Logapedia-Bidding Program with Sidebar</title>
    <link rel = "stylesheet" type = "text/css" href = "css/jquery/vader/jquery-ui-1.8.custom.css" /> 
    
    <link rel = "stylesheet" type="text/css" href="css/bidsortable-ajax.css" />
    
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
$(document).ready( function() { 
    $('#hide').click( function() {
        $('#timer').text("Hiding");
        
        $('#sortable-lines').hide();
        
    });

    $('#show').click( function() {
        $('#timer').text("Showing");
        
        $('#sortable-lines').show();
        
    });


});


</script>

</head>
<body>
<div id='sideBar'> 
    <p><button type="button" id="hide" >Hide </button> </p>
    <button type="button" id="show" >Show</button> 
    <p id="timer" ></p>
</div>
 <div id='linecontainer' class='ui-widget'> 
        <ul id='sortable-lines' class='ui-widget-content'>


<li id='line_401' class='line' lineNumber='401' data-wends='4' data-lineList='unassigned'><div id='lineHeader' class='ui-widget-header ui-helper-clearfix' > <input type='checkbox' id='targetLine' name='checked_Lines[]' value='401'/>    
     <div class='star-rating'>
      
         <input type='radio' name='newrate' value='1' title='Very poor' />
         <input type='radio' name='newrate' value='2' title='Poor' />
         <input type='radio' name='newrate' value='3' title='Not that bad' />
         <input type='radio' name='newrate' value='4' title='Fair' />
         <input type='radio' name='newrate' value='5' title='Average'  />
         <input type='radio' name='newrate' value='6' title='Almost good' />
         <input type='radio' name='newrate' value='7' title='Good' />

         <input type='radio'...

CSS

* { margin: 0;
        padding: 0;}
        body {    font-family:"Arial","Helvetica","Verdana","sans-serif";
                    font-size:10px;
                    min-width: 1200px;
                }
    p { font-size: 15px; font-family: arial; margin: 5px;}
    h1, h2, h3, h4 { margin: 1px auto 1px;}
    
    td { padding: 0 30px 0; border-right: 1px solid; border-left: 1px solid;}

    .full {width: 78%; margin: auto}
    .wide {width: 95%; margin: auto}
    
    #lookup { padding-top: 65px;
              margin-bottom: 10px;
             }
             
    table { border-top: 1px solid black;}
    #lookup ul {display: inline;}
    /*
    pre {border-bottom: 3px solid black;
         border-top: 3px solid black;
         padding: 3px;
         margin: -1px;
         }
    
    */
    ul {list-style-type: none;
        margin: 0px;}
    
                    
    li.line {
        /*cursor: row-resize*/
        /*cursor: -moz-grab;*/
        white-space: pre;
        font-family: monospace;
        
        border: 2px solid gray;
        padding: 3px;
        margin: 3px;
        }
    
    .topFiller {
                /*background-color: #999C9E;*/
                background-image: url(images/bid-bkgrd-1.png);
                 height: 110px;
                 width: 100%;
                 }
    /* #filemneu is in puremenu.css */
    
    #statusbar {
                margin: 5px auto;
                height: 50px;
                width: 40%;
                overflow: hidden;
                float: left;
                background-color: #E9ECD1;
                text-align: center;
                -moz-border-radius: 25px;
                -webkit-border-radius: 25px;
                
                }
    .normal { display: inline;
                margin: 0;
                padding: 0;
    }
    .squarebutton { width: 50px; height: 50px; float: left;}
    #leftcontrols { width: 25%; float: left; padding: 0; margin: 15px;}
    #rightcontrols {width: 25%; float:...

JavaScript

$(document).ready( function() { 
    $('#hide').click( function() {
        $('#timer').text("Hiding");
        
        $('#sortable-lines').hide();
        
    });

    $('#show').click( function() {
        $('#timer').text("Showing");
        
        $('#sortable-lines').show();
        
    });


});