11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Problème de Javascript avec Google Chrome

Pages :
Bonjour,

j'ai un problème de Javascript dans Google Chrome et Safari pour PC (webkit).

J'utilise un slider responsive assez large (1200px) dans un header avec ce plugin jQuery responsive-slides.

Dans ce slider, je veux afficher un paragraphe en surimpression, de 40% de la largeur du slider, cadré à gauche avec un fond blanc transparent et dont la hauteur est celle du slider.
Quand on redimensionne la page, le slider se redimensionne et le paragraphe aussi.
Ça marche bien sous Firefox et IE10.

Par contre ça marche pas correctement avec Chrome et Safari sur PC, c'est à dire que ça fonctionne au redimensionnement mais pas au chargement, en ce qui concerne le fond blanc qui n'est pas visible. J'ai donc tenté de forcer l’exécution de la fonction affectée au redimensionnement, lors du chargement, mais ça ne change rien.

Lorsque je charge la page dans Firefox (et ceci dans la taille la plus large bien sur), les 3 console.log affichent 300px, ce qui est la hauteur des images du slider à la base, donc la vérité.
Chrome affiche lui 0px !!! et pourtant le paragraphe contient bien du texte et il est visible. Après un redimensionnent (toujours dans Chrome), le dispositif fonctionne.

j'y comprends plus rien........

voici le code
pour le html

<div id="sliderWide">
  <p id="intro">Curabitur blandit mi sit amet ligula pretium vitae hendrerit lacus rhoncus. Vivamus metus tellus, aliquet quis auctor ut, scelerisque nec nisl. Aliquam viverra neque nec leo malesuada ac pharetra purus euismod. Phasellus cursus ornare luctus. Nunc sollicitudin tincidunt luctus. Morbi mi odio, fermentum Curabitur blandit mi sit amet ligula pretium vitae </p>
  <ul class="rslides">
    <li><img src="images/slider-1/pic-01.jpg" alt=""></li>
    <li><img src="images/slider-1/pic-02.jpg" alt=""></li>
    <li><img src="images/slider-1/pic-03.jpg" alt=""></li>
  </ul>
</div>

pour le css

div#sliderWide  {
	position:relative;
}
p#intro  {
	position:absolute;
	width:40%;
	background-color:#CCC;
	opacity:0.5;
	top:0;
	z-index:20;	
}


.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

pour le javascript

$(function() {
	
  $(".rslides").responsiveSlides();
  
  /* init hauteur p#intro  */
  var hSide = $('#sliderWide .rslides').css('height');
  $('p#intro').css('height',hSide);
  $('p#intro').css('background-color','#ccc');
 
 
  myResize();
  $(window).resize(myResize);


});

  function myResize()  {
		  console.log($('p#intro').css('height'));
		  hSide = $('#sliderWide .rslides').css('height');
		  console.log(hSide);
		  $('p#intro').css('height',hSide);
		  console.log($('p#intro').css('height'));
  }

Modifié par lionel_css3 (24 Apr 2013 - 09:09)
bonjour,
ta fonction javascript ce charge telle dans $(document).ready ou $('window').load ou juste comme ca en fin de page ?
la fonction est située dans un fichier custom.js qui est appelé dans le <head> de la page html.

je rappelle que ça fonctionne parfaitement avec mozilla et IE10


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Car</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->

<link rel="stylesheet" type="text/css" href="css/style-v2.css">
<script src="js/respond.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script src="js/custom.js"></script>
</head>

Modifié par lionel_css3 (24 Apr 2013 - 09:53)
d'accord mais cela ne m’éclaire pas sur la manière dont ce charge ta fonction aurais tu une url ou peux tu copier ton custom.js ici
merci à toi,

c'est en local pour l'instant, mais le custom.js contient le code js copié dans le début de ce post....

je vais essayer de mettre un lien en ligne
Modifié par lionel_css3 (24 Apr 2013 - 10:04)
voila, j'ai copié en live à cette adresse ...

mais je précise que c'est un prototype lol.... c'est pas un produit fini...

il faut l'ouvrir à plein écran, le responsive fonctionne jusqu'à 980px environ.

