11524 sujets

JavaScript, DOM et API Web HTML5

[Résolu] [JQuery] probleme avec un script de légende photo

Bonjour,

Je commence avec JQuery et je suis confronté à un problème que je ne comprend pas. Sur le site djpgirardin.com vous pouvez voir sur la troisième image par exemple que la légende se met sur deux lignes car l'image est étroite mais le script JQuery ne prend pas en compte son innerHeight mais seulement celui de la première div sélectionnée.

le script JQuery :

        $(document).ready(function() {
            $(".information").each(function(){
                $(this).css("bottom", $(this).innerHeight() + "px");
            });
            $("#cycle").hover(function(){
                $(this).find(".information").toggleClass("visible");
            });
        });


le code HTML :

            <li>
                <img src="img/vernis_tampon_03.jpg" alt="vernis_tampon_03" />
                <div class="information">
                    <h2>vernis au tampon</h2>
                    <p>ces deux commodes Louis XVI ont été vernies au tampon avec la technique du XVIIIe</p>
                </div>
            </li>


Merci d'avance à ceux qui comprendrait ce qui se passe.
Bonsoir charlescoiffier,

Votre problème est lié à une mauvaise application de styles CSS.
Exemple avec la portion de code HTML générée suivante...
<li style="position: absolute; top: 0px; left: 0px; display: block; z-index: 22; opacity: 1; width: 81px; height: 130px;">
    <img src="img/vernis_tampon_01.jpg" alt="vernis_tampon_01">
    <div class="information" style="bottom: 38px;">
        <h2>vernis au tampon</h2>
	<p>ces deux commodes Louis XVI ont été vernies au tampon avec la technique du XVIIIe</p>
    </div>
</li>

- Problème 1 : la balise <li /> fait 81x130px alors que l'image <img /> contenue fait 533x450px
Solution : mettre la balise <li /> aux mêmes dimensions que l'image contenue.

- Problème 2 : la balise <div.information /> est positionnée par rapport à la balise <li /> avec la propriété "bottom", en "position: relative".
Solution : bien mettre la balise <div.information /> en "position: absolute;" et avec un "bottom: 0;" direct en CSS et non en JS : 
.information {
    /* ... */
    position: absolute;
    bottom: 0;
    /* ... */
}

Ces deux premières solutions couplées devraient déjà répondre à votre problématique Smiley murf .
En l'attente de vos tests.

Bon code...
Merci beaucoup, ça marche effectivement mieux comme ça...

A force de tâtonner et d'étaler ses projets sur plusieurs mois on fini par ne plus comprendre son propre code et par mettre en place des systèmes complexes pour réaliser des choses toutes simples Smiley confus ...

Merci encore pour votre aide.
Sujet clos
Aller à