[Ancien]Page Code Source

**Bisûnûrs** · 07/11/2006, 10h11

Fonction générique de vérification d'un formulaire (à améliorer)

Code Javascript :

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
function verif(champs){
 
   var alerte = "";
 
   for(var i=0;i<=champs.length-1;i++){
      if(document.getElementById(champs[i]).value == ""){
         alerte += "Le champ "+champs[i]+" n'est pas rempli.\n"
      }
   }
 
   if(alerte){
      alert(alerte);
      return false;
   }
   else{
      return true;
   }
 
}

Code HTML :

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

1
2
3
4
5
6
7
8
<form action="mapage.html" onsubmit="return verif(['diametre','hauteur'])">
   <div>
      Diamètre : <input type="text" id="diametre" /></br />
      Hauteur : <input type="text" id="hauteur" /></br />
      Largeur : <input type="text" id="largeur" />(facultatif)</br />
      <input type="submit" value="Ok" />
   </div>
</form>

Fonction évidemment à améliorer pour qu'elle fonctionne aussi avec les checkboxes, radiobuttons et selects.

**Bisûnûrs** · 14/11/2006, 00h20

Voilà les petits ajouts suite à mon post précédent :

La fonction générique qui ne demande qu'à être perfectionnée, notamment pour la gestion des radiobuttons et des checkboxes ... :

Code Javascript :

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
function verif(champsInput,champsSelect,champsRadio,champsBox){
 
   var alerte = "";
 
   for(var i=0;i<=champsInput.length-1;i++){
      if(document.getElementById(champsInput[i]).value == ""){
         alerte += "Le champ "+document.getElementById('inputs').getElementsByTagName('label')[i].innerHTML+" n'est pas rempli.\n"
      }
   }
   for(var i=0;i<=champsSelect.length-1;i++){
      if(document.getElementById(champsSelect[i]).value == ""){
         alerte += "Le champ "+document.getElementById('selects').getElementsByTagName('label')[i].innerHTML+" n'est pas renseigné.\n"
      }
   }
   var temp = false;
   for(var i=0;i<=champsRadio.length-1;i++){
      for(var j=0;j<=document.getElementsByName(champsRadio[i]).length-1;j++){
         if(document.getElementsByName(champsRadio[i])[j].checked == true){
            temp = true;
         }
      }
      if(temp == false){
         alerte += "Le champ "+champsRadio[i]+" n'est pas renseigné.\n";
      }
      temp = false;
   }
   var temp2 = false;
   for(var i=0;i<=champsBox.length-1;i++){
      for(var j=0;j<=document.getElementsByName(champsBox[i]).length-1;j++){
         if(document.getElementsByName(champsBox[i])[j].checked == true){
            temp2 = true;
         }
      }
      if(temp2 == false){
         alerte += "Le champ "+champsBox[i]+" n'est pas renseigné.\n";
      }
      temp2 = false;
   }
 
   if(alerte){
      alert(alerte);
      return false;
   }
   else{
      return true;
   }
 
}

