PHP et javascript: masquer un élément...

Résolu/Fermé
Signaler
Messages postés
331
Date d'inscription
dimanche 6 avril 2008
Statut
Membre
Dernière intervention
5 mai 2013
-
Messages postés
331
Date d'inscription
dimanche 6 avril 2008
Statut
Membre
Dernière intervention
5 mai 2013
-
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...

4 réponses

Messages postés
331
Date d'inscription
dimanche 6 avril 2008
Statut
Membre
Dernière intervention
5 mai 2013
131
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>";
1
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.
0
Messages postés
331
Date d'inscription
dimanche 6 avril 2008
Statut
Membre
Dernière intervention
5 mai 2013
131
Oui, mais il faut bien dire que je veux qu'elle soit masquer lors du chargement de la page non (enfin si j'ai bien compris)? Et de toute façon, sa ne me dit pas pourquoi sa ne marche pas!

En admettant que je veuille utiliser onMouseOver et onMouseOut, comment les utiliser?
0
Messages postés
68
Date d'inscription
jeudi 3 juin 2010
Statut
Membre
Dernière intervention
15 juin 2010
7
tu essaye de faire disparaite ta td ou ton p, c'est ta checkbox qu'il faut cacher!
0
Messages postés
331
Date d'inscription
dimanche 6 avril 2008
Statut
Membre
Dernière intervention
5 mai 2013
131
Ben en fait, comme la check box est dans le <p>, masquer le <p> masquera la checkbox logiquement et l'avantage, c'est que dès que je survolerai la case (et non pas uniquement la checkbox), la case devrai apparaitre.

Je fais sa parce qu'une case à cocher, c'est pas bien gros...
0
Messages postés
331
Date d'inscription
dimanche 6 avril 2008
Statut
Membre
Dernière intervention
5 mai 2013
131
Heu... bien sur, j'avais oublié de préciser: si la case à cocher est séléctionné, elle doit resté visible.
Je pensais faire sa avec onSelect...??
0
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();"

<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.
0
Messages postés
331
Date d'inscription
dimanche 6 avril 2008
Statut
Membre
Dernière intervention
5 mai 2013
131
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?
0
Messages postés
68
Date d'inscription
jeudi 3 juin 2010
Statut
Membre
Dernière intervention
15 juin 2010
7
Sur le onmouseover, cache ta checkbox et pas le <p>.
la en gros, tu dis de pas afficher la case et onmouseover l'afficher. Mais comment tu veux aller dessus si elle est cachée? =)
0
Messages postés
331
Date d'inscription
dimanche 6 avril 2008
Statut
Membre
Dernière intervention
5 mai 2013
131
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!
0