• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1385
  • Last Modified:

table animation

A table inside a div. when the page loads i want the table to slide smoothly from right to left by 60px with noticeable animation.i am using jquery. pl help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
  <script language="JavaScript">
   function slide1()
   {
         $('#m').animate({
                marginRight: "60px",
                width: 740
                }, 500);
        }
        window.onload = function(){slide1();}
  </script>
 </head>
 <body>
	<div id="m" style="width:800px">
		<table width="800" cellspacing="0" cellpadding="2" border="1" bgcolor="#99CCFF">
			<tr>
				<td width="150" align="center">fdsfdsafas</td>
				<td width="150" align="center">fdsfdsafas</td>
				<td width="150" align="center">fdsfdsafas</td>
				<td width="150" align="center">fdsfdsafas</td>
				<td width="150" align="center">fdsfdsafas</td>
			</tr>
		</table>
	</div>
 </body>
</html>

Open in new window

0
vidhubala
Asked:
vidhubala
  • 2
  • 2
1 Solution
 
Albert Van HalenAnalyst developerCommented:
The problem is that the width of the table is set to 800px.
Remove it (and alternatively set its style width to 100%)

PS window.onload can be replaced with jquery a well : $(function() { slide1(); });
0
 
vidhubalaAuthor Commented:
did not help. the table stays as it is. i cannot make it to 100%. it needs to be 800.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
  <script language="JavaScript">
   function slide1()
   {
         $('#m').animate({
                scrollLeft: "60px",
                width: 800
                }, 500);
        }
        window.onload = function(){slide1();}
  </script>
 </head>
 <body>
        <div id="m" style="width:800px;margin-left:60px">
                <table width="800" cellspacing="0" cellpadding="2" border="1" bgcolor="#99CCFF">
                        <tr>
                                <td width="150" align="center">fdsfdsafas</td>
                                <td width="150" align="center">fdsfdsafas</td>
                                <td width="150" align="center">fdsfdsafas</td>
                                <td width="150" align="center">fdsfdsafas</td>
                                <td width="150" align="center">fdsfdsafas</td>
                        </tr>
                </table>
        </div>
 </body>
</html>

Open in new window

0
 
Albert Van HalenAnalyst developerCommented:
Ok, if the table needs to be 800px, you can put leftmargin to -60px on the table. (The table however won't fit in your if you don't specify padding or margin and 60 pixels at the beginning will be cut off)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script language="JavaScript">
    function slide1()
    {
      $('#m table').animate({ marginLeft: "-60px" }, 500);
    }
    $(function() { slide1(); });
    </script>
  </head>
  <body>
    <div id="m" style="width:800px">
      <table width="800px" cellspacing="0" cellpadding="2" border="1" bgcolor="#99CCFF">
        <tr>
          <td width="150" align="center">fdsfdsafas</td>
          <td width="150" align="center">fdsfdsafas</td>
          <td width="150" align="center">fdsfdsafas</td>
          <td width="150" align="center">fdsfdsafas</td>
          <td width="150" align="center">fdsfdsafas</td>
        </tr>
      </table>
    </div>
  </body>
</html>

Open in new window

0
 
VallerianiCommented:
In IE that coding seemed to cut off in IE7, so I used padding-left and it seems to work good!
Vaules you see that you can set:

marginLeft: -300px, padding-left: 300px
Basicly here, how far you want it to scroll. for padding-left use the positive value, and marginLeft, use negative, so if 300px is to much you can change them to
marginLeft: -100px, padding-left: 100px for example.

If it is too slow, adjust the 1000 to be less of a value to decrease time (500 for example), or increased for a longer pan. If you use a smaller marginLeft/padding-left, you will prob end up changing the value to be faster.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script language="JavaScript">
    function slide1()
    {
      $('#m table').animate({ marginLeft: "-300px" }, 1000);
    }
    $(function() { slide1(); });
    </script>
  </head>
  <body>
    <div id="m" style="width:800px;padding-left:300px">
      <table width="800px" cellspacing="0" cellpadding="2" border="1" bgcolor="#99CCFF">
        <tr>
          <td width="150" align="center">fdsfdsafas</td>
          <td width="150" align="center">fdsfdsafas</td>
          <td width="150" align="center">fdsfdsafas</td>
          <td width="150" align="center">fdsfdsafas</td>
          <td width="150" align="center">fdsfdsafas</td>
        </tr>
      </table>
    </div>
  </body>
</html>

Open in new window

0
 
vidhubalaAuthor Commented:
great idea. thanks.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now