[JavaScript] [SRC] Calendrier non intrusif

le_chomeur · 15/11/2007, 22h24

Salut à tous, suite à une réponse sur le forum javascript et ayant souvent vu ce genre de demande, je me permets de poster une source , d'un calendrier :

le principe , est de ne pas ajouter plus de code qu'il n'y en a déja dans la page html , tout en pouvant gèrer X champs date, le principe , mettre un listener sur la page , qui récupère le click sur les éléments , si le champ est de type text et qu'il a la class css définit a "calendrier" on affiche un calendrier qui permet de saisir une date.

particularité : complètement en css + javascript , aucune autre balise a ajouter

le code : d'une page complète :

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
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript">
// librairie calendrier
 
/* Inclure ce script dans l'entete */
 
/* ##################### CONFIGURATION ##################### */
 
/* ##- INITIALISATION DES VARIABLES -##*/
var calendrierSortie = '';
//Date actuelle
var today = '';
//Mois actuel
var current_month = '';
//Année actuelle
var current_year = '' ;
//Jours actuel
var current_day = '';
//Nombres de jours depuis le début de la semaine
var current_day_since_start_week = '';
//On initialise le nom des mois et le nom des jours en VF :)
var month_name = new Array('Janvier', 'Fevrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Decembre');
var day_name = new Array('L','M','M','J','V','S','D');
//permet de récupèrer l'input sur lequel on a clické et de le remplir avec la date formatée
var myObjectClick = null;
//Classe qui sera détecté pour afficher le calendrier
var classMove = "calendrier";
//Variable permettant de savoir si on doit garder en mémoire le champs input clické
var lastInput = null;
//Div du calendrier
var div_calendar = "";
 
 
 
//########################## FIN DES FONCTION LISTENER ########################## //
/*Ajout du listener pour détecter le click sur l'élément et afficher le calendrier
uniquement sur les textbox de class css date */
 
//Fonction permettant d'initialiser les listeners
function init_evenement(){
    //On commence par affecter une fonction à chaque évènement de la souris
    if(window.attachEvent){
        document.onmousedown = start;
        document.onmouseup = drop;
    }
    else{
        document.addEventListener("mousedown",start, false);
        document.addEventListener("mouseup",drop, false);
    }
}
//Fonction permettant de récupèrer l'objet sur lequel on a clické, et l'on récupère sa classe
function start(e){
    //On initialise l'évènement s'il n'a aps été créé ( sous ie )
    if(!e){
        e = window.event;
    }
    //Détection de l'élément sur lequel on a clické
    var monElement = null;
    monElement = (e.target)? e.target:e.srcElement;
    if(monElement != null && monElement)
    {
        //On appel la fonction permettant de récupèrer la classe de l'objet et assigner les variables
        getClassDrag(monElement);
 
        if(myObjectClick){
            initialiserCalendrier(monElement);
            lastInput = myObjectClick;
        }
    }
}
function drop(){
         myObjectClick = null;
}
 
function getClassDrag(myObject){
    with(myObject){
        var x = className;
        listeClass = x.split(" ");
        //On parcours le tableau pour voir si l'objet est de type calendrier
        for(var i = 0 ; i < listeClass.length ; i++){
            if(listeClass[i] == classMove){
                myObjectClick = myObject;
                break;
            }
        }
    }
}
window.onload = init_evenement;
 
//########################## Pour combler un bug d'ie 6 on masque les select ########################## //
function masquerSelect(){
        var ua = navigator.userAgent.toLowerCase();
        var versionNav = parseFloat( ua.substring( ua.indexOf('msie ') + 5 ) );
        var isIE        = ( (ua.indexOf('msie') != -1) && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1) );
 
        if(isIE && (versionNav < 7)){
             svn=document.getElementsByTagName("SELECT");
             for (a=0;a<svn.length;a++){
                svn[a].style.visibility="hidden";
             }
        }
}
 
function montrerSelect(){
       var ua = navigator.userAgent.toLowerCase();
        var versionNav = parseFloat( ua.substring( ua.indexOf('msie ') + 5 ) );
        var isIE        = ( (ua.indexOf('msie') != -1) && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1) );
        if(isIE && versionNav < 7){
             svn=document.getElementsByTagName("SELECT");
             for (a=0;a<svn.length;a++){
                svn[a].style.visibility="visible";
             }
         }
}
 
//########################## FIN DES FONCTION LISTENER ########################## //
 
// ## PARAMETRE D'AFFICHAGE du CALENDRIER ## //
//si enLigne est a true , le calendrier s'affiche sur une seule ligne,
//sinon il prend la taille spécifié par défaut;
 
var enLigne = false ;
var largeur = "175";
var formatage = "/";
 
/* ##################### FIN DE LA CONFIGURATION ##################### */
 
