Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

probleme avec evenements mouseover et mouseout - propriété className

12 réponses
Avatar
pollux
bonjour, j'ai un petit soucis

je suis en train de faire un menu CSS
pour IE j'ai besoin d'attacher des évènement onmousehover et onmouseout
sur des élements d'une liste

j'utilise cette fonction :

sfHover = function() {

var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
var cl = new RegExp(" sfhover\\b");
this.className=this.className.replace(cl, "");
cl = null;
}
}
sfEls ="";
}

if (window.attachEvent) window.attachEvent("onload", sfHover);

le problême ne vient pas de la regexp, j'ai essayé avec autre chose de
moins gourmand et c'est la même chose.

Le comportement dans IE est normal au départ, menu rapide, puis devient
de plus en plus lent au fur à mesure que je passe sur les éléments de la
liste, plus je passe sur des élément et plus ça ralenti, en fait le
curseur de la souris oscille en passant du curseur normal au curseur
avec le sablier.

Il semblerait que ça soit dû a l'utilisation de la propriété className


la mémoire utilisée par IE monte et l'utilisation du processeur monte
petit à petit jusqu'à 80%

c'est un peu énorme quand même

c'est le seul script que j'utilise sur cette page

avez vous une idée de ce qui cause ce ralentissement ?

10 réponses

1 2
Avatar
ASM
pollux wrote:
bonjour, j'ai un petit soucis

je suis en train de faire un menu CSS
pour IE j'ai besoin d'attacher des évènement onmousehover et onmouseout
sur des élements d'une liste


corrigé :

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className = this.className==''? "sfhover" : '';
}
sfEls[i].onmouseout=function() {
this.className = this.className==''? "sfhover" : '';
}
}
}


if (window.attachEvent) window.attachEvent("onload", sfHover);
[...]

avez vous une idée de ce qui cause ce ralentissement ?


Non, et ne suis pas certain que çà m'interresse
Il n'y a qu'à ne pas utiliser IE !

--
Stephane Moriaux et son [moins] vieux Mac

Avatar
pollux
ASM wrote:
pollux wrote:

bonjour, j'ai un petit soucis

je suis en train de faire un menu CSS
pour IE j'ai besoin d'attacher des évènement onmousehover et
onmouseout sur des élements d'une liste



corrigé :

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className = this.className==''? "sfhover" : '';
}
sfEls[i].onmouseout=function() {
this.className = this.className==''? "sfhover" : '';
}
}
}


Ce n'est pas exact, il n'y a pas d'erreur dans le code, seulement au
niveau du comportement d'IE


Non, et ne suis pas certain que çà m'interresse
Il n'y a qu'à ne pas utiliser IE !



Aller dire ça au directeur marketing et au directeur informatique d'une
trés grande enseigne que vous emmerdez IE et que 80% de leurs clients
n'auront pas accés à la navigation parceque vous emmerdez IE, on va
rigoler tiens.


Avatar
pollux
ASM wrote:
Non, et ne suis pas certain que çà m'interresse
Il n'y a qu'à ne pas utiliser IE !


j'ajouterai que si ça ne vous interesse pas, ne répondez pas, c'est tout
simple.

Avatar
ASM
pollux wrote:
ASM wrote:
corrigé :

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className = this.className==''? "sfhover" : '';
}
sfEls[i].onmouseout=function() {
this.className = this.className==''? "sfhover" : '';
}
}
}



Ce n'est pas exact, il n'y a pas d'erreur dans le code, seulement au
niveau du comportement d'IE


Justement : çà lui facilite (normalement ? -> simple changement de classe)
Note que de toutes façons çà le fera ramer
surtout s'il y en a un taf

demo amusante ?
(à voir avec IE et FF -> la diférence !)
http://perso.wanadoo.fr/stephane.moriaux/truc/tables_un-sur-deux_rows_fr.htm
passer la souris sur les rangées
(il n'y a mousqquechose que pour IE, pour les autres c'est du css)
IE çà rame hein ?
et bien rajoute qques tables pour voir


--
Stephane Moriaux et son [moins] vieux Mac


Avatar
ASM
pollux wrote:
ASM wrote:
Il n'y a qu'à ne pas utiliser IE !


Aller dire ça au directeur marketing et au directeur informatique d'une
trés grande enseigne que vous emmerdez IE et que 80% de leurs clients
n'auront pas accés à la navigation parceque vous emmerdez IE, on va
rigoler tiens.


une navigation par mouse over ? (*)
et y a pas sans JS ?
et çà n'emmerde pas le marqueting de perdre ces clients ?


