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

Résolu/Fermé
Fonx2 Messages postés 331 Date d'inscription dimanche 6 avril 2008 Statut Membre Dernière intervention 5 mai 2013 - 15 juin 2010 à 11:11
Fonx2 Messages postés 331 Date d'inscription dimanche 6 avril 2008 Statut Membre Dernière intervention 5 mai 2013 - 15 juin 2010 à 17:30
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...
A voir également:

4 réponses

Fonx2 Messages postés 331 Date d'inscription dimanche 6 avril 2008 Statut Membre Dernière intervention 5 mai 2013 132
15 juin 2010 à 17:30
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
Fonx2 Messages postés 331 Date d'inscription dimanche 6 avril 2008 Statut Membre Dernière intervention 5 mai 2013 132
15 juin 2010 à 11:38
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
xMiLeY Messages postés 68 Date d'inscription jeudi 3 juin 2010 Statut Membre Dernière intervention 15 juin 2010 7
15 juin 2010 à 11:41
tu essaye de faire disparaite ta td ou ton p, c'est ta checkbox qu'il faut cacher!
0
Fonx2 Messages postés 331 Date d'inscription dimanche 6 avril 2008 Statut Membre Dernière intervention 5 mai 2013 132
15 juin 2010 à 11:47
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
Fonx2 Messages postés 331 Date d'inscription dimanche 6 avril 2008 Statut Membre Dernière intervention 5 mai 2013 132
Modifié par Fonx2 le 15/06/2010 à 11:55
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
Fonx2 Messages postés 331 Date d'inscription dimanche 6 avril 2008 Statut Membre Dernière intervention 5 mai 2013 132
Modifié par Fonx2 le 15/06/2010 à 12:07
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
xMiLeY Messages postés 68 Date d'inscription jeudi 3 juin 2010 Statut Membre Dernière intervention 15 juin 2010 7
15 juin 2010 à 12:58
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
Fonx2 Messages postés 331 Date d'inscription dimanche 6 avril 2008 Statut Membre Dernière intervention 5 mai 2013 132
Modifié par Fonx2 le 15/06/2010 à 17:03
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