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

Vue hybride

Discussions similaires

Partager

Partager