Et un formulaire quelconque :

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
<form id="monForm" name="monForm" action="mapage.html" onsubmit="return verif(['diametre','hauteur'],['requiredselect1','requiredselect2'],['civilite','fai'],['qualite','defaut'])">
   <fieldset id="inputs">
      <legend>Inputs</legend>
      <label for="diametre">Diamètre</label> : <input type="text" id="diametre" /></br />
      <label for="hauteur">Hauteur</label> : <input type="text" id="hauteur" /></br />
      <label for="largeur">Largeur</label> : <input type="text" id="largeur" />(facultatif)</br />
   </fieldset>
   <fieldset id="selects">
      <legend>Selects</legend>
      <label for="requiredselect1">Pays</label> :
      <select name="requiredselect1" id="requiredselect1">
         <option value="">--Choisissez--</option>
         <option value="FR">France</option>
         <option value="DE">Allemagne</option>
         <option value="IT">Italie</option>
      </select>
      <br />
      <label for="requiredselect2">Genre livre</label> :
      <select name="requiredselect2" id="requiredselect2">
         <option value="">--Choisissez--</option>
         <option value="SF">Science-Fiction</option>
         <option value="PO">Policier</option>
         <option value="FA">Fantastique</option>
      </select>
      <br />
      <label for="optionalselect">Type logement</label> :
      <select name="optionalselect" id="optionalselect">
         <option value="">--Choisissez--</option>
         <option value="STUD">Studio</option>
         <option value="T1">Une pièce</option>
         <option value="T2">Deux pièces</option>
      </select>
      (facultatif)
   </fieldset>
   <fieldset id="radiobuttons">
      <legend>Radiobuttons</legend>
      <div>Civilité :</div>
      <label for="mlle">Mlle</label> : <input type="radio" id="mlle" name="civilite" />
      <label for="mme">Mme</label> : <input type="radio" id="mme" name="civilite" />
      <label for="mr">Mr</label> : <input type="radio" id="mr" name="civilite" />
      <div>FAI :</div>
      <label for="orange">Orange</label> : <input type="radio" id="orange" name="fai" />
      <label for="free">Free</label> : <input type="radio" id="free" name="fai" />
      <label for="aol">AOL</label> : <input type="radio" id="aol" name="fai" />
      <label for="alice">Alice</label> : <input type="radio" id="alice" name="fai" />
      <label for="tiscali">Tiscali</label> : <input type="radio" id="tiscali" name="fai" />
      <div>Taille : (facultatif)</div>
      <label for="petit">Petit</label> : <input type="radio" id="petit" name="taille" />
      <label for="moyen">Moyen</label> : <input type="radio" id="moyen" name="taille" />
      <label for="grand">Grand</label> : <input type="radio" id="grand" name="taille" />
   </fieldset>
   <fieldset id="checkboxes">
      <legend>Checkboxes</legend>
      <div>Qualités :</div>
      <label for="beau">Beau</label> : <input type="checkbox" id="beau" name="qualite" />
      <label for="fort">Fort</label> : <input type="checkbox" id="fort" name="qualite" />
      <label for="intelligent">Intelligent</label> : <input type="checkbox" id="intelligent" name="qualite" />
      <label for="courtois">Courtois</label> : <input type="checkbox" id="courtois" name="qualite" />
      <label for="genereux">Généreux</label> : <input type="checkbox" id="genereux" name="qualite" />
      <div>Défauts :</div>
      <label for="egoiste">Egoïste</label> : <input type="checkbox" id="egoiste" name="defaut" />
      <label for="frimeur">Frimeur</label> : <input type="checkbox" id="frimeur" name="defaut" />
      <label for="impoli">Impoli</label> : <input type="checkbox" id="impoli" name="defaut" />
      <label for="malpropre">Malpropre</label> : <input type="checkbox" id="malpropre" name="defaut" />
      <label for="violent">Violent</label> : <input type="checkbox" id="violent" name="defaut" />
      <div>Départements visités : (facultatif)</div>
      <label for="moselle">Moselle</label> : <input type="checkbox" id="moselle" name="dept" />
      <label for="meuse">Meuse</label> : <input type="checkbox" id="meuse" name="dept" />
      <label for="vosges">Vosges</label> : <input type="checkbox" id="vosges" name="dept" />
   </fieldset>
   <fieldset>
      <legend>Validation du formulaire</legend>
      <input type="submit" value="Soumettre" />
   </fieldset>
</form>

**Bestiol** · 18/11/2006, 22h56

Ce topic est maintenant bloqué.

Merci de lire le post sur la nouvelle organisation du forum pour poster vos contributions

**javatwister** · 28/04/2006, 11h38

En réponse à SF, j'ai beaucoup plus rapide et beaucoup plus long

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
 
<script type="text/javascript">
 
var r, cadre, s, s2, op, format;
var nbr, decal, plus, zero;
 
window.onload=function(){
r=document.getElementsByName("h");
cadre=document.getElementById("sel");
s=document.createElement("select");
s2=document.createElement("select");
cadre.appendChild(s);
cadre.appendChild(s2);
r[0].checked=true;
for (var i=0;i!=r.length;i++){
  r[i].format=r[i].value;
  r[i].onclick=init
};
format=12;
init()
}
 
function init(){ 
nbr=-1;
decal=r[0].checked ?1:0;
plus= this.format==12 ? "am" : "";
while(s.lastChild){
  s.removeChild(s.lastChild)
}; 
 
for(var j=0;j!=25+decal;j++){
  nbr++
  op=document.createElement("option");
  if(nbr==13 && this.format==12){  
   nbr=0;
   plus="pm"
  };
  zero= nbr>=10 ? "" : "0";
  op.text=zero+nbr+plus;
  op.value=zero+nbr+plus;
  s.add(op,undefined)
};
 
s.onchange=function(){
  change(this)
};
while(s2.lastChild){
  s2.removeChild(s2.lastChild)
};
for(var k=0;k!=60;k++){
  zero = k>=10 ? "" : "0";
  op=document.createElement("option");
  op.text=zero+k;
  op.value=zero+k;
  s2.add(op,undefined)
};
}
 
