[RESOLU] JAVASCRIPT : afficher/masquer div

Astier · Le 13/08/2008, à 17:18

Bonjour,

J'ai profité de mes vacances pour me mettre au HTML, CSS et maintenant javascript... Et je commence à avoir des sueurs froides...

Alors, voici le fichier html avec dedans tout ce qu'il faut pour le style et le script qui pose problème :

<html>
<head>

<style type="text/css">
.hand
{
  cursor:pointer;
  font-size:1.5em;
}

ul.periode
{ 
  list-style-type:circle;  
}

span.periode
{ 
  font-variant:small-caps;
  font-size:1.5em;
}

ul.lect
{ 
  margin-top:10px;
  list-style-type:square;
  list-style-position:inside;
}

ul.lect li
{ 
  text-align:justify;
  margin-top:10px;
  padding-bottom:15px;
}

div.resum
{ 
  display:none;
  margin-top:-10px;
  margin-left:-30px;
}

div.resum img
{ 
  float:left;
  width:100px;
  height:150px;
  padding:10px 10px 5px 0px;
}

span.titre
{ 
  font-size:1.5em;
}

</style>



<SCRIPT TYPE="text/javascript">
function curseur (obj)
{
  obj.className = "hand";
}

function curseuroff (obj)
{
  obj.style = "";
}



function showresum (resum)
{
  while (document.getElementById(resum+i) !=null)
    {
      if (document.getElementById(resum+i).style.display == "none")
        {
          document.getElementById(resum+i).style.display = "block";
        }

      else
        {
          document.getElementById(resum+i).style.display = "none";
        }
i++;
    }
}

</SCRIPT>

</head>

<body>

<ul>
  <li class="periode"><span class="periode">Juillet/Août 2008 :</span>
  
<ul class="lect">
  
  
  <li>
  <span class="titre" onmouseover="curseur (this)"
  onmouseout="curseuroff (this)" onclick="showresum (resum)"><i>Romain Gary, le caméléon</i>, Myriam
  Anissimov</span>
  <div class="resum" id="resum1">
    
    <p> &laquo;&nbsp;Ne dis pas forcément les choses comme elles se sont passées,
        mais transforme-les en légendes et trouve le ton de voix qu'il
        faut pour les raconter&nbsp;&raquo; : c'est ainsi que Romain Gary, dans
        <i>La nuit sera calme</i>, s'expliquait sur l'extraordinaire
        aventure de sa vie.<img src="Couvertures/garycam.png" alt="gary"></p>
    <p>Né en Lituanie, dans une famille
        juive de Wilno, Romain Kacew émigre sur la Côte d'Azur à l'âge
        de quatorze ans. En juillet 1940, rejoignant au péril de sa
        vie Londres et le général de Gaulle, il combat en héros dans
        les forces aériennes de la France libre.</p>
    <p>Sur ses origines juives, sa jeunesse et ses exploits au cours de la
        guerre, Gary ne cessera de réinventer une réalité-fiction qui
        est à la source de son oeuvre. À mesure qu'il crée sa propre
        légende, devenant un écrivain célèbre avec <i>Éducation
        européenne</i> et <i>Les Racines du ciel</i>, Gary cherche à
        échapper à son propre personnage en usant de pseudonymes.</p>
    <p>Multiplier les masques, telle est alors l'obsession de ce
        séducteur aux mille visages, consul de France à Los Angeles et
        mari de l'écrivain Lesley Blanch puis de l'actrice Jean
        Seberg. Poussant jusqu'au bout ce désir de s'auto-engendrer,
        Gary invente Émile Ajar, un écrivain fictif " personnifié "
        par son cousin Paul Pavlowitch et obtient une deuxième fois le
        prix Goncourt en 1975 pour <i>La Vie devant soi</i>. Après
        cette ultime mystification, Romain Gary se suicide en
        1980.</p>
    <p>Explorer la vie réelle d'un personnage aussi doué
        pour l'affabulation créatrice, tel fut le pari de Myriam
        Anissimov. C'est en se fondant sur de nombreux témoignages,
        entretiens et documents inédits à Wilno, Londres, Paris et New
        York, en dépouillant les archives personnelles de l'écrivain
        et de ses proches, qu'elle a mené à bien cette enquête
        magistrale sur l'un des grands écrivains du XXe siècle.</p>
    Source : <a href="http://www.gallimard.fr/">Gallimard</a>.
  </div>
   </li>
  

  <li>
  <span class="titre" onmouseover="curseur (this)"
  onmouseout="curseuroff (this)" onclick="showresum (resum)"><i>Révolution et Empire,
  1783-1815</i>,
  Jean-Pierre Jessenne</span>
  <div class="resum" id="resum2">
