Mon calendrier totalement bancal

**b4bass** · 15/07/2011, 16h14

Bonjour,
Je dois actuellement dev une appli web pour mon stage. Pour l'instant, je me charge de l'agenda..
L'affichage de ce dernier, en php fonctionne très bien.
Mon agenda fonctionnera comme tel :
- il affiche les dispos pour 1 employé particulier, et si l'user click sur une des cellules du tableau, une fenetre apparait affichant les dispos de tous les autres employés pour ce jour donné.

J'ai utilisé un tuto assez simple pour faire une fenêtre modal avec jquery.

Malheureusement, je suis bloqué depuis plusieurs jours car ma fenêtre ne s'affiche pas sous ie6 (soit le navigateur avec lequel je dois dev étant donné qu'il est installé sur tous les pcs de la boite).
Je pense tout simplement que click() ne fonctionne pas sur l'attribut td de mon tableau. (sur firefox, le click sur le td[name=modal] fonctionne très bien)
J'ai réussit à bidouiller quelque chose associant une fonction js lorsqu'on click sur une cellule du tableau pour que cette dernière simule un click sur un lien invisible.... (bref, un truc complétement bancal, surtout que ça ne fonctionnera plus quand je devrai remplir la fenêtre modal en fonction de la cellule clické)

Je ne sais pas si mon explication est très clair, mais je pense que vous comprendrez en lisant le code :p

-> lignes 29, 175

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
<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml : lang="fr" lang="fr">
 
        <head>
        <script type="text/javascript" src="../jquery-1.6.2.min.js"></script>
        <script type="text/javascript"> 
                 function dialog() {
 
                        //self.location.hash="#dialog";
                        alert("fonction dialog()");
                        document.getElementById("lnkExemple").click(); 
 
 
                }
         $(document).ready(function() {         
 
        //select all the a tag with name equal to modal
 
         $('a[name=modal]').click(function(e) {
 
                //Cancel the link behavior
                e.preventDefault();
 
                //Get the A tag
 
                var id = $(this).attr('href');
 
                //var id = "#dialog";
                //Get the screen height and width
                var maskHeight = $(document).height();
                var maskWidth = $(window).width();
 
                //Set heigth and width to mask to fill up the whole screen
                $('#mask').css({'width':maskWidth,'height':maskHeight});
 
                //transition effect                
                $('#mask').fadeTo("fast",0.80);        
 
                //Get the window height and width
                var winH = $(window).height();
                var winW = $(window).width();
 
                //Set the popup window to center
                $(id).css('top',  winH/2-$(id).height()/2);
                $(id).css('left', winW/2-$(id).width()/2);
 
                //transition effect
                $(id).fadeIn(300);  
 
 
        });
 
 
 
        //if close button is clicked
        $('.window .close').click(function (e) {
                //Cancel the link behavior
                e.preventDefault();
 
                $('#mask').hide();
                $('.window').hide();
        });                
 
        //if mask is clicked
        $('#mask').click(function () {
                $(this).hide();
                $('.window').hide();
        });                        
 
});
        </script>
                <title>Planning</title>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
                <link rel="stylesheet" media="screen" type="text/css" title="Design" href="CA.css" />
        </head>
 
        <body>
<?php
if(!isset($_GET['m']) && !isset($_GET['y']))
{
        // Si on ne récupère rien dans l'url, on prend la date du 1er jour du mois actuel.
        $timestamp = mktime(0, 0, 0, date('m'), 1, date('Y'));
}
else
{
        // Sinon on récupère la date du 1er jour du mois donné.
        $timestamp = mktime(0, 0, 0, $_GET['m'], 1, $_GET['y']);
}
 
/* Si le mois et l'année de la variable $timestamp correspondent au mois et à l'année d'aujourd'hui, on retient le jour actuel.
Sinon le jour actuel ne se situe pas dans le mois et on ne retient rien */
if(date('m', $timestamp) == date('m') && date('Y', $timestamp) == date('Y'))
{
        $coloreNum = date('d');
}
 
$m = array("01" => "Janvier", "02" => "Février", "03" => "Mars", "04" => "Avril", "05" => "Mai", "06" => "Juin", "07" => "Juillet", 
                        "08" => "Août", "09" => "Septembre", "10" => "Octobre",  "11" => "Novembre", "12" => "Décembre");
