Adapter la hauteur d'une Shadowbox à son contenu

Tout utilisateur de Shadowbox a eu un jour, j'imagine, besoin de pouvoir faire en sorte que ce dernier adapte sa hauteur à celle de son contenu, qu'il s'agisse simplement d'obtenir un réglage aux petits oignons sans peine ni contrainte, ou de faire en sorte que sa "fenêtre" soit plus grande que le viewport du navigateur, rendant à ce dernier la responsabilité du scroll.

Mes propres recherches à ce sujet étant restées vaines, j'ai mis au point la solution qui va suivre, certes un peu bourrin mais ayant le mérite de fonctionner ! Elle implique d'exécuter du JavaScript dans la page appelante à partir de la Shadowbox elle-même (qui doit donc être une iframe au contenu de laquelle vous avez accès). Démonstration !

Dans la Shadowbox :

<script>
window.parent.sb_resize(jQuery(document).height());
</script>

Dans la page parente :

function sb_resize(h)
{
$('#sb-wrapper-inner').height(h);
$('#sb-container').css('position', 'absolute').width($(document).width()).height($(document).height());
$(window).on('resize', function() { setTimeout('sb_compute()', 50); }); // petit délai pour s'assurer que notre code sera exécuté après celui de Shadowbox
}

function sb_compute() {
var new_h = 0;
$('#sb-player').contents().children().children('body').children().each(function()
{
new_h += $(this).height(); // On récupère la hauteur cumulée des enfants du body de l'iframe
});
sb_resize(new_h);
}

Se débarrasser du pixel blanc autour des boutons customisés sur IE 7

Lorsqu'en CSS, vous stylez un bouton (qu'il s'agisse d'un élément button, input ou a) en lui appliquant une image de fond répétée horizontalement et une bordure, ça a de la gueule. À part peut-être sur Internet Explorer 7 qui, ne nous demandons même plus pourquoi, vient ajouter une bordure supplémentaire d'un pixel blanc (dans la majorité des cas, cf. supra) entre le bouton en lui-même et sa bordure normale, définie par nos soins. Le plus fort, c'est que si l'on enlève cette dernière, ce maudit pixel en trop disparaît !

Plutôt que de chercher midi à quatorze heures, commençons par styler normalement notre bouton, pour les navigateurs capables de comprendre le CSS correctement :

.button {
background: url("img/button.jpg") repeat-x;
border: 1px solid #3B3B3B;
}

Si nous laissons les choses en l'état, IE 7 va en réalité appliquer une bordure supplémentaire d'un pixel de large, de la couleur de fond de l'élément (le bouton), qui est, par défaut, le blanc. Il est impossible de la faire disparaître sans enlever la bordure originelle. Alors, réfléchissons...

/** Ceci s'applique uniquement à IE 7, via un commentaire conditionnel **/
.button {
border: 1px solid transparent; /* on laisse une bordure invisible pour que le pixel en trop reste */
background-color: #3B3B3B; /* on donne à ce pixel la couleur souhaitée pour notre bordure */
}