I have two divs which I swap by using Prototype''s show and hide
methods. Essentially,
<div id="one" style="display:none">one</div>
<div id="two">two</div>
toggle() {
$(''one'').show();
$(''two'').hide();
}
The problem is that the browser is reflowing between the show and the
hide, which causes a very brief flicker as both elements are
momentarily visible. If I do the hide first and the show second, I
still get a brief flicker during which both elements are momentarily
invisible.
I am sure that there is some smooth way to swap one element for
another without causing a flicker, but I can''t figure it out. Is
there something built into Prototype to help with this?
Thanks!
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
The way you''re calling it now, you''re asking the browser to do the effects simultaneously, not in succession. If you want the effects to come one after the other, use the afterFinish callback: http://wiki.script.aculo.us/scriptaculous/show/CoreEffects ... or, use Effect Queues http://wiki.script.aculo.us/scriptaculous/show/EffectQueues TAG On Jul 26, 2007, at 4:53 PM, JakeO wrote:> > I have two divs which I swap by using Prototype''s show and hide > methods. Essentially, > > <div id="one" style="display:none">one</div> > <div id="two">two</div> > > toggle() { > $(''one'').show(); > $(''two'').hide(); > } > > The problem is that the browser is reflowing between the show and the > hide, which causes a very brief flicker as both elements are > momentarily visible. If I do the hide first and the show second, I > still get a brief flicker during which both elements are momentarily > invisible. > > I am sure that there is some smooth way to swap one element for > another without causing a flicker, but I can''t figure it out. Is > there something built into Prototype to help with this? > > Thanks! > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Actually, you''ve got it backwards. I want it to happen simultaneously, not in succession. The above code is causing it to happen in succession. On Jul 26, 4:00 pm, Tom Gregory <t...-PGZyUNKar/Q@public.gmane.org> wrote:> The way you''re calling it now, you''re asking the browser to do the > effects simultaneously, not in succession. > > If you want the effects to come one after the other, use the > afterFinish callback:http://wiki.script.aculo.us/scriptaculous/show/CoreEffects > > ... or, use Effect Queueshttp://wiki.script.aculo.us/scriptaculous/show/EffectQueues > > TAG > > On Jul 26, 2007, at 4:53 PM, JakeO wrote: > > > > > I have two divs which I swap by using Prototype''s show and hide > > methods. Essentially, > > > <div id="one" style="display:none">one</div> > > <div id="two">two</div> > > > toggle() { > > $(''one'').show(); > > $(''two'').hide(); > > } > > > The problem is that the browser is reflowing between the show and the > > hide, which causes a very brief flicker as both elements are > > momentarily visible. If I do the hide first and the show second, I > > still get a brief flicker during which both elements are momentarily > > invisible. > > > I am sure that there is some smooth way to swap one element for > > another without causing a flicker, but I can''t figure it out. Is > > there something built into Prototype to help with this? > > > Thanks!--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
I''ve had too many consecutive nights of not enough sleep. The answer
I gave you was for the Scripty effects library anyway, and you''re
using Prototype''s Element functions, which makes my original reply
one of the more useless I''ve given.
I''ve tried duplicating what you''re describing with a simple
test
case, and I''m unable to do it in recent versions both Firefox and
Safari. (Test case below.) I tried a different implementation of a
toggle, and still was unable to duplicate. Perhaps there is some
element in your div (select, iframe, etc.) that is causing the
browser to refresh.
Do you have a working test case where you can demonstrate the issue?
TAG
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>untitled</title>
<script type="text/javascript"
src="js/prototype.js"></script>
<script type="text/javascript">
var which = false;
function toggle() {
if ($(''d2'').visible()) {
$(''d1'').show();
$(''d2'').hide();
} else {
$(''d2'').show();
$(''d1'').hide();
}
which = !which;
}
function toggle2() {
[''d1'',''d2''].each(Element.toggle);
}
</script>
<style type="text/css">
#d1 {
width: 50%; height: 100px;
background-color: #ccf;
border: 2px solid #00c;
overflow:auto;
}
#d2 {
width: 50%; height: 100px;
background-color: #fcc;
border: 2px solid #c00;
overflow:auto;
}
</style>
</head>
<body>
<a href="javascript:toggle()">toggle</a> |
<a href="javascript:toggle2()">toggle2</a>
<div id="d1">Lorem ipsum dolor sit amet, consectetur
adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</div>
<div id="d2" style="display:none">Excepteur sint
occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</div>
</body>
</html>
On Jul 26, 2007, at 5:58 PM, JakeO wrote:
> Actually, you''ve got it backwards. I want it to happen
simultaneously,
> not in succession. The above code is causing it to happen in
> succession.
>
> On Jul 26, 4:00 pm, Tom Gregory <t...-PGZyUNKar/Q@public.gmane.org>
wrote:
>> The way you''re calling it now, you''re asking the
browser to do the
>> effects simultaneously, not in succession.
>>
>> If you want the effects to come one after the other, use the
>> afterFinish callback:http://wiki.script.aculo.us/scriptaculous/
>> show/CoreEffects
>>
>> ... or, use Effect Queueshttp://wiki.script.aculo.us/scriptaculous/
>> show/EffectQueues
>>
>> TAG
>>
>> On Jul 26, 2007, at 4:53 PM, JakeO wrote:
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---