Discussion :

[eshin]

Bonjour,
j'essaye de mettre en pratique cet article très intéressant des tutos qui a l'avantage d'utiliser un code simple et compréhensible pour un novice comme moi !

Cependant je me demande comment utiliser ce code si l'on a plusieurs popups différentes sur une même page ?
Dois-je passer forcement par jquery (comme dans l'article original) ou php pour inclure des variables ?

La solution la plus simple serait surement d'acheter lightview mais je préfèrerai utiliser une technique "maitrisée" car il s'agit de mon propre site qui me sert aussi d'apprentissage.

Pour illustrer ma demande voici mon site en construction, et pour l'instant la popup n'est accessible qu'en cliquant sur les images des résultats en bas de pages.
Je vous remercie de votre attention.

[eckerdecker]

Bonjour,

Pour commencer, quelques remarques, choses que j'ai repéré au hasard du coup d'oeil que j'ai jeté sur ton code :

1/ Il n'est pas recommandé de placer du contenu "complexe" dans une balise <a>, par complexe j'entends un <div> notamment. Il vaut mieux se contenter d'images et de texte grand maximum. Je ne saurai pas comme ça te dire pourquoi mais j'ai déjà eut des soucis avec ce genre de choses. Pour remplacer je mettrai simplement

Code :

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

1
2
<div id="actug" onclick="showDiv();">
  <img ...

2/ Lorsque tu fixe un id à un élément il doit être unique, dans ton cas tu as utilisé deux fois l'id "actug", deux fois l'id "actud", quatre fois l'id "txt". Il faut utilisé l'attribut class dans ce genre de cas.

En ce qui concerne ta demande : il te suffit de dupliquer ton div id="hideshow", en modifiant l'attribut id justement, en autant de popups que tu as besoin

Code :

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

1
2
3
4
5
6
7
8
9
<div id="hideshow1">
  ...
</div>
<div id="hideshow2">
  ...
</div>
<div id="hideshow3">
  ...
</div>

Il te faut également modifier les deux fonctions javascript

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
function hideDiv(popupId) {
  if (document.getElementById) // DOM3 = IE5, NS6
    document.getElementById(popupId).style.visibility = 'hidden';
  else if (document.layers) // Netscape 4
    eval("document." + popupId + ".visibility = 'hidden'");
  else // IE 4
    eval("document.all." + popupId + ".style.visibility = 'hidden'");
}
function showDiv(popupId) {
  if (document.getElementById) // DOM3 = IE5, NS6
    document.getElementById(popupId).style.visibility = 'visible';
  else if (document.layers) // Netscape 4
    eval("document." + popupId + ".visibility = 'visible'");
  else // IE 4
    eval("document.all." + popupId + ".style.visibility = 'visible'");
}

Je pars du principe que tes fonction javascript fonctionnaient bien (je ne fais pas ce genre de tests, au diable les très vieux navigateurs ^^).

Enfin, pour les ouvrir :

Code :

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

1
2
3
4
5
6
<div class="actug" onclick="showDiv('hideshow1');">
  ...
</div>
<div class="actud" onclick="showDiv('hideshow2');">
  ...
</div>

Et bien sûr, dans ton popup hideshow1 par exemple

Code :

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

<a href="javascript:hideDiv('hideshow1');">...</a>

pour le fermer

Sur cette base libre à toi d'utiliser la techno de ton choix pour générer tes popups, tu pourrais même ne conserver qu'un popup et charger son contenu via un appel ajax, mais c'est une autre histoire ... ^^

[12monkeys]

Bonsoir

1/ Il n'est pas recommandé de placer du contenu "complexe" dans une balise <a>, par complexe j'entends un <div> notamment. Il vaut mieux se contenter d'images et de texte grand maximum. Je ne saurai pas comme ça te dire pourquoi mais j'ai déjà eut des soucis avec ce genre de choses.

Cela s'explique tout simplement par le fait qu'un <a> élément de type en ligne ne peut pas contenir d'élément de type bloc comme les div, p...

[eshin]

Premièrement c'est très aimable à toi de me prévenir sur mes erreurs de code et imperfections. A force de tester je fini par oublier certaines règles élémentaires et si tu ne me l'avais pas dit, je ne sais pas si je m'en serai aperçu un jour !

Concernant ma requête, ta réponse semble parfaitement convenir à ce que je souhaite. Je test la variable JS dès demain matin voir si cela marche effectivement.

[eckerdecker]

Cela s'explique tout simplement par le fait qu'un <a> élément de type en ligne ne peut pas contenir d'élément de type bloc comme les div, p...

hmmm ... et avec un display:block sur un <a> ça passerait ? J'ai comme un souvenir que firebug m'avait carrément réinterprété un <a><div></div></a> ... mais peut-être qu'il y avait d'autres soucis, je ne me rappel plus et depuis je l'ai codé différemment.

[12monkeys]

Non ça ne passera pas, le CSS permet de changer l'apparence, l'affichage, mais pas l'état intrinsec de l'élément...

Un <a><div></div></a> ne passera pas la validation...

[eshin]

Cela marche parfaitement et j'ai eu un petit rafraichissement de mémoire javascript en même temps.
Merci beaucoup de votre aide !