function change(q){
nbr=-1;
decal=r[0].checked ?1:0; 
if(q.value=="12am" || q.value=="12pm" || q.value==24){
  while(s2.lastChild){
   s2.removeChild(s2.lastChild)
  };
 
  op=document.createElement("option");
  op.text="00";
  op.value="00";
  s2.add(op,undefined)
}
else{
  for(var k=0;k != 60;k++){
   zero = k>=10 ? "" : "0";
   op=document.createElement("option");
   op.text=zero+k;
   op.value=zero+k;
   s2.add(op,undefined)
  }
}
}
 
</script>
 
</head>
<body>
 
<p>
<input type="radio" value="12" name="h" id="h1" />
<label for="h1">12 heures</label>
<input type="radio" value="24" name="h" id="h2" />
<label for="h2">24 heures</label>
</p>
 
<p id="sel" style="float:left">
</p>
 
<p style="float:left">
<input type="button" value="valider" onclick="alert(s.value.substring(0,2)+'h'+s2.value+' '+s.value.substring(2))" />
</p>
 
</body>
</html>

**SpaceFrog** · 28/04/2006, 12h03

ouaip mais pas glop la double saisie imposée ...

ce qui explique la division par 24 du temps ...

**javatwister** · 28/04/2006, 12h19

double saisie?

t'es pas sérieux là?

t'as vu la différence de vitesse!

**FMaz** · 28/04/2006, 14h30

Voici mon script de drag and drop.
J'en avais 2 versions, une adapté à mes besoin (celle-ci) et l'autre avec quelques bug non-corrigés. Je vous poste donc la moins générique mais la plus stable, vous n'aurez qu'à emputer ce qui est innutile.

Le javascript:

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
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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
 
// Conception de Francois Mazerolle, 2006
// Vous pouvez utiliser et/ou modifier ce script dans un contexte non-lucratif seulement.
// Si vous désirez une authorisation d'usage commerciale, veuillez me contacter à l'adresse suivante: admin@maz-concept.com
//
// Conception by Francois Mazerolle, 2006
// You can use and/or modify this script for non-lucrative purposes only.
// If you need a commercial usage authorisation, please contact me at: admin@maz-concept.com 
 
//BUG(S) À CORRIGER:
// - Si un DG contiend un tag <img> le drag va mal démarré si le onMousedown est fait sur l'image.
 
//Note: DG = L'élément déplacable (dragable), DZ= Drop Zone, zone pour lacher un DG.
 
 
//Concernant tout le script
var isdrag=false; //Si un Drag est en cours.
var dragobj; //DG qui est en train d'être dragé
var dzallowed; //DZ authorisé par le DG
var startdz; //Concerver en mémoire la DZ de départ
 
//Concernant la fonction SlideTo
var sensX=0;
var sensY=0;
var moveSteps=-1; //Combien de déplacement il y aurra entre les 2 positions. Pas une config, elle doit commencer à -1
 
//Concernant les fonctions qui servent à détecter des positions et celles qui utilisent les positions
var posx = 0; // Position actuelle du curseur
var posy = 0;
var posxobj = 0; //Position du curseur sur l'objet (soustraite cette valeur à la position du curseur pour avoir les coordonnées de l'objet)
var posyobj = 0;
var posxini = 0; //Position d'origine du DG
var posyini = 0;
var elemposx= 0; //Position d'un élément
var elemposy= 0;
 
function position(e){ // Fonction qui détecte la position du curseur sur la page
 
    if (!e) var e = window.event;
    if (e.pageX || e.pageY){
        posx = e.pageX;
        posy = e.pageY;
    }else if (e.clientX || e.clientY){
        posx = e.clientX + document.body.scrollLeft;
        posy = e.clientY + document.body.scrollTop;
    }
 
    if(isdrag){
        SetCurrentDGPos(posx-posxobj,posy-posyobj);
    }
}
 
function ElementPosition(obj){ // Fonction qui détecte la position d'un élément sur la page
    //Définir la position de l'élément
    elemposx=0;
    elemposy=0;
 
    if (obj.offsetParent){
        while (obj.offsetParent)
        {
            elemposx += obj.offsetLeft
            elemposy += obj.offsetTop
            obj = obj.offsetParent;
        }
    }else if (obj.x){
        elemposx += obj.x;
        elemposy += obj.y;
    }    
}
 
