11544 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Fonction Jquery qui ne fonctionne pas sur Firefox

Je ne connais pas encore bien JQuery, en parcourant des forums j'ai trouvé un bout de code que j'ai adapté et qui me sert à faire bouger une div de gauche à droite à l'intérieur d'une autre div avec des boutons. Je ne sais pas si c'est très compréhensible dit comme ça donc voici un exemple et son code :

- le HTML

<div id="bg_slidesites">
  <div id="slide-wrap">
    <div id="inner-wrap">
        <div class='containBox'><img src="cata_imgslide.png" /></div>
        <div class='containBox'><img src="verin_imgslide.png" /></div>
        <div class='containBox'><img src="roul_imgslide.png" /></div>
        <div class='containBox'><img src="sphere_imgslide.png" /></div>
        <div class='containBox'><img src="embray_imgslide.png" /></div>
        <div class='containBox'><img src="klax_imgslide.png" /></div>
    </div>
    <div class="arrow" id="arrowL">
        <img src='slideshow_left.png' onclick="scrollThumb('Go_L')" onmouseover="this.style.cursor='pointer'" />
    </div>
    <div class="arrow" id="arrowR">
        <img src='slideshow_right.png' onclick="scrollThumb('Go_R')" onmouseover="this.style.cursor='pointer'" />
    </div>
  </div>
</div>


- le Javascript

<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
  function scrollThumb(direction) {
    if (direction=='Go_L') {
        $('#slide-wrap').animate({
            scrollLeft: "-=" + 189 + "px"
        });
    }else
    if (direction=='Go_R') {
        $('#slide-wrap').animate({
            scrollLeft: "+=" + 189 + "px"
        });
    }
  }
</script>


- Et le CSS

#bg_slidesites {
    background-image: url(bg_slide.jpg);
    width: 580px;
    height: 103px;
    padding: 6px 0 6px 0;
}

#slide-wrap {
    width: 568px;
    height: 103px;
    overflow: hidden;
    margin: 0 6px 0 6px;
}

#inner-wrap {
    float: left;
    height: 103px;
    white-space: nowrap;
}

.containBox {
    width: 159px;
    height: 100%;
    padding: 0 15px 0 15px;
    float: left;
    display: inline-block;
}

.arrow {
    display: block;
    width: 17px;
    height: 43px;
    position: absolute;
    margin-top: 30px;
}

#arrowL {
    margin-left:-6px;
}

#arrowR {
    margin-left:557px;
}


Cela fonctionne très bien sur Chrome et Safari mais pas sur IE et Firefox.

Quelqu'un saurait d'où cela peut venir?
Déjà bonjour Smiley biggol

Essaye en mettant les images dans des balises liens avec les onclick dessus :
<div class="arrow" id="arrowL">
        <a href="#" onclick="scrollThumb('Go_L');return false;" onmouseover="this.style.cursor='pointer'" >
                   <img src='slideshow_left.png' />
        </a>
    </div>


Le " return false; " dans le onclick pour rester sur la même page..
Oh oui pardon Smiley sweatdrop Bonjour !

Et merci beaucoup pour ton aide!

J'ai essayé de mettre les images dans des balises liens avec les onclick comme tu me l'as conseillé mais cela ne change rien.

L'exemple que j'ai hébergé est à jour avec tes modifs.
En scrutant la doc de la fonction animate j'ai vu une autre syntaxe, essaye ça :

<script type="text/javascript">
  function scrollThumb(direction) {
    if (direction=='Go_L') {
        $('#slide-wrap').animate({
            left: "-= 189px"
        });
    }else
    if (direction=='Go_R') {
        $('#slide-wrap').animate({
            left: "+= 189px"
        });
    }
  }
</script>


Après, au pire des cas tu as un plugin jquery qui te propose de le faire : Easy Slider
Mais c'est vrai que c'est mieux de le faire sois même Smiley lol

Tiens moi qu courants des tests
Modifié par toukilbv (05 Jun 2013 - 11:25)
Alors j'ai essayé différentes syntaxes. Lorsque je met "left" à la place de "ScrollLeft" ça ne fonctionne même plus sur Chrome.

J'ai gardé "-=189px" à la place de "-=" + 189 + "px" mais ça ne le fait pas fonctionner sur Firefox. Il semblerait que ça ne vienne pas de là.

