Pourquoi y a t il un conflit entre deux appel jquery

Version imprimable

Bonjour à tous,

Voici mon problème.
J'ai cette structure
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <div id="image_category" class="align_center"> <ul id="home_diapo"> <li> <img id="categoryImage" src="img/p/12-53-large.jpg" /> </li> <li> <img id="categoryImage" src="img/p/6-58-large.jpg" /> </li> </ul> </div>
Sur ce, j'applique du jQuery sur
#image_category et
#home_diapo

Ce script fonctionne très bien sous Firefox et IE
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <script type="text/javascript"> $(document).ready(function() { $("ul#home_diapo").carouFredSel({ items: 1, auto : { duration : 1700, //easing : "easeOutQuad", //easing : "easeOutCubic", easing : "easeOutCubic", pauseDuration : 1700 } }); }); </script>
Ce script doit etre lancer que sur IE
Code:

1 2 3 4 5 6 7 8 9 10 
Il ne fonctionne pas quand le premier est chargé. EN d'autres mots, si je retire le premier de ma page web, le deuxieme fonctionne. Si je le laisse, le balise <div class="mask_cat_img"> ne sont pas ajouté sous <div id="#image_category">.

Avez-vous une idée pourquoi?

31/10/2011, 08h45
SpaceFrog

Un des basiques du DOM est qu'un id DOIT ETRE UNIQUE.
31/10/2011, 11h50
pierrot10

Ha oui, la honte que je me paye :oops:.
Mais es-ce que ca vraiment une influance sur mon problème car mes jquery n'agisse pas sur cet ID
Le premier agit sur #image_category et le deuxième sur #home_diapo

Mais je vais vite corrigé:oops:
31/10/2011, 12h13
SpaceFrog

Code:

$("#image_category")

ben ça ça agit sur l'element

non #image_category est unique,
c'est #categoryImage qui est double

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="image_category" class="align_center">
<ul id="home_diapo">
<li>
<img id="categoryImage" src="img/p/12-53-large.jpg" />
</li>
<li>
 
<img id="categoryImage" src="img/p/6-58-large.jpg" />
</li>
</ul>
</div>

;)

Bonsoir

Il est impossible de placer un nouvel élément du DOM dans une image ! Pas prepend mais before ou after ou wrap selon les besoins.

Vos codes avec les corrections :

Code:

1
2
3
4
5
6
7
8
9
10
11
<div id="image_category" class="align_center">
<ul id="home_diapo">
<li>
<img class="categoryImage" src="img/p/12-53-large.jpg" />
</li>
<li>
 
<img class="categoryImage" src="img/p/6-58-large.jpg" />
</li>
</ul>
</div>

Code:

$("#home_diapo").carouFredSel({

Code:

1
2
3
4
5
6
7
8
<!--[if IE]>
	<script type="text/javascript" src="{$content_dir}themes/rivesgeneve/js/jquery.corner.2.11.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("img.image_category").css('border','none').before('<div class="mask_cat_img"></div>');
    });
    </script>
<![endif]-->