PHP et javascript: masquer un élément...
Résolu
Fonx2
Messages postés
331
Date d'inscription
Statut
Membre
Dernière intervention
-
Fonx2 Messages postés 331 Date d'inscription Statut Membre Dernière intervention -
Fonx2 Messages postés 331 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je suis actuellement en train de développer un site en PHP.
Mon code PHP fonctionne bien et me génère un tableau (un calendrier) dont chaque cellule contient une case à coché.
Le truc, c'est que je voudrais que ses fameuses case à coché ne soit pas visible lors du chargement de la page. Un survol de la souris les rendrais visible et dès que le pointeur de la souris n'est plus dessus, elles doivent redevenir invisible.
J'ai vu qu'il était possible de faire cela avec du JavaScript.
J'ai tenté de lire un tutoriel pour apprendre ce langage, mais ce que j'ai écrit ne fonctionne pas.
Voici le code:
for ($j=1;$j<$NbrJrsMois+1;$j++){
echo "<td class='$ColorCase'><p class='CaseCellule' id='$j$m$y' onload=\"document.getElementById('$j$m$y').style.display='none'\"><input type='checkbox' name='$PrenomPersonne' value=''></p></td>";
}
Le résultat en html (une cellule) donne:
<td class=''>
<p class='CaseCellule' id='4062010' onload="document.getElementById('4062010').style.display='none'">
<input type='checkbox' name='Pascal' value=''></p>
</td>
Mais au chargement, rien ne se passe. Tout est visible comme avant...
Comment faire?
Qu'est-ce qui cloche?
Merci d'avance pour votre aide...
Je suis actuellement en train de développer un site en PHP.
Mon code PHP fonctionne bien et me génère un tableau (un calendrier) dont chaque cellule contient une case à coché.
Le truc, c'est que je voudrais que ses fameuses case à coché ne soit pas visible lors du chargement de la page. Un survol de la souris les rendrais visible et dès que le pointeur de la souris n'est plus dessus, elles doivent redevenir invisible.
J'ai vu qu'il était possible de faire cela avec du JavaScript.
J'ai tenté de lire un tutoriel pour apprendre ce langage, mais ce que j'ai écrit ne fonctionne pas.
Voici le code:
for ($j=1;$j<$NbrJrsMois+1;$j++){
echo "<td class='$ColorCase'><p class='CaseCellule' id='$j$m$y' onload=\"document.getElementById('$j$m$y').style.display='none'\"><input type='checkbox' name='$PrenomPersonne' value=''></p></td>";
}
Le résultat en html (une cellule) donne:
<td class=''>
<p class='CaseCellule' id='4062010' onload="document.getElementById('4062010').style.display='none'">
<input type='checkbox' name='Pascal' value=''></p>
</td>
Mais au chargement, rien ne se passe. Tout est visible comme avant...
Comment faire?
Qu'est-ce qui cloche?
Merci d'avance pour votre aide...
A voir également:
- PHP et javascript: masquer un élément...
- Easy php - Télécharger - Divers Web & Internet
- Telecharger javascript - Télécharger - Langages
- Expert php pinterest - Télécharger - Langages
- A javascript error occurred in the main process - Forum Windows
- A javaScript error occurred in the main process - Forum Handicap / Accessibilté
4 réponses
C'est bon! J'ai réussi!
Une petite modif dans le code PHP, qui donne maintenant ceci:
echo "<td class='$ColorCase'><p class='CaseCellule' onMouseOver=\"document.getElementById('$PrenomPersonne.$j/$m/$y').style.visibility='visible'\" onMouseOut=\"if (document.getElementById('$PrenomPersonne.$j/$m/$y').checked==false) {document.getElementById('$PrenomPersonne.$j/$m/$y').style.visibility='hidden'}\"><input type='checkbox' name='$PrenomPersonne' class='CaseACocher' id='$PrenomPersonne.$j/$m/$y' value='$PrenomPersonne.$j/$m/$y'></p></td>";
Une petite modif dans le code PHP, qui donne maintenant ceci:
echo "<td class='$ColorCase'><p class='CaseCellule' onMouseOver=\"document.getElementById('$PrenomPersonne.$j/$m/$y').style.visibility='visible'\" onMouseOut=\"if (document.getElementById('$PrenomPersonne.$j/$m/$y').checked==false) {document.getElementById('$PrenomPersonne.$j/$m/$y').style.visibility='hidden'}\"><input type='checkbox' name='$PrenomPersonne' class='CaseACocher' id='$PrenomPersonne.$j/$m/$y' value='$PrenomPersonne.$j/$m/$y'></p></td>";
onload=\"document.getElementById('$j$m$y').style.display='none'\"
avec onload le script s'execute uniquement au chargement de la page php. Pour que la case s'affiche au survol de la souris utilise onMouseOver et onMouseOut pour quelle s'efface lorsque la souris n'est plus dessus.
avec onload le script s'execute uniquement au chargement de la page php. Pour que la case s'affiche au survol de la souris utilise onMouseOver et onMouseOut pour quelle s'efface lorsque la souris n'est plus dessus.
si tu fait en sorte que ce soit ton script js qui t'affiche la case, elle ne s'affichera pas avant que ce script soit executé.
dans le cas du onMouse essai :
onMouseOver = "affiche();" onMouseOut = "efface();"
dans le code php affiche le tabeau sans les cases dans une div et utilise l'ajax pour les modifier par exemple grace aux évènements onMouseOver et onMouseOut.
je ne suis pas sur à 100% que ce script fonctionne mais si ça peut t'aider à trouver une solution ... pourquoi pas.
dans le cas du onMouse essai :
onMouseOver = "affiche();" onMouseOut = "efface();"
<script type='text/javascript'>
function affiche()
{
//code pour afficher le tableau avec les checkbox
}
function efface()
{
//code qui affiche le tableau sans les checkbox
}
</script>
dans le code php affiche le tabeau sans les cases dans une div et utilise l'ajax pour les modifier par exemple grace aux évènements onMouseOver et onMouseOut.
je ne suis pas sur à 100% que ce script fonctionne mais si ça peut t'aider à trouver une solution ... pourquoi pas.
Bon. J'ai fais des modifs sur le code...
JE me suis dit que par défaut (au chargement donc), les cases devaient être masqué.
Donc, dans mon CSS, j'ai mis display: none;
Maintenant, mes cases sont bien masquer lors du chargement (conseil de kust).
Dans mon code PHP, j'ai mis ceci (encore conseil de kust):
echo "<td class='$ColorCase'><p class='CaseCellule' id='$j$m$y' onMouseOver=\"document.getElementById('$j$m$y').style.display='block'\" onMouseOut=\"document.getElementById('$j$m$y').style.display='none'\"><input type='checkbox' name='$PrenomPersonne' value=''></p></td>";
Le hic, c'est que sa ne marche pas!
Pourquoi?
JE me suis dit que par défaut (au chargement donc), les cases devaient être masqué.
Donc, dans mon CSS, j'ai mis display: none;
Maintenant, mes cases sont bien masquer lors du chargement (conseil de kust).
Dans mon code PHP, j'ai mis ceci (encore conseil de kust):
echo "<td class='$ColorCase'><p class='CaseCellule' id='$j$m$y' onMouseOver=\"document.getElementById('$j$m$y').style.display='block'\" onMouseOut=\"document.getElementById('$j$m$y').style.display='none'\"><input type='checkbox' name='$PrenomPersonne' value=''></p></td>";
Le hic, c'est que sa ne marche pas!
Pourquoi?
Youpiii!!
Sa marche!
Merci xMILeY pour ce bon conseil!
Effectivement, ce n'était pas très cohérent...
Voici le code actuel:
PHP{
echo "<td class='$ColorCase'><p class='CaseCellule' onMouseOver=\"document.getElementById('$PrenomPersonne.$j/$m/$y').style.visibility='visible'\" onMouseOut=\"document.getElementById('$PrenomPersonne.$j/$m/$y').style.visibility='hidden'\"><input type='checkbox' name='$PrenomPersonne' class='CaseACocher' id='$PrenomPersonne.$j/$m/$y' value='$PrenomPersonne.$j/$m/$y'></p></td>";
}
CSS {
.CaseCellule {
text-align:center;
margin: 0px 0px 0px 0px;
}
.CaseACocher {
visibility: hidden;
}
}
HTML (résultat) {
<td class=''><p class='CaseCellule' onMouseOver="document.getElementById('Pascal.6/06/2010').style.visibility='visible'" onMouseOut="document.getElementById('Pascal.6/06/2010').style.visibility='hidden'"><input type='checkbox' name='Pascal' class='CaseACocher' id='Pascal.6/06/2010' value='Pascal.6/06/2010'></p></td>
}
Maintenant, au chargement, les cases à coché sont masqué. Lors du survol de la cellule du tableau (le <p>), elles apparaissent. Lorsque le curseurs quitte la cellule, elles disparaissent.
Seul souci maintenant, comment faire pour quel reste afficher lorsqu'elle sont coché? Sur quoi puis-je appuyer la condition et comment écrire la condition?
En tout cas, merci pour votre aide précieuse!
Sa marche!
Merci xMILeY pour ce bon conseil!
Effectivement, ce n'était pas très cohérent...
Voici le code actuel:
PHP{
echo "<td class='$ColorCase'><p class='CaseCellule' onMouseOver=\"document.getElementById('$PrenomPersonne.$j/$m/$y').style.visibility='visible'\" onMouseOut=\"document.getElementById('$PrenomPersonne.$j/$m/$y').style.visibility='hidden'\"><input type='checkbox' name='$PrenomPersonne' class='CaseACocher' id='$PrenomPersonne.$j/$m/$y' value='$PrenomPersonne.$j/$m/$y'></p></td>";
}
CSS {
.CaseCellule {
text-align:center;
margin: 0px 0px 0px 0px;
}
.CaseACocher {
visibility: hidden;
}
}
HTML (résultat) {
<td class=''><p class='CaseCellule' onMouseOver="document.getElementById('Pascal.6/06/2010').style.visibility='visible'" onMouseOut="document.getElementById('Pascal.6/06/2010').style.visibility='hidden'"><input type='checkbox' name='Pascal' class='CaseACocher' id='Pascal.6/06/2010' value='Pascal.6/06/2010'></p></td>
}
Maintenant, au chargement, les cases à coché sont masqué. Lors du survol de la cellule du tableau (le <p>), elles apparaissent. Lorsque le curseurs quitte la cellule, elles disparaissent.
Seul souci maintenant, comment faire pour quel reste afficher lorsqu'elle sont coché? Sur quoi puis-je appuyer la condition et comment écrire la condition?
En tout cas, merci pour votre aide précieuse!
