Give the effect a ridiculously long duration, and watch the element in Firebug while it animates. You can see the CSS properties change as it does (a little delayed, like the stock market ticker, I suppose).
You may see the answer there, but that's about all I can offer too. Walter On Apr 23, 2009, at 5:04 AM, Ram wrote: > > thanks a lot Mona. I appreciate the effort anyway :) > Guess this really is a fringe case.. > Anyone else got any ideas? > > On Apr 23, 1:56 pm, Mona Remlawi <[email protected]> wrote: >> ok then, i give up, no more tricks up my sleeve. >> >> cheers >> >> -- >> mona >> [email protected] >> >> On Thu, Apr 23, 2009 at 10:22 AM, Vinay Seshadri >> >> <[email protected]> wrote: >>> abrupt transition: http://jsbin.com/aposu >>> in that, the way the div is hidden, abruptly, is what I am seeing >>> in my >>> application. >>> the showing of the div seems to be fine in this link though. Only >>> the hiding >>> of the div is abrupt and thats what I see in both hiding AND >>> showing of MY >>> comms div. >> >>> On Thu, Apr 23, 2009 at 1:07 PM, Mona Remlawi >>> <[email protected]> >>> wrote: >> >>>> ok time for jsbin >>>> i created 2 pages >>>> abrupt transition:http://jsbin.com/aposu >>>> smooth transition: clearfix applied:http://jsbin.com/ugiju >> >>>> test and see if we are talking about same abnormal behaviour >> >>>> cheers >> >>>> -- >>>> mona >>>> [email protected] >> >>>> On Thu, Apr 23, 2009 at 9:13 AM, Vinay Seshadri >>>> <[email protected]> wrote: >>>>> I DO have that in my main stylesheet Mona.. >>>>> and I have .clearfix {overflow:auto} within style tags in my >>>>> html layout >>>>> page. here's exactly what i have now.. >>>>> main.css >>>>> .clearfix:after >>>>> { >>>>> content:"."; >>>>> display:block; >>>>> height:0; >>>>> clear:both; >>>>> visibility:hidden; >>>>> } >>>>> .form { >>>>> padding: 1em; >>>>> border: 0px; >>>>> font: 90% "Lucida Grande", "Trebuchet MS", Verdana, sans- >>>>> serif; >>>>> background: #F4FECA; >>>>> } >>>>> .gform { >>>>> width : 810px; >>>>> line-height: 20px; >>>>> margin: 0 auto; >>>>> } >>>>> main.html.erb (layout page) >>>>> (within head tags) >>>>> <style type="text/css"> >>>>> .clearfix {zoom: 1; /* triggers hasLayout */ } >>>>> </style> >>>>> and the comments partial >>>>> <div class="form clearfix" style="display:none" id="comments- >>>>> section"> >>>>> ... >>>>> ... >>>>> everything else is the same as before. >>>>> is it definitely the unfixed height causing this? it definitely >>>>> sounds >>>>> like >>>>> a plausible cause though. >>>>> On Thu, Apr 23, 2009 at 12:22 PM, Mona Remlawi >>>>> <[email protected]> >>>>> wrote: >> >>>>>> hey Ram, you mentioned that you are testing on Safari and FF. >>>>>> so you need to include this rule >>>>>> .clearfix:after >>>>>> {content:".";display:block;height: >>>>>> 0;clear:both;visibility:hidden;} >>>>>> in your style block. >> >>>>>> .clearfix {overflow:auto} >>>>>> is required for IE support. >> >>>>>> http://www.google.com/search?q=clearing+floats >> >>>>>> cheers >> >>>>>> -- >>>>>> mona >>>>>> [email protected] >> >>>>>> On Thu, Apr 23, 2009 at 7:39 AM, Ram <[email protected]> >>>>>> wrote: >> >>>>>>> Hi Walter, >> >>>>>>> Thanks for pointing me to the right resources. Im reading up >>>>>>> on it >>>>>>> herehttp://www.communitymx.com/content/article.cfm?page=2&cid=c37E0 >>>>>>> . >> >>>>>>> It still doesnt fix my problem though. I tried overflow:auto >>>>>>> instead >>>>>>> of zoom:1 and the only difference was the I got a vertical >>>>>>> scroll bar >>>>>>> inside the comms div this time. But the div still just gets >>>>>>> displayed >>>>>>> and then hidden abruptly without the effect. >> >>>>>>> Any idea? >> >>>>>>> On Apr 22, 10:06 pm, Walter Lee Davis <[email protected]> >>>>>>> wrote: >>>>>>>> Windows IE doesn't properly set floated elements to occupy >>>>>>>> design >>>>>>>> space unless you set a value for the height or width, or you >>>>>>>> use one >>>>>>>> of several different hacks to get it to trigger its internal >>>>>>>> property >>>>>>>> "hasLayout". >> >>>>>>>> .clearfix { >>>>>>>> overflow: auto; >> >>>>>>>> } >> >>>>>>>> or >> >>>>>>>> <!--[if IE]> >>>>>>>> <style type="text/css"> >>>>>>>> .clearfix { >>>>>>>> zoom: 1;} >> >>>>>>>> </style> >>>>>>>> <![endif]--> >> >>>>>>>> Either one of these will work, and there are others. Google the >>>>>>>> Holly >>>>>>>> Hack, or just >>>>>>>> readhttp://positioniseverything.netorhttp://quirksmode.org >> >>>>>>>> Within IE, an object with hasLayout = true can be manipulated >>>>>>>> by the >>>>>>>> animation engine, but one that does not appears (to IE) to >>>>>>>> occupy no >>>>>>>> space; therefore making it shrink and grow is something of an >>>>>>>> issue, >>>>>>>> since there's no existing dimension to work from. You could >>>>>>>> simply >>>>>>>> give this object fixed dimensions, then it's trivial to make it >>>>>>>> shrink >>>>>>>> and grow. But then standards-compliant browsers will clip off >>>>>>>> the >>>>>>>> content (or cause it to overflow its box) when they reach >>>>>>>> that size, >>>>>>>> and fail to respond to text-size changes as gracefully as >>>>>>>> they might >>>>>>>> otherwise. >> >>>>>>>> Walter >> >>>>>>>> On Apr 22, 2009, at 12:32 PM, Ram wrote: >> >>>>>>>>> Dint really understand what you guys meant. Can you be a bit >>>>>>>>> more >>>>>>>>> explanatory? >>>>>>>>> Thanks for your responses! >>>>>>>>> On Apr 22, 7:24 pm, Walter Lee Davis <[email protected]> >>>>>>>>> wrote: >>>>>>>>>> You can also set overflow:auto to the same effect, and you >>>>>>>>>> don't >>>>>>>>>> have >>>>>>>>>> to hide it from other browsers, either. >> >>>>>>>>>> Walter >> >>>>>>>>>> On Apr 22, 2009, at 10:17 AM, Mona Remlawi wrote: >> >>>>>>>>>>> .clearfix {zoom: 1; /* triggers hasLayout */ } >> >>>>> -- >>>>> In Sport We Trust !!! >> >>> -- >>> In Sport We Trust !!! > > --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---
