Re: [css-d] Help with CSS3 transitions?
On Fri, Jul 20, 2012 at 3:18 PM, David Hucklesby huckle...@gmail.comwrote: On 7/20/12 12:24 PM, Kyle Sessions wrote: Hi everyone, I was hoping someone could give me a hand with the CSS3 transition property. I've set up a very simple test page here: http://kage23.com/transition-**test.htmlhttp://kage23.com/transition-test.html When you first load the page, you should see a ul with four visible items, and a More link. There's also another ul with a few additional items, that is hidden when you first load the page (height: 0px; overflow: hidden;). When you click the More link, I'm using Javascript/YUI to add a class to the hidden ul, that gives it height: auto; instead of height: 0px;. I have applied the transition property [...] Transitions only work from one specific value to another. Auto won't work, as you discovered. Try deleting the height properties, and use max-height instead. Make sure the max-height on the .open state is big enough for any future number of list items in the submenu. I'd use ems for this. Thanks, David! I couldn't use max-height because in the actual production environment that this is intended for, there's no way to predict what the maximum number of additional items is. I did get it working, though. I put the additional items into a containing div, then I measured the height of the additional-items ul, and then used Javascript to adjust the height of the containing div, rather than the actual ul itself. Throw an overflow:hidden onto the containing div, and it's good to go. http://kage23.com/transition-test.html Best, Kyle -- Cordially, David __**__**__ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/**mailman/listinfo/css-dhttp://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.**com/http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/**policies.htmlhttp://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_**support_evolt/http://www.evolt.org/help_support_evolt/ -- Kyle G Sessions Berkeley Electronic Press ksessi...@bepress.com 510-665-1200 + 128 www.bepress.com bepress: the frontier of scholarly publishing since 1999 Check out IR success stories on the DC Telegraph at http://blog.digitalcommons.bepress.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with CSS3 transitions?
On 7/23/12 11:25 AM, Kyle Sessions wrote: On Fri, Jul 20, 2012 at 3:18 PM, David Hucklesby huckle...@gmail.comwrote: On 7/20/12 12:24 PM, Kyle Sessions wrote: Hi everyone, I was hoping someone could give me a hand with the CSS3 transition property. I've set up a very simple test page here: http://kage23.com/transition-**test.htmlhttp://kage23.com/transition-test.html When you first load the page, you should see a ul with four visible items, and a More link. There's also another ul with a few additional items, that is hidden when you first load the page (height: 0px; overflow: hidden;). When you click the More link, I'm using Javascript/YUI to add a class to the hidden ul, that gives it height: auto; instead of height: 0px;. I have applied the transition property [...] Transitions only work from one specific value to another. Auto won't work, as you discovered. Try deleting the height properties, and use max-height instead. Make sure the max-height on the .open state is big enough for any future number of list items in the submenu. I'd use ems for this. Thanks, David! I couldn't use max-height because in the actual production environment that this is intended for, there's no way to predict what the maximum number of additional items is. I did get it working, though. I put the additional items into a containing div, then I measured the height of the additional-items ul, and then used Javascript to adjust the height of the containing div, rather than the actual ul itself. Throw an overflow:hidden onto the containing div, and it's good to go. http://kage23.com/transition-test.html Cool! But I hope you don't anticipate having more than a dozen sub-items, though. The bottom items might not be visible in that case. YMMV of course. -- Cordially, David __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with CSS3 transitions?
On Mon, Jul 23, 2012 at 1:02 PM, David Hucklesby huckle...@gmail.comwrote: On 7/23/12 11:25 AM, Kyle Sessions wrote: On Fri, Jul 20, 2012 at 3:18 PM, David Hucklesby huckle...@gmail.com wrote: On 7/20/12 12:24 PM, Kyle Sessions wrote: Hi everyone, I was hoping someone could give me a hand with the CSS3 transition property. I've set up a very simple test page here: http://kage23.com/transition-test.htmlhttp://kage23.com/transition-**test.html http://kage23.com/**transition-test.htmlhttp://kage23.com/transition-test.html When you first load the page, you should see a ul with four visible items, and a More link. There's also another ul with a few additional items, that is hidden when you first load the page (height: 0px; overflow: hidden;). When you click the More link, I'm using Javascript/YUI to add a class to the hidden ul, that gives it height: auto; instead of height: 0px;. I have applied the transition property [...] Transitions only work from one specific value to another. Auto won't work, as you discovered. Try deleting the height properties, and use max-height instead. Make sure the max-height on the .open state is big enough for any future number of list items in the submenu. I'd use ems for this. Thanks, David! I couldn't use max-height because in the actual production environment that this is intended for, there's no way to predict what the maximum number of additional items is. I did get it working, though. I put the additional items into a containing div, then I measured the height of the additional-items ul, and then used Javascript to adjust the height of the containing div, rather than the actual ul itself. Throw an overflow:hidden onto the containing div, and it's good to go. http://kage23.com/transition-**test.htmlhttp://kage23.com/transition-test.html Cool! But I hope you don't anticipate having more than a dozen sub-items, though. The bottom items might not be visible in that case. YMMV of course. -- Cordially, David Why would the bottom items not be visible? Unless I'm misunderstanding, I _think_ this solution should allow for any number of sub-items, since I'm measuring the height of the sub-items themselves, and toggling the height of the sub-item container between 0 and the actual measured height of the sub-items. In the actual production environment, there will certainly be more than a dozen sub-items in many cases. -- Kyle G Sessions Berkeley Electronic Press ksessi...@bepress.com 510-665-1200 + 128 www.bepress.com bepress: the frontier of scholarly publishing since 1999 Check out IR success stories on the DC Telegraph at http://blog.digitalcommons.bepress.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Help with CSS3 transitions?
Hi everyone, I was hoping someone could give me a hand with the CSS3 transition property. I've set up a very simple test page here: http://kage23.com/transition-test.html When you first load the page, you should see a ul with four visible items, and a More link. There's also another ul with a few additional items, that is hidden when you first load the page (height: 0px; overflow: hidden;). When you click the More link, I'm using Javascript/YUI to add a class to the hidden ul, that gives it height: auto; instead of height: 0px;. I have applied the transition property (along with all the vendor-prefixed transition properties) to my hidden ul, so when you click the link, it should take a second for the hidden stuff to slide down and become visible. However, for whatever reason, the transition is not being applied, and the hidden stuff is instantly visible upon clicking More. This lack of transition is happening in all the browsers I care about, and I have no idea what I'm doing wrong. Any thoughts? Thanks in advance! Best, Kyle -- Kyle G Sessions Berkeley Electronic Press ksessi...@bepress.com 510-665-1200 + 128 www.bepress.com bepress: the frontier of scholarly publishing since 1999 Check out IR success stories on the DC Telegraph at http://blog.digitalcommons.bepress.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with CSS3 transitions?
On 7/20/12 12:24 PM, Kyle Sessions wrote: Hi everyone, I was hoping someone could give me a hand with the CSS3 transition property. I've set up a very simple test page here: http://kage23.com/transition-test.html When you first load the page, you should see a ul with four visible items, and a More link. There's also another ul with a few additional items, that is hidden when you first load the page (height: 0px; overflow: hidden;). When you click the More link, I'm using Javascript/YUI to add a class to the hidden ul, that gives it height: auto; instead of height: 0px;. I have applied the transition property [...] Transitions only work from one specific value to another. Auto won't work, as you discovered. Try deleting the height properties, and use max-height instead. Make sure the max-height on the .open state is big enough for any future number of list items in the submenu. I'd use ems for this. -- Cordially, David __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