<p>1783-1815, ces deux bornes chronologiques indiquent l'intention de
l'ouvrage : embrasser à la fois la période prérévolutionnaire, la
Révolution et l'Empire. Afin de restituer la complexité<img src="Couvertures/revemp.jpg"
  alt="révolution et empire"> fondamentale
de ces années, la démarche associe un récit chronologique et une étude
des phénomènes de longue durée, dont la Révolution n'est qu'un des
moments.</p>
<p>Six chapitres retracent la dynamique révolutionnaire. Ils sont
construits à partir de la présentation liminaire d'un
événement-rupture qui marque, chaque fois, le franchissement d'une
étape décisive de la Révolution. L'époque impériale, par sa durée, est
l'objet d'un traitement plus thématique. Enfin quatre chapitres
synthétiques dressent des tableaux de la France en 1783, 1793, 1802 et
1815. Ils prennent la mesure des transformations plus lentes qui
modifient les comportements démographiques, l'économie, les structures
sociales et les attitudes culturelles.</p>
<p>Cartes, schémas, textes, glossaire viennent en appui du texte. Ils
font du livre un outil indispensable pour les étudiants en
  Histoire.</p>
Source : Quatrième de couverture.
  </div>
  </li>
</ul>
</body> </html>

Le but est de "déplier" le contenu du div portant l'id "resum i" ; je me suis inspiré de cette page http://www.clubic.com/forum/programmation/javascript-afficher-cacher-du-texte-id178328-page1.html mais malheureusement je ne parviens pas à le faire fonctionner. Si je remplace la variable i par un id existant, le script fonctionne mais le passage à la variable coince. Et je dois bien avouer que j'ai pas mal de difficultés encore à saisir le fonctionnement de javascript

Merci par avance pour votre aide et vos explications.

A bientôt.

Dernière modification par Astier (Le 14/08/2008, à 20:18)

dekans · Le 13/08/2008, à 17:32

essai de définir ta variable i et de l'initialiser à 0 juste avant ta boucle 'while'

Astier · Le 13/08/2008, à 17:42

En initialisant la variable i à 0 juste avant la boucle while, je ne vois aucun changement : le texte dans le div n'apparaît pas

Sinon, j'ai essayé de passer par document.getElementByClassName :

function showresum ()
{
  var r = document.getElementByClassName("resum");
  var i;
  for (i=0;i<r.length;i++)
    if (r[i].style.display == "none")
      {
        r[i].style.display = "block";
      }

    else
      {
        r[i].style.display = "none";
      }
}

mais là encore je dois passer à côté de quelque chose

Merci pour vos éclaircissements.

A bientôt.

nordinatueur · Le 13/08/2008, à 18:47

Euh ça fait un petit moment que je n'ai plus fait de Javascript mais essaye de remplacer :

 r[i].style.display = "block";

par :

 r[i].style.display = "inline";

Astier · Le 13/08/2008, à 20:13

Aucun changement en remplaçant block par inline. Est-ce que ça ne viendrait pas plutôt de la boucle ou d'autre chose ?

Merci, à+

Astier · Le 13/08/2008, à 21:24

Ça y est... Un oubli d'accolade Voici le code :

function showresum ()
{
  var r = document.getElementsByClassName("resum");
  var i;
  for (i=0;i<r.length;i++)
    {
      if (r[i].style.display == "none")
        {
          r[i].style.display = "block";
        }

      else
        {
          r[i].style.display = "none";
        }
    }
}

Cependant, ainsi, tous les div de la classe resum sont dépliés. Or je souhaiterais que seul le div correspondant au span précédent soit déplié. Auriez-vous une idée ?
Je suppose qu'il faut travailler à ce moment-là avec les id en leur mettant au span et au div correspondant un même "indice" dans l'id ?

Merci pour vos conseils, idées, corrections,

A bientôt.

