compatibilite jquery et chargement du DOM

Version imprimable

Bonjour,

Voila mon script jquery ne marche que sur firefox.
Un coup d'oeil avec firebug me permet de voir que opera, safari et internet explorer se foutent de mon script.

J'utilise le cms joomla qui genere du code html pas toujours adapte a ce que je veux faire. J'essai donc de modifier le code html des le chargement du DOM.

Voila mon code html de base pas encore modifie :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div style='text-align:left;'>
     <div>
          <div class="titre_imageprojets">Bois d'Arcy</div>
     </div>
     <img class='img_mosaique_projet' src='http://carton.tymate.eu//templates/carton_architectes/images/img_projets/img_mozaique/vignette1_bois_d_arcy.jpg' border='0' alt='' title='' width='180' height='111' />
<div>
     <div class="telechargerpdf">
          <a href="#">Telecharger la fiche PDF</a>
     </div>
</div>
</div>
 
etc.....la meme chose que ci dessus se repete 18 fois.

et voila le code jquery que j'utilise :

Code:

1
2
3
4
5
 
$("document").ready(function() {
$("div[style*='text-align: left;']").addClass('conteneur_imgprojets').removeAttr("style");
$("div.conteneur_imgprojets div:nth-child(1)").addClass('conteneur_bulle_titreprojets');
});

Grace a ca j'arrive a modifier le code html comme je veux mais uniquement sur Firefox :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div class="conteneur_imgprojets">
     <div class="conteneur_bulle_titreprojets">
          <div class="titre_imageprojets conteneur_bulle_titreprojets">
               Bois d'Arcy
          </div>
     </div>
     <img class="img_mosaique_projet" src="http://carton.tymate.eu//templates/carton_architectes/images/img_projets/img_mozaique/vignette1_bois_d_arcy.jpg" alt="" title="" width="180" border="0" height="111">
     <div>
          <div class="telechargerpdf conteneur_bulle_titreprojets">
                <a href="#">Telecharger la fiche PDF</a>
          </div>
     </div>
</div>

Si quelqu'un peux m'aider je serais vraiment reconnaissant?

Bonsoir.

style n'est pas un attribut, il faut changer pour une class

Code:

1
2
3
.maClasse {
	text-align:left;
}

Code:

1
2
3
$("div.maClasse").addClass('conteneur_imgprojets').removeClass("maClasse");
 
$("div.conteneur_imgprojets div:nth-child(1)").addClass('conteneur_bulle_titreprojets');

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="maClasse">
	<div>
		<div class="titre_imageprojets">
			Bois d'Arcy
		</div>
	</div>
	<img class='img_mosaique_projet' src='http://carton.tymate.eu//templates/carton_architectes/images/img_projets/img_mozaique/vignette1_bois_d_arcy.jpg' border='0' alt='' title='' width='180' height='111' />
	<div>
		<div class="telechargerpdf">
			<a href="#">Telecharger la fiche PDF</a>
		</div>
	</div>
</div>

28/03/2010, 22h34
boucdur

Merci merci,

Mais ca m'aide pas du tout.

Je ne peux pas modifier mon code html. Il est comme ca genere comme ca. Je peux rien rajouter, ni enlever.

C'est donc pour ca que j'utilise le jquery pour jusetment rectifier le code html pour qu'il me convienne mieux.

J'ai fait plein de modifications avec les qq lignes de codes jquery qu'on peut voir dans mon premier post. Mais ce code ne fonctionne que sur firefox.

Avec ce que tu expliques, ca ne me debarasse pas de ce style="text-align" qui me gene dans mon design.
28/03/2010, 23h32
danielhagnoul
Bonsoir.

Citation:

Envoyé par boucdur

Avec ce que tu expliques, ca ne me debarasse pas de ce style="text-align" qui me gene dans mon design.

Je manque de réponses à beaucoup de questions !
1. Pourquoi gêne-t-il ?
2. Pourquoi vouloir s'en débarrasser ?
3. De toute manière text-align est left par défaut, ou alors right, center, ou justify. On ne peut pas se contenter de changer la valeur ?
4. Que contiennent exactement les nouvelles classes conteneur_imgprojets et conteneur_bulle_titreprojets ?
5. Si elles ne sont pas vides, on change bien le code là !