 Code js qui ne fonctionne pas sur safari et Chrome, Code js seulement OK sur Firefox |
 |
Bienvenue invité ( Connexion | Inscription )
  |
  11 Apr 2014, 11:08
Message
#1
|
|
|
Adepte de Macbidouille  Groupe : Membres Messages : 136 Inscrit : 11 Nov 2004 Lieu : Paris Membre no 26 780  |
Bonjour,
Je fais un site avec une animation jquery (visible sur natipub.com). Sur la page d'accueil, je suis fier d'avoir fait une petite animation avec le logo de l'agence qui apparait plein pot à l'écran, puis disparait. Seulement, il ne fonctionne que sur Firefox à partir duquel je l'ai conçu. Je ne suis pas expert en js et si vous pouviez me sortir de là… Le code : • html <img class="bayadere" src="img/bayadere1.png"> <img class="bayadere" src="img/bayadere2.png"> <img class="bayadere" src="img/bayadere3.png"> <img class="bayadere" src="img/bayadere4.png"> <img class="bayadere" src="img/bayadere5.png"> <img class="bayadere" src="img/bayadere6.png"> <img class="bayadere" src="img/bayadere7.png"> <img class="bayadere" src="img/bayadere8.png"> <img class="bayadere" src="img/natipublogoblanc.png"> •css .bayadere{ position: absolute; left: 132px; width: 81%; z-index: -10; display: none; } •js - dans <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> - avant </body> <script type='text/javascript'> $(document).ready(function(){ // var w = $(window).width(); // $("body").toggleClass("mobile",w >= 320); $('.bayadere').first().slideDown('slow', function showNextOne() { $(this).next('.bayadere').slideDown('slow', showNextOne); }); }); $('.bayadere').ready(function() { $('.bayadere').first().delay(4000).hide('slow', function hideNextOne() { $(this).next('.bayadere').hide(100, hideNextOne); }); }); </script> Merci -------------------- Rien n'est moins sur que l'incertain !
|
 |
 
|
|
11 Apr 2014, 11:31
Message
#2
|
|
 Macbidouilleur d'Or ! Groupe : Membres Messages : 4 825 Inscrit : 1 Jul 2010 Membre no 156 073 |