Le paragraphe sur fond blanc est maintenant un h1, mais le problème est le même:
le fond blanc n'apparait pas au chargement avec Chrome
ok alors essai de mettre ca dans ton custom.js :



$(document).ready( function () {
$(function() {
	
  $(".rslides").responsiveSlides();
  
  /* init hauteur p#intro  */
  var hSide = $('#sliderWide .rslides').css('height');
  $('p#intro').css('height',hSide);
  $('p#intro').css('background-color','#ccc');
 
 
  myResize();
  $(window).resize(myResize);


});

  function myResize()  {
		  console.log($('p#intro').css('height'));
		  hSide = $('#sliderWide .rslides').css('height');
		  console.log(hSide);
		  $('p#intro').css('height',hSide);
		  console.log($('p#intro').css('height'));
  }
});


ou tu peux aussi mettre ta ligne 
<script src="js/custom.js"></script>
en bas de page plutôt que dans le <head> car le problème viens du fait que tu exécutes ta fonction avant que le dom ne soit chargé et donc le script ne trouve pas ta class rslide ...
Modifié par tazzkiller (24 Apr 2013 - 10:19)
avec cette nouvelle version...ça fonctionne toujours pas avec Google Chrome......

ça marche chez toi avec Chrome?
tazzkiller a écrit :


ou tu peux aussi mettre ta ligne 
&lt;script src=&quot;js/custom.js&quot;&gt;&lt;/script&gt;
en bas de page plutôt que dans le &lt;head&gt; car le problème viens du fait que tu exécutes ta fonction avant que le dom ne soit chargé et donc le script ne trouve pas ta class rslide ...


je vais essayer ça, mais pourquoi ça marche t-il avec mozilla?

edit -> ça marche pas mieux Smiley decu
Modifié par lionel_css3 (24 Apr 2013 - 10:22)
oui chez moi le slider se lance bien au chargement .... pense à vider ton cache au cas ou

autant pour moi j'avais compris que le slider ne fonctionnait pas !! effectivement pas de carrée blanc ...
Modifié par tazzkiller (24 Apr 2013 - 10:27)
tazzkiller a écrit :
oui chez moi le slider se lance bien au chargement .... pense à vider ton cache au cas ou

autant pour moi j'avais compris que le slider ne fonctionnait pas !! effectivement pas de carrée blanc ...


Le slider fonctionne très bien, c'est le carré blanc qui ne s'affiche pas au chargement initial sur Chrome.
Je précise que par rapport au code que j'ai donné ici, j'applique maintenant ce fond blanc au <h1> mais le principe et le problème restent le même...

j'ai déjà eu ce genre de problème par le passé avec chrome, en voulant forcer l’exécution d'une fonction comme ici
tazzkiller a écrit :
bon c'etait rien tu vas aller a la ligne 127 de ton style-v2.css et tu ajoute z-index:20;


je comprends pas pourquoi tu fais référence à la ligne 127 , cette ligne fait référence à p#intro, mais maintenant j'utilise le h1 à la place, et il y a déjà z-index:20 et le css est commenté,
je ne vois pas pourquoi tu vois ce css...
lionel_css3 a écrit :


je comprends pas pourquoi tu fais référence à la ligne 127 , cette ligne fait référence à p#intro, mais maintenant j'utilise le h1 à la place, et il y a déjà z-index:20 et le css est commenté,
je ne vois pas pourquoi tu vois ce css...



sorry je me suis embrouillé entre mon nav firefox et chrome ....

essai de changer ta ligne 


 var hSlide = $('#sliderWide').css('height');


par

 var hSlide = $('#sliderWide').height();
voici les modifications apportées au code pour prendre en compte le h1 à la place du p,
c'est équivalent. le <p> prendra sa place plus tard, au dessus et en dessous du <h1>, si je résout le problème bien sur.

je sais que ça n’arrange pas à la compréhension..mais la problématique reste la même.. lol


