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

Slide Element Toggle

Expand Messages
  • tbtingey
    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
    Message 1 of 4 , Feb 28, 2006
      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
    • 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 2 of 4 , Feb 28, 2006
        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 3 of 4 , Feb 28, 2006
          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 4 of 4 , Feb 28, 2006
            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.