jQuery animate() in IE

jcanker · October 14, 2010

The book I am using to learn jQuery uses the following code:

    $('p').animate({
        padding:'20px',
        borderBottom: '3px solid #8f8f8f',
        borderRight:  '3px solid #bfbfbf'
    }, 2000);

It is supposed to add a beveled border to each p element on the page, animated to change over 2 sec. This works fine in the latest release of Firefox, but in IE8, it ends up expanding the element horizontally until it bumps into a nav menu to the right, then moves itself down to be below the nav menu. Aside from that, in only draws the line to the bottom of the first p, not to the right, nor does it affect any other p element on the page.

Is there something I need to do in order to get this to work properly in IE, or is this just another example of the MS folks refusing to play in the sandbox with all the other girls and boys?

Here is the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>StarTrackr!</title>
  
  <link rel="stylesheet" href="css/base.css" type="text/css" media="screen" charset="utf-8" />  
  <script src="lib/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
  <script src="lib/jquery-ui-1.8.5" type="text/javascript" charset="utf-8"></script>

</head>
<body>
    <script type="text/javascript">
        $(document).ready(function(){
        //hide the javascript warning if they actually have javascript ability..
        $('#no-script').remove();
        
        //give the ability to toggle visibility to disclaimer and toggle button
            //putting button here will make it appear only for JS-enabled browsers
          $('<input type="button" id="toggleButton" value="Hide Disclaimer" />').insertAfter('#disclaimer');
              $('#toggleButton').click(function() {
              $('#disclaimer').toggle();  //give toggle capabilities to the disclaimer button
              if($('#disclaimer').is(':visible'))
              {
                  $(this).val('Hide Disclaimer');
              }
              else
              {
                  $(this).val('Show Disclaimer');
              }
            });
//This is the fadeout test button
        $('<input type="button" id="hideButton" value="Close Disclaimer" />').insertAfter('#toggleButton');
        $('#hideButton').click(function(){
            if($('#disclaimer').is(':visible'))
              {
                  $("#toggleButton").val("Show Disclaimer");
                  $(this).val("Open Disclaimer");
              }
              else
              {
                  $("#toggleButton").val("Hide Disclaimer");
                  $(this).val("Close Disclaimer");
              }
            $('#disclaimer').slideUp('slow');
            $('#hideButton, #toggleButton').fadeOut();

        });            

//make the table rows be striped
        $('#celebs tbody tr:even').addClass('zebra');
            
//Here is the hightlighting when hovering exercises
        $('#celebs tbody tr').hover(function() {
                $(this).addClass('zebraHover');
            }, function() {
                $(this).removeClass('zebraHover');            });


//Highlighting when clicking/selecting exercises
        $('#celebs tbody tr').click(function(){
            $(this).toggleClass('zebraClick');
        });

//try this as a substitute for the click/toggleClass:
/*        $('#celebs tbody tr').click(function() {
                alert("You clicked on a table row!");
                $(this).addClass('zebraHover');
            }, function() {
                $(this).removeClass('zebraHover');
            });            

*/
//This is the spoiler exercise:
    $('.spoiler').hide(); //here we use the spoiler css class to hide all of it--maybe ask the question as to why the class insitead of the ID
    $('<input type="button" class="revealer" value="Tell Me!"/>').insertBefore('.spoiler');    
    $('.revealer').click(function() {
        $(this).hide();
            $(this).next().fadeIn();
    });
/////////////////////////////////////////////////////
//  Chapter 3-animating and Scrolling
///////////////////////////////////////////////////
    $('p').animate({
        padding:'20px',
        borderBottom: '3px solid #8f8f8f',
        borderRight:  '3px solid #bfbfbf'
    }, 2000);    


    });    //end of document.ready function    

    </script>
  <div id="container">
    <div id="header">
        
      <h1>StarTrackr!</h1>