function FindDiv(type,name,changeclass){ //Fonction qui retourne l'objet selon son type et son nom (id, param#2)
    //Trouver le DG
    var dgIds;
    var dgId;
    var statut=false;
    void(el=document.getElementsByTagName("div"));
    for(i=0;i<el.length;i++){
        dgIds=el[i].id.split("|");
        if(dgIds[0]==type){ //Si l'objet trouvé est du type de celui que l'ont recherche
 
            dgId=dgIds[1].split(",");
            for(e=0;e<dgId.length;e++){ //Lister tout les id associé à cet item
 
                //Si ll'objet est celui recherché
                if(name==dgId[e]){
                    if(changeclass!=""){ //Changer sa classe (besoin #1)
                        el[i].className=changeclass;
                        statut=true;
                    }else{ //Retourner l'objet (Besoin #2)
                        return el[i];
                    }
                }
            }
        }
    }
    return statut;
}
 
function FindCurrentDZ(mba) { //Fonction qui recherche si nous sommes au dessus d'une DZ et qui retourne l'objet DZ si oui.
    //mba = Must Be Authorized (true ou false)
    var IsAuthorised=false;
    var dzIds;
    var dzId;
    void(el=document.getElementsByTagName("div"));
    for(var i=0;i<el.length;i++){
        if(el[i].id.substring(0,2)=="dz"){
 
            if (mba){
                //Passer toutes les DZ authorisés en mémoire
                for (var e=0;e<dzallowed.length;e++){
                    dzIds=el[i].id.split("|");
 
                    //Si la DZ est authorisée
                    dzId=dzIds[1].split(",");
                    for(j=0;j<dzId.length;j++){ //Lister tout les id associé à cet item
                        if(dzallowed[e]==dzId[j]){
                            IsAuthorised=true;
                        }
                    }
                }
            }else{ IsAuthorised=true; }
 
            if (IsAuthorised){
                //Trouver la position réelle sur la page de l'élément
                ElementPosition(el[i]);
 
                //Déterminer si le curseur est dans la DZ
                if ((elemposx < posx)
                && ((elemposx+el[i].offsetWidth) > posx)
                && (elemposy < posy)
                && ((elemposy+el[i].offsetHeight) > posy)){
                    return el[i];
                }
            }
            IsAuthorised=false;
        }
    }
    return false; //Aucune DZ trouvée
}
 
 
 
function start_drag(e){ //Détecter les début de click pour lancer la début d'un drag
 
    //Vérifier qu'aucun drag est en cours actuellement
    if(isdrag){ return false; }
 
    //Trouver la position actuelle du curseur
    position(e);
 
    //Trouver tout les DG
    var dgId;
    void(el=document.getElementsByTagName("div"));
    for(var i=0;i<el.length;i++){
        dgId=el[i].id.split("|");
        if(dgId[0]=="dg"){
 
            //Déterminer si le curseur est dans le DG
            if (el[i].offsetLeft < posx
            && (el[i].offsetLeft+el[i].offsetWidth) > posx
            && el[i].offsetTop < posy
            && (el[i].offsetTop+el[i].offsetHeight) > posy){
 
                //Encadrer les DZ acceptées par ce DG
                dzallowed=dgId[2].split(",");
                var dzId;
                for (var e=0;e<dzallowed.length;e++){
                    if(dzallowed[e]!=""){
                        dzId=FindDiv("dz",dzallowed[e],"dropable_on");
                        if(!dzId)
                            alert (dzallowed[e]+" est indéfini.");
                    }
                }
 
                //Trouver la position innitiale du DG que nous dragons (s'il est dropé n'importe ou, il reviendra à sa position innitiale)
                posxini = el[i].offsetLeft;
                posyini = el[i].offsetTop;
 
                //Démarrer un Drag (afin d'empecher 2 drag simultanés)
                isdrag = true; 
 
                //Placer le DG au dessus de tout
                el[i].style.zIndex=9999;
 
                // Mettre en mémoire l'objet que nous sommes en train de drager
                dragobj = el[i];
 
                //Trouver si nous sommes actuellement dans un DZ
                startdz = FindCurrentDZ(false);
 
                //Trouver la position du curseur dans l'objet
                if(isdefined('dragobj')) {
                    posxobj=posx-dragobj.offsetLeft;
                    posyobj=posy-dragobj.offsetTop;
                }
 
                //Mettre un curseur de déplacement
                document.body.style.cursor="move";
 
                //Surveiller les mouvement de souri ainsi que le relachement du bouton de souris.
                if (document.attachEvent) { //IE
                    document.attachEvent ('onmousemove', position);
                    document.attachEvent ('onmouseup', stop_drag);
                }else{ //FF
                    document.addEventListener('mousemove', position, false);
                    document.addEventListener('mouseup', stop_drag, false);
                }
 
                //Quitter la fonction afin de ne pas démarrer 2 drag en même temps.
                return false;
 
            }
        }
    }
}
 
