afficher/masquer un calque

Version imprimable

09/02/2006, 14h11
psychoBob

afficher/masquer un calque

Bonjour,

je suis allergique au javascript en général, mais là pas de pot j'en ai besoin:

Je dois afficher/masquer un calque en cliquant sur un lien: quand on clique lun lien, la div s'affiche et le reste jusqu'à ce que l'on reclique le lien (pas comme en CSS).
La fonction doit être compatible pour IE et firefox (et les autres si possible).

Quelqu'un a t'il un bout de code tout prêt ?

Merci d'avance
09/02/2006, 14h12
SpaceFrog

:faq:
09/02/2006, 14h24
psychoBob

Bon j'ai survolé un tutoriel javascript histoire de voir si je trouvais le bout de code souhaité.

Mais rien qu'à lire ça j'ai plein de boutons rouges partout. Je supporte pas javascript, ce langage qui fait bip bip et qui fonctionne qu'à l'occasion.

Je vais utiliser un lien avec une ancre, ça fera l'affaire.

Merci
09/02/2006, 14h33
SpaceFrog

pauvre javascript, un gentil petit language tout mignon qui focntionne à merveille quand on le caresse dans le sens du poil ...

Citation:

et ne fonctionne qu'à l'occasion.

ben faut juste l'activer :lol:

fais juste une recherche sur le forum avec style.display ...

Bon allez, j'ai fait un effort, histoire de pas mourrir idiot.

J'ai commis cela :

dans la balise head
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <script language="javascript"> function afficheDiv(); { var baliseDiv; if(window.document.all) {baliseDiv=window.document.all.premiereBaliseDiv.style;} else if(document.layers) {baliseDiv=window.document.premiereBaliseDiv;} baliseDiv.vsisibility="visible";} </script>
Dans la page :
Code:

1 2 3 4 5 6 7 8 9 10  <a href="#" onClick="afficheDiv; return false;"> Merci de lire les conditions générales de participation </a>  <div class="baliseDiv" style="visibility:hidden"> texte texte texte texte texte ... </div>
Résultat : :lol: nul :cry:

En fait la balise prend le même espace que si tout le texte était affiché, mais ce dernier reste caché (double effet kissscript ?)
Bien sûr quand je clique sur le lien, il se fiche de moi en ne faisant aucun action. Même en insistant, en cliquant plusieurs fois, rien à faire ça ne fonctionne pas.

Auriez-vous un peu d'huile pour faire coulisser tout ça?

(NB: je ne précise pas que je n'ai rien compris au code, je l'ai pompé sur un tutoriel à 4 balles. Si une âme charitable répart ce lamentable bout de code, je la questionnerai sans vergogne par la suite).

Merci d'avance.

09/02/2006, 16h16
denisC

Citation:

Envoyé par psychoBob

Auriez-vous un peu d'huile pour faire coulisser tout ça?

C'est vraiment dans la :faq:

pfiou ...
enfin content de t'avoir poussé à exploré un peu plus loin ...
Tu te rendras vite compte que javascript n'est pas si compliqué que tu le penses ...
tu es allé cherché bien trop loin !!
Code:

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 <script language="javascript"> function afficheDiv() { document.getElementById('madiv').style.visibility='visible'; } </script> </head> <body>  <a href="#" onClick="afficheDiv(); return false;"> Merci de lire les conditions générales de participation </a>  <div class="baliseDiv" style="visibility:hidden" id="madiv"> texte texte texte texte texte ... </div> </body> </html>

09/02/2006, 16h31
psychoBob

Euh oui, merci pour ton code.

Mais alors, avant de poser quelques questions pour comprendre, j'aimerai bien corriger ces deux problèmes :

1) Avant de cliquer sur le lien, la div prend toute l'espace qu'elle prendrait normalement si elle était ouverte, mais le texte n'est pas affiché. Quand on clique, le texte s'affiche dans la div déjà ouverte.
Bien sur normalement la div devrait être refermée, le texte dedans. En cliquant le lien la div devrait alors s'ouvrir, poussant fièrement les éléments du dessous et affichant majestueusement le texte qu'elle cachait en son sein!
Là c'est pas tout à fait ça quand même.
J'ai placé un height auto dans la feuille de style (je précise à tout hasard).

2) Comment je referme la balise en cliquant le lien?

nb: en php/mysql je me débrouille pas trop mal (je viens de terminer tout un forum) mais javascript, je connais pas. J'ai trop d'apriori peut être.
09/02/2006, 16h35
denisC

Citation:

Envoyé par psychoBob

1) Avant de cliquer sur le lien, la div prend toute l'espace qu'elle prendrait normalement si elle était ouverte, mais le texte n'est pas affiché. Quand on clique, le texte s'affiche dans la div qui semble en fait déjà ouverte, mais vide.

Cf mon lien sur la FAQ..... (pas envie de le recopier).
09/02/2006, 16h37
SpaceFrog

comme je le diasais tout au début ...
n'utilise pas visibility = hidden ou visible

mais display = none ou block

Non j'ai rien compris, je comprend rien à ce langage.

je viens de faire ça:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<script language="javascript"> 
function afficheDiv() 
{ 
document.getElementById('madiv').style.display = "block"; 
} 
 
</script> 
 
<a href="#" onClick="afficheDiv(); return false;"> Merci de lire les conditions générales de participation</a>
<div class="baliseDiv" style.display = "none" id="madiv"> 
texte
</div>

Là tout s'affiche et rien n'est interactif.