Keldath · Le 13/08/2008, à 21:36

Bonsoir,

Tu as plusieurs problèmes dans ton Javascript :

1) Dans ta fonction curseuroff (obj), tu voulais sans doute écrire ceci :

function curseuroff (obj)
{
    obj.className = "";
}

obj.style="" ne signifie rien (tu ne peux pas mettre une chaîne vide dans l'attribut style pour faire simple).

2) Tes appels à la fonction showresume(), tu envoies de mauvais paramètres : tu souhaites afficher le div resum1/resum2 en fonction du sujet où tu cliques, tu dois donc envoyer le paramètre 1 ou 2 à ta fonction showresum() (où il y a quelques erreurs aussi voir plus bas)
- onclick="showresum (1)" pour ton premier paragraphe
- onclick="showresum (2)" pour ton second paragraphe

3) Ta fonction showresume(resum) :
Le paramètre passé (resum) n'est pas le bon, ainsi que les paramètres passé à la fonction getElementById(). Cf ci-dessus, ta fonction reçoit le numéro du paragraphe à afficher/cacher, ce chiffre c'est i :

function showresum (i)
{
      if (document.getElementById('resum'+i).style.display == "none")
        {
          document.getElementById('resum'+i).style.display = "block";
        }

      else
      {
	document.getElementById('resum'+i).style.display = "none";
      }
}

Tes div ont pour ID "resumX" avec X égal à 1 ou 2. Tu dois donc concaténer la chaîne "resum" (et comme c'est une chaîne, tu dois mettre des guillemets ou quotes autour, sinon il sera interprêté comme une variable) avec le numéro passé en paramètre, et hop le tour est joué.

EDIT : j'ai également retiré la boucle while et le i++, avec ce que je t'ai expliqué je n'en vois pas l'intérêt, mais du coup je n'ai pas du faire comme tu le souhaitais je suppose : ton objectif à terme est peut-être d'avoir plusieurs div, et de tous les masquer sauf celui cliqué ?

EDIT 2 : Fatigue... j'viens de voir tes autres messages avec ta boucle for. En gros, tu dois tout cacher sauf le paragraphe désiré, mes autres modifs plus haut restent valables, sauf pour la fonction showresum() qui devient ceci :

function showresum (num_paragraphe)
{
  var r = document.getElementsByClassName("resum");
  var i;
  for (i=0;i<r.length;i++)
    {
      if (r[i].style.display == "none" && r[i].id=="resum"+num_paragraphe)
        {
          r[i].style.display = "block";
        }

      else
        {
          r[i].style.display = "none";
        }
    }
}

Dernière modification par Keldath (Le 13/08/2008, à 22:03)

Astier · Le 13/08/2008, à 22:02

Merci beaucoup Keldath pour ces corrections et leurs commentaires : ça devient déjà beaucoup plus clair

Ta correction répond à la question que je viens de poster... Merci encore

De plus, comment appeler dans un fichier javascript "externe" (appelé ensuite dans un fichier html) un style défini dans un fichier css externe ? Est-ce même possible ?

Merci encore, à bientôt.

Dernière modification par Astier (Le 13/08/2008, à 22:20)

Keldath · Le 13/08/2008, à 22:17

Cependant, si je clique sur le premier titre, tous les div (id="resum") suivants apparaissent

Les id de tes divs doivent être uniques, donc id="resum1", id="resum2", etc.

De plus, comment appeler dans un fichier javascript "externe" (appelé ensuite dans un fichier html) un style défini dans un fichier css externe ? Est-ce même possible ?

Si je saisis bien ce que tu veux, avec ceci :

<link id="style_variable" rel='stylesheet' type='text/css' href='styles1.css'>
<script type='text/javascript' src="javascript.js"></script>

Veille bien à ce que la balise <link> précède l'importation du JS. Si t'as remarqué, il a un ID.
Ensuite dans ton JS, il ne te reste plus qu'à manipuler l'objet comme tu le sens :

document.getElementById("style_variable").href="styles2.css"

Voilà

EDIT : tant qu'à faire, pour que ça soit plus clair, sache que tous les éléments de ta page HTML sont accessibles depuis le DOM. Tu peux créer/retirer des éléments dynamiquement dans ce DOM (et donc sur ta page) avec Javascript. Pour en savoir plus : http://www.siteduzero.com/tuto-3-764-0-dhtml-et-javascript.html

Dernière modification par Keldath (Le 13/08/2008, à 22:22)

Astier · Le 13/08/2008, à 22:24

Keldath a écrit :

De plus, comment appeler dans un fichier javascript "externe" (appelé ensuite dans un fichier html) un style défini dans un fichier css externe ? Est-ce même possible ?
Si je saisis bien ce que tu veux, avec ceci :
<link id="style_variable" rel='stylesheet' type='text/css' href='styles1.css'>
<script type='text/javascript' src="javascript.js"></script>
Veille bien à ce que la balise <link> précède l'importation du JS. Si t'as remarqué, il a un ID.
Ensuite dans ton JS, il ne te reste plus qu'à manipuler l'objet comme tu le sens :
document.getElementById("style_variable").href="styles2.css"
Voilà

Mais comment appeler un style défini dans le fichier css dans la redéfinition du style comme dans ma fonction curseur par exemple ? Où doit se placer la référence à l'id de la feuille de style ?

Je rencontre un autre léger souci, cette fois-ci en lien avec les événements : en effet, l'événement onclick nécessite un double clic la première fois pour ouvrir le div ; les fois suivantes, un simple clic suffit. Et puis, une fois que j'ai fait l'enchaînement onmouseover suivi de onmouseout, il m'est impossible de reproduire la fonction déclenchée par le onmouseover. Comment cela se fait-il ?

Encore merci pour tes éclaircissements.

A bientôt.

Keldath · Le 13/08/2008, à 22:42

Mais comment appeler un style défini dans le fichier css dans la redéfinition du style comme dans ma fonction curseur par exemple ? Où doit se placer la référence à l'id de la feuille de style ?

Tu n'as pas besoin de préciser que tes styles sont dans un fichier externe. En fait, au chargement de la page, le navigateur construit le DOM (dont l'enregistrement des classes de style et compagnie qui sont attribués aux différents éléments) avec ce que le serveur Web lui envoit (HTML + Styles). Lorsque tu te servais de la propriété "className" dans ta fonction, le Javascript ne fait que consulter (ou éditer) le DOM ! Nullement ton fichier externe contenant tes styles, qui lui une fois chargé au lancement de la page, on peut l'oublier
Dis moi si je n'ai toujours pas compris ta question