Chez moi ça fonctionne avec Chrome et Chromium mais pas avec Safari.
Sans avoir regardé en détails ton code, le problème ne serait-il pas que ton animation peut se lancer avant même que toutes les images soient chargées ? Pour rappel : Code $(document).ready() est un événement diffusé lorsque le DOM est chargé mais pas lorsque toutes les ressources sont chargées. Pour ça, il faut utiliser Code window.load ou en jQuery Code $(window).load(function()
{ // lancer l'animation }); Ce message a été modifié par scoch - 11 Apr 2014, 11:32. -------------------- L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
|
|
|
|
|
11 Apr 2014, 14:03
Message
#3
|
|
|
Adepte de Macbidouille Groupe : Membres Messages : 136 Inscrit : 11 Nov 2004 Lieu : Paris Membre no 26 780 |
Merci pour ta réponse.
Effectivement ça fonctionne sous Chrome. J'ai essayé $(window).load(function(), mais ça ne fonctionne pas mieux. En revanche j'ai viré le slider des visuels plein écran et là ça marche. J'ai donc un conflit entre ces 2 js. J'ai aussi essayé de remplacé mes class par de id, mais sans succès. <head> <meta charset="utf-8"> <meta equiv="X-UA-Compatible" content="IE=edge, chrome=1"> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Accueil site portfolio Agence Natipub</title> <meta name="description" content="Site porfolio de l'Agence Natipub"> <meta name="viewport" content="width=device-width"> <!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /><![endif]--> <link rel="stylesheet" href="css/main.css" type="text/css" media="screen" /> <link rel="stylesheet" href="css/flexslider.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" /> <link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen" /> <link rel="stylesheet" type="text/css" href="css/animate.css"> <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet'> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easing.min.js"></script> <script type="text/javascript" src="js/supersized.3.2.7.min.js"></script> <script type="text/javascript" src="theme/supersized.shutter.min.js"></script> <script type="text/javascript"> $(function($){ $.supersized({ // Functionality slide_interval : 6000, // Length between transitions transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left transition_speed : 700, // Speed of transition // Components slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank') slides : [ // Slideshow Images {image : 'img/black.jpg', title : 'Agence de communication graphique et de marketing direct', thumb : 'img/natipublogo3.jpg'}, {image : 'img/lettres2.jpg', title : 'Nouveau ! Natipub crée vos sites vitrine', thumb : 'img/lettres2.jpg'}, {image : 'img/macaron.jpg', title : 'Natipub n\’a pas sa langue dans sa poche et travaille aussi en cyrilique !', thumb : 'img/macaron.jpg'}, {image : 'img/lettres1.jpg', title : 'Nos impressions Epson sont certifiées FOGRA', thumb : 'img/lettres1.jpg'}, {image : 'img/alim.jpg', title : 'Ce site web a été réalisé entièrement par nos soins', thumb : 'img/alim.jpg'}, {image : 'img/nuancier.jpg', title : 'Natipub n\’a pas sa langue dans sa poche et travaille aussi en cyrilique !', thumb : 'img/nuancier.jpg'}, {image : 'img/livreblanc.jpg', title : 'Ce site web a été réalisé entièrement par nos soins', thumb : 'img/livreblanc.jpg'}, {image : 'img/chabrol2.jpg', title : 'Rue de Chabrol, notre studio, c\'est pas du cinéma !', thumb : 'img/chabrol2.jpg'}, {image : 'img/chabrol.jpg', title : 'Notre politique de la rigueur ne s\'applique qu\'à notre exécution', thumb : 'img/chabrol.jpg'}, ] }); }); </script> <!-- Animation logo 1ère page ****************--> <script type='text/javascript'> $(document).ready(function(){ // var w = $(window).width(); // $("body").toggleClass("mobile",w >= 320); $('.bayadere').first().slideDown('speed', function showNextOne() { $(this).next('.bayadere').slideDown('speed', showNextOne); }); }); $('.bayadere').ready(function() { $('.bayadere').first().delay(3500).hide('speed', function hideNextOne() { $(this).next('.bayadere').hide('speed', hideNextOne); }); }); </script> -------------------- Rien n'est moins sur que l'incertain !
|
|
|
|
|
11 Apr 2014, 14:14
Message
#4
|
|
 Macbidouilleur d'Or ! Groupe : Membres Messages : 4 969 Inscrit : 26 Jan 2011 Lieu : Pollachius virens Membre no 164 083 |
Tu charges plusieurs fois la librairie jquery dans ta page et dans des versions différentes. Commence par nettoyer tout ça et regarde ensuite si ça ne fonctionne pas mieux
 Sur le site natipub tu charges la version 1.6.1, 1.6.2 et 1.9.1, et dans le code source ci-dessus il y a la la version 1.6.1 et 1.6.2 Ce message a été modifié par yponomeute - 11 Apr 2014, 14:20. -------------------- MBP 2017 15" avec clavier pourri et touchbar inutile
|
|
|
|
|
11 Apr 2014, 14:25
Message
#5
|
|
|
Adepte de Macbidouille Groupe : Membres Messages : 136 Inscrit : 11 Nov 2004 Lieu : Paris Membre no 26 780 |
Effectivement,
j'étais en train de faire le test, mais sans succès… -------------------- Rien n'est moins sur que l'incertain !
|
|
|
|
|
11 Apr 2014, 14:36
Message
#6
|
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 4 825 Inscrit : 1 Jul 2010 Membre no 156 073 |
Je viens de jeter un œil à comment charge ta page depuis la console de Chromium (onglet Network) : la première image de ton anim (lettres2.jpg) n'est chargée qu'au bout de 5 secondes… or tu lances l'anim dès que le DOM est chargé. Je le répète
on lance ce genre d'anim qu'une fois que les images sont chargées.
-------------------- L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
|
|
|
|
 11 Apr 2014, 17:43
Message
#7
|
|
|
Adepte de Macbidouille Groupe : Membres Messages : 136 Inscrit : 11 Nov 2004 Lieu : Paris Membre no 26 780 |
Merci à tous pour vos explications, mais je viens de trouver une solution (un peu facile, mais…).
En fait, j'ai apparemment un conflit entre 2 js. L'un marche bien sans l'autre et inversement. Du coup, je n'ai mis sur ma page index que la première animation (celle avec le logo animé) et j'ai créé une deuxième page d'accueil (celle avec les visuels plein-pot) qui se charge seule au bout de 5 secondes. Je ne sais pas si c'est très sémentique, mais ça fonctionne. Scoch, je vais regarder ce que tu viens de m'écrire et essayer de corriger. Je reste à l'écoute pour toute critique dans le but de m'améliorer… -------------------- Rien n'est moins sur que l'incertain !
|
|
|
|
|
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :
| Nous sommes le : 23rd April 2024 - 23:27 |