function stop_drag(e){ //Fonction qui arrête le Drag.
    var dzId;
    var dz;
 
    //Vérifier qu'un drag est en cours actuellement (Sinon on est supposé arrêter quoi ? Bug de IE qui detach pas assez rapidement l'objet)
    if(!isdrag){ return false; }
 
    if (document.attachEvent) { //IE
        detachEvent ('onmousemove', position);
    }else{
        document.removeEventListener('mousemove', position, false);
    }
 
 
    //Trouver si nous sommes actuellement sur une DZ
    dz = FindCurrentDZ(true);
    if(dz){ // Si une DZ authorisée est trouvée
        dzId=dz.id.split("|");
 
        //Trouver la position réelle sur la page de l'élément
        ElementPosition(dz);
 
        //Changer la position d'origine de l'élément à dragger pour la position de la DZ authorisée**
        posxini = elemposx+(dz.offsetWidth/2-dragobj.offsetWidth/2);
        posyini = elemposy+(dz.offsetHeight/2-dragobj.offsetHeight/2);
 
        //Un changement à été fait, vérifier si la DZ comporte une action et que la DZ n'est pas celle de départ.
        if (dzId.length>2 && startdz!=dz) {
            eval(dzId[2]); // Exécuter l'action de la DZ.
        }
    }
 
 
    //Passer toutes les DZ authorisés en mémoire
    for (var e=0;e<dzallowed.length;e++){
        dzId=FindDiv("dz",dzallowed[e],"dropable_off");
    }
 
    //Replacer l'item à son emplacement initial ou dans son DZ**^^ si c'est nécésaire
    slideTo(posxini,posyini,10);
 
    //Placer le DG à son élévation normale
    dragobj.style.zIndex=1;
 
    //Mettre un curseur normal
    document.body.style.cursor="default";
}
 
 
//Fonctions de déplacement
function slideTo(tx, ty, interval) { //Fonction qui "Glisse" un objet vers une position
 
    if(moveSteps==-1){
        moveSteps=20; //Nombre de déplacement à effectuer (Plus le nombre est grand plus le déplacement est lent)
    }
 
    // Calculer le "pas" de chaque déplacement
    sensX=Math.round((dragobj.offsetLeft-tx)/moveSteps)
    sensY=Math.round((dragobj.offsetTop-ty)/moveSteps)
 
    if(moveSteps>0){
        dragobj.style.left=dragobj.offsetLeft-sensX+"px";
        dragobj.style.top=dragobj.offsetTop-sensY+"px";
    }
    moveSteps-=1;
 
    //Si le déplacement est terminé, placer précisément l'objet et stoper le timer, sinon, continuer le déplacement
    if(moveSteps==0){
        if(isdefined('timerID')) {
            clearTimeout(timerID);
        }
        SetCurrentDGPos(posxini,posyini);
        moveSteps=-1;
 
        // Le drag est terminé (Note, si jamais le drag ne se terminait jamais, il sera impossible de commencer un autre drag)
        isdrag = false; 
    }else{
        timerID = setTimeout("slideTo("+tx+", "+ty+", "+interval+")", interval);
    }
}
 
function SetDGintoDZ(dg,dz,smooth){ //Fonction qui place le DG dans un DZ simplement en passant leurs noms.
 
 
    dragobj=FindDiv("dg",dg,"");
 
    //Si le DG est introuvable, innutile de chercher le DZ
    if(!isdefined('dragobj')) { return false; }
 
 
    //Trouver la position du DZ
    dropobj=FindDiv("dz",dz,"");
    ElementPosition(dropobj);
    posxini = elemposx+(dropobj.offsetWidth/2-dragobj.offsetWidth/2);
    posyini = elemposy+(dropobj.offsetHeight/2-dragobj.offsetHeight/2);
 
 
    //Effectuer le placement
    if(smooth){
        slideTo(posxini,posyini,5)
    }else{
        SetCurrentDGPos(posxini,posyini);
    }
}
 
