The fix in general will most likely involve you setting a flag on the first mouseover, and unsetting that flag once the roll-down is complete... if you get subsequent mouseovers while the flag is still set (rolldown still happening), do nothing or handle elegantly somehow (up to you)... as far Safari firing for every text character, you'll have to first detect for safari, if safari == true, then do a lookup based on the fromElement and toElement of the mouseover/mouseout to see if the element firing the mouseover is actually a child of the parent element the mouse came from (if so do nothing)... etc, etc, etc... fun stuff.
On 6/16/06, Laurent LaSalle <[EMAIL PROTECTED]> wrote:
Anyone?
> I am trying to achieve a Flash-like menu with OnMouseOver effects
> on 3 divs below. Unfortunately, the _javascript_ resets when the
> mouse is rolled over the text and if you go mouse crazy on the
> divs, the script seems to remember where it cut off, and doesn't
> roll down completely afterwards.
>
> Is it a good place to ask for help? I couldn't find any
> Scriptaculous forum (only a wishlist place where no help seems to
> be offered)...
>
> ——— THE CODE ———
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
> <head>
> <meta http-equiv="content-type" content="text/html;
> charset=utf-8" />
> <title>
> Untitled
> </title>
> <meta name="generator" content="BBEdit 8.2" />
> <style type="text/css" title="text/css">
> /* <![CDATA[ */
> body
> {
> padding: 10px;
> margin: 0;
> }
>
> .menu
> {
> width: 90px;
> height: 92px;
> padding: 0 0 0 6px;
> margin: 0 10px 0 0;
> border-left: #CCC;
> border-width: 0 0 0 1px;
> border-style: none none none solid;
> color: #000;
> font-family: "Trebuchet MS", trebuchet, sans serif;
> font-size: 14px;
> line-height: 22px;
> text-transform: uppercase;
> text-align: left;
> position: relative;
> float: left;
> }
>
> #accueil { z-index: 10; }
>
> #accueilhover
> {
> background-color: #CCC;
> margin-left: -107px;
> z-index: 5;
> background-image: url(coin.png);
> background-repeat: no-repeat;
> background-position: right bottom;
> }
>
> #organisme { z-index: 10; }
>
> #organismehover
> {
> background-color: #CCC;
> margin-left: -107px;
> z-index: 5;
> background-image: url(coin.png);
> background-repeat: no-repeat;
> background-position: right bottom;
> }
>
> #clients { z-index: 10; }
>
> #clientshover
> {
> background-color: #CCC;
> margin-left: -107px;
> z-index: 5;
> background-image: url(coin.png);
> background-repeat: no-repeat;
> background-position: right bottom;
> }
>
> /* ]]> */
> </style> <script src=""
> type="text/_javascript_"></script> <script
> src="" type="text/_javascript_"></script>
> <script type="text/_javascript_">
> // <![CDATA[
>
> function mover(cible) {
> new Effect.BlindDown(cible, { duration: 0.15 });
> return false;
> }
>
> function mout(cible) {
> new Effect.BlindUp(cible, { duration: 0.15 });
> return false;
> }
>
> // ]]>
> </script>
> </head>
> <body>
> <div class="menu" id="accueil"
> >> <a href="">> Accueil
> </a>
> </div>
> <div class="menu" id="accueilhover" style="display: none;">
> </div>
> <div class="menu" id="organisme"
> >> >> <a href="">> Organisme
> </a>
> </div>
> <div class="menu" id="organismehover" style="display: none;">
> </div>
> <div class="menu" id="clients" >> >> <a href=""
> Clients
> </a>
> </div>
> <div class="menu" id="clientshover" style="display: none;">
> </div>
> </body>
> </html>_______________________________________________
> Rails-spinoffs mailing list
> [email protected]
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
_______________________________________________
Rails-spinoffs mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
_______________________________________________ Rails-spinoffs mailing list [email protected] http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
