comment afficher/masquer un bout de page

[ran-tan-plan]

hello,

ce nouveau forum est tellement bien fait que il me donne envie d'insérer un script a mon site. Seulement, je ne sais pas comment le faire.

Il s'agirait de pouvoir affihcer/masquer une partie de la page comme lorsqu'on clique sur "réponse rapide" dans un topic de ce forum. J'ai vu que c'est du javascript, mais je ne trouve pas de tuto concernant l'utilisation de cette fonction.

Vous pouvez m'aider?

merci

[Havrest]

Ben en fait, tu appelles une fonction qui permet d'afficher un "<div>" qui étais auparavent invisible.

Le div qui est amené à disparaitre(la partie en rouge est la plus importante) :

<div align='left' id='qr_open' style="display:none;position:relative;">

    <form name='REPLIER' action="http://www.pcinpact.com/forum/index.php?" method='post'>

    <input type='hidden' name='act' value='Post' />

    <input type='hidden' name='CODE' value='03' />

    <input type='hidden' name='f' value='18' />

    <input type='hidden' name='t' value='9597' />

    <input type='hidden' name='st' value='' />

    <input type='hidden' name='auth_key' value='2b99a7a46760c23b833ec99df23ef55d' />

    <!-- TITLE DIV -->

    <div class="tableborder">

      <div class='maintitle'><img src='style_images/1/nav_m.gif' border='0'  alt='>' width='8' height='8' /> Réponse rapide</div>

.......................................................................................

    <input type='submit' name='preview' value='Plus d'options' class='forminput' />

       <input type='button' name='qrc' onclick="ShowHide('qr_open','qr_closed');" value='Fermer la fenêtre de réponse rapide' class='forminput' />

   </div>

   </div>

    </form>

</div>

La partie en rouge montre que l'on a donné un nom à ce bloc et qu'il est invisible par défault:

son nom : qr_open

code pour le rendre invisible :

style="display:none;position:relative;"

Appel de la fonction :

<a href="javascript:ShowHide('qr_open','qr_closed');" title="Ouvrir la fenêtre de réponse rapide" accesskey="f"><img src='style_images/1/t_qr_pci.gif' border='0'  alt='Réponse rapide' /></a>

Alors, ici on appelle la fonction qui permet d'afficher le bloc invisible par défault.

Le script (et la fonction):

<script language='javascript' type='text/javascript'>
   <!--
function ShowHide(id1, id2) {
  if (id1 != '') expMenu(id1);
  if (id2 != '') expMenu(id2);
}

function expMenu(id) {
  var itm = null;
  if (document.getElementById) {
 itm = document.getElementById(id);
  } else if (document.all){
 itm = document.all[id];
  } else if (document.layers){
 itm = document.layers[id];
  }

  if (!itm) {
   // do nothing
  }
  else if (itm.style) {
 if (itm.style.display == "none") { itm.style.display = ""; }
 else { itm.style.display = "none"; }
  }
  else { itm.visibility = "show"; }
}
   //-->
   </script>

Ici on retrouve la fonction ShowHide(id1,id2) que l'on a déjà rencontré dans le lien qui y fait appel où les ids était égaux à:

id1 = qr_open

id2 = qr_closed

Dans le id1, on retrouve le nom de notre bloc (<div>). L'id2 correspond au nom que nous allons donner au bloc une fois visible pour connaitre son status (ouvert ou fermé).

Etudions de plus près le script:

En fait la fonction ShowHide à laquelle nous faisons appel, se contente de vérifier si les valeurs sont vides et fait appel à une autre fonction:

function ShowHide(id1, id2) {
  if (id1 != '') expMenu(id1);// si id1 n'est pas vide, on appel expMenu(id1), soit la fonction expMenu avec comme valeur id1 ici qr_open
  if (id2 != '') expMenu(id2);// de même avec id2
}

La fonction expMenu() permet quant à elle permet de donner une valeur à itm qui serviras dans la fonction suivante.

Pour finir, on regarde si le bloc est visible et si il n'est pas visible:

if (itm.style.display == "none")

on le rend visible:

itm.visibility = "show";

et vis versa !

Voilà j'espère avoir été le plus complet et le plus clair possible !

Au plaisir de t'aider !

[ran-tan-plan]

n'ayant jamais essayé de programmer en javascript, je dois dire que je ne comprend pas grand chose a ces fonctions. Mais par chance je n'aurai pas besoin de m'en préocuper dans un premier temps, puisque tout ce que j'ai a changer est le contenu du <div> et le lien.

Voila, je te remercie de ta réponse bien détaillée (mais qui a quand meme du te prendre un moment pour la rédiger ). Je devrais normalement m'en sortir a partir de la base que tu m'as donné

Thanks!

[ran-tan-plan]

en fait, c'est normal que ce script ne marche pas lorsqu'il est inclu dans un <table> ?

[Havrest]

Aucune idée, il marche quand il est entre les balises <head></head> ?

Sinon, de rien, ça fait plaisir de se rendre utile !

[sky99]

normalement ça fonctionne a peu pres n'importe ou entre les <body> et </body>

teste ton code au validateur HTML pour verfier :

http://validator.w3.org/