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

Get the size of an hidden element

Expand Messages
  • armin_fritsch
    Hi i have a problem with an animation. i have to animate one part. when i do this, i have to hide the old part (this is no problem) and to show the new bigger
    Message 1 of 4 , May 11, 2007
    • 0 Attachment
      Hi i have a problem with an animation.

      i have to animate one part. when i do this, i have to hide the old
      part (this is no problem) and to show the new bigger part (also no
      problem). But i don't know how big the new part ist ... (but i need to
      know for my animation)
      so i am asking myself if there is any possibility to get this (this
      part was befor not visible)
    • Adam Platti
      I can think of a couple of ways to do this depending on how you are using CSS. 1. If your CSS rules for the new element will define the correct size, then you
      Message 2 of 4 , May 11, 2007
      • 0 Attachment
        I can think of a couple of ways to do this depending on how you are using CSS.

        1.  If your CSS rules for the new element will define the correct size, then you can use the YUI DOM library to read the element's runtime width and height styles:  (  ex. YAHOO.util.Dom.getStyle( elem, "width")  );

        2. If you dont know what the size of the element is from CSS, I think you can rely on the clientWidth and clientHeight properties, but I'm not sure if they are standardized.    (ex.   document.getElementById("newElem").clientHeight).    I think you also have to be hiding your element using the "visibility:hidden" style.   If you're hiding it using "display:none", I don't think there is a way to measure the size.

        Adam


        On 5/11/07, armin_fritsch <armin_fritsch@...> wrote:

        Hi i have a problem with an animation.

        i have to animate one part. when i do this, i have to hide the old
        part (this is no problem) and to show the new bigger part (also no
        problem). But i don't know how big the new part ist ... (but i need to
        know for my animation)
        so i am asking myself if there is any possibility to get this (this
        part was befor not visible)


      • APawson
        Because the element you want to animate does not have a fixed height (height:300px; for example) you cannot simply use YAHOO.util.Dom.getStyle to read the
        Message 3 of 4 , May 14, 2007
        • 0 Attachment
          Because the element you want to animate does not have a fixed height
          (height:300px; for example) you cannot simply use
          YAHOO.util.Dom.getStyle to read the value of the CSS attribute. What
          you really want is the 'computed' height/width of the element. I think
          someone else already suggested using 'clientWidth' or 'clientHeight',
          but I believe these are only properties of the body element
          (document.body.clientWidth)...so probably will not work. Instead, I
          suggest offsetHeight/offsetWidth to get the actual width/height of the
          element.

          My general approach is this:
          1. Use CSS - visibility:hidden to hide the element you are trying to
          animate (display:none will not work since it effectively removes the
          element from the page flow and offsetHeight/Width will not return a
          value).
          2. On page load I grab the height/width of the element and store it in
          a variable for later use
          3. using the DOM util set some more CSS attributes - e.g.
          visibility:visible, height:0
          4. Use the value from #2 for your animation.

          --- In ydn-javascript@yahoogroups.com, "armin_fritsch"
          <armin_fritsch@...> wrote:
          >
          > Hi i have a problem with an animation.
          >
          > i have to animate one part. when i do this, i have to hide the old
          > part (this is no problem) and to show the new bigger part (also no
          > problem). But i don't know how big the new part ist ... (but i need to
          > know for my animation)
          > so i am asking myself if there is any possibility to get this (this
          > part was befor not visible)
          >
        • Caridy PatiƱo Mayea
          I think that what you re trying to do is expand a container to show all the content within? Set the overflow property to hidden (if the container already
          Message 4 of 4 , May 15, 2007
          • 0 Attachment
            I think that what you're trying to do is expand a container to show
            all the content within?

            Set the overflow property to 'hidden' (if the container already have
            hidden part this value is already hidden)

            YAHOO.util.Dom.setStyle(el, 'overflow', 'hidden');

            and then you can get the desired width and height thru this properties:

            var h = el.scrollHeight;
            var w = el.scrollWidth;

            Examples here:
            http://www.b2vip.com/

            Regards
            Caridy

            --- In ydn-javascript@yahoogroups.com, "armin_fritsch"
            <armin_fritsch@...> wrote:
            >
            > Hi i have a problem with an animation.
            >
            > i have to animate one part. when i do this, i have to hide the old
            > part (this is no problem) and to show the new bigger part (also no
            > problem). But i don't know how big the new part ist ... (but i need to
            > know for my animation)
            > so i am asking myself if there is any possibility to get this (this
            > part was befor not visible)
            >
          Your message has been successfully submitted and would be delivered to recipients shortly.