Je rencontre un autre léger souci, cette fois-ci en lien avec les événements : en effet, l'événement onclick nécessite un double clic la première fois pour ouvrir le div ; les fois suivantes, un simple clic suffit.

Ah oui, étrange. Je ne vois pas ce qui cause ce petit soucis...

Et puis, une fois que j'ai fait l'enchaînement onmouseover suivi de onmouseout, il m'est impossible de reproduire la fonction déclenchée par le onmouseover. Comment cela se fait-il ?

Pas de soucis d'enchaînement chez moi... sinon tu peux mettre ceci je crois pour ta fonction curseuroff :

function curseuroff (obj)
{
  obj.className = "titre";
}

Pour remettre la classe de départ du titre.

Dernière modification par Keldath (Le 13/08/2008, à 22:47)

Astier · Le 14/08/2008, à 11:13

Keldath a écrit :

Mais comment appeler un style défini dans le fichier css dans la redéfinition du style comme dans ma fonction curseur par exemple ? Où doit se placer la référence à l'id de la feuille de style ?
Tu n'as pas besoin de préciser que tes styles sont dans un fichier externe. En fait, au chargement de la page, le navigateur construit le DOM (dont l'enregistrement des classes de style et compagnie qui sont attribués aux différents éléments) avec ce que le serveur Web lui envoit (HTML + Styles). Lorsque tu te servais de la propriété "className" dans ta fonction, le Javascript ne fait que consulter (ou éditer) le DOM ! Nullement ton fichier externe contenant tes styles, qui lui une fois chargé au lancement de la page, on peut l'oublier
Dis moi si je n'ai toujours pas compris ta question

Tes explications sont parfaitement claires, et répondent entièrement à ma question

Je rencontre un autre léger souci, cette fois-ci en lien avec les événements : en effet, l'événement onclick nécessite un double clic la première fois pour ouvrir le div ; les fois suivantes, un simple clic suffit.
Ah oui, étrange. Je ne vois pas ce qui cause ce petit soucis...