(*) le premier lien tête de chapitre
doit mener à une page html qui a, en menu, les sous chapitres en clair
=== les autres sous-liens en mouseover sont là pour un plus accessoire

ceci étant, on doit pouvoir tourner la difficulté
en ayant les mouseover sur des liens
(qui alors déplient l'bazar au survol sans fonction JS)

--
Stephane Moriaux et son [moins] vieux Mac


Avatar
pollux
ASM wrote:
pollux wrote:

ASM wrote:
(*) le premier lien tête de chapitre

doit mener à une page html qui a, en menu, les sous chapitres en clair
=== > les autres sous-liens en mouseover sont là pour un plus accessoire

ceci étant, on doit pouvoir tourner la difficulté
en ayant les mouseover sur des liens
(qui alors déplient l'bazar au survol sans fonction JS)



ben disons que pour mon menu j'utilise des listes UL et LI il faut donc
un comportement mouseover sur le li et je ne vois pas d'autres myen que
de rattacher cet evenement par JS pour IE


Avatar
ASM
pollux wrote:
ASM wrote:

j'ajouterai que si ça ne vous interesse pas, ne répondez pas, c'est tout
simple.


J'ajouterais qu'à vouloir faire compliqué (*)
comment s'étonner qu'un logiciel déclinant
s'essouffle !

(*) faut quand même y penser faire calculer à la volée
un nom de class à chaque mouseqquechose !
d'autant qu'après il lui faut effectivement changer de class


--
Stephane Moriaux et son [moins] vieux Mac

Avatar
ASM
pollux wrote:

ben disons que pour mon menu j'utilise des listes UL et LI il faut donc
un comportement mouseover sur le li et je ne vois pas d'autres myen que
de rattacher cet evenement par JS pour IE


<ul id="menu">
<li><a href="principal">Principal>
<ul>
<li><a href="secondaire1.htm">secondaire 1</a></li>
<li><a href="secondaire2.htm">secondaire 2</a></li>
<li><a href="secondaire3.htm">secondaire 3</a></li>
</ul>
</li>
</ul>

#menu ul li { bla bla }
#menu ul li a { bla bla }
#menu ul li a ul { display: none; }
#menu ul li a:hover ul { display: block; }

voir chez OpenWeb le menu intelligent

--
Stephane Moriaux et son [moins] vieux Mac

Avatar
pollux
ASM wrote:
pollux wrote:

ASM wrote:

j'ajouterai que si ça ne vous interesse pas, ne répondez pas, c'est
tout simple.



J'ajouterais qu'à vouloir faire compliqué (*)
comment s'étonner qu'un logiciel déclinant
s'essouffle !

(*) faut quand même y penser faire calculer à la volée
un nom de class à chaque mouseqquechose !
d'autant qu'après il lui faut effectivement changer de class


bah oui je sais bien, mais pusique IE ne gère pas correctement CSS faut

bien trouver un truc.

Je voulais faire un menu CSS pour sa légèreté et normalement sa
standardisation, mais bon je me fourre le doigt dans l'oeil encore une fois

Je n'ai aucun probleme avec opera, safari, firefox et netscape,
mais encore une fois à cause de cette grosse daube d'IE ... grumpf

J'ai pas besoin de JS pour les autres navigateurs, le menu est
accessible et tout.

mon truc marcherait bien avec IE pour un menu à 1 seul niveau, mais
voila il y a 3 niveau et il est rempli de chez rempli et ça le fait ramer...

Je me rabat par dépit sur du JS pur avec l'excellent coolmenu


Avatar
ASM
pollux wrote:
(*) faut quand même y penser faire calculer à la volée
un nom de class à chaque mouseqquechose !
d'autant qu'après il lui faut effectivement changer de class


bah oui je sais bien, mais pusique IE ne gère pas correctement CSS faut

bien trouver un truc.


je t'ai donnée la correction qui n'en paraît pas une pour toi ...

Je voulais faire un menu CSS pour sa légèreté et normalement sa
standardisation, mais bon je me fourre le doigt dans l'oeil encore une fois


non non,
il n'y a besoin que de la petite béquille pour IE

mon truc marcherait bien avec IE pour un menu à 1 seul niveau, mais
voila il y a 3 niveau et il est rempli de chez rempli et ça le fait
ramer...

Je me rabat par dépit sur du JS pur avec l'excellent coolmenu


c'est désespérant si c'est tout en JS


--
Stephane Moriaux et son [moins] vieux Mac


1 2