function SetCurrentDGPos(x,y){ // Fonction qui place le DG actuel (dragobj) à une position précise.
    dragobj.style.left = x+"px";
    dragobj.style.top  = y+"px";
    return false;
}
 
 
 
 
 
 
//Mini-fonction d'une ligne
function IfDrag_retFalse(e){ if(isdrag) return false; } //Retourne false si un drag est en cours
function isdefined(variable){ return (typeof(window[variable]) == "undefined")?  false: true; } //Fonction qui détermine si une variable est définie
 
 
 
 
//Surveiller les évènements qui lance le drag
if (document.attachEvent) { //IE
    document.attachEvent ('onmousedown', start_drag);
}else{
    document.addEventListener("mousedown",start_drag,true);
 
}
//Afin d'éviter que le drag sélectionne du texte en arrière plan lors de déplacements
document.onselectstart=IfDrag_retFalse;
document.onmousedown=IfDrag_retFalse;
 
 
// ### FIN DU SCRIPT

Exemple d'utilisation:

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
 
 <!-- DZ: Les Drop Zones -->
  <!-- id="dz|<id>|<action lorsque dropé>"-->
 <div id="dz|zone_a|test('hell');" style="background-color:gray;width:100px;height:100px;border:3px solid black;">
  Drop-Zone 02
 </div>
  <div id="dz|zone_b" style="background-color:gray;width:100px;height:100px;border:3px solid black;">
 Drop-Zone 02
 </div>
  <div id="dz|zone_c" style="background-color:gray;width:100px;height:100px;border:3px solid black;">
 Drop-Zone 03
 </div>
 
 
 <!-- DG: Les éléments DraGables -->
 <!-- id="dg|<id>|<DZ autorisés>"-->
<div id="dg|item812|zone_a,zone_c" class="dragable" style="position:absolute;background-color:red;width:90px;height:90px;">
	Drag me !
	<table align="center" style="border:1px solid black;">
		<tr><td>Tableau</td></tr>
		<tr><td align="center"><div style="background-image:url('img.gif');width:30px;height:30px;"></div></td></tr>
	</table>
</div>

Voilà, si vous utilisez cette source, laissez-moi un petit mot

**Auteur** · 02/05/2006, 19h34

juste deux petites questions (Javatwister et Spacefrog) sur le script des formats d'heures :

Code :

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

1
2
3
4
5
 
op=document.createElement("option");
  op.text="00";
  op.value="00";
  s2.add(op,undefined)

1- Est-ce que la méthode createElement() est nécessaire dans la mesure où la méthode add est appelée ? En d'autres termes est-ce que add (qui ajoute l'option au select) ne créé pas en même temps l'élément dans la page ?

2-peut-on remplacer ce code (et supprimer createElement()) par :

Code :

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

1
2
3
4
5
 
op=new Option();
  op.text="00";
  op.value="00";
  s2.add(op,undefined)

**FremyCompany** · 12/05/2006, 20h36

Un Xml qui soit le même pour tous les navigateurs

Utilser l'objet IXmlDom. Référez vous à la documentation et au code de l'objet.

Il est opérationel pour IE, FF, NS, Gecko-Based Browser et Opera.
Il souffre cepandant de quelques lenteurs inexpliquées sur les Gecko-Based Browser (FF et NS compris)

Serialiser en JS :