// Les dates en PHP commencent par dimanche !
$j = array('Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi');
 
$numero_mois = date('m', $timestamp);
$annee = date('Y', $timestamp);
 
if($numero_mois == 12)
{
        // Dans le cas du mois de décembre
        $annee_avant = $annee;
        $annee_apres = $annee + 1;        // L'année d'après change
        $mois_avant = $numero_mois - 1;
        $mois_apres = 01;                // Le mois d'après est janvier
}
elseif($numero_mois == 01)
{
        // Dans le cas du mois de janvier
        $annee_avant = $annee - 1;        // L'année d'avant change
        $annee_apres = $annee;
        $mois_avant = 12;                // Le mois d'avant est décembre
        $mois_apres = $numero_mois + 1;
}
else
{
        // Il ne s'agit ni de janvier ni de décembre
        $annee_avant = $annee;
        $annee_apres = $annee;
        $mois_avant = $numero_mois - 1;
        $mois_apres = $numero_mois + 1;
}
$numero_jour1er = date('w', $timestamp);  // 0 => Dimanche, 1 => Lundi, 2 = > Mardi...
        
// Changement du numéro du jour car l'array commence à l'indice 0.
if ($numero_jour1er == 0)
{
        /*
                Si c'est dimanche, on le place en 6e position
                (car on commencera notre boucle à 0)
        */        $numero_jour1er = 6; 
}
else
{
        // Sinon on met lundi à 0 ou mardi à 1 ou mercredi à 2...
        $numero_jour1er--;
}
?>
<table>
        <caption class="titre_calendar">
                <?php 
                
                // Affichage du mois et de l'année
                echo '<span >'.$m[$numero_mois].' '.$annee.'</span><br /><br />';
                // Lien pour aller au mois précédent
                echo '<a class="lien_pre" href="?m='.$mois_avant.'&amp;y='.$annee_avant.'"><< précedent</a>';
                // Lien pour aller au mois suivant
                echo '<a class="lien_suiv" href="?m='.$mois_apres.'&amp;y='.$annee_apres.'">suivant >></a>';
                ?>
        </caption>
        <tr>
                <th class="th_calendar">Lun</th>
                <th class="th_calendar">Mar</th>
                <th class="th_calendar">Mer</th>
                <th class="th_calendar">Jeu</th>
                <th class="th_calendar">Ven</th>
                <th class="th_calendar">Sam</th>
                <th class="th_calendar">Dim</th>
        </tr>
        <?php
echo '<tr>'; // Nouvelle ligne du tableau (celle de la 1ère semaine, donc)
        // Écriture de colonnes vides tant que le mois ne démarre pas.
        for($i = 0 ; $i < $numero_jour1er ; $i++)
        { 
                echo "<td class='vide'>" .' '. "</td>";
        }
        for($i = 1 ; $i <= 7 - $numero_jour1er; $i++)
        {        
                echo '<td onclick="dialog()" href="#dialog" name="modal" class="td_calendar"><div class="';
                if(isset($coloreNum) && $coloreNum == $i)
                {
                        echo 'lienCalendrierJour';
                }
                else
                {
                        echo 'lienCalendrier';
                }
                echo '">'.$i.'</div></td>';        
        }
echo '</tr>';
 
$nbLignes = ceil((date('t', $timestamp) - ($i-1)) / 7);
for($ligne = 0 ; $ligne < $nbLignes ; $ligne++)
{
        echo '<tr>'; // Nouvelle ligne du tableau (celle de la nouvelle semaine)
        for($colone = 0 ; $colone < 7 ; $colone++)
        {
                if($i <= date('t', $timestamp))
                {
                        echo '<td onclick="dialog()" href="#dialog" name="modal" class="td_calendar"><div class="';
                        if(isset($coloreNum) && $coloreNum == $i)
                        {
                                echo 'lienCalendrierJour';
                        }
                        else
                        {
                                echo 'lienCalendrier';
                        }
                        echo '">'.$i.'</div></td>';
                }
                else
                {
                        // On a fini d'écrire le mois on termine la tableau par des cellules vides
                        echo "<td class='vide'>" .' '. "</td>";
                }
                $i = $i +1;
        }
        echo '</tr>';
}
?>
</table>
<a href="#dialog" id="lnkExemple" name="modal"></a>
 
<div id="boxes">
 