09/02/2006, 16h51
denisC

Citation:

Envoyé par psychoBob

<div class="baliseDiv" style="display:none" id="madiv">

Mais là, c'est même plus du javascript, juste du HTML

Effectivement, la faute est idiote,désolé.

Je viens de tenter cela (je suis dans le noir avec les bras devant, dites moi ou est la sortie, c'est pas drole)
Code:

1 2 3 4 5 6 7 8 9 <script language="javascript"> function afficheDiv() { document.getElementById('madiv').style.display='block'; } </script> <a href="#" onClick="afficheDiv; return false;"> Merci de lire les conditions générales de participation</a> <div class="baliseDiv" style="display:none" id="madiv"> </div>
Cela ne onctionne pas, la div est cachée, mais ne s'ouvre plus (ce qui évite au moins de constater qu' elle ne se referme pas en cliquant le lien).

**edit** je viens d'écrire display:block dans la fonction aussi, par curiosité, mais c'est pareil, le fiasco complet.

Ton code est pas si mal pour quelqu'un d'allergique au javascript ;)

Voilà une correction:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript"> 
function switchDiv() 
{
var madiv = document.getElementById('madiv');
if (madiv.style.display=="none") madiv.style.display = "";
else madiv.style.display = "none";
}
</script> 
 
<a href="#" onClick="switchDiv();"> Merci de lire les conditions générales de participation</a>
<div class="baliseDiv" style="display:none;" id="madiv"> 
texte
</div>

09/02/2006, 17h05
SpaceFrog

tu vas voir jung on va finir par le convertir au javascript ... :wink:
09/02/2006, 17h09
psychoBob

ça fonctionne impeccable, merci beaucoup ! :D

je ne marque pas résolu tout de suite parce que je dois filer à la poste et en revenant je vais vous poser quelques questions parce que je ne n'aime pas utiliser du code que je ne comprend pas.

Encore merci, en attendant.

N.B : Je dois bientot attaquer un éditeur de texte en javascript, vous allez morfler les gars...
09/02/2006, 17h15
Johnbob

:ccool:

SF > La conversion va être difficile (c'est javascript quand même, ça a tendance à rendre chauve quand on débute :aie: )

psychoBob > Pas de problème, on est là pour ça et l'équipe a été renforcée 8)
09/02/2006, 19h48
psychoBob

Bon alors, voilà une question pas piquée des hannetons histoire de pouvoir faire croire aux autres que c'est moi qui a écrit le code (c'est pas vrai je dirais que c'est vous)

Quelle est le rôle de cette fonction: document.getElementById ? Déterminer un élément ?

Bon si vous voulez pas répondre pour ça, je vais de toute façon aller chercher sur google. Je pensais avoir plus de question mais en fait c'est simple à comprendre.

Encore merci :wink:
10/02/2006, 08h35
denisC

Citation:

Envoyé par psychoBob

Quelle est le rôle de cette fonction: document.getElementById ? Déterminer un élément ?

C'est une fonction du DOM (Document Object Model, norme du W3C), implementée par tous les navigateurs (les vrais) qui retourne un élément HTML (sous forme d'objet) ayant l'id donné. Comme l'attribut id doit avoir une valeur unique pour chaque élément (norme HTML) ça ne retourne qu'un seul élement.
10/02/2006, 12h25
psychoBob

Merci pour ta réponse DenisC

J'en profite avec une petite question, qui n'est pas à proprement parlé du javascript mais qui vient du sujet de ce post :

Lorsque l'on clique sur le lien pour ouvrir la div, toute la page remonte, comme avec un signet. C'est assez désagréable, car si la page est longue, on remonte tout, pour ensuite redescendre avec la barre de scroll, chercher l'endroit ou la div s'est ouverte etc...

Il ne me semble pas que cela fasse ça d'ordinaire avec ce genre de système.

Dans le lien il y a juste a href="#" . J'ai essayé sans rien dans les "" mais ça bug sous firefox. J'ai essayé une ancre mais le problème est pire.

Comment puis-je faire pour que lorsque l'on clique le lien pour ouvrir la div, celle ci s'ouvre sans que la position de la page ne soit modifiée ?

Code:

1
2
3
4
5
<a href="javascript:switchDiv();"> Merci de lire les conditions générales de participation</a>
 
[ou]
 
<p onclick="switchDiv();"> Merci de lire les conditions générales de participation</p>

Attention:
a = balise inline.
p = balise block.

(voir ce post)

10/02/2006, 12h54
psychoBob

Merci Jung

J'ai lu le post et j'ai placé un span pour éviter le retour à la ligne. ça fonctionne bien, j'aurais juste voulu conserver l'effet du cursor en passant sur le lien, qui n'en est plus un.

Je veux dire: quand on clique sur un lien, la flèche se transforme en main normalement. Et bien maintenant comme ce n'est plus un lien, elle ne se transforme pas et reste comme si c'était du texte totalement statique.
Ca fait bizarre je trouve.

Une idée ?

**edit** pour conserver l'aspect d'un lien définie par la feuille de style, j'ai placé les balises <span></span> au milieu de <a></a>. ça me donne un lien bleu comme les autres.
Mais la main n'apparait pas pour autant au survol. Essayer depuis la feuille de style peut être ?
10/02/2006, 13h17
psychoBob
Bon j'ai résolu ça avec un style pour le span :
Code:

1 2 3 4 5 .java { cursor:pointer; color:#0000FF }
Merci pour l'astuce :wink: