du texte dans 2 div

**Pepito** · 05/04/2006, 18h20

Bonjour,

Je suis en train de faire un blog.
Les messages de mon blog s'affichent sur les pages d'un livre.
J'ai donc creer deux div qui ont la taille des pages du livre.

Le probleme c'est que si le texte prend plus de place que la page, le texte continue en bas du livre, alors que j'aimerai que le texte se coupe, et continue sur l'autre page (autre div).

J'ai d'abord penser à couper le texte apres un certain nombre de caracteres mais comme le texte est different a chaque message, ca ne rend pas bien. (nombre de retour a la ligne different, ...)

Je sais pas comment faire.
Quelqu'un pourrait m'aider svp

:

Merki d'avance.
Pepit'

PS : J'ai deja posé la question dans le forum CSS qui m'a renvoyé vers du Javascript. Voici le post en question : http://www.developpez.net/forums/viewtopic.php?t=482630

**javatwister** · 05/04/2006, 18h36

idée très intéressante;

je te conseille d'utiliser offsetHeight (propriété que je n'aime pas beaucoup mais bon, elle te rendra un grand service);

en gros, quand la propriété offsetHeight du div dans lequel tu écris atteint le maximum fixé, le transfert à l'autre div se fait automatiquement;

mais j'attends des précisions sur la mise en forme de tes éléments, entre autres;

**Pepito** · 05/04/2006, 21h25

Je te cacherai pas que je connais pas grand chose en javascript.

Voila comment j'affiche mes differentes pages :

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
	echo("<div id=\"journal\">");
		echo("<div id=\"pageGauche\">");
			echo("<div class=\"titre\">$titreM</div>");
			echo("<div class=\"thedate\">".frenchdate($dateM)."</div>");
			echo("<div class=\"message\">".str_replace("\n","<br>",$texteM)."</div>");						
		echo("</div>");
 
		echo("<div id=\"pageDroite\">");
		echo("</div>");
	echo("</div>");
 
 
Et voici pour le CSS
#journal {
	background: url("images/livre.gif") no-repeat; 
	position: absolute; 
	width: 800px;
	height: 477px;
	margin-left: 0px;
	margin-top: 255px;	
}
 
#pageGauche {
	position: absolute; 
	font-family: Comic Sans MS, Sandra;
	margin-left: 60px;
	margin-top: 20px;
	width: 325px;
	height: 400px;
	overflow: hidden;
}
 
#pageDroite {
	position: absolute; 
	background-color: #00FF00; 
	font-family: Comic Sans MS;
	margin-left: 413px;
	margin-top: 20px;
	width: 325px;
	height: 400px;
}

Tu penses que je peux utiliser la fontion offsetHeight pour le texte que je veux afficher

:

Sinon tu peux voir un premier apercu sur http://lepsydexavier.free.fr

**javatwister** · 06/04/2006, 10h49

bon je bosse le truc, je te dirai si j'aboutis

**Pepito** · 06/04/2006, 13h16

A bon

C'est pas l'inverse normalement qu'on doit faire

:
Moi je bosse, je cherche, tu m'aides et je te dis ce que je trouve

:..... Bizzare....

En meme temps, ca me va aussi !!

Merki

Pepit'

**Pepito** · 06/04/2006, 18h26

Tu pourrais m'expliquer comment je pourrait utiliser la fonction offsetHeight avec du texte stp, parce que là, je trouve pas grand chose sur cette fonction...
Merki

**FMaz** · 06/04/2006, 20h54

J'ai une méthode peut-etre un peu conne mais:

En Php, tu te fait un tableau de X lignes (lignes du tableau = ligne du texte sur la page)

Chaque ligne prend 50 caractère, donc si ca dépasse, tu coupe et tu met sur l'autre ligne.

Si ton nombre de ligne est trop grand, bah tu met le reste dans une prochaine page.

En gros l'idée c'est de construire les lignes, pas les pages.

**javatwister** · 06/04/2006, 22h28

voici un lamentable prototype, mais qui montre comment ça marche:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>...</title> 
 
<style type="text/css">
 
 
#t11 {
text-align:justify;
width:400px;
height:300px;
border:1px solid;
margin-left:100px;
margin-right:50px;
float:left;
}
 
#t22 {
text-align:justify;
width:400px;
height:300px;
border:1px solid;
float:left;
}
 
#txt {
text-align:left;
margin-top:100px;
clear:left;
}
 
