CODEWITHSUNDEEP
javascriptjquery
Steven Tilling
Steven Tilling

Reputation: 13

Jquery problem with a table (.animate)

I want a minimize table button for my website so I was just messing around with some Jquery and i'm wondering why after the button is clicked (and it reduced its size) it grows back to the default size? -Once the .animate has finished?

http://zombiewrath.com/maintest2.php

-Try it there,

Code:

<html>
<head>
<style type="text/css">
#tablemin { 
  height:inherit;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<input type="button" value="Click Here" onClick="dostuff();">
<div id="tablemin">
<table bordercolor="#0000FF" width="670" border="1">
        <tr>
          <td class="style5" width="400" valign="top" style="width: 300px"><b><u>Personal Feed: </u></b><br>
          </td>
          <td class="style5" width="355" valign="top"><u><strong>Live Feed:</strong> </u><br>
              <div id="ReloadTime3" style="width: 350px">  
</div></td>
        </tr>
        <tr>
          <td class="style5" valign="top" colspan="3" style="width: 488px"><b><u>Local news for Zone B-4...</u></b></td></tr>
      </table>
</div>
<script type="text/javascript">
function dostuff() {
$("#tablemin").animate({ 
    //opacity: "0.4",
    height: "50px"
    }, 1000 );

}
//$(document.body).click(function () {
//$('#tablemin').animate({height:'1px'}, 'slow');
//$('#tablemin').fadeOut(1);
//}); 
</script>
Hi
</body></html>

Thanks alot,

Upvotes: 1

Views: 904

Answers (4)

Amit Soni
Amit Soni

Reputation: 3316

Use following code for the animation: 

$("#tablemin").animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
}, 1500);

You might need to add 'toggle' in height.

<body>
    <input type="button" value="Click Here" id="btn" onclick="dostuff();">
    <div id="tablemin">
        <table bordercolor="#0000FF" width="670" border="1">
            <tr>
                <td class="style5" width="400" valign="top" style="width: 300px">
                    <b><u>Personal Feed: </u></b>
                    <br>
                </td>
                <td class="style5" width="355" valign="top">
                    <u><strong>Live Feed:</strong> </u>
                    <br>
                    <div id="ReloadTime3" style="width: 350px">
                    </div>
                </td>
            </tr>
            <tr>
                <td class="style5" valign="top" colspan="3" style="width: 488px">
                    <b><u>Local news for Zone B-4...</u></b>
                </td>
            </tr>
        </table>
    </div>

    <script type="text/javascript">

        $("#btn").click(function() {
            $("#tablemin").animate({
                opacity: 0.25,
                left: '+=50',
                height: 'toggle'

            }, 1500);
        });

    </script>
</body>

As for the flicker problem, you might be able to find a solution with this link.

Upvotes: 0

Reigel Gallarde
Reigel Gallarde

Reputation: 65264

why after the button is clicked (and it reduced its size) it grows back to the default size?

with your current code, do this,

<style type="text/css">
#tablemin { 
  height:inherit;
  overflow: hidden;
}
</style>

Upvotes: 1

Dr.Molle
Dr.Molle

Reputation: 117324

Try giving #tablemin the style overflow:hidden

Upvotes: 0

Tgr
Tgr

Reputation: 28160

It does not grow back (in FF3.6 at least), the table just overflows it.

Upvotes: 0

Related Questions