//Fonction permettant de passer a l'annee précédente
function annee_precedente(){
 
    //On récupère l'annee actuelle puis on vérifit que l'on est pas en l'an 1 :-)
    if(current_year == 1){
        current_year = current_year;
    }
    else{
        current_year = current_year - 1 ;
    }
    //et on appel la fonction de génération de calendrier
    calendrier(    current_year , current_month, current_day);
}
 
//Fonction permettant de passer à l'annee suivante
function annee_suivante(){
    //Pas de limite pour l'ajout d'année
    current_year = current_year +1 ;
    //et on appel la fonction de génération de calendrier
    calendrier(    current_year , current_month, current_day);
}
 
 
 
 
//Fonction permettant de passer au mois précédent
function mois_precedent(){
 
    //On récupère le mois actuel puis on vérifit que l'on est pas en janvier sinon on enlève une année
    if(current_month == 0){
        current_month = 11;
        current_year = current_year - 1;
    }
    else{
        current_month = current_month - 1 ;
    }
    //et on appel la fonction de génération de calendrier
    calendrier(    current_year , current_month, current_day);
}
 
//Fonction permettant de passer au mois suivant
function mois_suivant(){
    //On récupère le mois actuel puis on vérifit que l'on est pas en janvier sinon on ajoute une année
    if(current_month == 12){
        current_month = 1;
        current_year = current_year  + 1;
    }
    else{
        current_month = current_month + 1;
    }
    //et on appel la fonction de génération de calendrier
    calendrier(    current_year , current_month, current_day);
}
 
//Fonction principale qui génère le calendrier
//Elle prend en paramètre, l'année , le mois , et le jour
//Si l'année et le mois ne sont pas renseignés , la date courante est affecté par défaut
function calendrier(year, month, day ){
 
    //Aujourd'hui si month et year ne sont pas renseignés
    if(month == null || year == null){
        today = new Date();
    }
    else{
        //month = month - 1;
        //Création d'une date en fonction de celle passée en paramètre
        today = new Date(year, month , day);
    }
 
    //Mois actuel
    current_month = today.getMonth()
 
    //Année actuelle
    current_year = today.getFullYear();
 
    //Jours actuel
    current_day = today.getDate();
 
    // On récupère le premier jour de la semaine du mois
    var dateTemp = new Date(current_year, current_month,1);
 
    //test pour vérifier quel jour était le prmier du mois
    current_day_since_start_week = (( dateTemp.getDay()== 0 ) ? 6 : dateTemp.getDay() - 1);
 
    //variable permettant de vérifier si l'on est déja rentré dans la condition pour éviter une boucle infinit
    var verifJour = false;
 
    //On initialise le nombre de jour par mois
    var nbJoursfevrier = (current_year % 4) == 0 ? 29 : 28;
    //Initialisation du tableau indiquant le nombre de jours par mois
    var day_number = new Array(31,nbJoursfevrier,31,30,31,30,31,31,30,31,30,31);
 
    //On initialise la ligne qui comportera tous les noms des jours depuis le début du mois
    var list_day = '';
    var day_calendar = '';
 
    var x = 0
 
    //Ligne permettant de changer l'année et de mois
    var month_bef = "<a href=\"javascript:mois_precedent()\" style=\"margin-left:3px;\" > < </a>";
    var month_next = "<a href=\"javascript:mois_suivant()\" style=\"margin-right:3px;\"> > </a>";
    var year_next = "<a href=\"javascript:annee_suivante()\" style=\"float:right;margin-right:3px;\" >&nbsp;&nbsp; > > </a>";
    var year_bef = "<a href=\"javascript:annee_precedente()\" style=\"float:left;margin-left:3px;\"  > < < &nbsp;&nbsp;</a>";
    calendrierSortie = "<p class=\"titleMonth\"> <a href=\"javascript:alimenterChamps('')\" style=\"float:left;margin-left:3px;color:#cccccc;font-size:10px;\"> Effacer la date </a><a href=\"javascript:masquerCalendrier()\" style=\"float:right;margin-right:3px;color:red;font-weight:bold;font-size:12px;\">X</a>&nbsp;</p>";
    //On affiche le mois et l'année en titre
    calendrierSortie += "<p class=\"titleMonth\" style=\"float:left;\">" + year_next + year_bef+  month_bef +  month_name[current_month]+ " "+ current_year + month_next+"</p>";
    //On remplit le calendrier avec le nombre de jour, en remplissant les premiers jours par des champs vides
    for(var nbjours = 0 ; nbjours < (day_number[current_month] + current_day_since_start_week) ; nbjours++){
 
        // On boucle tous les 7 jours pour créer la ligne qui comportera le nom des jours en fonction des<br />
        // paramètres d'affichage
        if(enLigne == true){
            // Si le premier jours de la semaine n'est pas un lundi alors on commence ce jours ci
            if(current_day_since_start_week != 1 && verifJour == false){
                i  = current_day_since_start_week - 1 ;
                if(x == 6){
                    list_day += "<span>" + day_name[x] + "</span>";
 
                }
                else{
                    list_day += "<span>" + day_name[x] + "</span>";
                }
                verifJour = true;
            }
            else{
                if(x == 6){
                    list_day += "<span>" + day_name[x] + "</span>";
 
                }
                else{
                    list_day += "<span>" + day_name[x] + "</span>";
                }
            }
            x = (x == 6) ? 0: x    + 1;
        }
        else if( enLigne == false && verifJour == false){
            for(x = 0 ; x < 7 ; x++){
                if(x == 6){
                    list_day += "<span>" + day_name[x] + "</span>";
 
                }
                else{
                    list_day += "<span>" + day_name[x] + "</span>";
                }
            }
            verifJour = true;
        }
        //et enfin on ajoute les dates au calendrier
        //Pour gèrer les jours "vide" et éviter de faire une boucle on vérifit que le nombre de jours corespond bien au
        //nombre de jour du mois
        if(nbjours < day_number[current_month]){
            if(current_day == (nbjours+1)){
                day_calendar += "<span onclick=\"alimenterChamps(this.innerHTML)\" class=\"currentDay\">" + (nbjours+1) + "</span>";
            }
            else{
                day_calendar += "<span onclick=\"alimenterChamps(this.innerHTML)\">" + (nbjours+1) + "</span>";
            }
        }
    }
 
    //On ajoute les jours "vide" du début du mois
    for(i  = 0 ; i < current_day_since_start_week ; i ++){
        day_calendar = "<span>&nbsp;</span>" + day_calendar;
    }
    //Si aucun calendrier n'a encore été crée :
    if(!document.getElementById("calendrier")){
        //On crée une div dynamiquement, en absolute, positionné sous le champs input
        var div_calendar = document.createElement("div");
 
        //On lui attribut un id
        div_calendar.setAttribute("id","calendrier");
 
        //On définit les propriétés de cette div ( id et classe ) 
        div_calendar.className = "calendar";
 
        //Pour ajouter la div dans le document
        var mybody = document.getElementsByTagName("body")[0];
 
        //Pour finir on ajoute la div dans le document
        mybody.appendChild(div_calendar);
    }
    else{
            div_calendar = document.getElementById("calendrier");
    }
 
    //On insèrer dans la div, le contenu du calendrier généré
    //On assigne la taille du calendrier de façon dynamique ( on ajoute 10 px pour combler un bug sous ie )
    var width_calendar = ( enLigne == false ) ?  largeur+"px" : ((nbjours * 20) + ( nbjours * 4 ))+10+"px" ;
 
    calendrierSortie = calendrierSortie + list_day  + day_calendar + "<div class=\"separator\"></div>";
    div_calendar.innerHTML = calendrierSortie;
    div_calendar.style.width = width_calendar;
}
 
//Fonction permettant de trouver la position de l'élément ( input ) pour pouvoir positioner le calendrier
function ds_getleft(el) {
    var tmp = el.offsetLeft;
    el = el.offsetParent
    while(el) {
        tmp += el.offsetLeft;
        el = el.offsetParent;
    }
    return tmp;
}
 
function ds_gettop(el) {
    var tmp = el.offsetTop;
    el = el.offsetParent
    while(el) {
        tmp += el.offsetTop;
        el = el.offsetParent;
    }
    return tmp;
}
 
//fonction permettant de positioner le calendrier
function positionCalendar(objetParent){
    //document.getElementById('calendrier').style.left = ds_getleft(objetParent) + "px";
    document.getElementById('calendrier').style.left = ds_getleft(objetParent) + "px";
    //document.getElementById('calendrier').style.top = ds_gettop(objetParent) + 20 + "px" ;
    document.getElementById('calendrier').style.top = ds_gettop(objetParent) + 20 + "px" ;
    // et on le rend visible
    document.getElementById('calendrier').style.visibility = "visible";
}
 
function initialiserCalendrier(objetClick){
        //on affecte la variable définissant sur quel input on a clické
        myObjectClick = objetClick;
 
        if(myObjectClick.disabled != true){
            //On vérifit que le champs n'est pas déja remplit, sinon on va se positionner sur la date du champs
            if(myObjectClick.value != ''){
                //On utilise la chaine de formatage
                var reg=new RegExp("/", "g");
                var dateDuChamps = myObjectClick.value;
                var tableau=dateDuChamps.split(reg);
                calendrier(    tableau[2] , tableau[1] - 1 , tableau[0]);
            }
            else{
                //on créer le calendrier
                calendrier(objetClick);
 
            }
            //puis on le positionne par rapport a l'objet sur lequel on a clické
            //positionCalendar(objetClick);
            positionCalendar(objetClick);
            masquerSelect();
        }
 
}
 
//Fonction permettant d'alimenter le champs
function alimenterChamps(daySelect){
        if(daySelect != ''){
            lastInput.value= formatInfZero(daySelect) + formatage + formatInfZero((current_month+1)) + formatage +current_year;
        }
        else{
            lastInput.value = '';
        }
        masquerCalendrier();
}
function masquerCalendrier(){
        document.getElementById('calendrier').style.visibility = "hidden";
        montrerSelect();
}
 
function formatInfZero(numberFormat){
        if(parseInt(numberFormat) < 10){
                numberFormat = "0"+numberFormat;
        }
 
        return numberFormat;
}
 
</script>
 
<style type="text/css">
/* CSS Document */
.calendar{
    background-color:#f7f6f3;
    position:absolute;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    border:1px solid #0099cc;
 
}
.calendar a{
    text-decoration:none;
    color:#ffffff;
    font-weight:bold;
}
.calendar span{
    float:left;
    display:block;
    width:25px;
    cursor:pointer;
    text-align:center;
}
.titleMonth{
    width:100%;
    background-color:#08a1d4;
    color:#FFFFFF;
    text-align:center;
    border-bottom:1px solid #666;
    margin:none;
    padding:none;
    padding-bottom:2px;
    margin-top:0px;
    margin-bottom:0px;
    font-weight:bold;
}
.separator{
    float:left;
    display:block;
    width:25px;
}
.currentDay{
    font-weight:bold;
}
 
</style>
</head>
 
<body>
 
<div id="toto"></div>
<input type="text" name="toto" class="calendrier" />
</body>
</html>

cordialement

DuyBinh · 25/01/2008, 12h14

Merci pour ta source et pour ton aide dans mon topic.

Bonne continuation.

Jumano · 27/01/2008, 11h19

Bonjour,
Ce calendrier est vraiment bien, seul petit hic, tout les champs de type "select" disparaissent à l'apparition du calendrier.
Ce n'est évidemment pas un problème récurrant puisque l'ensemble des champs réapparaissent au choix de la date.
D'un point de vue esthétique n'y a - t - il pas moyen de modifier cela ?

SpaceFrog · 27/01/2008, 16h06

Le souci est que le selects ne peuvent pas passer sous un div quelque soit leur z-index ...
Je pense qu'il doit donc s'agir d'une précaution de les rendre tous invisibles au moment de l'apparitoin du calendrier

FremyCompany · 27/01/2008, 16h59

Mettre un select ou une iframe dans la div du calendrier en opacity 0, ca ne suffirait pas ?

J'ai jamais essayé mais ca vaut la peine de tenter le coups

bigboomshakala · 27/01/2008, 17h46

voir FAQ

le_chomeur · 27/01/2008, 18h14

Salut à tous

Effectivement il s'agit d'un choix de ma part, de masquer toute les balises select au moment de l'affichage du calendrier, pour éviter les bugs bien connu sur ces derniers...
j'aurais également pu ajouter une iframe etc, mais par rapport a tous ce qui a été dit sur les iframes , j'ai fais ce choix

Libre à vous d'adapter mon code ^^

FremyCompany · 28/01/2008, 18h23

Citation:

Envoyé par le_chomeur

mais par rapport a tous ce qui a été dit sur les iframes , j'ai fais ce choix

Que dit-on sur le IFRAME ?

Je vois absolument pas pour quelle raison on devrait critiquer les IFRAME's... Si c'est pour la navigation dans un site, ok c'est mal (et encore, moi je suis partisant de l'IFRAME pour navigation pour les sites fait entièrement en HTML/JS car c'est simple à mettre en oeuvre)... Mais pour corriger un bug CSS...

bigboomshakala · 28/01/2008, 19h14

Citation:

Envoyé par FremyCompany

pour la navigation dans un site, ok c'est mal

tu confonds avec les frameset

FremyCompany · 28/01/2008, 19h29

Pas du tout.

On peut faire la même chose que les framesets mais avec des IFRAME'S.

Ca a l'avantage que l'IFRAME est dans la page maitre, avec le menu, ... C'est donc plus facilement manipulable (enfin je trouve, c'est une question de gout bien sûr).

bigboomshakala · 28/01/2008, 19h51

ce que je dis c'est que quand tu dis que les iframes "c'est mal", tu confonds avec les "frameset"...

frameset = mal
iframe = bien (quand on les utilise au bon moment)

SpaceFrog · 28/01/2008, 20h58

iframe = bien c'est vite dit quand tu veux faire du strict ...

FremyCompany · 28/01/2008, 21h36

Citation:

Envoyé par SpaceFrog

iframe = bien c'est vite dit quand tu veux faire du strict ...

Oh ben tu sais, ca fait longtemps que les standards, je les ignores...

Je base ma compatibilité sur l'essai (IE6/4,FireFox2,Opera9,Safari3). C'est beaucoup plus rentable. Et ca marche bcp mieux.

SpaceFrog · 29/01/2008, 09h04

C'est vrai que le w3c c'est purement spéculatif dans le sens ou il faut espèrer que les browsers évoluent vers les standards et pas vers le propriétaire.
Mais toutes les évolutions ne sont elles pas nées de choses propriétaires au départ?

dingoth · 29/01/2008, 14h55

Non

Le HTML, d'ailleurs ^^ Il est né comme standard, tout le monde l'a adopté. Certains l'ont même adapté, d'où les problèmes que l'on connaît tous maintenant.

J'ai une autre conception que FremyCompany, moi : je fais tout en standard, et à fortiori en xhtml 1.0 strict de mon plein gré. Je galère de temps à autres, mais les frameworks existants me facilitent la tâche, et je m'accommode des comportements des navigateurs. Car, le fait qu'un select passe par dessus un div, c'est écrit noir sur blanc dans le standard HTML. Adaptez votre design en fonction, ça vous fera bien moins de cheveux blancs

Regardez les évolutions du HTML5 (encore au stade de brouillon, mais rares seront les changements à partir de maintenant), et vous verrez que vous ne serez pas déçu.

@spacefrog : rien ne t'empêche de faire du transitionnel. C'est également un standard propre. Je ne vois rien qui te force à faire du strict (à part un patron, mais bon...). La différence est tellement maigre et n'est là que pour les puristes comme moi

Citation:

Envoyé par FremyCompany

Je base ma compatibilité sur l'essai (IE6/4,FireFox2,Opera9,Safari3). C'est beaucoup plus rentable. Et ca marche bcp mieux.

Enfin, je trouve fort que IE4 soit encore supporté par FremyCompany, mais pas Netscape4, ni Safari2, ni-même Firefox 1.X ou Opera7

FremyCompany · 29/01/2008, 17h25

Citation:

Envoyé par dingoth

Non

Le HTML, d'ailleurs ^^ Il est né comme standard, tout le monde l'a adopté. Certains l'ont même adapté, d'où les problèmes que l'on connaît tous maintenant.

Le HTML (tel qu'on le connait aujourd'hui) a d'abord été prorpriétaire, plus est devenu un standard.

Citation:

J'ai une autre conception que FremyCompany, moi : je fais tout en standard, et à fortiori en xhtml 1.0 strict de mon plein gré. Je galère de temps à autres, mais les frameworks existants me facilitent la tâche, et je m'accommode des comportements des navigateurs. Car, le fait qu'un select passe par dessus un div, c'est écrit noir sur blanc dans le standard HTML. Adaptez votre design en fonction, ça vous fera bien moins de cheveux blancs

Non, ce n'est pas prévu par le W3C que les selects passent au dessus des DIVS, sinon on appelerait pas sa un bug et ca n'aurait pas été corrigé dans IE 7

Citation:

Regardez les évolutions du HTML5 (encore au stade de brouillon, mais rares seront les changements à partir de maintenant), et vous verrez que vous ne serez pas déçu.

Toi tu n'est peut-être pas décu, mais moi le HTML 5 me décoit énormément par son manque d'ambition et par sa fadeur. Depuis le HTML4, il s'est écoulé du temps, et il n'a pas été mis à profit...

Par contre, le CSS 3.x me fait rêver... Ah l'attribut apperarance http://www.w3.org/TR/2004/CR-css3-ui-20040511/, ah le nouveau display (même si le nom n'est pas encore sur pour cette nouvelle propriété css), ...

Ca c'est du rêve, du vrai !

Citation:

Enfin, je trouve fort que IE4 soit encore supporté par FremyCompany, mais pas Netscape4, ni Safari2, ni-même Firefox 1.X ou Opera7

Oops, faute de frappe

Je parlais d'IE 6, pardon

Netspcape 4 est mort, et de toute facon il se base Gecko.
Deplus, si un site est compatible FF2.0, il l'est très probablement FF1.x

Mais bon j'ai plus le navigateur pour tester...

Safari2, même problème, j'ai pas de MAC à ma disposition pour tester. Mais j'estime qu'un site compatible avec tous les nav's que j'ai cité est normalement compatible avec tous les autres...

Citation:

Moi je n'ai pas le même esprit que FremyCompany

Moi je suis pour l'esprit des lois, pas pour leur application à la lettre. Je connais les standards, et c'est justement parce que je les connais que je peux me permettre de ne pas les respecter, car je saurai m'en souvenir en codant et les respecter quand il faut.

Je n'outrepasse pas les standards pour le plaisir. Je le fait pour la simplicité et la rapidité de dev. Parce que des fois, personne ne les respecte et parceque des fois, ils sont idiots...

Voici une page que j'ai crée et voici le résultat qu'on me donne :

Code X :

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

1
2
3
4
5
6
7
8
URL : http://validator.w3.org/check?uri=http%3A%2F%2Fwww.saint-boni.be%2Fatelier%2Fsaint-boni-2%2Findex.htm&charset=iso-8859-1&doctype=Inline&group=0&verbose=1

8 Erreurs
0 Avertissements

3* Required attribute "type" not specified
1* End tag for "tr" which is not finished (mon TR est vide d'élément)
4* There is no attribute "on_IE_ONLY_EVENT"

Sur d'autres pages ou je fais moins attention (reprise d'un ancien site en HTML 2.0), j'ai plus d'erreur mais souvent ca se limite à

Code X :

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

1
2
3
4
5
6
IMG pas fermé
Tag en majuscule
ALT manquant
TYPE manquant
Pas de déclaration XMLNS sur HTML
...

Bref que des trucs supreficiels

dingoth · 29/01/2008, 19h42

Personnellement, je suis tellement habitué à utiliser les standards, que je le fais naturellement. C'est comme ça que je suis le plus efficace.

De là à dire que je suis intransigeant (ou le faire penser), il y a un pas à ne pas franchir

Ce n'est pas parce que je me mets une discipline que je ne lache pas la bride aux autres. Oui, quand je donne des conseils dans ce forum, j'essaie d'inciter les autres à faire attention à leur code, mais jamais je ne force quelqu'un. C'est pas super dur non plus à faire que de simplement utiliser les standards.

Là où je peux être intransigeant, c'est lorsque tu parles du HTML propriétaire... C'est tout simplement faux ! Des entreprises ont tenté de se l'approprier en ajoutant LA balise incontournable et qui crée encore des remous actuellement - tant Microsoft (avec son marquee) que Netscape (avec son blink) - mais il était libre dès les premières lignes.

On passera sur les tests des navigateurs où nos visions sont totalement opposées.

Mais on s'arrêtera sur la question du HTML5. Que lui reproches-tu ? Qu'attends-tu de lui ? Ne crois-tu pas que c'est déjà pas mal après dix ans d'inertie ? Ce n'est pas parce qu'il y a 10 ans entre le 4 et le 5 qu'il y aura 10 ans entre le 5 et le suivant ! Il peut y avoir plus, tout comme il peut y avoir moins.

Enfin, je termine en me posant une grande question : pourquoi diable n'écris-tu pas du HTML4.01 ? Tu veux sans doute montrer que tu sais faire du XHTML, mais avec ces erreurs, tu ne le fais pas. Or, en disant que ton document est HTML4.01, tu peux t'autoriser à
* ne pas fermer tes IMG ;
* mettre des tags en majuscules ;
* "oublier" l'attribut ALT ;
* ne pas mettre de TYPE (enfin, je suis moins sûr, là) ;
* laisser tomber la déclaration xmlns ;
* ...
Et ton document serait tout à fait valide. Là, il y a quelque chose que je ne saisis pas du tout. Si tu fais du mauvais XHTML, mais du bon HTML, pourquoi le nommes-tu XHTML ? Que je sache, le XHTML et l'HTML coexistent. Le XHTML a eu pour vocation de remplacer le HTML, mais ce dernier a fait de la résistance. Et maintenant, tout le monde fait des documents HTML parfaits, mais personne ne veut l'appeler HTML... C'est fou, ça... L'utilisateur final, lui, n'y voit aucune différence : s'il n'écrit pas de site (ce qui est le cas de la très large majorité des utilisateurs), il n'ira jamais regarder la source de la page. Cependant son logiciel, lui saura qu'il fera face à un mauvais document.

SpaceFrog · 29/01/2008, 20h07

je suis décidément trop fort en declenchement de troll

le_chomeur · 29/01/2008, 22h54

MDR spacefrog , tu m'as pourris mon topic

Bon moi j'dis on vote !
et puis mince ma source elle marche sur ie6/7 FF donc bon je couvre 98% des utilisateurs ... ( celui qui gueule pour les 2% restant ==>

)

SpaceFrog · 30/01/2008, 12h09

J'ai toujours fonctionné en masquage des selects, mais je ne fasais disparaitre que ceux qui me génaient ...
Faire un truc générique implique de les faire disparaitre tous ou de voir si il y a chevauchement ...

27/01/2008, 16h06	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 32 861 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 32 861 Points : 51 458 Points : 51 458	Le souci est que le selects ne peuvent pas passer sous un div quelque soit leur z-index ... Je pense qu'il doit donc s'agir d'une précaution de les rendre tous invisibles au moment de l'apparitoin du calendrier __________________ Ma page Developpez - Mon Blog Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr Humour
	00