<!-- Give NO JAVASCRIPT warning for degraded browsers
-->      <p id="no-script">
            We recommend that you have JavaScript enabled to get the most out of our site
        </p>
    </div>
    <div id="content">
      <h2>
        Welcome!
      </h2>
      <div id="navigation">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Buy Now!</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Gift Ideas</a></li>
        </ul>
      </div>
      <p id="intro">
        Welcome to <strong>StarTrackr!</strong> the planet's premier celebrity tracking and monitoring service. Need to know where in the world the best bands, musicians or producers are within 2.2 square meters? You've come to the right place. We have a very special special on B-grade celebs this week, so hurry in!    
      </p>
      <p id="disclaimer">
        <strong>Disclaimer!</strong> This service is not intended for the those with criminal intent. Celebrities are kind of like people so their privacy should be respected.
      </p>
      <div id="news">
        <h2>Latest News</h2>
        <p class="newsItem">
          Which member of the seminal calypso/lectro band <em>C&C Music Sweatshop</em> was spotted last night at <em>Dirt</em>, the trendy New York restaurant that serves only food caught and retrieved by the chef's own hands?
          <span class="spoiler">Yes! It's the ever-effervescent, <em>Glendatronix</em>!</span>
        </p>
        <p class="newsItem">Who lost their recording contract today? <span class="spoiler">The Zaxntines!</span></p>
      </div>
      <div>
        <h2 class="heading">Our Celebrities</h2>
        <p class="info">
          We have an ever changing roster of newly chipped celebrities. But it can take as little as a week for the little critters to realise they've been tagged - so you have to be fast! 
        </p>
        <table class="data" id="celebs">
          <thead>
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Occupation</th>
              <th>Approx. Location</th>
              <th>Price</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>203A</td>
              <td>Johny Stardust (<a href="bio.pdf">bio</a>)</td>
              <td>Front-man</td>
              <td>Los Angeles</td>
              <td>$39.95</td>
            </tr>
            <tr>
              <td>141B</td>
              <td>Beau Dandy (<a href="img.jpg">pic</a>,<a href="bio.pdf">bio</a>)</td>
              <td>Singer</td>
              <td>New York</td>
              <td>$39.95</td>
            </tr>
            <tr>
              <td>2031</td>
              <td>Mo' Fat (<a href="img.jpg">pic</a>)</td>
              <td>Producer</td>
              <td>New York</td>
              <td>$19.95</td>
            </tr>
            <tr>
              <td>007F</td>
              <td>Kellie Kelly (<a href="bio.pdf">bio</a>,<a href="w.doc">press</a>)</td>
              <td>Singer</td>
              <td>Omaha</td>
              <td>$11.95</td>
            </tr>
            <tr>
              <td>8A05</td>
              <td>Darth Fader (<a href="img.jpg">pic</a>)</td>
              <td>DJ</td>
              <td>London</td>
              <td>$19.95</td>
            </tr>
            <tr>
              <td>6636</td>
              <td>Glendatronix  (<a href="bio.pdf">bio</a>,<a href="w.doc">press</a>)</td>
              <td>Keytarist</td>
              <td>London</td>
              <td>$39.95</td>
            </tr>
          </tbody>
        </table>
      </div>
      
      
      <div id="comment">
        <h2>Leave a comment</h2>
        name:<br />
        <input type="text" /><br/>
        comment:<br/>
        <textarea rows="5" cols="30" name="comment"></textarea>
      </div>
      
      <h2>Fine Print</h2>
      <p id="fine_print">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.    
      </p>
      
    </div>
    <input type="button" id="hideButton" value="hide" />
    <div id="footer">
      <p>
        © Copyright 2010 CelebriTracker Productions
      </p>
    </div>
  </div>
</body>
</html>

and the css as css/base.css

#navigation{
    float: right;
    width: 150px;
}
#intro{
    width: 450px;
}

body {
    font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
    color: #3E3E3E;
    background: #94C5EB url(../images/background-grad.png) repeat-x;
    font-size: 12px;
}

p {
    padding: 5px;
}

a {
    color: #3687AF;
}

#container{
    margin:0 auto;
    text-align: left;
    width: 650px;
}

#header{
    height: 60px;
    color: #172322;
    background: transparent url(../images/header-corners.png) no-repeat bottom left;
}

#header h1
{
    padding:0;
    margin:0;
}

#content{
    background-color: #fff;
    padding: 0 15px 10px 15px;

} 

#footer{
    background-color: #fff;
    padding:15px;
  clear: both;
}

h2 {
    border-bottom:2px solid #015287;
    color: #D15600;
    padding-top: 10px;
  margin-top: 0;
}

table {
    border-collapse:collapse;
    font-size:12px;
    margin:0 20px 20px 20px;
    border-top:2px solid #015287;
    width:480px;
}

th {
    border-bottom: 2px solid #015287;
    color: #D15600;
    font-size: 14px;
    font-weight: normal;
    text-align: left;
    padding: 3px 8px;
}

td {
    padding: 6px;
}

.zebra {
    background-color: #dddddd;
    color: #666666;
}
tr.zebraHover{
    background-color: #FFFACD;
}
tr.zebraClick{
    background-color: #00FACD;
}

trq · October 15, 2010

Is there something I need to do in order to get this to work properly in IE, or is this just another example of the MS folks refusing to play in the sandbox with all the other girls and boys?

jQuery's animation() only affects css properties with a numeric value.

jcanker · October 15, 2010

I'm not sure exactly what you mean by that. Also, do you mean just for IE? The posted code works as expected in Firefox.

trq · October 15, 2010

I'm not sure I can put it any simpler. "jQuery's animation() only affects css properties with a numeric value"

The logic is simple. Given 2 seconds to make the number 0 into the number 100 all you need to do is add 0.5 to recursively every hundredth of a second. However given 2 seconds to turn the empty string "" into the string "3px solid #8f8f8f" the logic becomes far more complex. Again, jQuery's animation() only affects css properties with a numeric value.

The posted code works as expected in Firefox

This is a coincidence.

jcanker · October 18, 2010

This is relying on jqueryUI, which does allow for bottomBorder and rightBorder. (In fact, if I change the syntax to only reference the color, then it stops working in Firefox.) In IE it only shows the first border and then breaks down. It does not show the border on the second side, and it doesn't apply any of it to the other p elements.

jcanker · October 18, 2010

I have gotten it to work by declaring the bottom/right borders as 0px first, then animating:

$('p').css({
	'borderBottom': '0px solid #8f8f8f',
	'borderRight': '0px solid #bfbfbf'
	});


$('p').animate({
	padding:'20px',
	backgroundColor: '#eeeeee',
	borderBottomWidth: '3px',
	borderRightWidth: '3px',
	borderBottomColor: '#8f8f8f',
	borderRightColor: '#bfbfbf'
}, 2000);

:shrug: The book is way off here, I guess. I'll send a note to sitepoint.

Sign In

jQuery animate() in IE

Recommended Posts

jcanker

Link to comment

Share on other sites

trq

Link to comment

Share on other sites

jcanker

Link to comment

Share on other sites

trq

Link to comment

Share on other sites

jcanker

Link to comment

Share on other sites

jcanker

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information