<div id="dialog" class="window">
Titre | 
<a href="#"class="close"/>Fermer</a>
<?php include('test.php'); ?>
</div>
 
 
<!-- Mask to cover the whole screen -->
  <div id="mask"></div>
</div>
 
 
</body>
</html>

css :

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
 
.titre_calendar
{
        margin : auto;
        font-family : "cooper black", "berlin sans FB demi", "calisto MT",  Arial ,Verdana, Impact, serif;
        font-weight : bold;
        margin-bottom : 10px;
        margin-top : 50px;
        color : rgb(79,167,255);
        font-size : 1.3em;
 
}
table 
{
        margin : auto;
        border : 1px outset rgb(79,167,255);
        border-collapse : collapse;
}
.th_calendar
{
        color : rgb(0,54,108);
        background-color : rgb(152,193,243);
        font-size : 0.8em;
        padding-left : 60px;
        padding-right : 60px;
        font-family : Arial ,Verdana, Impact, serif;
}
.td_calendar
{
        text-align : right;
        vertical-align : top;
        border : 1px solid rgb(173,176,201);
        color : grey;
        font-size : 0.5em;
        height : 70px;
}
.vide
{
        background-color : rgb(201,206,223);
}
a
{
        font-weight : bold;
        text-decoration : none;
        color : rgb(0,54,108);
        font-size : 0.6em;
        font-family : Arial ,Verdana, Impact, serif;
}
a:hover
{
        background-color : rgb(152,193,243);
        color : white;
}
.lien_pre
{
        float : left;
        display : block;
        text-align : left;
}
.lien_suiv
{
        float : right;
        display : block;
}
 
#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
 
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  display:none;
  z-index:9999;
  padding:20px;
  background-color:#ffffff;
}

**nadox** · 16/07/2011, 10h36

Bonjour, pourquoi ne pas tout simplement mettre une balise 'a' dans chaque cellule ??

**b4bass** · 18/07/2011, 10h45

Tu veux dire par là un lien clickable différend dans chaque cellule ?

A la base je devais pouvoir clicker sur n'importe quelle celulles surtout que ces dernieres seront par la suite rempli par des infos d'une base de donnée.

T'as réponse m'a l'air triviale, pourtant je ne vois pas ce que tu veux dire. Peux tu m'en dire un peu plus ?
Désolé, je débute en web :o

Invité · 18/07/2011, 13h22

salut,

Il me semble avoir lu hier (

) sur les 'importants' sujets de ce forum js que sous IE6, lorsqu'aucun id n'est pas spécifié, l'attribut name est utilisé en tant qu'id.

De fait, si tu as beaucoup de td avec plein de fois le name=modal ca pourrait ptet merder. Genre ca marche que pour la première cellule ou un truc du genre XD.
Essaies voir d'enlever le name, ou d'attribuer un id spécifique à chacun de tes td.

Bien qu'archaïque, j'imagine qu'il est quand même possible de catcher un event sur un td sous IE.

**b4bass** · 18/07/2011, 17h09

C'est éxactement ça.

En testant un peu plus c'est bien le $('td[name=modal]').click(function(e) { qui ne fonctionne pas.
Le $('td[id=test]').click(function(e) { fonctionne quand à lui très bien.

Par ailleurs, la suite du script fonctionne aussi sur ie6 (jquery).

Mais ça m'embete d'utiliser un id car je vais être bloqué par la suite.
Je voulais attribuer un id different pour chaque cellule ayant l'attribut name=modal afin d'afficher du contenu différend dans ma fenetre modal (mon include affiche du contenu en fonction de l'id de la div)

A moins que je puisse faire ça en utilisant la classe td_calendar ?

Invité · 18/07/2011, 17h55

vi après c'est qu'une question de sélecteurs.

Au besoin tu rajoutes une classe maCelluleACliquer
et dans le selecteur

$('td.maCelluleACliquer')

Remarque : c'est qu'un détail, mais il est préférable de commencer avec un id du genre

Code :

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

$('#maTable td')//

comme ca dès que l'occurrence est trouvée, on ne va pas plus loin dans le dom. Ca permet d'accélérer (ou du moins de ne pas perdre de temps) lors de la sélection.
Actuellement, les td sont cherchés jusqu'à </html> alors qu'au final seuls ceux dans la table nous intéressent.

Mon calendrier totalement bancal

JavaScript

Vue hybride

Discussions similaires

Partager

Partager