IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Débutant. Comment ajuster la hauteur de mon texte ?


Sujet :

jQuery

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Août 2009
    Messages
    186
    Détails du profil
    Informations personnelles :
    Âge : 60
    Localisation : France

    Informations forums :
    Inscription : Août 2009
    Messages : 186
    Par défaut Débutant. Comment ajuster la hauteur de mon texte ?
    Bonjour,
    Je suis en train de travailler sur un petit module qui marcherait plutôt bien si il n'y avait ces 2 petits problèmes du moment :
    1 - J'aimerais que, à la fin de l'agrandissement de l'image, non seulement le texte affiché soit modifié (comme c'est le cas actuellement via la fonction texte_agrandi() passée en paramètre dans la fonction jQuery animate) mais que, en plus le bloc div du texte de droite s'ajuste en hauteur pour épouser le texte qu'il contient dans toute sa hauteur ! Autrement dit (à moins qu'il y ait une autre solution ?), il faudrait que je puisse alors effacer le height que j'ai mis en CSS pour le bloc texte "height:56px;" (ci-dessous):
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    #texte{
        height:56px; /* Hauteur de base du bloc texte */
        width:390px;
    	padding-left:5px; /* Pour que le texte ne colle pas au bord droit */
        border:1px solid #FF7837;
    	background-color: #FFD9B3;
    }
    [Si je teste en retirant manuellement le code "height:56px;", j'obtiens bien l'effet désiré (avec la hauteur du bloc de texte (en orangé) qui épouse bien la hauteur des lignes de texte) mais évidemment, il faut que je puisse faire ça automatiquement !]
    A ce propos, j'ai découvert la fonction jQuery Remove() qui sait effacer des balises... mais comment faire pour que l'effacement ne se produise que sur un élément plus précis, à savoir, le fameux height évoqué ?

    2- Si l'image n'est pas encore mise en cache (1ère visite de la page, par exemple...) le survol de l'image produit parfois, non un agrandissement, mais comme une résorbtion de l'image (peut-être, du fait, l'aurez-vous constaté) -> Ca passe en faisant une réactualisation de la page, mais bon, j'aimerais bien faire disparaitre ce fonctionnement pour le moins spécial -> A votre avis, est-ce une histoire de Doctype à modifier ou ? Si oui, que pourrais-je mettre à la place ?

    Merci par avance pour toute précision que vous sauriez m'apporter pour m'aider à avancer !

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir.

    Je ne suis pas certain d'avoir bien compris. Sinon, simplement :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $("#text").css("height","auto");

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Août 2009
    Messages
    186
    Détails du profil
    Informations personnelles :
    Âge : 60
    Localisation : France

    Informations forums :
    Inscription : Août 2009
    Messages : 186
    Par défaut
    Bonsoir danielhagnoul,
    Effectivement, je vois que tu as très très bien compris ma demande et mon besoin du moment. En effet, le code que tu me proposes correspond tout à fait à ce que j'avais envie de faire, juste un p'tit détail de rien (que j'avais moi-même pas remarqué au départ), à savoir, écrire
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $("#texte").css("height","auto");
    au lieu de
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $("#text").css("height","auto");
    Mais sinon, c'est vraiment cela... Merci vraiment beaucoup !

    Après, je n'sais pas si tu as remarqué toi-même le p'tit bignz que j'évoque en (2)... because ça ne le fait pas toujours: parfois, en survolant l'image, au lieu de s'agrandir, elle diminue jusqu'à presque disparaitre... Et ça ne le fait que si l'image n'a pas encore été mise en cache (-> à la 1ère visite...) ! Ca m'était arrivé un peu du même genre,dans le passé, sous Internet explorer, avec une animation en xml/xsl et j'avais pu arranger l'affaire en modifiant le doctype du xsl.
    Mais là, on est en html, ca me le fait sous Firefox et je n'ai pas de doctype de "rechange"... Si quelqu'un a une idée ?

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir.

    Il y aurait bien des choses à dire sur une petite lettre en plus ou en moins et sur un code...

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    <!doctype html>
    <html lang="fr">
    <head>
    	<meta charset="utf-8">
    	<title>Page type</title>
    	<style>
            /* BASE */
    		body {
                background-color:"#FFFFFF";
                background-image: url("http://souffle56.fr/Site/SOMMAIRE SOUFFLE 56/Fond - oeuvres 2.png");
    			color:#000000;
    			font-family:sans-serif;
    			font-size:medium;
    			font-style:normal;
    			font-weight:normal;
    			line-height:normal;
    			letter-spacing:normal;
    		}
    		h1,h2,h3,h4,h5 {
    			font-family:serif;
    		}
    		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
    			margin:0px;
    			padding:0px;
    		}
    		p {
    			padding:6px;
    		}
    		ul,ol,dl {
    			list-style:none;
    			padding-left:6px;
    			padding-top:6px;
    		}
    		li {
    			padding-bottom:6px;
    		}
            /* TEST */
            #container {
                position:absolute;
                left:100px;
                top:70px;
                width:400px;
                height:200px;
                border:1px solid #EFBA3F;
                z-index:1;
            }
            img.resize {
                height:50px; /* Hauteur de base de l'image */
                background-color: #FFB66C;
                padding:2px; /* Pour faire un cadre */
                z-index:1;
                display: block; /* Pour que le texte de droite épouse les variations de l'image */
                float: left;
                margin-left:2px;
                margin-top:2px;
                margin-bottom:2px;
                margin-right:5px; /* Ecart avec le texte */
            }
            #texte {
                height:auto; /* Hauteur de base du bloc texte */
                width:390px;
                padding-left:5px; /* Pour que le texte ne colle pas au bord droit */
                border:1px solid #FF7837;
                background-color: #FFD9B3;
            }
            #texte2 {
                /* clear : pour annuler l'effet d'un éventuel "float: left" ou "float: right" dans un bloc précédent */
                clear: both;
                width:390px;
                padding-left:5px;
                border:1px solid #000000;
                color: #500C23;
            }
        </style> 
    	<script charset="utf-8" src="../lib/jqueryui-1.8/js/jquery-1.4.2.min.js"></script>
        <script>
            $(function(){
                var texteLong = "Les dauphins sont des animaux qui sont tres sympatiques Les dauphins sont des animaux qui sont tres sympatiques Les dauphins sont des animaux qui sont tres sympatiques Les dauphins sont des animaux qui sont tres sympatiques Les dauphins sont des animaux qui sont tres sympatiques Les dauphins sont des animaux qui sont tres sympatiques";
     
                var texteCourt = "Les dauphins sont des animaux qui sont tres sympatiques. Les dauphins sont des animaux..."
                var pourcent = 15; // pourcentage augmentation ou diminution de la taille de l'image
     
                $("img.resize").hover(
                    function(){
                        // il est préférable d'agrandir le texte avant l'image
                        $("#texte").text(texteLong);
     
                        $(this).stop().animate({
                            width: "+=" + pourcent + "%",
                            height: "+=" + pourcent + "%"
                        }, 1000);
                    },
                    function(){
                        // il est préférable de diminuer l'image avant le texte
                        $(this).stop().animate({
                            width: "-=" + pourcent + "%",
                            height: "-=" + pourcent + "%"
                        }, 1000, function(){
                            $("#texte").text(texteCourt);
                        });	
                    }
                );
            });
        </script> 
    </head> 
    <body> 
        <div id="container">
            <!-- <img id="image" class="resize" src="Image_js_css/m-Dauphins.jpg"/> -->
            <img id="image" class="resize" src="m-Dauphins.jpg"/> 
            <div id="texte"> 
                <span>Les dauphins sont des animaux qui sont tres sympatiques Les dauphins sont des animaux... </span> 
            </div> 
            <div id="texte2"> 
                <span>Heu... Ca, c'est la suite !</span> 
            </div> 
        </div> 
    </body> 
    </html>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

Discussions similaires

  1. Réponses: 11
    Dernier message: 15/10/2010, 12h43
  2. Réponses: 4
    Dernier message: 08/05/2006, 20h12
  3. Réponses: 7
    Dernier message: 17/03/2006, 13h26
  4. CSS: Comment puis-je aligner mon texte au millieux
    Par pierrot10 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 16/02/2006, 09h01
  5. Comment régler la hauteur d'un type text?
    Par Death83 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 15/08/2005, 21h38

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo