Problèmes de compatibilité IE9... ?

Bonjour à tous,


Je me permets de poster car je suis actuellement en train de finaliser le site internet de ma compagne, photographe, et je rencontre trois bugs importants avec IE (pas avec les autres navis), que je n'arrive pas à solutionner seul... J'en appelle donc aux experts de ce forum, s'ils peuvent m'aider !

Voici le site (il s'agit d'une adresse de test) : http://www.soykje.com/testeur/

1. J'ai pondu un petit bout de code, en .js, pour l'alignement vertical des vignettes (cf. sur cette page). Cela marche très bien sur tous les navigateurs testés, mais pas avec IE9... J'ai beau chercher, je n'arrive pas à trouver d'où peut venir le problème (sans doute un problème d'interprétation du CSS, mais à quel niveau précisément ?)

2. Je me sers de jScrollpane, pour adapter les scrollbars du site à mon design. Tout marche nickel, sauf avec IE9 ! J'ai regardé sur le site du plugin, mais sans succès... Encore une fois, je reste incapable d'identifier (et donc de solutionner) le problème rencontré avec IE...

3. Ma compagne héberge ses vidéos sur Vimeo (cf. cette page). Et là encore, un problème avec IE9 : la vidéo ne s'affiche pas ! Il semblerait que je ne soit pas le seul à relever le problème (d'après mes recherches sur le net), mais encore une fois je n'ai pu trouver aucune solution adaptée...

