afficher/masquer un calque

**psychoBob** · 09/02/2006, 14h11

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

**SpaceFrog** · 09/02/2006, 14h12

**psychoBob** · 09/02/2006, 14h24

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

**SpaceFrog** · 09/02/2006, 14h33

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

et ne fonctionne qu'à l'occasion.

ben faut juste l'activer

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

**psychoBob** · 09/02/2006, 16h06

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

J'ai commis cela :

dans la balise head

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<!-- le lien ci dessous affiche/masque la div (en théorie...) -->
<a href="#" onClick="afficheDiv; return false;">
Merci de lire les conditions générales de participation
</a>
 
<!--la div qui doit s'afficher/se masquer -->
<div class="baliseDiv" style="visibility:hidden">
texte texte texte texte texte ...
</div>

Résultat :

nul

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.

**denisC** · 09/02/2006, 16h16

Envoyé par psychoBob

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

C'est vraiment dans la

**SpaceFrog** · 09/02/2006, 16h20

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>
 
 
 
 
<!-- le lien ci dessous affiche/masque la div (en théorie...) -->
<a href="#" onClick="afficheDiv(); return false;">
Merci de lire les conditions générales de participation
</a>
 
<!--la div qui doit s'afficher/se masquer -->
<div class="baliseDiv" style="visibility:hidden" id="madiv">
texte texte texte texte texte ...
</div>
</body>
</html>

**psychoBob** · 09/02/2006, 16h31

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.

**denisC** · 09/02/2006, 16h35

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).

**SpaceFrog** · 09/02/2006, 16h37

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

mais display = none ou block

**psychoBob** · 09/02/2006, 16h41

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

je viens de faire ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**denisC** · 09/02/2006, 16h51

Envoyé par psychoBob

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

**psychoBob** · 09/02/2006, 16h57

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Johnbob** · 09/02/2006, 17h02

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

Voilà une correction:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**SpaceFrog** · 09/02/2006, 17h05

tu vas voir jung on va finir par le convertir au javascript ...

**psychoBob** · 09/02/2006, 17h09

ça fonctionne impeccable, merci beaucoup !

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...

**Johnbob** · 09/02/2006, 17h15

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

)

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

**psychoBob** · 09/02/2006, 19h48

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

**denisC** · 10/02/2006, 08h35

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.

**psychoBob** · 10/02/2006, 12h25

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 ?

afficher/masquer un calque

JavaScript

Discussions similaires

Partager

Partager