27/01/2008, 16h59	#5
FremyCompany Expert Confirmé Étudiant Inscription : février 2006 Messages : 2 532 Détails du profil Informations personnelles : Âge : 21 Informations professionnelles : Activité : Étudiant Informations forums : Inscription : février 2006 Messages : 2 532 Points : 3 026 Points : 3 026	Mettre un select ou une iframe dans la div du calendrier en opacity 0, ca ne suffirait pas ? J'ai jamais essayé mais ca vaut la peine de tenter le coups __________________ Fremy Pour vos développements Web et une navigation agréable, le tout gratuit : 1) IE 8 + IE7Pro (Si vous ne connaissez pas IE7Pro, essayez !) 2) FF 3 + Web Developper Toolbar + AdBlockPlus + FireBug + GreaseMonkey
	00

27/01/2008, 18h14	#7
le_chomeur Expert Confirmé Sénior Développeur informatique Inscription : février 2006 Messages : 3 612 Détails du profil Informations personnelles : Localisation : France Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : février 2006 Messages : 3 612 Points : 4 389 Points : 4 389	Salut à tous Effectivement il s'agit d'un choix de ma part, de masquer toute les balises select au moment de l'affichage du calendrier, pour éviter les bugs bien connu sur ces derniers... j'aurais également pu ajouter une iframe etc, mais par rapport a tous ce qui a été dit sur les iframes , j'ai fais ce choix Libre à vous d'adapter mon code ^^ __________________ est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes Premier ministre du CCMPTP* (Comité Contre le Mot "Problème" dans les Titres de Posts )*
	00

