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

Animate to height 0? (IE problem)

Expand Messages
  • Kirsty Darbyshire
    Simple working example here: http://www.loquax.co.uk/li.html I want to animate a list item to a height of zero. Works fine in Firefox. In IE the
    Message 1 of 3 , Jun 2, 2007
    • 0 Attachment
      Simple working example here: http://www.loquax.co.uk/li.html

      I want to animate a <li>list item</li> to a height of zero. Works
      fine in Firefox. In IE the list item won't shrink below one line
      height. I've tried animating lineHeight to zero as well as the height
      but that doesn't help.

      The only way I can get the list item to have zero height in IE seems
      to be to remove the element entirely, which (a) can't be animated and
      (b) doesn't leave me an easy way to bring it back into view later on.

      Any ideas? I feel I must be missing something obvious.

      thanks
      kirsty
    • Chris Banford
      Hi Kirsty, I m a rather new YUI convert, but I would try setting the list item to invisible (display: none, will make it invisible but retain its size in the
      Message 2 of 3 , Jun 2, 2007
      • 0 Attachment
        Hi Kirsty,

        I'm a rather new YUI convert, but I would try setting the list item to invisible (display: none, will make it invisible but retain its size in the document layout. visibility:hidden will remove its display box entirely from the document) with CSS. Just have your animation code check when the <li> item would theoretically be animated to 0, and hide it instead.

        -Chris

        Simple working example here: http://www.loquax. co.uk/li. html

        I want to animate a <li>list item</li> to a height of zero. Works
        fine in Firefox. In IE the list item won't shrink below one line
        height. I've tried animating lineHeight to zero as well as the height
        but that doesn't help.

        The only way I can get the list item to have zero height in IE seems
        to be to remove the element entirely, which (a) can't be animated and
        (b) doesn't leave me an easy way to bring it back into view later on.

        Any ideas? I feel I must be missing something obvious.

        thanks
        kirsty


      • dav.glass@yahoo.com
        What I would suggest is: Put another element inside the li and animate it.. li s are kind of tricky to animate.. You may also have an issue animating the
        Message 3 of 3 , Jun 2, 2007
        • 0 Attachment
          What I would suggest is:

          Put another element inside the li and animate it.. li's are kind of tricky to animate.. You may also have an issue animating the height of items that are not easily calculated.. Content boxes with free flowing text is very tricky :)

          Then add an onComplete handler to the animation to remove the LI from the document..

          Something like this:

          <li><span id="item1">This is some text</span></li>
           
          function removeItem(id) {
              var item = YAHOO.util.Dom.get(id);
              var anim = new YAHOO.util.Anim(id, {
                 height: {
                    to: 0
                 }
              });
              anim.onComplete.subscribe(function() {
                 item.parentNode.parentNode.removeChild(item.parentNode);
              });
              anim.animate();
          }

          And for the record, reverse Chris's comments on display: none versus visibility: hidden..

          display: none will remove the element from them dom like it is not there..

          visibility: hidden, only hides the element, it's box is still present in the page.

          Hope all that helps :)

          Dav


          Dav Glass
          dav.glass@...
          blog.davglass.com


          + Windows: n. - The most successful computer virus, ever. +
          + A computer without a Microsoft operating system is like a dog
          without bricks tied to its head +
          + A Microsoft Certified Systems Engineer is to computing what a
          McDonalds Certified Food Specialist is to fine cuisine +


          ----- Original Message ----
          From: Chris Banford <dev@...>
          To: ydn-javascript@yahoogroups.com
          Sent: Saturday, June 2, 2007 6:25:31 AM
          Subject: Re: [ydn-javascript] Animate <li> to height 0? (IE problem)

          Hi Kirsty,

          I'm a rather new YUI convert, but I would try setting the list item to invisible (display: none, will make it invisible but retain its size in the document layout. visibility:hidden will remove its display box entirely from the document) with CSS. Just have your animation code check when the <li> item would theoretically be animated to 0, and hide it instead.

          -Chris

          Simple working example here: http://www.loquax. co.uk/li. html

          I want to animate a <li>list item</li> to a height of zero. Works
          fine in Firefox. In IE the list item won't shrink below one line
          height. I've tried animating lineHeight to zero as well as the height
          but that doesn't help.

          The only way I can get the list item to have zero height in IE seems
          to be to remove the element entirely, which (a) can't be animated and
          (b) doesn't leave me an easy way to bring it back into view later on.

          Any ideas? I feel I must be missing something obvious.

          thanks
          kirsty



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