Une thickbox bien positionnée sous IE7 et IE8 AUSSI…

On aurai pu se dire que c’était pas trop demander… et pourtant, jusqu’à il y a peu, les Thickbox (même la 3.1) étaient buggées sous certaines versions d’IE7 et sous IE8 niveau positionnement à l’ouverture…

Jusqu’à il y a peu, parce qu’en fait j’ai découvert récemment un billet mentionnant le problème avec IE7 et une solution de contournement

En gros, il s’agit de mieux repérer qui est “vraiment” un IE6 et qui a juste “oublié son nom”…

Il faut donc redéfinir la façon dont le script détermine la version de IE puis changer quelques lignes plus bas le test qui nous concerne :

if ( !(jQuery.browser.msie6)) {
// take away IE6
$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
}

Et quid d’IE8 donc ?
Bein en fait, en lisant les commentaires dudit billet, j’ai extrapolé, et modifié un peu plus les lignes d’origine pour obtenir :

$.browser.msie6=
$.browser.msie
&&/MSIE 6.0/i.test(window.navigator.userAgent)
&&!/MSIE 7.0/i.test(window.navigator.userAgent)
&&!/MSIE 8.0/i.test(window.navigator.userAgent);

Et voilà !
“Magique”, ça marche enfin partout !

Alors, oui, je sais, vous allez me dire “thickbox c’est trop has-been, maintenant y’a trucPouet ou machinChose” (ou que sais-je encore) mais :

  1. parfois on a pas le choix, on doit utiliser en une,
  2. pour les “anciens” sites fait avec, et qui ne sont pas prêts d’être refondus, on peut quand même les “réparer” ça fait toujours zizir,et pas qu’à votre égo j’entends… :)

Alors voilà, comme je n’ai pas trouvé d’article reprenant tout ça en un endroit, j’ai fini par me faire violence, prendre le temps nécessaire, vous faire un article, et je vous propose de récupérer ici : le fichier non compressé et la version “packée”/compressée (avec le script de Dean Edwards).
J’en profite pour vous signaler ce petit formulaire pour décompresser et rendre lisible (indenté, coloré, etc) un script JS, ça peut toujours être utile…

J’espère que ça pourra vous rendre service, ça me ferait plaisir :)

A (très…) bientôt !
Mais d’ici là je retourne bosser :)

7 réponses à cet article

# - - goetsu -

I’m invincible!!!!!!

# - - Bruno -

Merci beaucoup.

# - - Marie ALHOMME -

Bein de rien :)
Si ça peut aider au moins une personne, ça me fait plaisir :)

# - - Thileq -

:! Très bonne initiative, PouiPoui !
J’ai intégré tes portions de code dans ma propre version – déjà remaniée.

Il faudrait trouver le temps de rassembler toutes les bonnes idées qui traînent sur le net pour créer une nouvelle version de cet excellent script qu’est Thickbox.

Bonne continuation.

# - - Marie ALHOMME -

:) Très bonne idée Thileq, qui s’en charge ? Faut que je fasse un appel sous forme de billet tu penses ?

Mais en tout cas je serai curieuse de savoir ce que tu avais remaniée dans ta version à toi ?!

# - - Yakeson_Chihiro -

jQuery 1.3 utilise $.support au profit de $.browser. J. Reisig l’a seulement conservé pour la compatibilité ascendante avec les plugins. http://docs.jquery.com/Release:jQue… Les développeurs sont encouragés à mettre à jour leurs scripts.
Perso je préfère redéfinir à nouveau les variables:
$.browser = $.browser || {};
$.browser.msie = /msie/.test( userAgent ) && !/opera/.test( userAgent );
$.browser.msie6 = $.browser.msie
&& /MSIE 6.0/i.test(window.navigator.userAgent)
&& !/MSIE 7.0/i.test(window.navigator.userAgent)
&& !/MSIE 8.0/i.test(window.navigator.userAgent);

Pour un script qui n’utilise pas de bibliothèques (jQuery ou autres ) HighSlide:
http://highslide.com/. Payant mais vaut le détour :)

Cheers !

# - - Rubenxela -

Le soucis c’est que ça ne marche plus avec Firefox chez moi !!

Votre réponse ?

XHTML: Vous pouvez utiliser ces balises : <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Chez PouipouiDesign

  • PouipouiDesign / 2011 / JDS / Intégration
  • PouipouiDesign / 2011 / Westcon / Intégration
  • PouipouiDesign / 2011 / Renault Sport F1 / Webdesign / Intégration
  • PouipouiDesign / 2011 / CinéLycée / Intégration
  • PouipouiDesign / 2011 / Sud Web 2011 / Webdesign / Intégration / Développement
  • PouipouiDesign / 2010 / Raymond Interactive / Intégration / Développement
Retour en haut