IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Script JS semble ne pas fonctionner sur safari mais fonctionne sur les autres navigateurs


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2014
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 32
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Octobre 2014
    Messages : 25
    Par défaut Script JS semble ne pas fonctionner sur safari mais fonctionne sur les autres navigateurs
    Bonjour,

    pour un site internet que je suis en train de développer, j'ai récupéré et adapté un script js qui me permet d'avoir un carousel d'images.
    Ce carousel à une version pour les grands affichages, version dans laquelle deux images sont juxtaposées pour une même slide.
    La version pour les affichages de taille réduite ne comporte plus qu'une seule image par slide.

    Pour ce faire j'ai opté pour la solution de créer deux carousels différents, appelés par des media queries.
    Ce n'est peut-être pas la meilleure solution mais pour le moment cela fonctionne.
    J'ai testé sur chrome, opera, firefox et safari.

    Sur les trois premiers navigateurs cela fonctionne, lorsque je clique sur ma flèche pour aller à l'image suivante l'action fonctionne, idem lorsque je clique sur la flèche pour revenir à l'image précédente.
    En revanche sur Safari je ne peux pas cliquer sur les flèches, cela ne fonctionne pas.
    J'ai essayé de trouver des réponses ailleurs mais mes connaissances en js sont très limitées. Alors merci d'avance pour votre aide
    Je ne sais pas s'il est nécessaire que je joigne ici mes codes html et css, je commence donc seulement par le JS.

    Voici mon script js

    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
    //SLIDER POUR IMAGES
     
    if (window.matchMedia("(max-width: 960px)").matches) {
        // do stuff when your screen width is lower than 960px
     
    const prev = document.querySelector('.smallnext');
    const next = document.querySelector('.smallprev');
    const images = document.querySelector('.carouselsmall').children;
    const totalImages = images.length;
    let index = 0;
     
    prev.addEventListener('click', () => {
      nextImage('smallnext');
    })
     
    next.addEventListener('click', () => {
      nextImage('smallprev');
    })
     
    function nextImage(direction) {
      if(direction == 'smallnext') {
        index++;
        if(index == totalImages) {
          index = 0;
        }
      } else {
        if(index == 0) {
          index = totalImages - 1;
        } else {
          index--;
        }
      }
     
      for(let i = 0; i < images.length; i++) {
        images[i].classList.remove('main');
      }
      images[index].classList.add('main');
    }
     
     
       } else {
        // do stuff when your screen width is greater than 960px
     
     
    const prev = document.querySelector('.next');
    const next = document.querySelector('.prev');
    const images = document.querySelector('.carousel').children;
    const totalImages = images.length;
    let index = 0;
     
    prev.addEventListener('click', () => {
      nextImage('next');
    })
     
    next.addEventListener('click', () => {
      nextImage('prev');
    })
     
    function nextImage(direction) {
      if(direction =='next') {
        index++;
        if(index == totalImages) {
          index = 0;
        }
      } else {
        if(index == 0) {
          index = totalImages - 1;
        } else {
          index--;
        }
      }
     
      for(let i = 0; i < images.length; i++) {
        images[i].classList.remove('main');
      }
      images[index].classList.add('main');
    }
       }

  2. #2
    Membre chevronné Avatar de ASCIIDEFOND
    Homme Profil pro
    Autodidacte
    Inscrit en
    Novembre 2002
    Messages
    235
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Autodidacte

    Informations forums :
    Inscription : Novembre 2002
    Messages : 235
    Par défaut
    Salut hadidi,

    Avec une constante, l'identifiant ne peut être réaffecté.

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    ...
    const prev = document.querySelector('.smallnext');
    const next = document.querySelector('.smallprev');
    const images = document.querySelector('.carouselsmall').children;
    ...
    const prev = document.querySelector('.next');
    const next = document.querySelector('.prev');
    const images = document.querySelector('.carousel').children;
    ...

    https://developer.mozilla.org/fr/doc...atements/const

  3. #3
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2014
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 32
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Octobre 2014
    Messages : 25
    Par défaut
    Citation Envoyé par ASCIIDEFOND Voir le message
    ...Avec une constante, l'identifiant ne peut être réaffecté.
    Merci,

    J'avoue que j'ai très très peu de connaissance en js... Je ne comprends donc pas très bien l'article dont tu as envoyé le lien.
    Le problème dans mon script est la syntaxe ? Il faudrait que je change la constante par autre chose ?
    Aussi, pourquoi cela fonctionne sur tous les navigateurs sauf safari ?

  4. #4
    Membre chevronné Avatar de ASCIIDEFOND
    Homme Profil pro
    Autodidacte
    Inscrit en
    Novembre 2002
    Messages
    235
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Autodidacte

    Informations forums :
    Inscription : Novembre 2002
    Messages : 235
    Par défaut
    Remplacer les déclarations const avec var pour que les valeurs soient variables et non plus constantes.

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    ...
    var prev = document.querySelector('.smallnext');
    var next = document.querySelector('.smallprev');
    var images = document.querySelector('.carouselsmall').children;
    ...
    var prev = document.querySelector('.next');
    var next = document.querySelector('.prev');
    var images = document.querySelector('.carousel').children;
    ...

    Si tu avais la partie HTML du code à nous présenter pour pouvoir le tester.

  5. #5
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2014
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 32
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Octobre 2014
    Messages : 25
    Par défaut
    Citation Envoyé par ASCIIDEFOND Voir le message
    Remplacer les déclarations const avec var .....

    Voici la partie du
    Code html : 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
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    <!DOCTYPE html>
    <html>
    <head>
     
      	<title>Duo Impair</title>
        <link rel="icon" type="image/x-icon" href="images/favimpair.png">
     	  <meta charset="UTF-8" />
        <meta name="Author" content="Duo Impair">
        <meta name="Description" content="Duo Impair, french graphic design studio.">
        <meta name="Keywords" content="Graphic Design, Art Direction, Typography, Research, Photography">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
     
        <!--<link rel='stylesheet' id='fonts-css'  href='fonts/font.css' type='text/css' media='all' />-->
        <link rel='stylesheet' id='style-css'  href='styles/style.css' type='text/css' media='all' />
     
    </head>
     
     
    <body>
     
     
    	<!--------------------------------------------- Haut de Page --------------------------------------------->
     
    	<header role="header">
     
     
    		<nav class="menu" role="sections">
     
                    <div class="inner">
     
                <div class="m-left">
                     <h1 class="logo">DUO IMPAIR &emsp; Graphic Design Studio</h1>
                </div>
     
                <div class="m-right">
                    <a href="index.html" class="m-link" style="color: blue">Projects</a>
                    <a href="info.html" class="m-link">About</a>
                </div>
     
                    </div>            
     
    	</header>
     
     
        <!--------------------------------------------- Images et légendes --------------------------------------------->
     
     
                <div class="carousel-container">
     
                        <!--<div class="prev nav-btn">←</div>-->
                        <div class="prev nav-btn"><img src="images/arrowdotl.png"/></div>
     
                    <div class="carousel">
     
                        <div class="item main">
                <img src="images/HutteSite1.jpg"/>
                <img src="images/HutteSite2.jpg"/>
     
                <div class="caption">
                <ul class="cap">
                    <li>Hutte Mono (Regular & Swash), Type Design, 2023.</li>
                    <li>The font design was inspired by the regular shapes defined by mono typefaces together with rounded terminals. Hutte is taking a step aside from the common monospace fonts with the Swash version that plays with the spacing, the ornaments and the flourishing aspects of the letters.</li>
                </ul>
                            </div>
                        </div>
     
     
                        <div class="item">
                <img src="images/Bushel1.jpg"/>
                <img src="images/Bushel2.jpg"/>
     
                <div class="caption">
                <ul class="cap">
                    <li>Bushels of Goodness and Warmth, Graphic design, Layout, 2022 [with Jordan Derrien and V.O Curations Gallery (London)]</li>
                    <li>Catalogue of the exhibition: Bushels of goodness by the artist Jordan Derrien. With a text written by Marie de Brugerolle and photographies taken by Theo Christelis.</li>
                </ul>
                            </div>
                        </div>
     
                        <div class="item">
                <img src="images/SupaVenezia1.jpg"/>
                <img src="images/SupaVenezia2.jpg"/>
     
                            <div class="caption">
                <ul class="cap">
                    <li>SupaVenezia Cap, Identity, Graphic Design, 2022 [with the artist Sarah Staton]</li>
                    <li>SupaVenezia is part of SupaStore the event based durational artwork of the artist Sarah Staton, an ongoing series of stores as exhibitions established in 1993. We used the Brizeux font designed by Roman Seban and Véfa Lucas.</li>
                </ul>
                            </div>
                        </div>
     
                    </div>
     
                    <!--<div class="next nav-btn ">→</div>-->
                    <div class="next nav-btn "><img src="images/arrowdotr.png"/></div>
     
    <!--<script type="text/javascript" src="scripts/app.js"></script>-->
     
     
                    </div> 
     
     
     
     
    <!--------------------------------------------- Images et légendes small devices  --------------------------------------------->
     
     
    <div class="carousel-containersmall">
     
                        <div class="smallprev smallnav-btn"><img src="images/arrowdotl.png"/></div>
     
                    <div class="carouselsmall">
     
                        <div class="item main">
                <img src="images/HutteSite1.jpg"/>
     
                <div class="captionsmall">
                <ul class="capsmall">
                    <li>Hutte Mono (Regular & Swash), Type Design, 2023.</li>
                    <li>The font design was inspired by the regular shapes defined by mono typefaces together with rounded terminals. Hutte is taking a step aside from the common monospace fonts with the Swash version that plays with the spacing, the ornaments and the flourishing aspects of the letters.</li>
                </ul>
                            </div>
                        </div>
     
                         <div class="item">
                <img src="images/HutteSite2.jpg"/>
     
                <div class="captionsmall">
                <ul class="capsmall">
                    <li>Hutte Mono (Regular & Swash), Type Design, 2023.</li>
                    <li>The font design was inspired by the regular shapes defined by mono typefaces together with rounded terminals. Hutte is taking a step aside from the common monospace fonts with the Swash version that plays with the spacing, the ornaments and the flourishing aspects of the letters.</li>
                </ul>
                            </div>
                        </div>
     
     
                        <div class="item">
                <img src="images/Bushel1.jpg"/>
     
                <div class="captionsmall">
                <ul class="capsmall">
                    <li>Bushels of Goodness and Warmth, Graphic design, Layout, 2022 [with Jordan Derrien and V.O Curations Gallery (London)]</li>
                    <li>Catalogue of the exhibition: Bushels of goodness by the artist Jordan Derrien. With a text written by Marie de Brugerolle and photographies taken by Theo Christelis.</li>
                </ul>
                            </div>
                        </div>
     
                        <div class="item">
                <img src="images/Bushel2.jpg"/>
     
                <div class="captionsmall">
                <ul class="capsmall">
                    <li>Bushels of Goodness and Warmth, Graphic design, Layout, 2022 [with Jordan Derrien and V.O Curations Gallery (London)]</li>
                    <li>Catalogue of the exhibition: Bushels of goodness by the artist Jordan Derrien. With a text written by Marie de Brugerolle and photographies taken by Theo Christelis.</li>
                </ul>
                            </div>
                        </div>
     
                        <div class="item">
                <img src="images/SupaVenezia1.jpg"/>
     
                            <div class="captionsmall">
                <ul class="capsmall">
                    <li>SupaVenezia Cap, Identity, Graphic Design, 2022 [with the artist Sarah Staton]</li>
                    <li>SupaVenezia is part of SupaStore the event based durational artwork of the artist Sarah Staton, an ongoing series of stores as exhibitions established in 1993. We used the Brizeux font designed by Roman Seban and Véfa Lucas.</li>
                </ul>
                            </div>
                        </div>
     
                        <div class="item">
                <img src="images/SupaVenezia2.jpg"/>
     
                <div class="captionsmall">
                <ul class="capsmall">
                    <li>SupaVenezia Cap, Identity, Graphic Design, 2022 [with the artist Sarah Staton]</li>
                    <li>SupaVenezia is part of SupaStore the event based durational artwork of the artist Sarah Staton, an ongoing series of stores as exhibitions established in 1993. We used the Brizeux font designed by Roman Seban and Véfa Lucas.</li>
                </ul>
                            </div>
                        </div>
     
                    </div>
     
                    <!--<div class="next nav-btn ">→</div>-->
                    <div class="smallnext smallnav-btn "><img src="images/arrowdotr.png"/></div>
     
    <!--<script type="text/javascript" src="scripts/app.js"></script>-->
     
                    </div>
     
     
        <!--------------------------------------------- Pied de Page --------------------------------------------->
     
    <script type="text/javascript" src="scripts/app.js"></script>
    </body>
    </html>

  6. #6
    Membre chevronné Avatar de ASCIIDEFOND
    Homme Profil pro
    Autodidacte
    Inscrit en
    Novembre 2002
    Messages
    235
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Autodidacte

    Informations forums :
    Inscription : Novembre 2002
    Messages : 235
    Par défaut
    Insérer la même fonction (function nextImage(direction)) dans deux instructions if, cela ne me semble pas très conventionnel.

    Peux-tu nous donner le code CSS, parce que là je patauge un peu.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Applet s'exécute sur Internet Explorer mais pas sur les autres navigateurs
    Par rosert dans le forum Développement Web en Java
    Réponses: 3
    Dernier message: 13/02/2015, 13h14
  2. Réponses: 8
    Dernier message: 30/08/2011, 16h17
  3. Réponses: 9
    Dernier message: 31/05/2011, 10h27
  4. [firePropertyChange] semble ne pas fonctionner ?
    Par jcodeunpeu dans le forum AWT/Swing
    Réponses: 11
    Dernier message: 19/12/2005, 14h37

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo