Pourquoi y a t il un conflit entre deux appel jquery

[pierrot10]

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
 
<!--[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() {
    	$("#image_category").prepend('<div class="mask_cat_img"></div>');
        $("#image_category").css('border','0px')
    });
    </script>
<![endif]-->

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?

[SpaceFrog]

Un des basiques du DOM est qu'un id DOIT ETRE UNIQUE.

[pierrot10]

Ha oui, la honte que je me paye .
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é

[SpaceFrog]

Code :

$("#image_category")

ben ça ça agit sur l'element

[pierrot10]

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>

[danielhagnoul]

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]-->