Discussion :

[sheira]

Bonjour à tous!

Voilà mon problème, j'ai une carousel qui fonctionne parfaitement sous FF, Safari et chrome mais pas du tout sous IE (IE7 + IE8)

Voici le code JS:

Code :

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
/* Initialisation du carousel 3D */
$(document).ready(function(){
	// This initialises carousels on the container elements specified, in this case, carousel1.
	$("#carousel1").CloudCarousel(
	{
		xPos: 200,
		yPos: 30,
		buttonLeft: $('#but3'),
		buttonRight: $('#but4'),
		altBox: $("#alt-text"),
		titleBox: $("#title-text"),
		FPS:30,
		autoRotate: 'left',
		autoRotateDelay: 3000,
		speed:0.15,
		mouseWheel:true,
		minScale:0.25,
		reflHeight:50,
		yRadius:80
	});
});

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
(function($) {
 
var types = ['DOMMouseScroll', 'mousewheel'];
 
$.event.special.mousewheel = {
	setup: function() {
		if ( this.addEventListener )
			for ( var i=types.length; i; )
				this.addEventListener( types[--i], handler, false );
		else
			this.onmousewheel = handler;
	},
 
	teardown: function() {
		if ( this.removeEventListener )
			for ( var i=types.length; i; )
				this.removeEventListener( types[--i], handler, false );
		else
			this.onmousewheel = null;
	}
};
 
$.fn.extend({
	mousewheel: function(fn) {
		return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
	},
 
	unmousewheel: function(fn) {
		return this.unbind("mousewheel", fn);
	}
});
 
 
function handler(event) {
	var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
 
	event = $.event.fix(event || window.event);
	event.type = "mousewheel";
 
	if ( event.wheelDelta ) delta = event.wheelDelta/120;
	if ( event.detail     ) delta = -event.detail/3;
 
	// Add events and delta to the front of the arguments
	args.unshift(event, delta);
 
	return $.event.handle.apply(this, args);
}
 
})(jQuery);

J'utilise le JS de ce carousel:
http://www.professorcloud.com/mainsite/carousel.htm

N'étant pas assez expérimenté en JS, voyez-vous ce qui ne passe pas sous IE?

Merci!

[llaffont]

As tu un flag d'erreur sur IE ?

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
 
(function($) {
 
var types = ['DOMMouseScroll', 'mousewheel'];
 
$.event.special.mousewheel = {
	setup: function() {
		if ( this.addEventListener )
			for ( var i=types.length; i; )
				this.addEventListener( types[--i], handler, false );
		else
			this.onmousewheel = handler;
	},
 
	teardown: function() {
		if ( this.removeEventListener )
			for ( var i=types.length; i; )
				this.removeEventListener( types[--i], handler, false );
		else
			this.onmousewheel = null;
	}
};
 
$.fn.extend({
	mousewheel: function(fn) {
		return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
	},
 
	unmousewheel: function(fn) {
		return this.unbind("mousewheel", fn);
	}
});
 
 
function handler(event) {
	var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
 
	event = $.event.fix(event || window.event);
	event.type = "mousewheel";
 
	if ( event.wheelDelta ) delta = event.wheelDelta/120;
	if ( event.detail     ) delta = -event.detail/3;
 
	// Add events and delta to the front of the arguments
	args.unshift(event, delta);
 
	return $.event.handle.apply(this, args);
}
 
})(jQuery);

Cette partie là n'est pas de toi ?

[sheira]

oui j'ai 2 erreurs js sous IE mais comme j'ai très peu de notion en js, je n'arrive pas à les corriger. Je précise tout de même que les erreurs sont sur d'autres js pas ceux du carousel.

Non ce n'est pas mon code: j'utilise le code de ce carousel:

Code :

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

http://www.professorcloud.com/mainsite/carousel.htm

[llaffont]

le petit bout de code

Code :

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

1
2
(function($) {[...]
})(jQuery);

est un plugin Jquery et doit être dans un fichier JS et attaché à ta page comme ceci.

Code :

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

1
2
 
<script type="text/JavaScript" src="cloud-carousel.1.0.4.min.js"></script>

Montre nous ton code HTML ou sert toi de mon exemple pour le mettre à jour.
Car chez moi tes paramètres fonctionnent.

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
 
 
<html>
<head>
 
<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 
<!-- Load the CloudCarousel JavaScript file -->
<script type="text/JavaScript" src="cloud-carousel.1.0.4.min.js"></script>
 
<script>
$(document).ready(function(){
 
	// This initialises carousels on the container elements specified, in this case, carousel1.
	$("#carousel1").CloudCarousel(		
		{			
		xPos: 200,
		yPos: 30,
		buttonLeft: $('#but3'),
		buttonRight: $('#but4'),
		altBox: $("#alt-text"),
		titleBox: $("#title-text"),
		FPS:30,
		autoRotate: 'left',
		autoRotateDelay: 3000,
		speed:0.15,
		mouseWheel:true,
		minScale:0.25,
		reflHeight:50,
		yRadius:80
 
		}
	);
});
 
</script>
 
</head>
    <body>
    	<!-- This is the container for the carousel. -->
        <div id = "carousel1" style="width:400; height:200;background:#000;overflow:scroll;">            
            <!-- All images with class of "cloudcarousel" will be turned into carousel items -->
            <!-- You can place links around these images -->
            <img class = "cloudcarousel" src="1.png" alt="Flag 1 Description" title="Flag 1 Title" />
            <img class = "cloudcarousel" src="2.png" alt="Flag 2 Description" title="Flag 2 Title" />
            <img class = "cloudcarousel" src="3.png" alt="Flag 3 Description" title="Flag 3 Title" />
            <img class = "cloudcarousel" src="4.png" alt="Flag 4 Description" title="Flag 4 Title" />
        </div>
    </body>
</html>

[sheira]

J'ai la même chose que vous.
Mais ça ne fonctionne pas sous IE.

Mon code html est bien trop long pour que je puisse vous le transmettre ici et ma page n'est pas en ligne, vu qu'elle ne fonctionne pas.

Je suis prête a mettre en ligne ma page qqs temps si vous voulez ou vous envoyer par mail le code html de ma page.

Merci d'avance pour votre réponse

[llaffont]

Il est possible d'ajouter des pièces jointes donc si tu veux partager tes sources via un ZIP (épuré) afin que l'on regarde ça no problem.

Sinon par moment il faut savoir casser un peu son code afin de trouver la section qui coince. J'entends par là que tu devrais essayer de faire une page de test contenant seulement la fonction cloud-carousel si tu pense que cela vient de là.

Car mon exemple précédent fonctionne aussi bien sur IE que FF.

Un autre conseil le flag que tu obtiens en bas sous IE. En double-cliquant dessus tu obtiens une position concernant l'erreur (ligne 84 caractère 9854). Cette position correspond au code source exploité par la page. Code que tu peux consulter par un clique-droit sur la page "Afficher la source".

Si tu connaissais cette méthode désolé de la redonner mais je ne connais pas ton niveau

La plus part du temps les scripts qui fonctionne sous FF et pas sous IE son dû à une tournure, à une virgule oublié, un truc insignifiant...