du texte dans 2 div

Version imprimable

05/04/2006, 18h20
Pepito

du texte dans 2 div

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' :wink:

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
05/04/2006, 18h36
javatwister

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;

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

Voila comment j'affiche mes differentes pages :

Code:

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

06/04/2006, 10h49
javatwister

bon je bosse le truc, je te dirai si j'aboutis :wink:
06/04/2006, 13h16
Pepito

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 !! :D
Merki

Pepit' :wink:
06/04/2006, 18h26
Pepito

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
06/04/2006, 20h54
FMaz

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.

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

Code:

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 :lol: ;
en tout cas, je doute qu'une solution clean soit envisageable (conforme w3c...)

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

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;

07/04/2006, 02h16
Pepito

Wahou, ca c'est enorme!! :D
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.

Citation:

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:

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' :wink:
07/04/2006, 08h27
javatwister

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

version moins cracra, à tester;

Code:

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>

07/04/2006, 19h24
Pepito

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
07/04/2006, 20h08
javatwister

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

si tu veux, mets-moi un lien vers ton prototype;
07/04/2006, 20h17
Pepito

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 !! :D)
Par exemple, ca ecrit "une filleest morte" et "L'école du villageorganise" ainsi que "d'un rhumetenace" et d'autres.

Pepit' :wink:

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

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

Code:

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>

09/04/2006, 21h33
Pepito

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 :D)
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:

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

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

Merki
Pepit' :wink:
09/04/2006, 21h43
javatwister

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! :lol:
12/04/2006, 00h56
Pepito

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 :D Je pense que le probleme vient de la partie des if et du stockage du texte dans le nouveau div.

Merki
Pepit' :wink:
12/04/2006, 08h39
javatwister

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;
12/04/2006, 10h55
javatwister

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

http://javatwist.imingo.net/livre.htm
13/04/2006, 01h14
Pepito

C'est sacrément niquel !! :D

J'ai regardé le code source de ta page, et grace a tes explications, j'arrive a comprendre ce que tu fais dans le source meme si le javascript reste un mystere pour moi. Faudrait vraiment que je l'apprenne.
C'est aussi puissant que c'est horrible !! :D

Je te remercie enormenet pour ton aide.
Je vais fondre ton code avec ma page. Normalement, il ne devrait pas y avoir de probleme.

je te tiens au courant.
Merki beaucoup.

Pepit' :wink:
13/04/2006, 21h12
Pepito

J'ai quelques petits problemes !!

Mes deux div où on met le texte (m1 et m2) font 433 pixels de hauts.
Pourtant le texte des deux divs depasse. Une partie du texte est caché et apres le texte reprend sur la deuxieme page.
J'ai diminué la valuer dans la ligne

Code:

j=parseInt(t[0].offsetHeight/300);

mais du coup, y'a eu des problemes. J'ai diminué la valeur jusqu'a ce que le texte sur la page de gauche rentre, mais du coup, le texte à droite ne rentrait plus !!

Sinon ca marche bien. :D
Pepit' :wink:
14/04/2006, 09h25
javatwister

Code:

j=parseInt(t[0].offsetHeight/300);

dans cette ligne, il faut précisément remplacer 300 par la hauteur des div, je ne te l'avaiz pas précisé...
14/04/2006, 16h09
Pepito

Ben justement. Mes div où il y a le texte font 433px de haut (height)

J'ai donc mis

Code:

j=parseInt(t[0].offsetHeight/433);

Mais du coup, le texte depasse. Le texte en trop n'est pas visible directement, mais si on selectionne le texte (comme pour faire un copier-coller), et qu'on descent la souris, le reste du texte va s'afficher comme si y'avait un ascenceur. (J'ai du mal a expliquer...)

http://lepsydexavier.free.fr

Pepit' :wink:
14/04/2006, 19h09
javatwister

euh, il doit y avoir un malentendu: tu n'as pas défini cette hauteur dans ta feuille de style, si j'ai bien regardé...; en tout cas, pas dans la css lisible sur la page;

autre point: ne déclare rien avant la balise <html>! ni scripts, ni styles!

sinon, je viens de vérifier avec ton texte et... ça passe!

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

quelques ptits réglages peut-être, mais le principe paraît ok (je pense qu'il faut définir la propriété line-height des zones et s'en servir pour décider de leur hauteur précise);
14/04/2006, 21h57
Pepito

Je crois avoir trouvé. Ca vient de la zone #m0. Je lui avait attribué un width important et quand j'ai mis une valeur moins grande, ca a bien marché.

Par contre, si je met le meme width à m0 qu'a m1 et m2, le texte ne prend pas toute la place.
J'ai dû mettre un width de 365px pour m0 alors que m1 et m2 ont un width de 333px afin que tout le texte prenne toute la place.

Est-ce que le width de m0 doit etre le meme que celui de m1 et m2 :?:

Autre petit truc. On dirait qu'à la derniere ligne affichée de chaque page, le texte n'est pas justifié comme si y'avait un retour à la ligne apres le dernier mot affiché de la page. Est-ce normal :?:

Pepit' :wink:
15/04/2006, 09h05
javatwister

salut

regarde bien les css que j'ai mises à m0, m1 et m2, c'est très important que la mise en forme du texte soit exactement la même; seule la hauteur de m0 est indéfinie, justement pour que offsetHeight puisse évoluer;

je viens de faire un essai avec un line-height défini et une hauteur de div correspondant à 20 X line-height: ça roule!
mais regarde bien la ligne encadrée dans le script :wink:

pour le problème de la dernière ligne non justifiée... euh... comment dire... c'est à moitié normal non? Tu changes d'élément donc de paragraphe, et comme chacun sait, la dernière ligne d'un paragraphe justifié se termine où elle peut!

difficile à résoudre, ça :?

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

[j'ai doublé le texte]