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

**souffle56** · 15/04/2010, 21h25

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 !

**danielhagnoul** · 15/04/2010, 23h23

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");

**souffle56** · 16/04/2010, 22h09

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 ?

**danielhagnoul** · 17/04/2010, 22h27

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>

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

jQuery

Discussions similaires

Partager

Partager