Discussion :

[<romain/>]

Salut,


je suis en train de refaire mon site et j'ai un petit problème avec jQuery.

En fait mon script fonctionne parfaitement sous firefox mais pas sous internet explorer. Je savais qu'il y avait des différences entre les deux navigateurs pour le css mais pas pour le javascript (que je maitrise moins).


Mon code javascript est le suivant :

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
 
 window.onload = function () {
            var container = $('div.sliderGalerie');
            var ul = $('ul', container);
 
            var itemsWidth = ul.innerWidth() - container.outerWidth();
 
			$('.slider', container).slider({
                min: 0,
                max: itemsWidth,
                handle:'.curseur',
                stop: function (event, ui) {					
                    ul.animate({'left' : ui.value * -1}, 500);
                },
                slide: function (event, ui) {
                    ul.css('left', ui.value * -1);
                }
            });
 
 
        };

Mon xhtml:

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
 
<div id="portfolio">
 
	<div class="sliderGalerie">
 
		<ul class="image">
			<li><img src="wp-content/themes/perso/img/affiches/affiche1P.jpg" alt="affiche1P" title="affiche1P"/></li>
			<li><img src="wp-content/themes/perso/img/affiches/affiche1P.jpg" alt="affiche1P" title="affiche1P"/></li>
			<li><img src="wp-content/themes/perso/img/affiches/affiche1P.jpg" alt="affiche1P" title="affiche1P"/></li>
			<li><img src="wp-content/themes/perso/img/affiches/affiche1P.jpg" alt="affiche1P" title="affiche1P"/></li>
			<li><img src="wp-content/themes/perso/img/affiches/affiche1P.jpg" alt="affiche1P" title="affiche1P"/></li>
			<li><img src="wp-content/themes/perso/img/affiches/affiche1P.jpg" alt="affiche1P" title="affiche1P"/></li>
			<li><img src="wp-content/themes/perso/img/affiches/affiche1P.jpg" alt="affiche1P" title="affiche1P"/></li>
			<li><img src="wp-content/themes/perso/img/affiches/affiche1P.jpg" alt="affiche1P" title="affiche1P"/></li>
			<li><img src="wp-content/themes/perso/img/affiches/affiche1P.jpg" alt="affiche1P" title="affiche1P"/></li>
			<li><img src="wp-content/themes/perso/img/affiches/affiche1P.jpg" alt="affiche1P" title="affiche1P"/></li>
			<li><img src="wp-content/themes/perso/img/affiches/affiche1P.jpg" alt="affiche1P" title="affiche1P"/></li>
			<li><img src="wp-content/themes/perso/img/affiches/affiche1P.jpg" alt="affiche1P" title="affiche1P"/></li>
		</ul>	
 
		<div class="slider">
		    <div class="curseur"></div>
		    <span class="slider1">sites web</span>
		    <span class="slider2">affiches</span>
  		</div>
 
	</div>
 
 
</div>

Quelqu'un aurait il une idée? C'est pas évident de débugguer le js sous IE.

Merci, d'avance

[Bovino]

Et ton problème, c'est quoi ?

[<romain/>]

huuum..oui j'ai peut-être pas été assez claire


Mais en même temps c'est pas évident étant donné que ce script marche sous firefox mais pas sous internet explorer.

En fait ce script permet normalement de faire défiler les images qui sont ds le bloc : <ul class="image"> avec un slider...
Le slider fonctionne très bien sous ff mais sous IE il n'y a pas moyen de le bouger.

C'est plus claire?

[Bovino]

Code :

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

var itemsWidth = ul.innerWidth() - container.outerWidth();

IE ne reconnait pas innerWidth() et outerWidth()

[<romain/>]

tu es sur de ca?:s

Parceque ce que je veux faire c'est quelque chose comme ca :
http://ui.jquery.com/repository/real...roduct-slider/


J'ai donc suivi le tuto proposé. Le truc c'est que ce site meme si il y a un probleme de css sous IE il fonctionne sur IE et pourtant leur script utilise les 2 fonctions:s

[<romain/>]

C'était pas ca,quand je fixe une valeur a itemsWidth ca ne fonctionne tjs pas sous Internet explorer.


Quelqu'un a une idée?