I only posted to jQuery's Google Group. If you're receiving my post
via e-mail that means you are somehow subscribed to receive e-mail
digests of the posts here in which case you'll have to remove
yourself.
Sorry.
On Nov 13, 11:59 am, Dharshini Nathan <dharshini...@gmail.com> wrote:
> 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>