Voci le code qui permet de transformer un objet (tout type d'objet JS) en document Xml. Ce code ne fonctionne pas à 100% sur Opéra pour des raisons inexpliquées...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var obj = new Object();
obj.nbr1 = 1;
obj.nbr2 = 2.0;
obj.str1 = "str";
obj.boo1 = false;
obj.boo2 = true;
obj.reg1 = /g/gi;
obj.fnc1 = function () {};
obj.dat1 = new Date();
obj.arr1 = {obj1 : null, obj2 : undefined};
obj.arr2 = [0,1,2,3];
var XML = CXml(obj, "obj");

Session en JS :

Ne vous a-t-on jamais dit que cela n'existe pas et que cela n'existera jamais ??? Et bien celui qui vous a dit ca s'est trompé !

Voci un petit code pour le prouver !
Ce code ne fonctionne pas à 100% sur Opéra pour des raisons inexpliquées...

Sur votre page n°1

Code :

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

1
2
3
4
5
 
<body onunload="JSSession.Save()">
...
// Dans un script...
JSSession.Objet = 1;

Sur votre page n°2, dans un script :

Code :

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

alert(JSSession.Objet);

Cela vous donnera 1 comme réponse ! C'est évidement valable pour tous les objets de type JS.

On sait faire d'autres choses encore, mais je vous laisser lire le code par vous-même...

**siddh** · 13/05/2006, 10h20

apres y a aussi des truc comme JSON

**FremyCompany** · 13/05/2006, 13h51

Envoyé par siddh

apres y a aussi des truc comme JSON

En effet, j'avais déjà entendu parler de JSON ou JASON... Mais qu'est-ce donc au juste ? A quoi ca sert ?

**siddh** · 13/05/2006, 14h48

http://www.json.org/jsonfr.html

**FremyCompany** · 13/05/2006, 16h07

JSON est intéressant, c'est vrai.
M'enfin, maintenant que j'ai fait mon propre truc, je compte bien l'utiliser

EDIT : M'enfin, que vois-je ? JSON utilise eval ??? Beurk, quelle horreur. Et pour les variables de fonctions ???
Vive IJSA !

**Celelibi** · 04/06/2006, 21h35

Envoyé par FremyCompany

Serialiser en JS :

Voci le code qui permet de transformer un objet (tout type d'objet JS) en document Xml. Ce code ne fonctionne pas à 100% sur Opéra pour des raisons inexpliquées...

Dans le genre serialiser pas cher y'a la méthode universelle toSource() et sa réinterprétation se fait par un eval (je sais c'est moche).

Session en JS :

Ne vous a-t-on jamais dit que cela n'existe pas et que cela n'existera jamais ??? Et bien celui qui vous a dit ca s'est trompé !

Voci un petit code pour le prouver !

Si le principe des sessions se résume à stoquer des variables dans le cookie, alors en effet les sessions JavaScript existent... et ce puis aussi longtemps que le Javascript permet l'accès aux cookies (c'est à dire depuis toujours).

**FremyCompany** · 05/06/2006, 11h17

toSource ???
Ah ca me dégoute !
Je connaissais pas...
Je vais me renseigner...

Ben en effet, il s'agit de stocker des variables dans un cookie virtuel (détruit à la fermeture du navigateur et, normalement, jamais écrit sur le disque dur) ou non (si une instruction contraire est fournie dans le script). Mais bon, ne connaissant pas toSource, je me suis amusé à inventer une serialisation XML qui écrivait le contenu XML vers le cookie.

D'un autre coté, ce n'est qu'une application de mon projet, puisque le gros du code n'est qu'un objet XML Cross-Browser...

Apparement je n'étais pas le seul à ne pas connaitre toSource, car le projet SARISSA, qui fournit lui aussi des fonctions XML Cross-Browser, a sa propre XMLisation... Je la trouvais un peu obselète (String et Array uniquement) mais ca prouve bien que cette fonction est peu connue..
.
Je vais réviser mon code (encore une fois) et j'écrirais sans doute un tuto durant les vacances scolaires (je suis étudiant en 3e)....

**FremyCompany** · 10/06/2006, 19h43

Envoyé par Celelibi

Dans le genre serialiser pas cher y'a la méthode universelle toSource() et sa réinterprétation se fait par un eval (je sais c'est moche).

Lol, dans le genre universel j'ai vu mieux

Ca ne marche pas sur IE

**FremyCompany** · 23/06/2006, 15h20

Code IJSA Révisé.
Plus simple.
Pas de XML.
Si vous voulez le code, je le transmettrai.

J'en profite en passant pour ajouter un nouveau projet : JSWindows.
Vous me direz que ca existait déjà mais bon...
C'est ma foi assez bien fait, je vous conseille de regarder. Ca pourrait vous donner des idées. Ce n'est bien sur qu'une base. Si vous souhaiter ajouter des fonctions, modifier les images, ... faites comme bon vous semble !
Pensez juste à me prévenir, que j'améliore le code de base

**FremyCompany** · 24/06/2006, 13h57

Comment réaliser un semblant de Wizard (Step by Step) en JS sans utiliser de retour vers le serveur et en envoyant toutes les données en une seule fois ?

A rendre plus joli

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Page Dynamique</title>
</head>
<body>
 
<div id="divContent">
    Vous allez commencer les étapes...<br />
</div>
<input id="Button1" type="button" value="Avant" onclick="return Button1_onclick()" />
<input id="Button2" type="button" value="Apres" onclick="return Button2_onclick()" />
<br />
<script language="javascript" type="text/javascript">
// <!CDATA[
 
var current=0;
var navigable=false
var div0=document.getElementById("divContent")
var btt1=document.getElementById("Button1");
var btt2=document.getElementById("Button2");
btt1.disabled=true
 