</style>
 
 
<script type="text/javascript">
 
function go(t){
 
t1=document.getElementById("t11");
t2=document.getElementById("t22");
tcach=document.getElementById("tcach1");
tcach.innerHTML="";
t1.innerHTML="";
t2.innerHTML="";
t=t.replace(/\n/g,"\n ");
t=t.replace(/([^\s]{50})/g,"$1 ");
m=t.split(" ");
 
for(i=0;i<m.length;i++){
	m[i]=m[i].replace(/\n/g,"<br />");
	tcach.innerHTML+=m[i]+" ";
if(tcach.offsetHeight<300){
	t1.innerHTML+=m[i]+" "}
else{
	t2.innerHTML+=m[i]+" ";}
}
}
 
</script>
 
</head>
 
<body>
 
<div id="t11"></div>
 
<div id="t22"></div>
 
 
 
<textarea rows="10" id="txt" cols="50">Ecrire ici le contenu à insérer.
</textarea>
 
<div id="tcach1"style="text-align:justify;visibility:hidden;position:absolute;width:400px;top:0px;left:0px"></div>
 
<p>
<input type="button" value="copier" onclick="go(document.getElementById('txt').value)" />
</p>
 
 
 
</body> 
</html>

le html, les variables, le reste, est grotesque mais je n'ai pas le temps de rendre tout ça présentable - je me lève tôt demain

;
en tout cas, je doute qu'une solution clean soit envisageable (conforme w3c...)

bref, je referai et commenterai tout ça demain peut-être

ps: il faut écrire ce qu'on veut dans la zone de texte et cliquer sur copier pour voir l'apparence; la 2e zone (droite) n'est pas limitée;

**Pepito** · 07/04/2006, 02h16

Wahou, ca c'est enorme!!

je pense que je vais pouvoir l'adapter à mon php. Il faudra que je le fasse evoluer si le texte est trop long pour les deux pages pour que le reste du texte soit stockée dans une variable, mais je pense que je devrais y arriver.

Juste un petit bug : Y'a des mots qui se collent. Par exemple, j'ai mis le texte suivant, et y'a des mots qui se sont collés !! Comme par exemple, les mots "fillette" et ""est" au debut, alors qu'il y a bien un espace entre les deux mots dans le texte original.

Aujourd'hui c'est dimanche
02-04-2006
Samedi 11 juin 1994, à l'issue du journal de 20 heures de France 2, un communiqué des laboratoires Bellon indique qu'une fillette est morte par empoisonnement après avoir absorbé l'antibiotique le plus prescrit aux enfants, la Josacine. Il s'agit de la petite Emilie Tanay, 9 ans.

Ce week-end de juin 1994 a un avant goût de vacance pour les enfants de Gruchet-le-Valasse en Seine-Maritime. L'école du village organise la traditionnelle kermesse de fin d'année scolaire. A cette occasion, Corinne Tanay confie sa fille Emilie aux Tocqueville pour le week-end. Leurs enfants sont dans la même classe. Depuis quelques jours la petite Emilie souffre d'un rhume tenace et sa mère, prévoyante lui laisse un flacon de sirop pour enfants.

Toute fière de son déguisement de bouffon médiéval, la petite fille passe une excellente journée avec ses camarades de classe. En rentrant chez elle en fin d'après-midi avec les enfants, Sylvie Tocqueville donne une cuillérée de Josacine à Emilie. Soudain l'enfant est prise de malaise et s'effondre, foudroyée en quelques minutes. Les secours ne pouvant que constater son décès.

Immédiatement, les soupçons se posent sur le flacon d'antibiotique. Par précaution, un communiqué est diffusé à la télévision et le médicament est interdit à la vente. Des milliers de mères inquiètes se débarrassent de leurs flacons.

L'enquête disculpe très vite le laboratoire puisque, les analyses sont formelles, le poison a été introduit au tout dernier moment, soit dans l'après-midi du 11 juin. L'autopsie du corps de l'enfant révélant des traces de cyanure, l'affaire prend une toute autre tournure.

Sinon a quoi sert cette ligne de code ?? (c'est la seul -enfin je pense - que je ne comprend pas)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

m=t.split(" ");

Merki enormement pour ton aide. Je pense que je devrais pouvoir m'aider de ca pour l'adapter a mon cas.

Merki
Pepit'

**javatwister** · 07/04/2006, 08h27

ouais je reverrai ça... j'ai conscience que c'est un brouillon; j'aurais honte de laisser ça en l'état

**javatwister** · 07/04/2006, 11h34

version moins cracra, à tester;

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>...</title> 
 
<style type="text/css"> 
 
#m0 {
visibility:hidden;
position:absolute;
top:0px;
left:0px;
text-align:justify;
border:1px solid;
width:300px;
}
 
