Hi Walter,
Tried what you suggested. I watched this line under the HTML tag in Firebug
<div id="comments-section" class="form" style="display: none;">
When I click on toggle to SHOW, the 'style' changed to 'overflow: visible;'
like so
<div id="comments-section" class="form" style="overflow: visible;">
When I click on toggle again to HIDE, the 'style' changed to 'overflow:
visible; display: none;' like so
<div id="comments-section" class="form" style="overflow: visible;
display:none;">
I dont know if you meant for me to see a transition in CSS properties, in
which case im not sure what to watch in Firebug and how to watch it.
The above just changes the moment the div is either hidden or shown. Here is
the toggle command again, just for clarity.
new Effect.toggle('comments-section', 'slide', { duration: 5.0 }); return
false;
Does the above tell you something?
On Thu, Apr 23, 2009 at 5:57 PM, Walter Lee Davis <wa...@wdstudio.com>wrote:
>
> 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 <mona.reml...@gmail.com> wrote:
> >> ok then, i give up, no more tricks up my sleeve.
> >>
> >> cheers
> >>
> >> --
> >> mona
> >> mreml...@optaros.com
> >>
> >> On Thu, Apr 23, 2009 at 10:22 AM, Vinay Seshadri
> >>
> >> <yourstruly.vi...@gmail.com> 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
> >>> <mona.reml...@gmail.com>
> >>> 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
> >>>> mreml...@optaros.com
> >>
> >>>> On Thu, Apr 23, 2009 at 9:13 AM, Vinay Seshadri
> >>>> <yourstruly.vi...@gmail.com> 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
> >>>>> <mona.reml...@gmail.com>
> >>>>> 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
> >>>>>> mreml...@optaros.com
> >>
> >>>>>> On Thu, Apr 23, 2009 at 7:39 AM, Ram <yourstruly.vi...@gmail.com>
> >>>>>> 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 <wa...@wdstudio.com>
> >>>>>>> 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 <wa...@wdstudio.com>
> >>>>>>>>> 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 !!!
> > >
>
>
> >
>
--
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 prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
