[DOM] Script Mini Calendrier

Version imprimable

09/02/2009, 19h08
dark_vidor

[DOM] Script Mini Calendrier

Bonjour,

J'utilise ce script pour un mini calendrier : http://www.team-gt5net.com/~championnat/inc/calendar.js

Je l'utilise ici : http://www.team-gt5net.com/~championnat/epreuve.php Après avoir cliquer sur Editer :?

Le calendrier est appelé via les champs comme ceci :

Code:

<input onClick="javascript:show_calendar(this);" name="date_debut" value="<?php echo date('Y-m-d', strtotime($event['date_debut'])) ?>" readonly="readonly" style="cursor: text" />

Je voudrais rajouter le fait que si on clique ailleurs que sur le calendrier celui ci se masque

Comment faire ?

Merci
10/02/2009, 17h47
StAfX
ce qu'il faut c'est que ton calendrier disparaisse dès que ta souris n'est plus dessus, donc en mettant un onmouseover sur l'élément d'à côté, (donc sur chaque tableau) du genre:
Code:

1 2 3 <table onmouseover="cache_calendar();" border=0 cellpadding=0 cellspacing=0 style="background-color: #DDDDDD; margin: 10px 0; padding: 20px; border: 1px solid #000000;">
ceci devrait te satisfaire, si tu as besoin d'aide pour faire ta fonction cache_calendar() donne nous ta fonction show_calendar() et on pourra peut-être t'aider :)

Stef

PS: ton code n'est pas très propre, il faudrait séparer le style (css) du contenu (html), mais au moins saute des lignes!!!
10/02/2009, 17h50
Bovino

A la rigueur, celui-ci le fait ;)

Salut,