Peut-être un probème de focus sur l'élément ?

Et puis, une fois que j'ai fait l'enchaînement onmouseover suivi de onmouseout, il m'est impossible de reproduire la fonction déclenchée par le onmouseover. Comment cela se fait-il ?
Pas de soucis d'enchaînement chez moi... sinon tu peux mettre ceci je crois pour ta fonction curseuroff :
function curseuroff (obj)
{
  obj.className = "titre";
}
Pour remettre la classe de départ du titre.

Alors pour l'enchaînement je soupçonne cette instruction :

obj.style.fontSize = "1.5em";

puisque lorsque je remplace par ce que tu proposes, je ne rencontre plus ce problème.
Mais ta proposition me laisse un peu perplexe : en effet, la classe titre définie dans mon fichier css s'applique ici à l'élément span. Que ce serait-il passé si j'avais créé une classe titre générale et une classe titre appliquée aux éléments span ainsi :

.titre
{
    font-variant:small-caps;
    color:#0000000;
}
span.titre
{
    text-decoration:underline;
    font-size:1.5em;
}

L'appel dans le fichier javascript de la classe "titre" aurait sélectionné la classe en fonction de l'élément sur lequel la fonction javascript s'applique ?

Merci encore, à bientôt.

Keldath · Le 14/08/2008, à 20:05

Peut-être un probème de focus sur l'élément ?

Aucune idée, j'ai testé rapidement en mettant un id ('test') sur un span et rajouté ceci sur le body :

<body onload="document.getElementById('test').focus();">

Et ça ne change rien.

Que ce serait-il passé si j'avais créé une classe titre générale et une classe titre appliquée aux éléments span
...
L'appel dans le fichier javascript de la classe "titre" aurait sélectionné la classe en fonction de l'élément sur lequel la fonction javascript s'applique ?

Les deux seront appellées, tout comme les deux sont appellées lors du chargement de la page Seulement, la classe appliquée à un élément précis aura la priorité sur la classe générale (par exemple si les deux possède la propriété font-size, celle du span aura la priorité, et il en va de même lors de l'attribution d'une classe par JavaScript (j'viens de tester et ça semble ok).

Astier · Le 14/08/2008, à 20:17

Merci pour tes explications, c'est bien plus limpides maintenant

Si ça te dit, j'ai ouvert un autre post concernant la récupération de la "value" de boutons radio en javascript ici : http://forum.ubuntu-fr.org/viewtopic.php?id=244504

Merci encore et à+

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#1 Le 13/08/2008, à 17:18

[RESOLU] JAVASCRIPT : afficher/masquer div

#2 Le 13/08/2008, à 17:32

Re : [RESOLU] JAVASCRIPT : afficher/masquer div

#3 Le 13/08/2008, à 17:42

Re : [RESOLU] JAVASCRIPT : afficher/masquer div

#4 Le 13/08/2008, à 18:47

Re : [RESOLU] JAVASCRIPT : afficher/masquer div

#5 Le 13/08/2008, à 20:13

Re : [RESOLU] JAVASCRIPT : afficher/masquer div

#6 Le 13/08/2008, à 21:24

Re : [RESOLU] JAVASCRIPT : afficher/masquer div

#7 Le 13/08/2008, à 21:36

Re : [RESOLU] JAVASCRIPT : afficher/masquer div

#8 Le 13/08/2008, à 22:02

Re : [RESOLU] JAVASCRIPT : afficher/masquer div

#9 Le 13/08/2008, à 22:17

Re : [RESOLU] JAVASCRIPT : afficher/masquer div

#10 Le 13/08/2008, à 22:24

Re : [RESOLU] JAVASCRIPT : afficher/masquer div

#11 Le 13/08/2008, à 22:42

Re : [RESOLU] JAVASCRIPT : afficher/masquer div

#12 Le 14/08/2008, à 11:13

Re : [RESOLU] JAVASCRIPT : afficher/masquer div

#13 Le 14/08/2008, à 20:05

Re : [RESOLU] JAVASCRIPT : afficher/masquer div

#14 Le 14/08/2008, à 20:17

Re : [RESOLU] JAVASCRIPT : afficher/masquer div

Pied de page des forums