#m1, #m2 { 
padding:0px;
text-align:justify; 
width:300px; 
height:300px; 
border:1px solid; 
margin-left:50px; 
margin-right:50px; 
float:left; 
} 
 
#txt { 
text-align:left; 
margin-top:20px; 
clear:left; 
} 
 
</style> 
 
 
<script type="text/javascript"> 
 
var t=new Array();
var cut, cut2;
 
// chargement du tableau de div (div caché, div gauche, div droite)
onload=function(){
 
	for(i=0;i<3;i++){
		t[i]=document.getElementById("m"+i);
	}
}
 
 
// copie des données (peu importe qu'elles viennent du serveur ou de la page en cours)
function go(m){ 
 
	// on vide les 3 div
	for(i in t){
		t[i].innerHTML=""
	}
 
	// on ménage un espace après chaque retour à la ligne
	m=m.replace(/\n/g,"\n "); 
	// on coupe les "mots" trop longs
	m=m.replace(/([^\s\n]{40})/g,"$1 "); 
	// on découpe le texte par portions sans espaces blancs
	cut=m.split(/ +/); 
 
	// pour chaque portion
	for(i=0;i<cut.length;i++){ 
		// on remplace le retour "\n" par une balise "<br />"
		cut2=cut[i].replace(/\n/,"<br />"); 
		// on affecte le texte au div caché
	  	t[0].innerHTML+=cut2+" "; 
 
		// si le div caché n'est plus haut que les div visibles
		if(t[0].offsetHeight<300){ 
			// le div de gauche est rempli
			t[1].innerHTML+=cut2+" ";
		} 
		// sinon
		else{
			// c'est le div de droite qui est rempli
			t[2].innerHTML+=cut2+" ";
		} 
	} 
 
} 
 
</script> 
 
</head> 
 
<body> 
 
<div id="m1"></div> 
 
<div id="m2"></div> 
 
 
<p style="text-align:center">
 
<textarea rows="20" id="txt" cols="50">Ecrire ici le contenu à insérer.</textarea> 
 
<input type="button" value="copier" onclick="go(document.getElementById('txt').value)" /> 
 
</p>
 
<div id="m0"></div> 
 
</body> 
</html>

**Pepito** · 07/04/2006, 19h24

Merki beaucoup
Ca fait toujours le bug de coller des mots !!

sinon j'ai un peu de mal a l'adapter a mon php, maisj'espere que je devrais y arriver

**javatwister** · 07/04/2006, 20h08

ah? j'ai pas eu le bug en testant ton texte

si tu veux, mets-moi un lien vers ton prototype;

**Pepito** · 07/04/2006, 20h17

Mais c'est bizarre, ca le fait pas a tous les mots, mais ca le fait a chaque fois aux memes mots....

http://lepsydexavier.free.fr/testo.php

J'ai tester avec le texte au dessus (en + il est d'actualité, et c'est pas fait expres !!

)
Par exemple, ca ecrit "une filleest morte" et "L'école du villageorganise" ainsi que "d'un rhumetenace" et d'autres.

Pepit'

**javatwister** · 07/04/2006, 22h06

ouais, je vois: interprétation aléatoire de l'espace non préservé...

bref, correction: http://javatwist.imingo.net/test.htm

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>...</title> 
 
<style type="text/css"> 
 
#m0 { 
visibility:hidden; 
position:absolute; 
top:0px; 
left:0px; 
text-align:justify; 
border:1px solid; 
width:300px; 
} 
 
#m1, #m2 { 
padding:0px; 
text-align:justify; 
width:300px; 
height:300px; 
border:1px solid; 
margin-left:50px; 
margin-right:50px; 
float:left; 
} 
 
#txt { 
text-align:left; 
margin-top:20px; 
clear:left; 
} 
 
</style> 
 
 
<script type="text/javascript"> 
 
var t=new Array(); 
var cut, cut2; 
 