Je me suis justement fait ce genre d'évènement cette après-midi :

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
<!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" lang="fr">
<head>
   <title>faire disparaître un élément en cliquant ailleurs</title>
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
      .div {width:200px;height:200px;background:#ccc;}
   </style>
</head>
<body>
   <div class="div"></div>
   <script type="text/javascript">
   var Utils = {
   DOM: {
      getElementsByClassName: function(classe, noeud, balise) {
         var elements = [];
         if (document.getElementsByClassName) elements = document.getElementsByClassName(classe);
         else {
            if (noeud === undefined || noeud === null) { noeud = document; }
            if (balise === undefined || balise === null) { balise = "*"; }
            var elementsAParcourir = noeud.getElementsByTagName(balise);
            var pattern = new RegExp("(^|\\s)" + classe + "(\\s|$)");
            for (var i = 0, imax = elementsAParcourir.length; i < imax; i++) {
               if (pattern.test(elementsAParcourir[i].className)) elements.push(elementsAParcourir[i]);
            }
         }
         return elements;
      }
   },
   Evenement: {
      ajouter: function(elm, evt, fn) {
         if (document.addEventListener) {
           if (elm.nodeType===1 || elm.nodeType===9) {
               elm.addEventListener(evt, function(e) {
                  if (!fn(e)) e.preventDefault();
               }, false);
            } else {
               for (var i = 0, imax = elm.length; i < imax; i++) {
                  elm[i].addEventListener(evt, function(e) {
                     if (!fn(e)) e.preventDefault();
                  }, false);
               }
            }
         } else if (document.attachEvent) {
            if (elm.nodeType===1 || elm.nodeType===9) {
               var r = elm.attachEvent("on" + evt, fn);
               return r;
            } else {
               for (var i = 0, imax = elm.length; i < imax; i++) {
                  var r = elm[i].attachEvent("on" + evt, fn);
                  return r;
               }
            }
         }
      }
   }
   };
   Utils.Evenement.ajouter(document, "click", function(e) {
      var elm = e.target || event.srcElement;
      if (elm.className.indexOf("div")==-1) {
         var elms = Utils.DOM.getElementsByClassName("div");
         for (var i=0, imax=elms.length;i<imax;i++) {
            elms[i].style.display="none";
         }
      }
   });
   </script>
</body>
</html>

Ce qui est intéressant c'est surtout getElementsByClassName et ce qu'il y a après la ligne Utils.Evenement.ajouter(document, "click", function(e) {
L'idée étant d'affecter à l'élément (ou aux éléments) une classe CSS, de retrouver ces éléments dans le DOM grâce à cette classe, puis de les faire disparaître.

10/02/2009, 18h59
dark_vidor

Citation:

Envoyé par Bovino

A la rigueur, celui-ci le fait ;)

non :oops: fonctionne pas :mouarf:

@ franculo_caoulene : aurais tu un exemple pour ton script ?

j'ai rajouté une fonction hide_calendar ... au clic sur un x dans le calendrier reste a généralisé à l'ensemble de la page tout clic sur autre chose que le div calendar dois masquer le calendar
10/02/2009, 19h44
Bovino

Citation:

Envoyé par dark_vidor

non :oops: fonctionne pas :mouarf:

C'est que tu n'as probablement pas été jusqu'au bout... http://www.developpez.net/forums/d64...x/#post3902313
:evilred:
10/02/2009, 19h57
franculo_caoulene

Un exemple pour mon script? C'est une blague? Mon script EST un exemple. Tu copies/colles, clique sur le div, puis en dehors du div et tu vois ce qui se passe.
10/02/2009, 20h45
dark_vidor
J'ai rajouter ça :
Code:

1 2 3 4 5 6 document.onclick = function(e) { var source=window.event?window.event.srcElement.id:e.target.id; window.alert(source); }
sauf que mes alerts sont vides :oops: c'est bien l'id qu'il faut recupérer pourtant pour tester si c'est = calendrier ou non

@Bovino, si je suis aller jusqu'au bout j'avais posté ce même script que j'utilise :)

@franculo_caoulene, dsl c'était avant manger :) j'ai lu le code en travers et j'avoue j'ai pas testé ... un lien de démo aurait été plus parlant :)
11/02/2009, 18h50
dark_vidor

j'ai beau tout tenter je n'arrive pas a récupérer l'id de l'élément sur lequel je clic :oops:
12/02/2009, 22h39
dark_vidor

j'ai essayé de comprendre et d'intégrer ton code franculo_caoulene

Mais j'ai un pb :) au clic je ne veux pas tjrs masquer mon div, avec ton code mon calendrier ne s'affiche plus

Code:

input onClick="javascript:show_calendar(this);"

je l'ai dans le baba :oops:

du coup je vais repartir sur l'idée d'origine, obtenir l'id de l'élément cliqué...
si c'est != de calendrier on masque le calendrier
12/02/2009, 22h47
Bovino

Citation:

Envoyé par dark_vidor

@Bovino, si je suis aller jusqu'au bout j'avais posté ce même script que j'utilise :)

:evilred:
Sur cette page, tu constateras qu'il disparait bien lorsque tu cliques en dehors !
13/02/2009, 00h06
dark_vidor

ba oui je sais bien j'ai chercher dans le code mais je trouve pas ce qui le permet :oops:

j'veux garder mon ptit script tout simple :)

pour l'instant j'ai une solution (mais qui ne me satisfait pas)

j'ai un div transparent qui saffiche en dessous du calendrier et qui fait tte la page au clic en dehors du calendrier (donc sur le div desssous) je masque le tout :roll:
c'est du bricolage en attendant de trouver une solution plus mieux :?
15/02/2009, 15h09
dark_vidor

Bon ça fait une bonne semaine que je galère la dessus mais en fait c'est tout simple

Il suffisait bien de détecter un clic en dehors de la zone calendrier... ce qui ce traduit par une perte du focus sur le input, ce qui signifie l'utilisation de onBlur :roll:

c'était tout simple, ça existe déjà tout fait en html !

mon champs date prends donc ces 'attributs'

Code:

<input onClick="javascript:show_calendar(this);" onBlur="javascript:hide_calendar();" name="date_debut" value="0000-00-00" readonly="readonly" style="cursor: text" />

y'avais rien à inventer en JS ou autre

FACILE ! :mrgreen: