Zone personnalisable dynamiquement

**coucoudjam** · 19/05/2007, 10h46

Bonjour !

Alors voilà, j'aimerais faire une page d'accueil personnalisable de mon site. Je m'explique !

Sur la page d'accueil, un zone de texte dans laquelle l'utilisateur pourra mettre son propre texte. Par exemple : "Mon Accueil".

J'aimerais que "Mon accueil" puisse apparaître au fur et à mesure de la frappe, au-dessus du champ (par exemple) dans une police et une couleur sélectionnée (dans une listbox par exemple).

Aucune idée de comment faire ça malheureusement...

L'intérêt de la chose serait que l'utilisateur mette cette page d'accueil dans ses favoris avec une adresse du type : "http://www.monsite.com/index.php?font=font5color=4word=Mon%accueil"

Comment pourrais-je réussir ce tour de "magie" à votre avis ? (sachant que je maitrise autant javascript que l'hébreu ancien...

)

Merci d'avance pour vos suggestions !

**SpaceFrog** · 19/05/2007, 11h15

ben mets toi à l'inuït, parcequ'en javascript ce n'est pas possible...

il te faudra utiliser un language serveur ...

sauf si tu ne veux pas sauvegarder les personalisations ?

il suffira alors de parser l'url et de récupérer les parmètres passés ... (cf FAQ)

puis d'attribuer les styles (cf FAQ) dans une fonction lancée dans le body.onload

**Auteur** · 19/05/2007, 11h47

Et en mettant le texte et les paramètres dans un cookie ? Lors du chargement de la page une fonction va lire les données du cookie.

Seul bémol : la durée de vie d'un cookie... Bref on revient à l'utilisation d'un langage serveur

**coucoudjam** · 19/05/2007, 12h59

Le langage serveur ne servirait pas dans ce cas ci vu que rien ne serait à retenir côté serveur...

Eventuellement du php pour tester le valeurs de "font", "color" et "word". Ce qui n'est pas à stocker vu qu'ils feraient partie de l'url mises dans les favoris de l'utilisateur...

Seulement pour que au moment de la frappe dans le champ texte, la zone personnalisée se mette à jour, il faut du javascript non ? Rien à voir avec un langage serveur vu que c'est uniquement coté utilisateur.

Désolé si je n'ai pas été clair.... Bon alors, un exemple... Je veux taper "Bonjour" dans mon champ texte (duquel je ne sors pas, je le tape "Bonjour" en une fois) :

Champ texte : "B"
Zone personnalisée "B"

Champ texte : "Bo"
Zone personnalisée "Bo"

Champ texte : "Bon"
Zone personnalisée "Bon"

Champ texte : "Bonj"
Zone personnalisée "Bonj"

etc...

Et donc après si ça convient à l'utilisateur, il appuierait sur un bouton pour valider et là, en php par exemple, l'url avec valeurs serait introduite dans ses favoris.

Mais mon problème est que je n'arrive pas à obtenir une synchronisation de la valeur du champ texte et de la zone personnalisable au fur et à mesure de la frappe.

J'espère avoir été moins confus...

**coucoudjam** · 19/05/2007, 12h59

Et pour l'idée du cookie, ce n'est pas bête du tout mais sa durée de vie est trop limitée malheureusement...

**Auteur** · 19/05/2007, 18h05

voilà un script.
Par contre pour ajouter l'adresse générée dans les favoris, je ne vois pas comment faire :

Si l'adresse ne contient pas de parmètres, la forme s'affiche.
Si l'adresse contient les paramètres, le texte s'affiche et la forme reste cachée.
>> cf. fontion init()

Code html :

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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.dimDiv{
 float: left;
 margin: 2px;
 width: 20px;
 height: 20px;
 border: ridge 1px #AAAAAA;
}
 
#idForm{
 display: none;
}
//-->
</style>
 
<script type="text/javascript">
<!--
function init()
{
 var i;
 var parametres = document.location.search;
 var n = parametres.length;
 var exp = new RegExp("([0-9a-zA-Z#_ ]*[^\n\=])","gi");
 var infos = new Array();
 var objet = document.getElementById("zoneTexte");
 
 if (n>0)
 {
  parametres = unescape(parametres.substring(1,n));
  infos = parametres.match(exp);
 
 
  i=0;
  n = infos.length;
  while (i<n)
  {
    switch (infos[i].toLowerCase())
    {
    case "text":
         i++;
         objet.innerHTML = infos[i];
         break;
    case "color":
         i++;
         objet.style.color = infos[i];
         break;
    case "font":
         i++;
         objet.style.fontFamily = infos[i];
         break;
    case "fontsize":
         i++;
         objet.style.fontSize = infos[i];
         break;
    }
    i++;
  }
 }
 else
 {
   document.getElementById("btMsg").style.display = "none";
 
   document.getElementById("idForm").style.display = "block";
 
   objet.innerHTML = document.getElementById("idText").value;
   objet.style.color = "#000000";
   objet.style.fontFamily = document.getElementById("idFonte").value;
   objet.style.fontSize = document.getElementById("idTailleFonte").value+"pt";
 }
 
}
 
function changeCouleur(couleur)
{
 document.getElementById("zoneTexte").style.color = couleur;
}
 
function changeFonte(fonte)
{
 document.getElementById("zoneTexte").style.fontFamily = fonte;
}
 
function changeTailleFonte(tFonte)
{
 document.getElementById("zoneTexte").style.fontSize = tFonte+"pt";
}
 
 
function texte(txt)
{
  document.getElementById("zoneTexte").innerHTML = txt;
}
 
function Valider()
{
  var data = document.getElementById("zoneTexte");
 
  var txt = data.innerHTML;
  var couleur = data.style.color;
  var fonte =  data.style.fontFamily;
  var taille =  data.style.fontSize;
 
  var urlPage = document.location.href+"?text="+escape(txt+'\n')+"color="+escape(couleur+'\n')+"font="+escape(fonte+'\n')+"fontSize="+escape(taille+'\n');
 
  if (confirm(urlPage+"\n\nAjouter dans mes favoris ?"))
  {
    /** ........................ **/
  }
}
 
function changerMsg()
{
 document.getElementById("btMsg").style.display="none";
 document.getElementById("idForm").style.display = "block";
}
//-->
</script>
 
</head>
 
<body onload="init()">
 
<span id="zoneTexte">&nbsp;</span>
 
<div id="btMsg">
<input type="button" value="Changer mon message" onclick="changerMsg()"/>
</div>
 
<br /><br />
<form id="idForm">
<input type="text" value="Texte par défaut" id="idText" size="55" maxlength="50" onkeyup="texte(this.value)"/>
<br />
Fonte :
<select size="1" id="idFonte" onchange="changeFonte(this.value)">
    <option value="Arial">Arial</option>
    <option value="Comic Sans MS">Comic Sans MS</option>
    <option value="Courier New">Courier New</option>
    <option value="Symbol">Symbol</option>
    <option value="Time New Roman">Times New Roman</option>
</select>
Taille :
<select size="1" id="idTailleFonte" onchange="changeTailleFonte(this.value)">
    <option value="6">6 pt</option>
    <option value="8">8 pt</option>
    <option value="10">10 pt</option>
    <option value="12" selected="selected">12 pt</option>
    <option value="14">14 pt</option>
    <option value="16">16 pt</option>
    <option value="18">18 pt</option>
    <option value="20">20 pt</option>
    <option value="30">30 pt</option>
</select>
 
<br />
Couleur :<br />
<div class="dimDiv" style="background-color: #000000" onclick="changeCouleur(this.style.backgroundColor)">&nbsp;</div>
<div class="dimDiv" style="background-color: #FF0000" onclick="changeCouleur(this.style.backgroundColor)">&nbsp;</div>
<div class="dimDiv" style="background-color: #00FF00" onclick="changeCouleur(this.style.backgroundColor)">&nbsp;</div>
<div class="dimDiv" style="background-color: #0000FF" onclick="changeCouleur(this.style.backgroundColor)">&nbsp;</div>
<div class="dimDiv" style="background-color: #FF00AA" onclick="changeCouleur(this.style.backgroundColor)">&nbsp;</div>
<div class="dimDiv" style="background-color: #DDDDDD" onclick="changeCouleur(this.style.backgroundColor)">&nbsp;</div>
<div class="dimDiv" style="background-color: #0F8F0F" onclick="changeCouleur(this.style.backgroundColor)">&nbsp;</div>
<div class="dimDiv" style="background-color: #A5368B" onclick="changeCouleur(this.style.backgroundColor)">&nbsp;</div>
<div class="dimDiv" style="background-color: #AA55CC" onclick="changeCouleur(this.style.backgroundColor)">&nbsp;</div>
 
 
<br /><br /><br /><br /><br />
<input type="button" value="Valider" onclick="Valider()" />
 
</form>
 
</body>
 
</html>

**coucoudjam** · 19/05/2007, 18h16

Génial !

Je n'ai pas encore testé mais assurément d'ici demain, je reposte pour le feedback

Merci beaucoup !

PS Pour la mise dans les favoris, ça je peux m'en sortir mais en javascript, je suis vraiment une brel

**Auteur** · 19/05/2007, 18h54

si tu veux tester :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
 
<html>
<head>
<title></title>
</head>
 
<body onload="document.location.href='pageTest.htm?text=ceci%20est%20un%20test%0Acolor=%23AAAFFF%0Afont=Arial%0AfontSize=20pt'">
 
</body>
 
</html>

j'opère une redirection vers le fichier pageTest.htm en y ajoutant des paramètres.

Donc, fais copier / coller du script que j'ai donné plus haut et appelle le fichier pageTest.htm puis exécute le bout de code ci-dessus.

Zone personnalisable dynamiquement

JavaScript

Discussions similaires

Partager

Partager