Hi All,
I''ve just discover scriptaculous and it is a really good library. Even
if I have some difficulties with short syntax in javascript code :/
I have a strange behaviour with Effect.Highlight, and as it''s said on
bug report page :
"It''s also a good idea to discuss this on the Mailing List
beforehand,
maybe it''s already known and in the works, or it isn''t a bug
("it''s a
feature!")."
Well. With this code :
---8<------------------------------
<html>
<head>
<script src="prototype.js"
type="text/javascript"></script>
<script src="scriptaculous.js"
type="text/javascript"></script>
</head>
<body>
<select id="left" onmouseover="new
Effect.Highlight(document.getElementById(''right''));">
</select>
<select id="right">
</select>
</body>
</html>
---8<------------------------------
If I ''mouseover'' the first select box, the second will be
highlighted. Great.
If I ''mouseover'' and rapidly
''mouseout-mouseover'' the first select box
whereas the effect is not finished, the second select box will be
freezed, i.e. the select box remains yellow and will not anymore
return to initial state.
It is a bug ? a feature ?
Is there a workaround ?
I''m working on Firefox 1.0.7/Fedora Core 3 and it seems to be the same
on IE6/Win2003
Thanks,
Nicolas Terray
On 12/8/05, Nicolas Terray <nicolas.terray-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Hi All, > > I''ve just discover scriptaculous and it is a really good library. Even > if I have some difficulties with short syntax in javascript code :/ > > I have a strange behaviour with Effect.Highlight, and as it''s said on > bug report page : > "It''s also a good idea to discuss this on the Mailing List beforehand, > maybe it''s already known and in the works, or it isn''t a bug ("it''s a > feature!")." > > Well. With this code : > ---8<------------------------------ > <html> > <head> > <script src="prototype.js" type="text/javascript"></script> > <script src="scriptaculous.js" type="text/javascript"></script> > </head> > <body> > <select id="left" onmouseover="new > Effect.Highlight(document.getElementById(''right''));"> > </select> > <select id="right"> > </select> > </body> > </html> > ---8<------------------------------ > If I ''mouseover'' the first select box, the second will be highlighted. Great. > If I ''mouseover'' and rapidly ''mouseout-mouseover'' the first select box > whereas the effect is not finished, the second select box will be > freezed, i.e. the select box remains yellow and will not anymore > return to initial state. > > It is a bug ? a feature ? > Is there a workaround ? > > I''m working on Firefox 1.0.7/Fedora Core 3 and it seems to be the same > on IE6/Win2003 > > Thanks, > Nicolas Terray >To reproduce the bug. If you go to : http://wiki.script.aculo.us/scriptaculous/show/CombinationEffectsDemo and double-clic where it is said "Click for Effect.Highlight demo" then the effect will be frozen :( It seems to be a "real" bug, no ? Nicolas Terray
Looks like the Effect is grabing the color of the element at the moment of the second click. In other words, while the effect is running, the current color of the element is not the 'normal' color nor the 'highlight' color, but whatever it currently is during the first run of the effect. Is that right? Regards, Cam On 12/8/05, Nicolas Terray <nicolas.terray@gmail.com> wrote:> To reproduce the bug. > > If you go to : > http://wiki.script.aculo.us/scriptaculous/show/CombinationEffectsDemo > > and double-clic where it is said "Click for Effect.Highlight demo" > then the effect will be frozen :( > > It seems to be a "real" bug, no ? > > Nicolas Terray_______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
Am 08.12.2005 um 08:49 schrieb Nicolas Terray:> > If I ''mouseover'' the first select box, the second will be > highlighted. Great. > If I ''mouseover'' and rapidly ''mouseout-mouseover'' the first select box > whereas the effect is not finished, the second select box will be > freezed, i.e. the select box remains yellow and will not anymore > return to initial state. > > It is a bug ? a feature ? >Feature. The effects let you the choice of exactly when they should be run. If you''re calling Effect.Highlight on an element that already has an Effect.Highlight going on, they will clash as they try to manipulate the same CSS styles.> Is there a workaround ?new Effect.Highlight(''right'',{queue:''end''}); This will use the effect queuing feature of script.aculo.us to make sure that the Effect.Highlight calls will not clash and will be executed in order. (btw, you don''t need to use the getElementById stuff) Thomas
On 12/9/05, Thomas Fuchs <t.fuchs-moWQItti3gBl57MIdRCFDg@public.gmane.org> wrote:> > Am 08.12.2005 um 08:49 schrieb Nicolas Terray: > > > > If I ''mouseover'' the first select box, the second will be > > highlighted. Great. > > If I ''mouseover'' and rapidly ''mouseout-mouseover'' the first select box > > whereas the effect is not finished, the second select box will be > > freezed, i.e. the select box remains yellow and will not anymore > > return to initial state. > > > > It is a bug ? a feature ? > > > > Feature. The effects let you the choice of exactly when they should > be run. If you''re calling Effect.Highlight on an element that already > has an Effect.Highlight going on, they will clash as they try to > manipulate the same CSS styles. >To my mind, clash is not as positive as feature. ;)> > Is there a workaround ? > > new Effect.Highlight(''right'',{queue:''end''}); > > This will use the effect queuing feature of script.aculo.us to make > sure that the Effect.Highlight calls will not clash and will be > executed in order. >Thanks ! However it is not really the behaviour expected for the final user. The element will be highlighted twice (or more) whereas the user has just mouseover-out-over-... the element in less than half a second. The effects will be queued and will last 2 seconds or more :( I''m thinking about this solution : 1. when I want to highlight an element, I create a new Effect.Highlight and attach this instance to the element : --8<---- if (!el.highlighter) { el.highlighter = new Effect.Highlight(el); } --8<---- 2. I check if there is already one running --8<---- ??? How can I check ??? --8<---- 2. If yes I do nothing 3. if not I relaunch the effect --8<---- ??? I look at methods like render() but I don''t find the solution ??? --8<---- What do you think ? Is it possible ? Nicolas Terray
On 12/9/05, Thomas Fuchs <t.fuchs-moWQItti3gBl57MIdRCFDg@public.gmane.org> wrote:> > Is there a workaround ? > > new Effect.Highlight(''right'',{queue:''end''}); > > This will use the effect queuing feature of script.aculo.us to make > sure that the Effect.Highlight calls will not clash and will be > executed in order. >Well, it is not really a workaround. Take this code : ---8<------------------------- <html> <head> <script src="prototype.js" type="text/javascript"></script> <script src="scriptaculous.js" type="text/javascript"></script> </head> <body> <select id="left" onmouseover="new Effect.Highlight(''right1'', {queue:''end''});new Effect.Highlight(''right2'', {queue:''end''});new Effect.Highlight(''right3'', {queue:''end''});"> </select> <select id="right1"> </select> <select id="right2"> </select> <select id="right3"> </select> </body> </html> ---8<------------------------- It is horrible ! Juste mouseover-mouseout-mouseover the first element and you will see that this solution is not acceptable... :( Nicolas Terray
Sorry to reply to myself...
I experiment this code and it seems to work fine for me :
--8<----------------
<html>
<head>
<script src="prototype.js"
type="text/javascript"></script>
<script src="scriptaculous.js"
type="text/javascript"></script>
<script type="text/javascript">
var highlights = {
''_highlight'': {},
''right'': function() {
if (!this._highlight[''right'']) {
this._highlight[''right''] = new
Effect.Highlight(''right'');
} else {
this._highlight[''right''].start(this._highlight[''right''].options);
}
}
}
</script>
</head>
<body>
<select id="left"
onmouseover="highlights.right();">
</select>
<select id="right">
</select>
</body>
</html>
--8<----------------
Does any script.aculo.us guru can say if this code is horrible or if
it can be use in production ?
Could it be improved ?
Thanks in advance,
Nicolas Terray