Bonjour � tous et merci d'avance de votre lecture,
Voil� je suis confront� � un probl�me vraiment incompr�hensible pour moi en tout cas..., je vais essayer de vous l'expliquer � l'�crit du mieux que je peut 
Dans mon code, je g�n�re un calendrier dynamique en PHP, � l'int�rieur pour g�rer des "�v�nements"*j'utilise du JS, certes c'est d�gueu et �a veut dire que le code et mal construit, mais c'est trop tard pour recommencer certaine partie, le code venant pas de moi et la dite personne n'�tant plus dans le service (L'utilisation du "JE" n'est pas vraiment appropri� mais j'ai pas envie de m'emb�ter avec �a :p). Plus simplement la moulinette PHP trouve un �v�nement dans la BDD, et ajoute un
class="event_case" onclick="evenement(13);"
dans la <td></td> appropri�. ce qui permet de changer le CSS de la TD pour afficher visuellement l��v�nement (ici : un point noir, venant d'une image) , et lors d'un clique sur la case logiquement le onclick="evenement(13);" fait effet et renvoie � une fonction toute simple js qui permet l'affichage (display:block
de la description de l��v�nement contenue dans la BDD. Mais ce n'est pas tout ! J'ai aussi des boutons permettant d'afficher le bon calendrier c�d, le bon mois,
ex : le mois actuelle afficher par d�faut, mais possibilit� de cliquer sur le bouton SEPTEMBRE pour mes �v�nements de SEPTEMBRE.
Avec quelques effets de style en CSS3/JS, lors du clique cela change le CSS pour faire appara�tre le calendrier d'une belle fa�on (Hors de l'�crans et fait sont chemin vers l� ou il doit �tre).
*Ces �v�nements sont stock� dans une base de donn�e, sont extrait en d�but de page et g�rer ensuite par un algo qui g�re les dates en timestamp.
Alors voil� ! tout fonctionne parfaitement... parfaitement ? non,... un groupe d�irr�ductible bugs r�siste toujours au d�veloppeur.
Voici mon probl�me : Comme vous le savez maintenant le PHP cr�er un case avec
class="event_case" onclick="evenement(13);"
dans la TD, certes donc impossibilit� d'avoir l'un ou l'autre... c'est les deux ou rien je pr�cise, car la suite est plut�t ?dr�le? au chargement de ma page (log effectu�, moulinette, affichage du calendrier par d�faut, css associ�) le calendrier s'affiche correctement, avec l��v�nement dans la bonne case, et le bon CSS (point noir). MAISlorsque je clique sur la case qui est sens� �tre :
<td class="event_case" onclick="evenement(13);">9</td>
rien ne se passe, alors je v�rifie (firebug, et developperTools de Chrome) mais la TD dans le code est :
Voil�... Je ne comprend pas du tout les navigateurs affiche le CSS associ�, mais le JS ne fonctionne absolument pas, et de plus <le myst�re> c'est qu'il affiche quand m�me le CSS alors qu'il n'y a qu'un simple <td></td>.
Petit pr�cision, lorsque je change de calendrier, et je reviens sur le "bugu�" tout re-fonctionne (JS + CSS), et dans le DevelopperTools il affiche bien le event_case et le onclick.
Le code CSS
Calendrier
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| .calendar table{
box-shadow: 5px 5px 5px 7px grey;
border-collapse:collapse;
overflow: hidden;
border: 3px;
width:442px;
left: 20%;
position: fixed;
font-family: Helvetica, 'Lucida Grande', Arial, sans-serif;
font-size: 14px;
font-weight: bold;
color: #406da0;
margin: 15px;
float: left;
opacity: 0;
-webkit-transition: all .4s ease-in;
-moz-transition: all .4s ease-in;
-o-transition: all .4s ease-in;
transition: all .4s ease-in;
background-color: rgba(0, 108, 255, 0.26);
} |
1
2
3
4
5
6
7
8
9
10
| .calendar tr td{
border : 1px solid grey;
width : 60px;
height : 60px;
text-align:right;
vertical-align:bottom;
font-size:18px;
font-weight: normal;
} |
�v�nement + Description �v�nement
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .evenement{
font-size:15px;
display: none;
width: 25%;
float:right;
position:relative;
left: -15em;
}
.description{
font-style: italic;
list-style: none;
word-wrap: break-word;
width: 80%;
position:relative;
} |
PHP
La case �v�nement, la div description
1
2
3
4
5
6
7
8
9
10
11
12
| // Affichage d'un événement qui dure uniquement une journée
echo "<td class=\"event_case\" onclick=\"evenement(".$evenement.");\" >".$day."</td></tr><tr>";
// Affichage du détail des événements existants
echo "<div class=\"evenement\" id=$evenement>";
echo "<ul>";
echo "<li class=\"today\">".$days[$num_day-1]." ".date('j', $datetime)." ".$months[$month-1]."</li>";
$i--;
while ($i >= 0){
echo "<li style=\"font-weight: bold; font-size: 15px;\">".$nom_event[$i]."</li>";
echo "<li class=\"description\">".$description[$i]."</li>";
$i--;
} |
Le JS
Fonction d'affichage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| // Fonction qui permet d'afficher les événements d'un jour en cliquant sur sa case correspondante
function evenement(id_case) {
var visible;
var id_events = 13; // id du premier événement
//var invisible;
visible = document.getElementById(id_case);
invisible = document.getElementById(id_events);
while (invisible){ // Test si l'événement existe
invisible.style.display = "none";
if (id_events == id_case){ // Affichage de l'événement sur lequel on a cliqué uniquement
visible.style.display = "block";
}
id_events++;
invisible = document.getElementById(id_events);
}
} |
Je suis vraiment d�boussol�, je ne comprends pas vraiment ce qu'il se passe ! :S
onClick=fonction() ne fonctionne qu'au deuxi�me chargement
R�pondre avec citation
Partager