Conflit script jQuery

**monski_4** · 10/03/2011, 17h25

Voilà j'ai deux script séparé qui marche très bien et j'aimerais le fusionner mais quand j'essaie c'est soit l'un ou l'autre qui marche pas (suivant dans quel ordre je met les lien dans la page)

voila le premier script:
http://www.concepteurmultimedia.ch/~...llapsible.html

que j'aimerais mettre dans celui-là:
http://www.concepteurmultimedia.ch/~...r/essaiscroll/

Et pour l'instant ça me donne ça:
http://www.concepteurmultimedia.ch/~vschaer/essai/

J'ai beaucoup cherché mais je comprends pas ces histoires de conflits, si quelqu'un peut m'aider c'est génial.

Merci beaucoup.

Monski

**danielhagnoul** · 11/03/2011, 11h36

Bonjour

Dans http://www.concepteurmultimedia.ch/~...llapsible.html vous utilisez jQuery 1.4.4 (nous en sommes à la version 1.5.1) et des éléments épars d'une ancienne version de jQuery UI

Dans http://www.concepteurmultimedia.ch/~...r/essaiscroll/ vous utilisez une bibliothèque alternative "jQuery Tools" qui malgré son nom n'a rien à voir avec les versions officielles.

Que le mélange des trois vous donne un résultat bizarre ne m'étonne pas.

**monski_4** · 11/03/2011, 15h52

Envoyé par danielhagnoul

Bonjour

Dans http://www.concepteurmultimedia.ch/~...llapsible.html vous utilisez jQuery 1.4.4 (nous en sommes à la version 1.5.1) et des éléments épars d'une ancienne version de jQuery UI

Dans http://www.concepteurmultimedia.ch/~...r/essaiscroll/ vous utilisez une bibliothèque alternative "jQuery Tools" qui malgré son nom n'a rien à voir avec les versions officielles.

Que le mélange des trois vous donne un résultat bizarre ne m'étonne pas.

Alors qu'est ce que je dois faire pour résoudre mon problème ?

**danielhagnoul** · 11/03/2011, 20h42

Bonsoir

Je ne peux vous donner qu'un conseil, reconstruire à partir de zéro sur la base de jQuery 1.5.1 et de jQuery 1.8.10 (n'oubliez pas les styles jQuery UI).

Voir : http://www.developpez.net/forums/d10...10-disponible/

**monski_4** · 16/03/2011, 17h30

Envoyé par danielhagnoul

Bonsoir

Je ne peux vous donner qu'un conseil, reconstruire à partir de zéro sur la base de jQuery 1.5.1 et de jQuery 1.8.10 (n'oubliez pas les styles jQuery UI).

Voir : http://www.developpez.net/forums/d10...10-disponible/

Merci pour votre réponse, donc maintenant je cherche une alternative Jquery (normal) de http://flowplayer.org/tools/demos/sc...zed.html#story et j'ai trouvé ça http://www.ndoherty.biz/demos/coda-slider/1.1.1/#1 . Pensez vous qu'il est possible d'y incorporer ça http://jqueryui.com/demos/accordion/#collapsible sans trop de problème ?

Si vous avez d'autre script ressemblant qui pourrait mieux aller ensemble c'est volontier.

Merci pour votre réponse.

**danielhagnoul** · 16/03/2011, 23h56

Bonsoir

L'association de jQuery UI Accordion avec UI Tabs ou UI Accordion avec le plugin Coda-Slider 2.0 (http://www.ndoherty.biz/tag/coda-slider/) devrait fonctionner sans problème sous réserve d'utiliser les dernières versions des widgets et du plugin.

Voir les pages de démonstration du plugin et les conseils d'installation du plugin (http://www.ndoherty.biz/forums/viewtopic.php?f=4&t=3), ainsi que la liste des options (http://www.ndoherty.biz/forums/viewtopic.php?f=4&t=2) du plugin.

Exemple d'utilisation :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<div class="coda-slider-wrapper">
   	<div id="coda-nav-left-5" class="coda-nav-left"><a href="#" title="Slide left">«</a></div>
	<div id="coda-nav-5" class="coda-nav">
		<ul>
			<li class="tab1"><a href="#1">Panel 1</a></li>
			<li class="tab2"><a href="#2">Panel 2</a></li>
			<li class="tab3"><a href="#3">Panel 3</a></li>
			<li class="tab4"><a href="#4">Panel 4</a></li>
		</ul>
	</div>
	<div id="coda-nav-right-5" class="coda-nav-right"><a href="#" title="Slide right">»</a></div>
	<div class="coda-slider preload" id="coda-slider-5">
		<div class="panel">
			<div class="panel-wrapper">
				<div id="accordion-1">
					<h3><a href="#">Section 1</a></h3>
					<div>
						<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
					</div>
					<h3><a href="#">Section 2</a></h3>
					<div>
						<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
					</div>
					<h3><a href="#">Section 3</a></h3>
					<div>
						<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
						<ul>
							<li>List item one</li>
							<li>List item two</li>
							<li>List item three</li>
						</ul>
					</div>
					<h3><a href="#">Section 4</a></h3>
					<div>
						<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
					</div>
				</div>
			</div>
			</div>
		</div>
		<div class="panel">
			<div class="panel-wrapper">
				<div id="accordion-2">
					<h3><a href="#">Section 1</a></h3>
					<div>
						<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
					</div>
					<h3><a href="#">Section 2</a></h3>
					<div>
						<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
					</div>
					<h3><a href="#">Section 3</a></h3>
					<div>
						<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
						<ul>
							<li>List item one</li>
							<li>List item two</li>
							<li>List item three</li>
						</ul>
					</div>
					<h3><a href="#">Section 4</a></h3>
					<div>
						<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
					</div>
				</div>
			</div>
			</div>
		</div>
		<div class="panel">
			<div class="panel-wrapper">
				<div id="accordion-3">
					<h3><a href="#">Section 1</a></h3>
					<div>
						<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
					</div>
					<h3><a href="#">Section 2</a></h3>
					<div>
						<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
					</div>
					<h3><a href="#">Section 3</a></h3>
					<div>
						<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
						<ul>
							<li>List item one</li>
							<li>List item two</li>
							<li>List item three</li>
						</ul>
					</div>
					<h3><a href="#">Section 4</a></h3>
					<div>
						<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
					</div>
				</div>
			</div>
			</div>
		</div>
		<div class="panel">
			<div class="panel-wrapper">
				<div id="accordion-4">
					<h3><a href="#">Section 1</a></h3>
					<div>
						<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
					</div>
					<h3><a href="#">Section 2</a></h3>
					<div>
						<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
					</div>
					<h3><a href="#">Section 3</a></h3>
					<div>
						<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
						<ul>
							<li>List item one</li>
							<li>List item two</li>
							<li>List item three</li>
						</ul>
					</div>
					<h3><a href="#">Section 4</a></h3>
					<div>
						<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
					</div>
				</div>
			</div>
		</div>
	</div><!-- .coda-slider -->
</div><!-- .coda-slider-wrapper -->

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
	<script>
		$(function(){
			$("[id^='accordion-']").accordion({
				collapsible: true
			});
 
			$('#coda-slider-5').codaSlider({
				dynamicArrows: false,
				dynamicTabs: false
			});
       });
	</script>

Conflit script jQuery

jQuery

Discussions similaires

Partager

Partager