Discussion :

[nicolas2603]

Bonjour,

Je tente, via jQuery, de donner une classe à un conteneur de la manière suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var randomheader = Math.floor(Math.random()*14)+1;
$('#entete').addClass('background-'+randomheader).removeClass('background-0');

Cela fonctionne sur tous les navigateurs, sauf Internet Explorer. Personnellement je teste sur IE8.
J'ai vu pas mal de posts sur le net indiquant qu'effectivement IE gérait très mal les addClass, mais impossible de trouver une méthode qui me donne le résultat attendu.

Avez-vous une idée ?
Merci d'avance

[SpaceFrog]

je n'ai a ce jour pas rencontré de souci avec addClass sous IE ...
évite peut être le - dans le className

[nicolas2603]

En retirant le - j'ai le même résultat !

[NoSmoking]

Bonjour,
effectivement il n'y a aucun problème entre IE8 et addClass, les modifications s'opèrent bien.

nota: testé avec
<script src="http://code.jquery.com/jquery-latest.js"></script>.

J'ai quand même une remarque, le removeClass('background-0') ne supprimera que la première fois, mais si il y a d'autre changement il te faudrait tout remover, mais c'est peu être pas ce que tu cherches à faire.

Je ferais presque plus un
$('#entete').removeClass().addClass('background-'+randomheader);

[SpaceFrog]

sinon il existe aussi toggleClass http://api.jquery.com/toggleClass/

[nicolas2603]

OK, après des tests plus poussés je me rends compte effectivement que le addClass est bien géré, j'étais dans l'erreur.

Le problème vient du style en lui-même, apparemment l'image de fond ne se charge pas; par exemple voici deux styles, le background-0 étant celui par défaut :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.background-0{background:#5bb108 url(../img/green/header.jpg);background:url(../img/green/header.jpg), -moz-linear-gradient(top, #5bb108 0%, #89d93b 100%);background:url(../img/green/header.jpg), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5bb108), color-stop(100%,#89d93b));background:url(../img/green/header.jpg), -webkit-linear-gradient(top, #5bb108 0%,#89d93b 100%);background:url(../img/green/header.jpg), -o-linear-gradient(top, #5bb108 0%,#89d93b 100%);background:url(../img/green/header.jpg), -ms-linear-gradient(top, #5bb108 0%,#89d93b 100%);background:url(../img/green/header.jpg), linear-gradient(to bottom, #5bb108 0%,#89d93b 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bb108',endColorstr='#89d93b',GradientType=0)}
.background-1{background:#5bb108 url(../img/green/header-1.jpg);background:url(../img/green/header-1.jpg), -moz-linear-gradient(top, #5bb108 0%, #89d93b 100%);background:url(../img/green/header-1.jpg), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5bb108), color-stop(100%,#89d93b));background:url(../img/green/header-1.jpg), -webkit-linear-gradient(top, #5bb108 0%,#89d93b 100%);background:url(../img/green/header-1.jpg), -o-linear-gradient(top, #5bb108 0%,#89d93b 100%);background:url(../img/green/header-1.jpg), -ms-linear-gradient(top, #5bb108 0%,#89d93b 100%);background:url(../img/green/header-1.jpg), linear-gradient(to bottom, #5bb108 0%,#89d93b 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bb108',endColorstr='#89d93b',GradientType=0);}

Si je retire filter:progid:DXImageTransform.Microsoft.gradient cela fonctionne.
En tout cas merci pour le reste.