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

357Re: Slide Element Toggle

Expand Messages
  • tbtingey
    Feb 28, 2006
    • 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
      > >
      > >
      > >
      > >
      > >
      > >
      > >
      > >
      > >
      > >
      >
    • Show all 4 messages in this topic