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

Re: [ydn-javascript] Slide Element Toggle

Expand Messages
  • Matt Sweeney
    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,
    Message 1 of 4 , Feb 28 3:37 PM
    • 0 Attachment
      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
      >
      >
      >
      >
      >
      >
      >
      >
      >
      >
    • tbtingey
      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
      Message 2 of 4 , Feb 28 4:11 PM
      • 0 Attachment
        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
        > >
        > >
        > >
        > >
        > >
        > >
        > >
        > >
        > >
        > >
        >
      • 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 3 of 4 , Feb 28 4:29 PM
        • 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.