Oui effectivement, on peut trouver pas mal de slider faciles à mettre en place sur le net mais ceux que je trouve affichent une image à la fois et en affichent une autre lorsque l'on clique sur un bouton ou après un certain temps.

Moi ce que je recherche vraiment c'est ce qu'il y a dans mon example : on affiche 3 images sur 6 et lorsque l'on clique sur une des flèches cela fait avancer ou reculer d'une image.

En tous cas merci beaucoup pour ton aide Smiley cligne je vais attendre un peu pour voir si j'ai d'autres suggestions avant d'envisager de changer de solution.
Voilà ton script corrigé : http://codepen.io/seraphzz/pen/iugeF

Je te laisse regarder comment j'ai fait. Si tu as des questions n'hésite pas.

toukilbv a écrit :
Déjà bonjour Smiley biggol

Essaye en mettant les images dans des balises liens avec les onclick dessus :
&lt;div class=&quot;arrow&quot; id=&quot;arrowL&quot;&gt;
        &lt;a href=&quot;#&quot; onclick=&quot;scrollThumb('Go_L');return false;&quot; onmouseover=&quot;this.style.cursor='pointer'&quot; &gt;
                   &lt;img src='slideshow_left.png' /&gt;
        &lt;/a&gt;
    &lt;/div&gt;


Le &quot; return false; &quot; dans le onclick pour rester sur la même page..


Si c'est pour faire ça autant ne pas utiliser jQuery...
jb_gfx a écrit :
Si c'est pour faire ça autant ne pas utiliser jQuery...


Dis m'en plus jb_gfx Smiley lol
J'utilise jQuery depuis peu de temps et je n'y connais presque rien dessus.

Et je t'avoue qu'une remarque comme ça sans explication c'est pas terrible Smiley fache
toukilbv a écrit :


Dis m'en plus jb_gfx Smiley lol
J'utilise jQuery depuis peu de temps et je n'y connais presque rien dessus.

Et je t'avoue qu'une remarque comme ça sans explication c'est pas terrible Smiley fache


Je pense qu'il a dit ça dans le sens que tu mets du Javascript dans le HTML, alors que tu devrais séparer HTML/Javascript dans des fichiers séparés. Smiley cligne
j0r a écrit :


Je pense qu'il a dit ça dans le sens que tu mets du Javascript dans le HTML, alors que tu devrais séparer HTML/Javascript dans des fichiers séparés. Smiley cligne


C'est ça et en plus jQuery gère très bien les évènements comme onclick. En plus utiliser un lien ne présente aucun intérêt.
Merci jb_gfx, effectivement de cette manière, il n'y a plus de problème sur Firefox et IE. Je n'aurais pas trouver la solution seul, j'ai encore pas mal de progrès à faire en javascript.

Donc merci beaucoup à toi et à toukilbv qui a aussi essayé de m'aider! Je reviendrais poser mes questions si j'en ai mais le sujet est bien résolu.
Ah oui et bien amélioré même Smiley biggrin ça n'a plus rien à voir et c'est très très bien fait, chapeau!

Avec ton plug-in, l'avantage est que l'on a pas besoin de définir au pixel près le scroll, ça scroll d'un certain nombre d'images et ça c'est top. Il doit être plus facilement adaptable et passe-partout du coup.

Je crois bien que je vais prendre ton plugin pour l'adapter à mon projet finalement, merci Smiley cligne

J'ai juste une petite question, dans le fichier Javascript il y a trois options : le nombre d'images à scroller, la vitesse et css_namespace, cette option définit quoi exactement?
C'est pour rajouter un préfixe devant le nom des classes CSS utilisées par le plug-in.

Par exemple si tu veux appeler tes règles CSS .foo-scroller(...) tu fais $(".truc").scroller({"css_namespace": "foo"});
Modifié par jb_gfx (06 Jun 2013 - 09:00)
Pas obligatoirement, c'est plutôt sur ton projet si tu avais déjà des règles CSS qui s'appelleraient .scroller*, tu rajouterais un préfixe pour éviter les conflits avec tes règles existantes.

Là tu peux déjà avoir plusieurs scrollers sur la même page sans problème (comme dans la démo).
Modifié par jb_gfx (06 Jun 2013 - 09:10)
Sujet clos
Aller à