Comme vous le voyez, IE (version 9, je ne m'intéresse pas vraiment aux versions antérieures pour ce type de site) me donne du fil à retordre, et j'en viens à me demander si je ne devrais pas carrément assumer et indiquer une mention "IE-free" dans le footer ! ...
Plus sérieusement, je suis bloqué, et j'espère que quelqu'un pourra m'apporter son aide sur ces soucis.

Merci d'avance !

Pardon pour mon impatience, mais personne n'aurait une idée pour résoudre ces bugs svp ? Ce sont les derniers éléments qui me bloquent, et retarder la mise en ligne (prévue au plus tard pour le 9 novembre prochain) pour ça m'embête vraiment...

Merci d'avance pour votre aide

Bonjour,


Comme souvent, c'est en cherchant encore et encore, que j'ai pu résoudre certains de mes problèmes. Ne serait-ce que par rapport à celui concernant Vimeo, je re-poste ici ma solution, au cas où ça pourrait en aider d'autres...

1. Concernant le problème avec jScrollpane et IE9, c'était de ma faute : mon .js était "sale", et après une petite inspection, tout est rentré dans l'ordre !

2. Le problème d'alignement vertical, avec IE9, a lui aussi été résolu après "nettoyage" du .js.

3. Concernant le problème avec Vimeo... plus compliqué : les bugs avec cette plateforme (et IE^^) sont connus, et à l'heure actuelle voici comment j'ai pu résoudre mon souci : en faisant une mise à jour de Flash player !!!
Cela semble évident, mais il faut faire attention : le player existe en plusieurs versions (IE/other browsers), et il faut donc bien installer les deux versions, si l'on a plusieurs navigateurs installés, comme moi...
Du reste, j'ai par prudence intégré une image en arrière-plan de mon iframe, de sorte que si la vidéo ne s'affiche pas, le visiteur est informé de la marche à suivre.
Modifié par soykje (08 Nov 2012 - 16:32)

Bon... Quelques heures plus tard, je n'ai pourtant plus retouché le .js, mais ça ne marche plus ! :'( Les problèmes d'alignement vertical des vignettes, ainsi que le marquage de la catégorie en cours, ne fonctionnent plus...

Je veux bien de l'aide, si quelqu'un peut/veut...

Bonjour à tous,


Le grand jour (de la mise en ligne) est arrivé, et encore des problèmes...

Comme dit dans mon précédent message, sans raison apparente, IE9 n'applique pas tous les scripts .js intégrés au site (ceux responsables de l'alignement vertical des vignettes, et du marqueur de catégorie en cours).

Ce matin, je me suis donc décidé à y regarder de plus près, avec l'outil de débug d'IE9, qui m'a appris que dans mon code, une ligne (avec "substring") posait problème. J'ai déplacé la ligne, et cela a semblé résoudre le souci d'alignement vertical (!).
J'ai donc cherché à identifier plus précisément l'erreur, pour éventuellement la corriger, et là... Impossible de reproduire le bug, tout semble ok ! Sauf que par moments encore, IE semble faire sauter cette partie concernant le marqueur de catégorie, incriminant le code .js... C'est à n'y rien comprendre !

J'aurais donc besoin d'une bonne âme, pour relire mon .js, afin de s'assurer que le code ne puisse plus être mal interprété par IE9... Merci d'avance !

[La partie qui semble poser problème est à la fin : le bloc pour l'affichage du marqueur de catégorie en cours]

$(document).ready(function(){
	var timedrop = 300;
	var idMenu = 'ul#leftmenu';
	var classHover = 'hover';
	
	if((idMenu)) {
	// Ajoute la class .drop lorsque le JS est activé
	$(idMenu).addClass('drop'); 
	
	// On parcours les liens du menu
	$('> li > a',idMenu).each(function () {
		// 
		var menuParent = $(this).closest('a').parent();
		// le cursor est sur l'élément
		$(this).bind("mouseenter focus", function () {
			$(this).addClass( classHover );
			$(menuParent).addClass( classHover );
		// le cursor n'est plus sur l'élément
		}).bind("mouseleave blur", function () {
			$(this).removeClass( classHover );
			//
			if (!$('.'+classHover, menuParent).length) {
				// Retardement pour que le sous-menu disparaisse > 2000 = 2sec
				setTimeout(function(){
					$(menuParent).removeClass( classHover );
				},timedrop);
			}
		});
	});//end
	
	// ctrl + shift pour avoir le focus sur le premier item du menu
	$(document).keyup(function (e) {
	if(e.which == 17) isCtrl=false;
	}).keydown(function (e) {
		if(e.which == 17) isCtrl=true;
		if(e.which == 16 && isCtrl == true) {
			var Item = $(" > li:first-child a", idMenu);
			var titleItem = $(Item).attr('title');
				$(Item).addClass( classHover ).focus();
	 	}
	});
	
	}
	// JSCROLLPANE
	$('#singlecontent .post_text').jScrollPane({
		showArrows: true
	});
	$('#singlecontent .post_imgs').jScrollPane({
		showArrows: true
	});
	// AFFICHAGE LIENS
	$('#liens .links').hide();
	$('#liens .points').mouseover(function() {
		$('#liens .links').fadeIn(600);
	});
	$('#liens').mouseleave(function() {
		$('#liens .links').fadeOut(300);
	});
	// ZOOMBOX
	$('.gallery-item a').addClass('zgallery1');	
	$('.gallery-item a').zoombox({
		opacity: 0.95,
		animation: true,
		duration: 400,
		gallery: false	
	});
	$('a.videothb').zoombox({
		opacity: 0.95,
		animation: true,
		duration: 400,
		gallery: false	
	});
	// CENTRER VIGNETTES VERTICALEMENT
	var hauteur2 = $('.gallery').height();
	if(hauteur2 < 512){
		$('.gallery').css({
			marginTop [decu]512 - hauteur2) / 2
		});
	}else{
		$('.gallery').css({
			marginTop:0
		});
	}
	// CENTRER VIDEO VERTICALEMENT
	var hauteur2b = $('.post_video p').height();
	if(hauteur2b < 512){
		$('.post_video p').css({
			paddingTop [decu]512 - hauteur2b) / 2
		});
	}else{
		$('.post_video p').css({
			paddingTop:0
		});
	}
	// CATEGORIES EN COURS
	var postClass = $('#singlecontent .post').attr('class');
	var postClass2 = postClass.substring(5);

	console.log(postClass2);
	$('ul#leftmenu > li.'+postClass2).addClass('encours');
	$('#leftmenu > li:not(.encours)').mouseover(function() {
		$('#leftmenu > li.encours').css('background-position', '40px 40px');
		$('#leftmenu > li.encours').css('opacity', 0.2);
	}).mouseout(function(){
		$('#leftmenu > li.encours').css('background-position', 'right bottom');
		$('#leftmenu > li.encours').css('opacity', 1);
	});
});