Problem rotating image with jQuery Rotate plugin

Question

I want to rotate my logo in my website so I'm using a rotate plugin and it's working. But the content below the image is moving up and down as the image rotates.

Please suggest how I can correct it.

Please see my page here: http://www.netelity.com/rotate

Here is my complete code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="../../../Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="jquery.rotate.1-1.js"></script>
<script type="text/javascript">
//<![CDATA[
    var angle = 8;

    $(document).ready(function() {
        setInterval(function() {
                $("#pic").rotate(angle);
                /* angle += 1; Increases the rotating speed */
        }, 100);
    });
//]]>
</script>

</head>

<body>
<table width="1000" border="0" cellspacing="0" cellpadding="0" align="center" class="main_tab" height="636">
  <tr>
    <td height="58" valign="top"><table width="800" border="0" cellspacing="1" cellpadding="0" align="center" class="table">
  <tr>
    <td height="56">&nbsp;</td>
  </tr>
</table>
</td>
  </tr>
  <tr>
    <td height="21" valign="top" class="bg_menu"><table width="800" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
    <td width="32">&nbsp;</td>
    <td width="171" class="menu">MNIH Events & Designs</td>
    <td width="101" class="menu">About Us</td>
    <td width="143" class="menu">Event Management</td>
    <td width="106" class="menu">Our Services</td>
    <td width="130" class="menu">Themed Events</td>
    <td width="92" class="menu">Contact Us</td>
    <td width="16">&nbsp;</td>
  </tr>
</table>
</td>
  </tr>
  <tr>
    <td valign="top"><table width="100%" border="0" cellspacing="1" cellpadding="0" class="image1">
      <tr>
        <td width="35%"><table width="100%" border="0" cellspacing="1" cellpadding="0">
          <tr>
            <td width="14%">&nbsp;</td>
            <td width="22%"><img src="images/logo1.png" width="140" height="154" name="pic" id="pic" /></td>
            <td width="64%">&nbsp;</td>
          </tr>
        </table></td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td valign="top" class="bg_menu"><table width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr>
        <td width="33%">&nbsp;</td>
        <td width="42%">&nbsp;</td>
        <td width="25%" class="menu">LMIH Events &amp; Designs</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td valign="top"><table width="800" border="0" align="center" cellpadding="0" cellspacing="1" class="table" height="300">
      <tr>
        <td><object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="300">
          <param name="movie" value="text_site.swf" />
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="8.0.35.0" />
          <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
          <param name="expressinstall" value="../../../Scripts/expressInstall.swf" />
          <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
          <!--[if !IE]>-->
          <object type="application/x-shockwave-flash" data="text_site.swf" width="800" height="300">
            <!--<![endif]-->
            <param name="quality" value="high" />
            <param name="wmode" value="opaque" />
            <param name="swfversion" value="8.0.35.0" />
            <param name="expressinstall" value="../../../Scripts/expressInstall.swf" />
            <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
            <div>
              <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
              <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
            </div>
            <!--[if !IE]>-->
          </object>
          <!--<![endif]-->
        </object></td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td valign="top" class="bg_menu"><table width="800" border="0" align="right" cellpadding="0" cellspacing="1">
      <tr>
        <td width="6">&nbsp;</td>
        <td width="144" class="menu">LMIH Events & Designs</td>
        <td width="71" class="menu"><b class="g"> | </b>About Us</td>
        <td width="131" class="menu"><b class="g"> | </b>Event Management</td>
        <td width="92" class="menu"><b class="g"> | </b>Our Services</td>
        <td width="106" class="menu"><b class="g"> | </b>Themed Events</td>
        <td width="115" class="menu"><b class="g"> | </b>Contact Us</td>
        <td width="126">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><br />
    <br /></td>
  </tr>
</table>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>

As suggested in an answer below, the fix is simple. Place the logo inside a container <div> with specified dimensions large enough to accommodate the rotation. — Sparky
– Sparky, Commented Sep 7, 2011 at 16:30

Graeme Leighfield · Accepted Answer · 2011-09-07 16:17:50Z

2

Personally, I would make a div and give it a set width and height, and place that image inside it, then, the container div wont be able to adjust size due to the styled height and width...

answered Sep 7, 2011 at 16:17

Graeme Leighfield

3,0954 gold badges29 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark Olson · Accepted Answer · 2011-09-07 16:25:45Z

1

Your image is 173px by 199px, which means that the diagonal is ~264px. The containing table cell will grow and shrink to hug the image, which means that it starts out at 173px, goes up to 264px, and then back to 173px.

You can either set the height of the container to 264px to prevent the contents below it from shifting, or you can edit the plugin to shrink the image as it rotates so that it keeps the same height. Of course, resizing the td means that you need to redo the background image too..

<td width="35%" height="265px"><table width="100%" border="0" cellspacing="1" cellpadding="0">

answered Sep 7, 2011 at 16:25

Mark Olson

613 bronze badges

2 Comments

priya Over a year ago

i have changed the height, it is working but if i want keep height ="199px" then where i should change? please tell me. in plugin what exactly i should change?

Mark Olson Over a year ago

If you can live with how it looks, I would comment out the lines in jquery.rotate.1-1 that have canvas.style.width = canvas.width = Math.abs(... and canvas.style.height = canvas.height = Math.abs(... at the beginning. Otherwise, I think that opening another question asking for help with how to correctly scale and rotate the image would be best. It's a bit outside of what I'm able to answer.

Muhammad Usman · Accepted Answer · 2011-09-07 16:31:46Z

0

Use a fixed height(larger than logo) in your logo container tr (as you are using table). Edited code is below

<tr style="height: 500px;">
            <td width="14%">&nbsp;</td>
            <td width="22%"><canvas width="226" height="204" id="pic"></canvas></td>
            <td width="64%">&nbsp;</td>
</tr>

I have added height as above with Chrome Developer's Tool and it seems to be okay.

edited Sep 7, 2011 at 16:31

answered Sep 7, 2011 at 16:23

Muhammad Usman

12.5k6 gold badges38 silver badges60 bronze badges

4 Comments

priya Over a year ago

where i should insert image in this.

Muhammad Usman Over a year ago

Keep the code as it is, just replace the containing <tr> with <tr style="height: YOUR-HEIGHTpx;">

priya Over a year ago

if i do this, i have same problem :(. I just want that my header should be 199px, for that what i need to do please suggest me :(

Muhammad Usman Over a year ago

I have checked when the logo rotates the height increases to 263px, so you have to provide at least 263px height or you have to decrease the logo size so it stays within 199px from both corner

Collectives™ on Stack Overflow

Problem rotating image with jQuery Rotate plugin

3 Answers 3

Comments

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related