// chargement du tableau de div (div caché, div gauche, div droite) 
onload=function(){ 
 
   for(i=0;i<3;i++){ 
      t[i]=document.getElementById("m"+i); 
   } 
} 
 
 
// copie des données (peu importe qu'elles viennent du serveur ou de la page en cours) 
function go(m){ 
 
   // on vide les 3 div 
   for(i in t){ 
      t[i].innerHTML="" 
   } 
 
   // on ménage un espace après chaque retour à la ligne 
   m=m.replace(/\n/g,"\n "); 
   // on coupe les "mots" trop longs 
   m=m.replace(/([^\s\n]{40})/g,"$1 "); 
   // on découpe le texte par portions sans espaces blancs 
   cut=m.split(/ +/); 
 
   // pour chaque portion 
   for(i=0;i<cut.length;i++){ 
      // on remplace le retour "\n" par une balise "<br />" 
      cut2=cut[i].replace(/\n/,"<br />"); 
      // on affecte le texte au div caché 
        t[0].innerHTML+=" "+cut2+" "; 
 
      // si le div caché n'est plus haut que les div visibles 
      if(t[0].offsetHeight<300){ 
         // le div de gauche est rempli 
         t[1].innerHTML+=" "+cut2; 
      } 
      // sinon 
      else{ 
         // c'est le div de droite qui est rempli 
         t[2].innerHTML+=" "+cut2+" "; 
      } 
   } 
 
} 
 
</script> 
 
</head> 
 
<body> 
 
<div id="m1"></div> 
 
<div id="m2"></div> 
 
 
<p style="text-align:center;clear:left"> 
 
<textarea rows="20" id="txt" cols="50">Ecrire ici le contenu à insérer.</textarea> 
 
<input type="button" value="copier" onclick="go(document.getElementById('txt').value)" /> 
 
</p> 
 
<div id="m0"></div> 
 
</body> 
</html>

**Pepito** · 09/04/2006, 21h33

Merci, ca marche.
(excuse moi, je me suis un peu eloigné de mon PC)

J'ai reussi a adapter le code javascript a ma page (enfin presque

)
J'ai remplacé la zone de texte (id=txt) par une zone cachée dont la valeur est le message, resultat de la requete.

juste un p'tit truc : est-ce qu'il est possible que le texte s'affiche directement dès le chargement de la page

: Pour le moment on est obligé de clicker sur un bouton.

J'ai essayé de faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onload=\"go(document.getElementById('txt').value)\"

au niveau du body et de divers div mais ca ne marche pas !!

Merki
Pepit'

**javatwister** · 09/04/2006, 21h43

ben ça marchera si tu mets pas de quotes;
ça m'étonnerait que tu sois obligé de générer une balise body via php hein!

**Pepito** · 12/04/2006, 00h56

Salut,

Je revient à la charge parce que là, ca fait 3 jours que je tourne en rond.
Bon, j'ai reussi a afficher le texte dès le chargement de la page meme si j'ai pas tout compris, mais c'est pas grave, ca marche.

Je voudrait savoir si on pouvait faire de meme avec la page de droite et mettre le reste du texte dans un div ou dans une variable

: De sorte que quand on cliquerai sur le lien pour la seconde page, ca affiche la suite du texte dans les pages.

J'ai créé un autre div "m3", mais j'arrive jamais a lui attribué le texte que je veux, et des fois, la page de droite se coupe quand elle veux, des fois elle continue jusqu'à la fin du texte sans se couper...

Si ca te soule, je comprendrais

Je pense que le probleme vient de la partie des if et du stockage du texte dans le nouveau div.

Merki
Pepit'

**javatwister** · 12/04/2006, 08h39

hmmm... intéressant de combiner ça avec un système "page par page";

tout dépend si tu veux traiter ça côté serveur ou client;
je pense que javascript est plus léger pour le coup, et t'évite des retours au serveur;
après, la mise en place demande une certaine patience...

plutôt que d'affecter directement le texte à un div "t[x]", on le place dans une variable t[x];
selon la valeur finale de x (nombre de fois où la hauteur des div apparents est dépassée), on sait combien de fois on pourra appuyer sur "suivant" / "précédent", sachant qu'il ne s'agira pas de liens mais juste de rappels de la fonction d'affichage;
dans tous les cas, il suffit des 2 pages ("div") de ton livre pour afficher tout le texte progressivement;

**javatwister** · 12/04/2006, 10h55

bon, voilà à peu près ce que ça donne (code pas encore fignolé):

http://javatwist.imingo.net/livre.htm

du texte dans 2 div

JavaScript

Discussions similaires

Partager

Partager