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

Re: [ydn-javascript] Animate to height 0? (IE problem)

Expand Messages
  • 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 1 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 2 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.