11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Problème affichage posts avec jQuery Masonry

Bonjour,


J'avais déjà posté il y a peu, au sujet de mon site-portfolio, que je suis en train de refaire... Tout semblait fonctionner sans problème, jusqu'à ce que je me rendre compte, hier soir, en ajoutant du contenu à mon site test, d'un bug que je n'avais pas remarqué auparavant.

J'utilise donc le plugin jQuery Masonry, pour l'affichage de mes articles (j'utilise Wordpress). Celui-ci semble fonctionner correctement, mais dès que j'ai plus d'une ligne d'articles, leur empilement ne se fait plus correctement, selon les navigateurs...
J'ai essayé de changer l'emplacement des scripts (actuellement jQuery est chargé, sauf erreur, dans le <head>, et les autres scripts dans le <footer>), mais sans succès. Et étant débutant en jQuery, je n'arrive pas à identifier le problème...

Voici donc ce que j'observe sur les différents navigateurs (j'utilise les dernières versions) :

1. Firefox : Aucun problème apparent. Cependant il y a une différence d'empilement entre la home et le "reload" (lorsque l'on appuie sur "Tout" dans les filtres...), d'où ma supposition d'un mauvais appel de mes scripts. Malheureusement, je n'arrive pas à identifier concrètement le problème (et à le résoudre...).
2. Chrome, Opéra & Safari : Problème d'empilement, qui se résorbe au "reload"...
3. IE : Aucun problème apparent (!). Toutefois il y a une lenteur d'affichage des éléments, au chargement initial de la page.
Modifié par soykje (27 Apr 2012 - 10:44)
Bonjour,


a écrit :
En testant en local, je me rends compte que sans Zoombox, le site marche parfaitement...

Je modifie mon post, car je m'étais trompé (fiabilité du test en local, ou mauvaise méthode de ma part ?) : le site fonctionne très bien, avec ou sans Zoombox. Le problème semble, en réalité, venir de Masonry... En effet je viens de refaire les tests, et le seul changement qui ait un impact, est le retrait (ou non) de Masonry. L'ai-je mal intégré, ou bien cohabite-t-il mal avec le reste de mon thème ?

Dans mon footer, on fait appel aux jQuery comme ceci :

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.masonry.min.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/mymasonry.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/zoombox/zoombox.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/zoombox/myzoombox.js"></script>


Et mon fichier "mymasonry" est comme ceci :

$(document).ready(function() {
   var content = $('#content');
    content.masonry({
        itemSelector: '.post:not(.hidden)',
        columnWidth: 75,
		isFitWidth: true,
        isAnimated: true
    });
	$('.cat-item a').click(function(e){
			var cls = $(this).attr('href').replace('http://www.soykje.com/testeur/category/','');
			content.find('.hidden').fadeIn();
			content.find('.post').removeClass('hidden');
			content.find('.post:not(.'+cls+')').addClass('hidden').stop().fadeOut();
			content.masonry('reload');
			e.preventDefault();
	});
	$('.reset a').click(function(e){
			content.find('.hidden').fadeIn();
			content.find('.post').removeClass('hidden');
			content.masonry('reload');
			e.preventDefault();
	});
});


Si quelqu'un a une idée, je suis totalement preneur, car je navigue en aveugle, et ne vois vraiment pas d'où pourrait venir le problème (et donc la solution)... Merci d'avance !
Modifié par soykje (29 Apr 2012 - 11:22)
Bonjour à tous,


Pardon pour mon insistance... En fait, je me rends compte que le comportement des navigateurs, observé au début, ne se vérifie plus... Le code est pourtant identique, mais je remarque qu'au final, le seul navigateur à afficher correctement mon site est IE9 (Firefox affiche correctement "une fois sur deux"...) !!!

Je me dis que cette info peut être importante, pour ceux qui connaîtraient les subtilités qui existent entre navigateurs. De mon côté, je reste toujours aussi perdu Smiley bawling
Bonsoir,


Résolu ! Smiley biggrin

Finalement, le problème ne venait pas de mes scripts, mais bien de mon .css (comme quoi...) ! En suppirmant le "height: auto" appliqué sur la balise img, le problème s'est solutionné, et il ne subsiste désormais qu'une lenteur, sur IE9, au chargement... En me renseignant sur le net, j'ai noté que ceci était un "problème connu", et qu'il n'y avait pas forcément grand-chose à y faire.

Si toutefois quelqu'un a une idée pour optimiser le chargement de mes scripts dans IE, je suis preneur ! Smiley biggrin

A bientôt
Sujet clos
Aller à