Michael Hammac
2005-Oct-10 12:24 UTC
[Rails-spinoffs] Scrollable DIV causes flicker in FF - SlideDown & SlideUp
I have a fixed height scrollable div inside another div that controls the slideDown and slideUp effects. This causes a really bad flicker in Firefox (1.0.7) for the entire duration of the slide down and up. While on the other hand it works smoothly in IE (except that on a slideUp it causes a last second flash that shows the entire div). Any ideas on how I can fix this? Thanks. __________________________________ Yahoo! Mail - PC Magazine Editors'' Choice 2005 http://mail.yahoo.com
snacktime
2005-Oct-10 14:29 UTC
[Rails-spinoffs] Scrollable DIV causes flicker in FF - SlideDown & SlideUp
On 10/10/05, Michael Hammac <spysly_1999@yahoo.com> wrote:> > I have a fixed height scrollable div inside another > div that controls the slideDown and slideUp effects. > This causes a really bad flicker in Firefox (1.0.7) > for the entire duration of the slide down and up. > While on the other hand it works smoothly in IE > (except that on a slideUp it causes a last second > flash that shows the entire div). > > Any ideas on how I can fix this? > > Thanks.I had this same issue. Someone on the list sent me the following information and that fixed it for me. hi - i saw your email thread here and was having the exact same issue: http://wrath.rubyonrails.org/pipermail/rails-spinoffs/2005-September/000685.html after hours and hours, i finally found that it''s the xhtml1-transitional tag that makes or breaks the flashing in IE. add this to the top of your page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> and the flicker SHOULD go away. -------------- next part -------------- An HTML attachment was scrubbed... URL: http://wrath.rubyonrails.org/pipermail/rails-spinoffs/attachments/20051010/dea792de/attachment.html
Michael Hammac
2005-Oct-10 16:05 UTC
[Rails-spinoffs] Scrollable DIV causes flicker in FF - SlideDown & SlideUp
Thanks a lot for that document type info. It does help
with IE (6). But now the contents of the sliding div
are visible in their entirety during the effect. As
for firefox the flicker prevails. I''m posting a sample
of the code here for testing purposes:
---------------------------------------
***************************************
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<style>
.scriptblock {
overflow:auto;
height: 30px;
}
</style>
<body>
<a href="#" id="lnkCat1">Dental</a>
<div id="cat1" class="scripts"
style="display:none;">
<div class="scriptblock">
<h4>Test Content</h4>
<p>Test</p>
</div>
</div>
<script language="javascript">
<!--//
var ScriptWatcher = Class.create();
ScriptWatcher.prototype = {
initialize: function(element, state, content) {
this.element = $(element);
this.state = state;
this.content = $(content);
this.element.onclick this.OpenCloseScriptBlock.bindAsEventListener(this);
},
OpenCloseScriptBlock: function(e) {
if (this.state == ''Close'') {
new Effect.SlideDown(this.content); //slide down
and open if closed.
this.state = ''Open'';
}
else {
this.state = ''Close'';
new Effect.SlideUp(this.content);
}
}
};
var watcher = new
ScriptWatcher(''lnkCat1'',''Close'',''cat1'');
//-->
</script>
</body>
</html>
***************************************
---------------------------------------
--- snacktime <snacktime@gmail.com> wrote:
> On 10/10/05, Michael Hammac <spysly_1999@yahoo.com>
> wrote:
> >
> > I have a fixed height scrollable div inside
> another
> > div that controls the slideDown and slideUp
> effects.
> > This causes a really bad flicker in Firefox
> (1.0.7)
> > for the entire duration of the slide down and up.
> > While on the other hand it works smoothly in IE
> > (except that on a slideUp it causes a last second
> > flash that shows the entire div).
> >
> > Any ideas on how I can fix this?
> >
> > Thanks.
>
>
> I had this same issue. Someone on the list sent me
> the following information
> and that fixed it for me.
>
> hi - i saw your email thread here and was having the
> exact same issue:
>
>
http://wrath.rubyonrails.org/pipermail/rails-spinoffs/2005-September/000685.html>
> after hours and hours, i finally found that it''s the
> xhtml1-transitional tag that makes or breaks the
> flashing in IE. add
> this to the top of your page:
>
> <!DOCTYPE html
> PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>
> and the flicker SHOULD go away.
> > _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs@lists.rubyonrails.org
>
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs>
__________________________________
Yahoo! Music Unlimited
Access over 1 million songs. Try it free.
http://music.yahoo.com/unlimited/
snacktime
2005-Oct-10 16:55 UTC
[Rails-spinoffs] Scrollable DIV causes flicker in FF - SlideDown & SlideUp
On 10/10/05, Michael Hammac <spysly_1999@yahoo.com> wrote:> > Thanks a lot for that document type info. It does help > with IE (6). But now the contents of the sliding div > are visible in their entirety during the effect. As > for firefox the flicker prevails. I''m posting a sample > of the code here for testing purposes: > > --------------------------------------- > *************************************** > <!DOCTYPE html > PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > <html> > <style> > .scriptblock { > overflow:auto; > height: 30px; > } > </style> > <body> > <a href="#" id="lnkCat1">Dental</a> > <div id="cat1" class="scripts" style="display:none;"> > <div class="scriptblock"> > <h4>Test Content</h4> > <p>Test</p> > </div> > </div> > <script language="javascript"> > <!--// > var ScriptWatcher = Class.create(); > ScriptWatcher.prototype = { > initialize: function(element, state, content) { > this.element = $(element); > this.state = state; > this.content = $(content); > this.element.onclick > this.OpenCloseScriptBlock.bindAsEventListener(this); > }, > > OpenCloseScriptBlock: function(e) { > if (this.state == ''Close'') { > new Effect.SlideDown(this.content); //slide down > and open if closed. > this.state = ''Open''; > } > else { > this.state = ''Close''; > new Effect.SlideUp(this.content); > } > } > }; > > var watcher = new > ScriptWatcher(''lnkCat1'',''Close'',''cat1''); > //--> > </script> > </body> > </html> > *************************************** > --------------------------------------- > > --- snacktime <snacktime@gmail.com> wrote: > > > On 10/10/05, Michael Hammac <spysly_1999@yahoo.com> > > wrote: > > > > > > I have a fixed height scrollable div inside > > another > > > div that controls the slideDown and slideUp > > effects. > > > This causes a really bad flicker in Firefox > > (1.0.7) > > > for the entire duration of the slide down and up. > > > While on the other hand it works smoothly in IE > > > (except that on a slideUp it causes a last second > > > flash that shows the entire div). > > > > > > Any ideas on how I can fix this? > > > > > > Thanks. > > > > > > I had this same issue. Someone on the list sent me > > the following information > > and that fixed it for me. > > > > hi - i saw your email thread here and was having the > > exact same issue: > > > > > > http://wrath.rubyonrails.org/pipermail/rails-spinoffs/2005-September/000685.html > > > > after hours and hours, i finally found that it''s the > > xhtml1-transitional tag that makes or breaks the > > flashing in IE. add > > this to the top of your page: > > > > <!DOCTYPE html > > PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > > > > and the flicker SHOULD go away. > > > _______________________________________________ > > Rails-spinoffs mailing list > > Rails-spinoffs@lists.rubyonrails.org > > > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > > > > If I remember correctly I also had to set position:relative on the divtags to get rid of the behavior you are seeing. And I do still get a bit of flicker even with these settings, but it''s nothing like it used to be. Chris -------------- next part -------------- An HTML attachment was scrubbed... URL: http://wrath.rubyonrails.org/pipermail/rails-spinoffs/attachments/20051010/9d582181/attachment.html