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

(reprise du message précédent)

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)

ça change rien, j'avais essayé...

c'est prise de tête...

et c'est l'heure d'aller crouter lol

avec le before pareil c'est ca ?

oui, c'est pareil avec le before, en fait ce before arrive dans ce cas après le after de la première slide...

Voila ton custom.js avec la fonction .load qui appliquera les modifications a ton h1 une fois tout le site chargé ( js compris )

$(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());
  }

});

$('window').load( function() {
 var hSlide = $('#sliderWide .rslides').height();
  $('#sliderWide h1').css('height',hSlide);
  $('#sliderWide h1').css('background-color','#fff');
  $('#sliderWide h1').css('opacity','0.5');
});

Modifié par tazzkiller (24 Apr 2013 - 15:09)

on se croise.... mais je crois que je viens de trouver une solution !!
(tout de suite après j'essaye quand même ta dernière suggestion par acquis de conscience)

Il semble que Chrome ne veuille pas lire la propriété height() lors du chargement de la page, alors j'ai contourné le problème comme ceci:

- mon slider fait au max 1160x300, donc un ratio de 0.2586206...... etc (d'ailleurs au final je pourrais m'arranger pour que ça fasse 0.25)
- au chargement je détecte la largeur du slide et je le multiplie par ce ration ce qui me donne la hauteur du slide, quelque soit la largeur de la fenêtre
- j'affecte cette hauteur au h1 et bingo...

et en plus le code a subit une sacrée cure d'amaigrissement ...!

je l'ai mis sur le serveur

$(document).ready(function() {
  var wSlide, hSlide;		
  $(".rslides").responsiveSlides();

  hSlide = ($('#sliderWide .rslides').width()) * 0.2586206896551724;
  $('#sliderWide h1').css('height',hSlide);

  $(window).resize( function() {
	  hSlide = $('#sliderWide .rslides').height();
	  $('#sliderWide h1').css('height',hSlide);
  });

});

edit --> ta dernière suggestion fonctionne aussi......
Modifié par lionel_css3 (24 Apr 2013 - 15:18)

bon bah du coup tu as deux solutions ^^
Donc au cas ou je te nettoie le mienne pour qu'elle sois la plus minimaliste possible :

$(document).ready(function() {	
$(".rslides").responsiveSlides({ before: resizeH1 });
$('window').resize( function() { resizeH1(); });
$('window').load( function() { resizeH1();});
function resizeH1() {
var hSlide = $('#sliderWide .rslides').height();
$('#sliderWide h1').css('height',hSlide);
}
});

Modifié par tazzkiller (24 Apr 2013 - 20:11)

je la garde sous le coude, lol, mais pourquoi devoir utiliser window.load après document.ready, c'est bizarre... je trouve

Je marque que c'est résolu mais je suis toujours preneur pour des explications, lol

petite comparaison qui explique tout :

$(document).ready() permet de définir les instructions javascript à exécuter dès que le html et le script qui contient l’appel à $(document).ready() est chargé. Cette fonction n’attend pas la fin du chargement de tous les éléments de la page (css, images, autres js…)

$(window).load() permet de définir les instuctions à exécuter une fois que l’ensemble des éléments de la page sont chargés : html, css, scripts, images.


Dans ton cas ton plugin pour le slider n'avait pas finit sa tache que nous cherchions deja une hauteur, il fallait donc attendre qu'il soit complétement initialisé puis ensuite recuperer sa hauteur
Modifié par tazzkiller (24 Apr 2013 - 15:38)

ah d'accord...

je comprends un peu mieux.. mais c'est une faiblesse liée à Chrome parce que ça marchait bien sous Mozilla and co.

J'avais déjà eu un problème de ce genre avec un script pour centrer verticalement un div dans une page, ça déconnait au chargement avec Chrome..
Je comprends pas pourquoi il n'y a pas une littérature quelque part pour tous ces problèmes liés à Chrome, d'autant plu qu'il est réputé pour avoir le meilleur moteur javascript !!

en tout cas merci pour tout, ça fait une bonne séance de gamberge depuis ce matin...

lionel_css3 a écrit :
ah d'accord...
il est réputé pour avoir le meilleur moteur javascript !!

Plop !
J'ai lu plutôt qu'il était le plus rapide, mais le plus exigeant vis a vis de la rigueur sur la mise en place du script aussi !

saajuck a écrit :


Plop !
J'ai lu plutôt qu'il était le plus rapide, mais le plus exigeant vis a vis de la rigueur sur la mise en place du script aussi !

ah oui, ça dépend comment on regarde la chose, le verre à moitié vide ou moitié plein, mais tu n'as pas tout a fait tort je pense.

j'ai copié en ligne une version3, et je le répète pour ceux qui débarqueraient dans le post, c'est une maquette....