<div id="sliderWide">
  <h1>Reponsive Car</h1>
  <ul class="rslides">
    <li><img src="images/slider-1/pic-01.jpg" alt=""></li>
    <li><img src="images/slider-1/pic-02.jpg" alt=""></li>
    <li><img src="images/slider-1/pic-03.jpg" alt=""></li>
  </ul>
  <p id="intro">Curabitur blandit mi sit amet ligula pretium vitae hendrerit lacus rhoncus. Vivamus metus tellus, aliquet quis auctor ut, scelerisque nec nisl. Aliquam viverra neque nec leo malesuada ac pharetra purus euismod. Phasellus cursus ornare luctus. Nunc sollicitudin tincidunt luctus. Morbi mi odio, fermentum Curabitur blandit mi sit amet ligula pretium vitae </p>
</div>





#sliderWide  {
	position:relative;
}
#sliderWide h1 {
	position:absolute;
	width:40%;
	background-color:#CCC;
	opacity:0.5;
	top:0;
	z-index:20;	
}
tu as essayé de modifier la ligne que je t'ai mis au dessus ? car moi ca me retourne bien 340 sous chrome
Modifié par tazzkiller (24 Apr 2013 - 10:54)
oui, j'ai essayé mais ça résout toujours pas le problème sous chrome...

en fait je cible var hSlide = $('#sliderWide .rslides').height(); et chrome affiche 0px au chargement (je viens de retransférer le js sur le serveur)

tu as le carré blanc, toi?


(encore merci pour ton aide ..... Smiley clapclap en tout cas ...)
essai de remplacer par ca :


$(document).ready(function() {	
  $(".rslides").responsiveSlides({
		after: resizeH1	  
  });
  
  function resizeH1() {
  var hSlide = $('#sliderWide .rslides').height();
  console.log('**' + hSlide + '**');
  $('#sliderWide h1').css('height',hSlide);
  $('#sliderWide h1').css('background-color','#fff');
  $('#sliderWide h1').css('opacity','0.5');
  }
 
 
  $(window).resize( function() {
      myResize();

    });

  function myResize()  {
		  hSlide = $('#sliderWide .rslides').height();
		  console.log($('#sliderWide h1').height());
		  console.log(' - ');
		  console.log(hSlide);
		  $('#sliderWide h1').css('height',hSlide);
		  console.log(' - ');
		  console.log($('#sliderWide h1').height());
  }

});



et je suis pas sur mais je pense que si ca marche tu pourras aussi retirer cette partie du js :

(window).resize( function() {
      myResize();

    });

  function myResize()  {
		  hSlide = $('#sliderWide .rslides').height();
		  console.log($('#sliderWide h1').height());
		  console.log(' - ');
		  console.log(hSlide);
		  $('#sliderWide h1').css('height',hSlide);
		  console.log(' - ');
		  console.log($('#sliderWide h1').height());
  }

Modifié par tazzkiller (24 Apr 2013 - 11:15)
alors y a du progrès....

le fond blanc s'affiche avec Chrome, mais la hauteur du h1 ne fait pas la hauteur du slider, juste la hauteur du texte. c'est uniquement après le 1er changement d'image que ça fonctionne..
j'ai transféré le js sur le serveur si tu veux voir (attention il y a l'ancienne partie qui est commentée),

j'avais déjà essayé cette option 'after' à un moment, mais pas de cete façon je crois Smiley smile
supprime tout le contenu de ton custom.js et mets jsute ca pour voir :

$(document).ready(function() {	
  $(".rslides").responsiveSlides({
		before: resizeH1	  
  });
  
  function resizeH1() {
  var hSlide = $('#sliderWide .rslides').height();
  console.log('**' + hSlide + '**');
  $('#sliderWide h1').css('height',hSlide);
  $('#sliderWide h1').css('background-color','#fff');
  $('#sliderWide h1').css('opacity','0.5');
  }
 
 
  $(window).resize( function() {
      myResize();
    });

  function myResize()  {
		  hSlide = $('#sliderWide .rslides').height();
		  console.log($('#sliderWide h1').height());
		  console.log(' - ');
		  console.log(hSlide);
		  $('#sliderWide h1').css('height',hSlide);
		  console.log(' - ');
		  console.log($('#sliderWide h1').height());
  }

});

Modifié par tazzkiller (24 Apr 2013 - 11:39)
Pages :
Sujet clos
Aller à