function Button1_onclick() {
    current-=1
    div0.innerHTML=document.getElementById("divContent" + current).innerHTML
    if (current==1) {btt1.disabled=true}
    else {btt1.disabled=false}
    if (!navigable) {btt1.disabled=true}
    if (!document.getElementById("divContent" + (current+1))) {btt2.value="Envoyer !"; btt2.onclick=function() {document.forms['frm'].submit}}
    else {btt2.value="Après"; btt2.onclick=Button2_onclick}
}
 
function Button2_onclick() {
    if (current != 0) {
        document.getElementById("divContent" + current).innerHTML=div0.innerHTML
        var ok=true
        var allInput = document.getElementById("divContent" + current).getElementsByTagName("input")
        for (var i=0;i<allInput.length;i++)
        {
		    var cok = btt2_validate(allInput[i])
            ok = (ok && cok)
        }
        if (ok) {
           current+=1
        }
        else {
            alert('Vos champs ne sont pas complètés de manière correcte !');
        }
    } else {current+=1;}
    div0.innerHTML=document.getElementById("divContent" + current).innerHTML
    if (current==1) {btt1.disabled=true}
    else {btt1.disabled=false}
    if (!navigable) {btt1.disabled=true}
    if (!document.getElementById("divContent" + (current+1))) 
    {
        btt2.value="Envoyer !"; btt2.onclick=function() {
            if (current != 0) {
                document.getElementById("divContent" + current).innerHTML=div0.innerHTML
            };
            var ok=true
            var allInput = document.getElementById("divContent" + current).getElementsByTagName("input")
            for (var i=0;i<allInput.length;i++)
            {
	            var cok = btt2_validate(allInput[i])
                ok = (ok && cok)
            }
            if (ok) {
                document.forms['frm'].submit()            
            }
            else {
                alert('Vos champs ne sont pas complèter de manière correcte !');
            }
        }
    }
    else {btt2.value="Après"; btt2.onclick=Button2_onclick}
}
 
function btt2_validate(input) {
    var ok = (input.value!="")
    if (input.name=="age") {
        ok = (parseInt(input.value)==input.value)
    }
    return ok
}
 
// ]]>
</script>
 
<blockquote style="display: none; visibility: hidden;">
<form id="frm" action="index.html" submitdisabledcontrols="true" method="get">
<div id="divContent1">Step1 : <br />
Enter your name : <input type="text" name="name" />
</div>
<div id="divContent2">Step1 : <br />
Enter your age : <input type="text" name="age" /></div>
</form>
</blockquote>
</body>
</html>

**FremyCompany** · 21/05/2006, 16h12

1. Utiliser IE + Windows Script Editor OU Visual Web Designer 2005 Express
2. Utiliser ce petit code (IE, FF, NS, ...) :

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
/* Methode 1 : Analyser un objet en profondeur... Parfois lent ... Peu pratique mais parfois très utile */
function debug(obj, name, prof) {
    var msg = name + obj;
 prof = (prof == null) ? true : prof;
 if (prof && (typeof (obj) == "array" || typeof (obj) == "object")){
    try {
        for (key in obj)
        {
            msg = msg + debug(obj[key], name + "[" + key + "]", false);
        }
    } catch (ex) {}}
    return msg;
}
 
/* Méthode 2 : Evaluation de scripts. Très maniable et très pratique */
// Penser à "0; var xyz = obj.xyz(); x.init()" pour exécuter une fonction et 
// en conserver la valeur en mémoire puis y ajouter autant de chose que voulu...
if (confirm("Lancer le débogage ?")) {
 var _V_DEBUG = null;
 var evalstr = "'Débogage Activé !'";
 while ((evalstr != "|END|") && (evalstr == "" ? (!confirm("Terminer le débogage ?")) : true)) 
 {
  try
  {
   eval("_V_DEBUG=" + evalstr);
  }
  catch (ex)
  {
   _V_DEBUG = "Impossible d'évaluer l'expression (" + evalstr + ") : " + ex.description;
  }
  var pnum = 0;
  try {for (key in _V_DEBUG) {pnum++}} catch(ex) {pnum = "Erreur : " + ex.description + " : -1"}
  alert("EVAL : " + _V_DEBUG + "\n\n" + pnum + " sous objet(s)")
  evalstr = prompt("Valeur à analyser : (|END| pour stopper)",evalstr)
 }
}

Il peut sans aucun doute être amélioré mais voila un bon début...