Autres HTML: problème avec Marquee

fanch55 · 6 Août 2024

Marquee est un tag obsolète mais qui est soit-disant encore supporté par tous les navigateurs.
Pour certains cas, le remplacement de ceux-ci par des Css animations avec des@keyframes apporte plus de problèmes que de solutions .

Peu importe, j'ai la surprise depuis un peu plus d'un mois de voir que les Onstart, Onfinish et Onbounce ne semblent plus être honorés par aucun navigateur?

Si quelqu'un a déjà été confronté à ce problème, a-t-il trouvé une solution ?

Un exemple archi simple :

VB:

<!doctype html>
<body>
    <div>behavior="alternate"<br />
        <marquee behavior="alternate" loop="3" width="300" style="border:1px solid red"
                onbounce="console.log('coucou')" onfinish="alert('Finish')" onstart="WriteInfo (event)">
            marquee
        </marquee>
        <div style="color:blue">taratata</div>
    </div>
</body>
    <script type="text/javascript">
        function WriteInfo (event) {
            console.log("coucou");
            var marquee = event.target ? event.target : event.srcElement;
            var info = marquee.parentNode.getElementsByTagName ("div")[0];
            info.innerHTML += event.type + ", ";
        }
    </script>

patricktoulon · 6 Août 2024

bonjour fanch55
essaie ceci

VB:

<!doctype html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10">
</head>
<body>
    <div>behavior="alternate"<br />
        <marquee behavior="alternate" loop="3" width="300" style="border:1px solid red"
                onbounce="console.log('coucou')" onfinish="alert('Finish')" onstart="WriteInfo (event)">
            marquee
        </marquee>
        <div style="color:blue">taratata</div>
    </div>

<script>
        function WriteInfo (event) {
            console.log("coucou");
            var marquee = event.target ? event.target : event.srcElement;
            var info = marquee.parentNode.getElementsByTagName ("div")[0];
            info.innerHTML += event.type + ", ";
        }
    </script>
</body>

fanch55 · 6 Août 2024

Merci Patrick,
le script ne s’exécute toujours pas ( Firefox, Edge, Chrome, Opera ) .

jurassic pork · 7 Août 2024

Hello,
Après différents essais avec des versions récentes de Edge, Firefox, Chrome et avec IE11 sous Windows 11, seul IE11 gère les événements onstart, onfinish, onbounce d'un élément marquee. Par contre si on met un événement onclick il est géré par tous les navigateurs.
Pour ouvrir IE11 sous windows 11 voir ici.
Ami calmant, J.P

fanch55 · 7 Août 2024

Merci JPk, mais la finalité d'emploi du marquee est juste visuel, pas interactif .

Seul l'usage du onbounce m'était utile pour une faire une tempo à la fin du défilement du marquee avant qu'il ne reparte dans l'autre sens, donc pas de click ....

J'ai activé le mode "Internet explorer" sous Edge, seul le click fonctionne ce qui me fait dire que c'est toujours le moteur edge qui est utilisé .

En suivant ton lien, effectivement les events fonctionnent mais je ne me vois pas expliquer aux utilisateurs qu'ils doivent utiliser un tel contournement !!!!

jurassic pork · 7 Août 2024

fanch55 à dit:
Seul l'usage du onbounce m'était utile pour une faire une tempo à la fin du défilement du marquee avant qu'il ne reparte dans l'autre sens, donc pas de click

Je ne sais pas ce que tu as utilisé comme code pour tes essais avec les css mais ici il y a un exemple de code css pour un message qui défile et qui s'arrête pendant un certain temps. Et ici du code css pour du texte qui rebondit (Bouncing Text).

fanch55 · 8 Août 2024

jurassic pork à dit:
Je ne sais pas ce que tu as utilisé comme code pour tes essais avec les css mais ici il y a un exemple de code css pour un message qui défile et qui s'arrête pendant un certain temps. Et ici du code css pour du texte qui rebondit (Bouncing Text).

Je te remercie pour tes liens que j'avais déjà testés avec intérêts ( et que je teste toujours actuellement )
Malheureusement, tous les exemples sont adaptés à eux mêmes .
Le grand défaut de l'animate/css (par rapport au marquee) c'est qu'on n'arrive pas à déterminer correctement son ou ses points de "bouncing", ce qui fait que les déplacements proposés se font toujours avec une valeur en pourcentage souvent empirique et à la petite semaine, quand au déplacement en lui-même, il ne respecte pas la largeur max de son contenant ( d'où la spéc overflow: hidden; qui ne fait que cacher le dépassement ).
Et je ne parle pas des dommages colateraux à la réduction de la fenêtre

Exemple pour une fenêtre à 50% :

HTML:

<!DOCTYPE html>
<title>Sample</title>
<!-- Styles -->   
<style>
.example5 {  position: relative;height: 50px;   
             overflow: hidden; font-size: 25px;
}
.example5 span { position: absolute; height: 100%;
                 width: 100%; margin: 0;
                 line-height: 50px; text-align: center;
                 /* Apply animation */   
                 animation: Sample 5s linear infinite alternate;
}
/* Move animation) */
@keyframes Sample {
              0%   {  transform: translateX(0%); }
              100% {  transform: translateX(100%);  }
}
.center { height: 50px; width:50%;
            border: 1px solid green;
            font-size: 25px;
}
.text  { display: inline-block; margin-top: 8px;
}
</style>
<!-- HTML -->
<div class="example5"
     style="background-color:yellow;max-width:50%;color:white;">
<span style="background-color:red;max-width:100%;">Bouncing css... </span>
</div>
<div  class=center>
<marquee behavior="alternate" scrollamount="5"
         style="background-color:aqua;color:blue;height:100%;">
  <span class="text">Bouncing marquee ..</span>
 </marquee>
</div>

Autres HTML: problème avec Marquee

fanch55

XLDnaute Barbatruc

patricktoulon

XLDnaute Barbatruc

fanch55

XLDnaute Barbatruc

jurassic pork

XLDnaute Occasionnel

fanch55

XLDnaute Barbatruc

jurassic pork

XLDnaute Occasionnel

fanch55

XLDnaute Barbatruc

Discussions similaires