28/01/2008, 19h29	#10
FremyCompany Expert Confirmé Étudiant Inscription : février 2006 Messages : 2 532 Détails du profil Informations personnelles : Âge : 21 Informations professionnelles : Activité : Étudiant Informations forums : Inscription : février 2006 Messages : 2 532 Points : 3 026 Points : 3 026	Pas du tout. On peut faire la même chose que les framesets mais avec des IFRAME'S. Ca a l'avantage que l'IFRAME est dans la page maitre, avec le menu, ... C'est donc plus facilement manipulable (enfin je trouve, c'est une question de gout bien sûr). __________________ Fremy Pour vos développements Web et une navigation agréable, le tout gratuit : 1) IE 8 + IE7Pro (Si vous ne connaissez pas IE7Pro, essayez !) 2) FF 3 + Web Developper Toolbar + AdBlockPlus + FireBug + GreaseMonkey
	00

28/01/2008, 19h51	#11
bigboomshakala Rédacteur/Modérateur Ingénieur développement logiciels Inscription : avril 2004 Messages : 2 076 Détails du profil Informations personnelles : Sexe : Âge : 33 Localisation : France Informations professionnelles : Activité : Ingénieur développement logiciels Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : avril 2004 Messages : 2 076 Points : 2 921 Points : 2 921	ce que je dis c'est que quand tu dis que les iframes "c'est mal", tu confonds avec les "frameset"... frameset = mal iframe = bien (quand on les utilise au bon moment) __________________ Modérateur/Rédacteur Tutoriels/Articles : - Espace de noms (ou namespace) en JavaScript - Créer une table HTML éditable en JavaScript mon espace
	00

25/01/2008, 12h14	#2
DuyBinh Membre habitué Inscription : juin 2007 Messages : 218 Détails du profil Informations forums : Inscription : juin 2007 Messages : 218 Points : 106 Points : 106	Merci pour ta source et pour ton aide dans mon topic. Bonne continuation.
	00

27/01/2008, 11h19	#3
Jumano Membre Expert Inscription : février 2007 Messages : 1 162 Détails du profil Informations personnelles : Âge : 44 Localisation : France, Rhône (Rhône Alpes) Informations forums : Inscription : février 2007 Messages : 1 162 Points : 1 586 Points : 1 586	Bonjour, Ce calendrier est vraiment bien, seul petit hic, tout les champs de type "select" disparaissent à l'apparition du calendrier. Ce n'est évidemment pas un problème récurrant puisque l'ensemble des champs réapparaissent au choix de la date. D'un point de vue esthétique n'y a - t - il pas moyen de modifier cela ?
	00

27/01/2008, 17h46	#6
bigboomshakala Rédacteur/Modérateur Ingénieur développement logiciels Inscription : avril 2004 Messages : 2 076 Détails du profil Informations personnelles : Sexe : Âge : 33 Localisation : France Informations professionnelles : Activité : Ingénieur développement logiciels Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : avril 2004 Messages : 2 076 Points : 2 921 Points : 2 921	voir FAQ __________________ Modérateur/Rédacteur Tutoriels/Articles : - Espace de noms (ou namespace) en JavaScript - Créer une table HTML éditable en JavaScript mon espace
	00

28/01/2008, 20h58	#12
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 32 861 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 32 861 Points : 51 458 Points : 51 458	iframe = bien c'est vite dit quand tu veux faire du strict ... __________________ Ma page Developpez - Mon Blog Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr Humour
	00

29/01/2008, 09h04	#14
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 32 861 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 32 861 Points : 51 458 Points : 51 458	C'est vrai que le w3c c'est purement spéculatif dans le sens ou il faut espèrer que les browsers évoluent vers les standards et pas vers le propriétaire. Mais toutes les évolutions ne sont elles pas nées de choses propriétaires au départ? __________________ Ma page Developpez - Mon Blog Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr Humour
	00

29/01/2008, 19h42	#17
dingoth Membre Expert Inscription : mai 2004 Messages : 1 253 Détails du profil Informations personnelles : Localisation : Belgique Informations forums : Inscription : mai 2004 Messages : 1 253 Points : 1 298 Points : 1 298	Personnellement, je suis tellement habitué à utiliser les standards, que je le fais naturellement. C'est comme ça que je suis le plus efficace. De là à dire que je suis intransigeant (ou le faire penser), il y a un pas à ne pas franchir Ce n'est pas parce que je me mets une discipline que je ne lache pas la bride aux autres. Oui, quand je donne des conseils dans ce forum, j'essaie d'inciter les autres à faire attention à leur code, mais jamais je ne force quelqu'un. C'est pas super dur non plus à faire que de simplement utiliser les standards. Là où je peux être intransigeant, c'est lorsque tu parles du HTML propriétaire... C'est tout simplement faux ! Des entreprises ont tenté de se l'approprier en ajoutant LA balise incontournable et qui crée encore des remous actuellement - tant Microsoft (avec son marquee) que Netscape (avec son blink) - mais il était libre dès les premières lignes. On passera sur les tests des navigateurs où nos visions sont totalement opposées. Mais on s'arrêtera sur la question du HTML5. Que lui reproches-tu ? Qu'attends-tu de lui ? Ne crois-tu pas que c'est déjà pas mal après dix ans d'inertie ? Ce n'est pas parce qu'il y a 10 ans entre le 4 et le 5 qu'il y aura 10 ans entre le 5 et le suivant ! Il peut y avoir plus, tout comme il peut y avoir moins. Enfin, je termine en me posant une grande question : pourquoi diable n'écris-tu pas du HTML4.01 ? Tu veux sans doute montrer que tu sais faire du XHTML, mais avec ces erreurs, tu ne le fais pas. Or, en disant que ton document est HTML4.01, tu peux t'autoriser à * ne pas fermer tes IMG ; * mettre des tags en majuscules ; * "oublier" l'attribut ALT ; * ne pas mettre de TYPE (enfin, je suis moins sûr, là) ; * laisser tomber la déclaration xmlns ; * ... Et ton document serait tout à fait valide. Là, il y a quelque chose que je ne saisis pas du tout. Si tu fais du mauvais XHTML, mais du bon HTML, pourquoi le nommes-tu XHTML ? Que je sache, le XHTML et l'HTML coexistent. Le XHTML a eu pour vocation de remplacer le HTML, mais ce dernier a fait de la résistance. Et maintenant, tout le monde fait des documents HTML parfaits, mais personne ne veut l'appeler HTML... C'est fou, ça... L'utilisateur final, lui, n'y voit aucune différence : s'il n'écrit pas de site (ce qui est le cas de la très large majorité des utilisateurs), il n'ira jamais regarder la source de la page. Cependant son logiciel, lui saura qu'il fera face à un mauvais document.
	00

29/01/2008, 20h07	#18
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 32 861 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 32 861 Points : 51 458 Points : 51 458	je suis décidément trop fort en declenchement de troll __________________ Ma page Developpez - Mon Blog Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr Humour
	00

29/01/2008, 22h54	#19
le_chomeur Expert Confirmé Sénior Développeur informatique Inscription : février 2006 Messages : 3 612 Détails du profil Informations personnelles : Localisation : France Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : février 2006 Messages : 3 612 Points : 4 389 Points : 4 389	MDR spacefrog , tu m'as pourris mon topic Bon moi j'dis on vote ! et puis mince ma source elle marche sur ie6/7 FF donc bon je couvre 98% des utilisateurs ... ( celui qui gueule pour les 2% restant ==> ) __________________ est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes Premier ministre du CCMPTP* (Comité Contre le Mot "Problème" dans les Titres de Posts )*
	00

30/01/2008, 12h09	#20
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 32 861 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 32 861 Points : 51 458 Points : 51 458	J'ai toujours fonctionné en masquage des selects, mais je ne fasais disparaitre que ceux qui me génaient ... Faire un truc générique implique de les faire disparaitre tous ou de voir si il y a chevauchement ... __________________ Ma page Developpez - Mon Blog Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr Humour
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email