thr3ads.net - Rails spinoffs - Bug? In scriptaculous -- double text drawn one pixel off [Apr 2006]

If this information is useful, please help other people find it:
Share via:

Matt Miller

2006-Apr-06 23:35 UTC

Bug? In scriptaculous -- double text drawn one pixel off

Hello, I''m working with scriptaculous, and i''ve narrowed down
a bug i''m
having to the following code:

http://rate.urbanpug.com

I''m using the latest release (as of sending this mail) of
scriptaculous.
I''ve actually seen this bug before, and random tweaking fixed it.
Unfortunately, i can''t figure it out this time.  I''ve reduced
the bug to the
smallest amount of code that reasonably demonstrates the bug.

Basically, what happens is that when the effect.toggle starts to happen, all
the text in the the div i''m toggling gets redrawn on top of the
existing
text.  Then, when the effect is finished, the text is put back to normal.
(That''s not shown in this example, it''s just one div fading
out).

I''m setting the width of the div to "give it layout."

What''s up with this?  (you can see the code in action at the above URL,
but
i''m pasting it below anyway)

Thanks for your help.  I love scriptaculous.

-Matt Miller

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="/js/prototype.js"
type="text/javascript"></script>
<script src="/js/scriptaculous.js"
type="text/javascript"></script>

<title>CameraPuppy.com</title>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<style type="text/css">
#loginform {
        width: 165px;
}
</style>

<script type="text/javascript">

function createAccountForm() {
        Effect.toggle(''loginform'',''appear'');
}
</script>
</head>
<body>
<div id="loginform" onclick="createAccountForm()">div
one</div>
<br/><br/>
Notice, when you click on "div one" in IE 6.0, the text appears to be
drawn
over the existing text, one pixel off.
</body>
</html>


_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

Thomas Fuchs

2006-Apr-07 07:55 UTC

head link

Re: Bug? In scriptaculous -- double text drawn one pixel off

Heya,

This is a bug, but not in script.aculo.us, but with the IE text  
rendering engine.
When you''re using Appear/Fade, you can work around by overlaying the
DIV with an other DIV that just contains white as background color  
and appear
that in (so it makes it look like the other div is fading).

After that, you remove the overlay and hide the element.

Note that this works only in situations where you have a single  
background color
"behind the element".

There might be other workarounds as well.

-Thomas

Am 07.04.2006 um 01:35 schrieb Matt Miller:
> Hello, I''m working with scriptaculous, and i''ve narrowed
down a bug
> i''m having to the following code:
>
> http://rate.urbanpug.com
>
> I''m using the latest release (as of sending this mail) of  
> scriptaculous.  I''ve actually seen this bug before, and random  
> tweaking fixed it.   Unfortunately, i can''t figure it out this  
> time.  I''ve reduced the bug to the smallest amount of code that  
> reasonably demonstrates the bug.
>
> Basically, what happens is that when the effect.toggle starts to  
> happen, all the text in the the div i''m toggling gets redrawn on  
> top of the existing text.  Then, when the effect is finished, the  
> text is put back to normal.  (That''s not shown in this example,  
> it''s just one div fading out).
>
> I''m setting the width of the div to "give it layout."
>
> What''s up with this?  (you can see the code in action at the above
> URL, but i''m pasting it below anyway)
>
> Thanks for your help.  I love scriptaculous.
>
> -Matt Miller
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://
> www.w3.org/TR/html4/strict.dtd">
> <html>
> <head>
> <script src="/js/prototype.js"
type="text/javascript"></script>
> <script src="/js/scriptaculous.js"
type="text/javascript"></script>
>
> <title> CameraPuppy.com</title>
> <meta http-equiv="content-type" content="text/html;
charset=UTF-8">
> <style type="text/css">
> #loginform {
>         width: 165px;
> }
> </style>
>
> <script type="text/javascript">
>
> function createAccountForm() {
>        
Effect.toggle(''loginform'',''appear'');
> }
> </script>
> </head>
> <body>
> <div id="loginform"
onclick="createAccountForm()">div one</div>
> <br/><br/>
> Notice, when you click on "div one" in IE 6.0, the text appears
to
> be drawn over the existing text, one pixel off.
> </body>
> </html>
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
--
Thomas Fuchs
wollzelle

http://www.wollzelle.com

http://www.fluxiom.com :: online digital asset management
http://script.aculo.us :: Web 2.0 JavaScript
http://mir.aculo.us :: Where no web developer has gone before






_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

Apparently Analagous Threads

Search for more apparently analagous threads

Rails spinoffs - Apr 2006 - Bug? In scriptaculous -- double text drawn one pixel off

Bug? In scriptaculous -- double text drawn one pixel off

Re: Bug? In scriptaculous -- double text drawn one pixel off

Apparently Analagous Threads