Please unsubscribe me from your mailing listy. Thank you.
On Fri, Nov 13, 2009 at 7:31 AM, The alMIGHTY N <natle...@yahoo.com> wrote:
> I have a page with a DIV at the top that is shown and hidden with the
> jQueryUI show and hide effects. Underneath it is a TABLE whose
> vertical position shifts up and down depending on whether the DIV is
> shown or hidden.
> In Internet Explorer 7, when the hide animation is just about done,
> the TABLE suddenly shifts to a vertical position even lower than when
> the DIV is shown but only for a split second after which it returns
> to
> the spot where it should be. This happens no matter what speed I
> assign to the effect.
> In Firefox 3, when the show animation is in progress, a "memory" of
> the TABLE remains within the DIV even as the TABLE itself is visibly
> shifting downwards on the page. This only seems to happen when the
> table has a lot of row/columns *and* a decent amount of styling
> (background colors, padding, alignment, etc.) - if I use a table with
> no styling and/or few columns and rows, this behavior doesn't
> manifest. It also only happens the first time the show effect occurs.
> I've included the complete HTML/JavaScript/CSS below. Thanks for any
> help! I need it badly because the real page on which this example is
> based is one part of my attempt to convince the company that we
> should
> use jQuery.
> <html>
> <head>
> <link rel="stylesheet" type="text/css" href="http://
> ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/
> jquery-
> ui.css"/>
> <style type="text/css">
> body { font-family: Calibri, Arial, Helvetica,
> sans-serif; }
> .data { margin-top: 5px; }
> .data td { padding: 3px 5px; font-size:
> 10pt; }
> .data th { padding: 3px 5px; background-color:
> #003399; font-size:
> 8pt; color: #ffffff; }
> </style>
> <script type="text/javascript" src="http://
> ajax.googleapis.com/
> ajax/libs/jquery/1.3.2/jquery.min.js<http://ajax.googleapis.com/%0Aajax/libs/jquery/1.3.2/jquery.min.js>
> "></script>
> <script type="text/javascript" src="http://
> ajax.googleapis.com/
> ajax/libs/jqueryui/1.7.2/jquery-ui.min.js<http://ajax.googleapis.com/%0Aajax/libs/jqueryui/1.7.2/jquery-ui.min.js>
> "></script>
> <script type="text/javascript">
> $(document).ready(function() {
> $("#toggler").toggle(function() {
> $("#hiddenInPlainSight").show
> ("fast");
> }, function() {
> $("#hiddenInPlainSight").hide
> ("fast");
> });
> });
> </script>
> </head>
> <body>
> <a id="toggler" href="#">Show</a>
> <div id="hiddenInPlainSight" style="display: none;">
> <div><select size="1"><option>A</option><option>B</
> option><option>C</option><option>D</option></select></div>
> <div style="width: 400px; height: 141px; border: solid
> 1px
> #cccccc; padding: 5px; overflow: auto;">Nothing for right now.</div>
> <input type="button" value="OK"/><input type="button"
> value="Cancel"/>
> </div>
> <div style="margin-top: 10px;"><input type="text"/> to <input
> type="text"/></div>
> <table class="data" border="0" cellpadding="0"
> cellspacing="0">
> <tbody>
> <tr>
> <th>Name</th>
> <th>ID</th>
> <th>My Opinion</th>
> <th>Your Opinion</th>
> <th>Original Quantity</th>
> <th>Original Price</th>
> <th>Discounted Quantity</th>
> <th>Discounted Price</th>
> <th>Bulk Quantity</th>
> <th>Bulk Price</th>
> </tr>
> <tr>
> <td>A</td>
> <td>1</td>
> <td>Blah blah blah blah blah</td>
> <td>Yadda yadda yadda yadda yadda</td>
> <td>123</td>
> <td>$9.99</td>
> <td>123</td>
> <td>$9.99</td>
> <td>123</td>
> <td>$9.99</td>
> </tr>
> <tr style="background-color: #cccccc;">
> <td>B</td>
> <td>2</td>
> <td>Blah blah blah blah blah</td>
> <td>Yadda yadda yadda yadda yadda</td>
> <td>123</td>
> <td>$9.99</td>
> <td>123</td>
> <td>$9.99</td>
> <td>123</td>
> <td>$9.99</td>
> </tr>
> <tr>
> <td>C</td>
> <td>3</td>
> <td>Blah blah blah blah blah</td>
> <td>Yadda yadda yadda yadda yadda</td>
> <td>123</td>
> <td>$9.99</td>
> <td>123</td>
> <td>$9.99</td>
> <td>123</td>
> <td>$9.99</td>
> </tr>
> <tr style="background-color: #cccccc;">
> <td>D</td>
> <td>4</td>
> <td>Blah blah blah blah blah</td>
> <td>Yadda yadda yadda yadda yadda</td>
> <td>123</td>
> <td>$9.99</td>
> <td>123</td>
> <td>$9.99</td>
> <td>123</td>
> <td>$9.99</td>
> </tr>
> <tr>
> <td>E</td>
> <td>5</td>
> <td>Blah blah blah blah blah</td>
> <td>Yadda yadda yadda yadda yadda</td>
> <td>123</td>
> <td>$9.99</td>
> <td>123</td>
> <td>$9.99</td>
> <td>123</td>
> <td>$9.99</td>
> </tr>
> <tr style="background-color: #cccccc;">
> <td>F</td>
> <td>6</td>
> <td>Blah blah blah blah blah</td>
> <td>Yadda yadda yadda yadda yadda</td>
> <td>123</td>
> <td>$9.99</td>
> <td>123</td>
> <td>$9.99</td>
> <td>123</td>
> <td>$9.99</td>
> </tr>
> </tbody>
> </table>
> </body>
> </html>
>
