Loading ...
Sorry, an error occurred while loading the content.

Animation for hidden elements in yui2

Expand Messages
  • aravind dinakar
    Hi, I have a which is hidden on page load but want it to be displayed when clicked on a button. I am trying to use animate() but after the function is
    Message 1 of 1 , Oct 15, 2009
    • 0 Attachment
      Hi,

      I have a <div> which is hidden on page load but want it to be displayed when clicked on a button. I am trying to use animate() but after the function is executed, the width, height of the target still remain at 0(as seen in firebug, alerts).
      Is there something that I am missing? I am using float: attributes in my HTML. Any problem with that ?

      <!-- Div to be animated -->
      <div id="testPanel" style="display:none; border-style: solid; padding: 2em;">
               <center> <b>test panel</b></center> <br />
               <button id="testHide">Hide</button>
      </div>

      <!-- Animation function -->
      (function() {
          alert('initializing..animation'); // This displays correctly on Page Load
          var attributes = {
              width: { to: 200 },
              height: { to: 200 }
          };
          var anim = new YAHOO.util.Anim('testPanel', attributes, 1.5, YAHOO.util.Easing.easeOut);

          YAHOO.util.Event.on('pageM3', 'click', function() {
              anim.animate();
              document.getElementById('testPanel').style.display = '';
              alert("width="+document.getElementById('testPanel').style.width);  // This displays blank value
              alert("height="+document.getElementById('testPanel').style.height); // This displays blank value
          });
      })();

      <!-- Style Sheet -->
      <style type="text/css">
      #testPanel {
          background:#ccc;
          margin-bottom:1em;
          overflow:hidden;
          width:0px;
          height:0px;
      }
      </style>


      Thanks,
      Dinakar
    Your message has been successfully submitted and would be delivered to recipients shortly.