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

Re: [ydn-javascript] Re: Slide Element Toggle

Expand Messages
  • Matt Sweeney
    Hi Trevor, You should be able to animate any CSS property that uses number values. The lib attempts to retrieve the from value if one is not specified,
    Message 1 of 4 , Feb 28, 2006
    • 0 Attachment
      Hi Trevor,

      You should be able to animate any CSS property that uses number values.  The lib attempts to retrieve the "from" value if one is not specified, however, as in youre case, this is not always reliable, mainly due to the diffs between currentStyle (IE) and computedStyle (DOM).

      Potential animation attributes:
      - borderWidth
      - bottom
      - fontSize
      - left
      - lineHeight
      - height
      - margin
      - opacity
      - padding
      - right
      - top
      - width

      I may have missed a few, but you get the idea.

      Feel free to share your experiences and implementations.  We welcome feedback, and would love to see how you are using the libraries.

      Thanks,

      Matt

      tbtingey wrote:
      Wow. Thanks for the quick response. That worked!
      
      Maybe a side comment here, I'd love to know what is available in the
      form of attributes and haven't found the documentation that shows
      which attributes I can animate. So far I've used the examples to find
      out that I can animate the position, the height, fontSize, opacity,
      etc. but, I'd love to know what else I can work on.
      
      Again, thanks for the great work on this library, and I look forward
      to using more of the library in my apps.
      
      -Trevor
      
      --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@...> wrote:
        
      Hi Trevor,
      
      Try adding the "from" property to your height attributes:
      
      var UpAttributes = {
          height: {from: 100, to: 0, unit: 'px'},
          fontSize: {from: 100, to: 0, unit: '%'},
          opacity: { to: 0 }
      }
      
      var DownAttributes = {
          height: {from 0, to: 100, unit: 'px'},
          fontSize: {from: 0, to: 100, unit: '%'},
          opacity: { to: 1 }
      }
      
      Matt
      
      
      tbtingey wrote:
      
          
      Awesome library. I look forward to using to create my own components.
      Speaking of which, I am trying to create an effect similar to the
      scriptaculous slide toggle:
      http://wiki.script.aculo.us/scriptaculous/show/Effect.toggle 
      (see the slide effect)
      
      Anyway, I'm getting an error in IE (and not in firefox) when I try to
      access the height on the element that I'm "sliding" up/away. Here's my
      js file:
      
      var UpAttributes = {
         height: {to: 0, unit: 'px'},
         fontSize: {from: 100, to: 0, unit: '%'},
         opacity: { to: 0 }
      }
      
      var DownAttributes = {
         height: {to: 100, unit: 'px'},
         fontSize: {from: 0, to: 100, unit: '%'},
         opacity: { to: 1 }
      }
      
      function SlideUp(owner)
      {
         var AppointmentsDivSlideUp = new YAHOO.util.Anim(owner,
      UpAttributes, .5, YAHOO.util.Easing.easeNone);
         AppointmentsDivSlideUp.animate();
      }
      
      function SlideDown(owner)
      {
         var AppointmentsDivSlideDown = new YAHOO.util.Anim(owner,
      DownAttributes, .5, YAHOO.util.Easing.easeNone);
         AppointmentsDivSlideDown.animate();
      }
      
      function ToggleCategory(ownerId) 
      {
         var owner = YAHOO.util.Dom.get(ownerId);
         var height = YAHOO.util.Dom.getStyle(owner, 'height');
         var isUp = height=='0px';
         
         if(isUp)
         {
             SlideDown(owner);
         }
         else
         {
             SlideUp(owner);
         }
      }
      
      I have a div with an onclick event handler that calls ToggleCategory
      with the id of the element(another div) that I'm trying to "slide".
      The error that I get is "Invalid argument" on line 10 of dom.js
      (starting with "break;default:") with the following causing the error:
      "el.style[property]=val"
      where property == 'height', val == 'NaN%', el = div
      
      If I drill into it, el.height is 'auto'
      
      Any ideas?
      
      -Trevor
      
      
      
      
      
      
      Yahoo! Groups Links
      
      
      
      
      
      
      
      
       
      
            
      
      
      
      
       
      Yahoo! Groups Links
      
      <*> To visit your group on the web, go to:
          http://groups.yahoo.com/group/ydn-javascript/
      
      <*> To unsubscribe from this group, send an email to:
          ydn-javascript-unsubscribe@yahoogroups.com
      
      <*> Your use of Yahoo! Groups is subject to:
          http://docs.yahoo.com/info/terms/
       
      
      
      
      
      
        

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