visibility pas si visible :?

**mcvovol** · 12/01/2013, 06h05

Bonjour/bonsoir.

J'ai recement mis en place visibility sur mes pages web mais il se pose un probleme...

En effet, quand je cache le texte, il laisse la place vide visible. C'est a dire, si le texte est caché, il laissera autant de ligne "blanche" que de contenu ecris...

Voici mon code source :

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
function afficher_cacher(id)
{
        if(document.getElementById(id).style.visibility=="hidden")
        {
                document.getElementById(id).style.visibility="visible";
                document.getElementById('bouton_'+id).innerHTML='Cacher le texte';
        }
        else
        {
                document.getElementById(id).style.visibility="hidden";
                document.getElementById('bouton_'+id).innerHTML='Afficher le texte';
        }
        return true;
}

portion de code html :

Code html :

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

1
2
3
4
5
6
7
		<span  id="text">
		<p>1.1 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.1">L'eau a l'état naturel (<i>al-mâ' al-mutlaq</i>)</a></p>
		<p>1.2 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.2">L'eau déjà utilisée (<i>al-mâ' al-musta'mal</i>)</a></p>
		<p>1.3 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.3">L'eau mélangée à un corp pur</a></p>
		<p>1.4 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.4">L'eau en contact avec une impureté</a></p>
		<p>1.5 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.5">L'eau altérée par la salive (<i>as-su'r</i>)</a></p>
		</span>

c'est curieux non ?

Si vous voulez voir le resultat c'est par ici que ca se passe

**NoSmoking** · 12/01/2013, 08h37

Bonjour,
il te faut utiliser la propriété display plutôt que visibility, voir http://torgar.developpez.com/glossai...tionnement.php

pour ton code HTML l'utilisation des listes OL LI serait quand même plus adéquate.

**mcvovol** · 12/01/2013, 11h28

Bonjour,

Tout d'abord, merci de votre réponse.

J'ai fais quelques changement sur ma portion de code et voici ce que cela donne.

css :

Code :

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

1
2
3
4
#text
{
   display:none;
}

html:

Code html :

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

1
2
3
4
5
6
7
8
		<p><h5><a onclick="javascript:afficher_cacher('text');">1 : Les eaux et leurs catégorie</a></h5></p>
		<li  id="text">
		<ul>1.1 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.1">L'eau a l'état naturel (<i>al-mâ' al-mutlaq</i>)</a></ul>
		<ul>1.2 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.2">L'eau déjà utilisée (<i>al-mâ' al-musta'mal</i>)</a></ul>
		<ul>1.3 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.3">L'eau mélangée à un corp pur</a></ul>
		<ul>1.4 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.4">L'eau en contact avec une impureté</a></ul>
		<ul>1.5 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.5">L'eau altérée par la salive (<i>as-su'r</i>)</a></ul>
		</li>

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
function afficher_cacher(id)
{
        if(document.getElementById(id).style.visibility=="hidden")
        {
                document.getElementById(id).style.visibility="visible";
                document.getElementById('bouton_'+id).innerHTML='Cacher le texte';
        }
        else
        {
                document.getElementById(id).style.visibility="hidden";
                document.getElementById('bouton_'+id).innerHTML='Afficher le texte';
        }
        return true;
}

Ca cache bien le texte en supprimant l'espace comme convenu.

Cependant, il n'est plus possible d'afficher le texte au clic :'(

**Bovino** · 12/01/2013, 11h40

Essaye au moins de comprendre ce que tu fais...

Si ton élément est en display none, ce n'est pas sur le style visibility qu'il faut jouer pour l'afficher !

**mcvovol** · 12/01/2013, 11h53

Je pense avoir compris ^^ (une lumière aveuglante a jailli dans mon cerveau...)

il suffit que je change style.visibility en style.display c'est bien ca ?

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function afficher_cacher(id)
{
        if(document.getElementById(id).style.display=="none")
        {
                document.getElementById(id).style.display="visible";
                document.getElementById('bouton_'+id).innerHTML='Cacher le texte';
        }
        else
        {
                document.getElementById(id).style.display="hidden";
                document.getElementById('bouton_'+id).innerHTML='Afficher le texte';
        }
        return true;
}

Manifestement je dois etre encore plus mauvais que je le pensai...

**NoSmoking** · 12/01/2013, 11h55

Envoyé par mcvovol

il suffit que je change style.visibility en style.display c'est bien ca ?

en lui appliquant les bonnes valeurs

http://torgar.developpez.com/glossai...t.php#adisplay

**mcvovol** · 12/01/2013, 12h31

je viens de decortiquer le site et il en ressort que le mieu dans mon cas c'est ceci sans pour autant reussir a le mettre en fonction :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function afficher_cacher(id)
{
        if(document.getElementById(id).style.visibility=="hidden")
        {
                document.getElementById(id).style.display="none";
                document.getElementById('bouton_'+id).innerHTML='Cacher le texte';
        }
        else
        {
                document.getElementById(id).style.display="table-row-group";
                document.getElementById('bouton_'+id).innerHTML='Afficher le texte';
        }
        return true;
}

J'ai retiré le style css, ai je bien fait ?

**Bovino** · 12/01/2013, 13h59

Code :

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

if(document.getElementById(id).style.visibility=="hidden")

**mcvovol** · 12/01/2013, 14h56

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function afficher_cacher(id)
{
        if(document.getElementById(id).style.display=="hidden")
        {
                document.getElementById(id).style.display="none";
                document.getElementById('bouton_'+id).innerHTML='Cacher le texte';
        }
        else
        {
                document.getElementById(id).style.display="table-row-group";
                document.getElementById('bouton_'+id).innerHTML='Afficher le texte';
        }
        return true;
}

?

**Kaamo** · 12/01/2013, 15h52

Presque ! Je crois que tu as mal lu ça :

Envoyé par NoSmoking

en lui appliquant les bonnes valeurs

http://torgar.developpez.com/glossai...t.php#adisplay

**mcvovol** · 12/01/2013, 16h02

Pourtant je l'ai lu de long en large, vous n'avez pas une idée pour m'eclairer un peu plus ?

**Kaamo** · 12/01/2013, 16h15

Code javascript :

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

if(document.getElementById(id).style.display=="hidden")

display n'accepte pas "hidden" ! Mets "none" plutôt. De plus j'ai du mal à saisir la logique de la fonction. Si le display est none, ça veut dire que c'est déjà caché ? Donc il faut afficher, et vice-versa

**mcvovol** · 12/01/2013, 17h22

Donc,

j'applique un display:none; a ma div a cacher

et dans le javascript je fais :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function afficher_cacher(id)
{
        if(document.getElementById(id).style.display=="none")
        {
                document.getElementById(id).style.visibility="visible";
                document.getElementById('bouton_'+id).innerHTML='Cacher le texte';
        }
        else
        {
                document.getElementById(id).style.visibility="hidden";
                document.getElementById('bouton_'+id).innerHTML='Afficher le texte';
        }
        return true;
}

**Kaamo** · 12/01/2013, 17h25

Pourquoi t'as remis style.visibility

**mcvovol** · 12/01/2013, 17h30

Voila ce que j'ai (histoire de faire le point)

Code html :

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

1
2
3
4
5
6
7
8
		<p><h5><a onclick="javascript:afficher_cacher('text');">1 : Les eaux et leurs catégorie</a></h5></p>
		<li id="text">
		<ul>1.1 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.1">L'eau a l'état naturel (<i>al-mâ' al-mutlaq</i>)</a></ul>
		<ul>1.2 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.2">L'eau déjà utilisée (<i>al-mâ' al-musta'mal</i>)</a></ul>
		<ul>1.3 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.3">L'eau mélangée à un corp pur</a></ul>
		<ul>1.4 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.4">L'eau en contact avec une impureté</a></ul>
		<ul>1.5 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.5">L'eau altérée par la salive (<i>as-su'r</i>)</a></ul>
		</li>

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function afficher_cacher(id)
{
        if(document.getElementById(id).style.display=="none")
        {
                document.getElementById(id).style.display="none";
                document.getElementById('bouton_'+id).innerHTML='Cacher le texte';
        }
        else
        {
                document.getElementById(id).style.display="table-row-group";
                document.getElementById('bouton_'+id).innerHTML='Afficher le texte';
        }
        return true;
}

pour ce qui est du css on le met direct dans les balises pour plus de simplicité pour l'instant.

Mais si ca continu les cheveux qu'il me reste vont tomber...

**Kaamo** · 12/01/2013, 18h23

Il est où le bouton qui permet de montrer/cacher ? C'est lui qui est censé lancer la fonction non ? SI c'est un bouton, on ne modifie pas la valeur du texte par innerHTML mais en changeant la value.
Les listes ne s'écrivent pas comme ça. <ul> est l'élément parent qui contient plusieurs <li>
En gros, voici de quoi t'aider à avancer. Et oui, il faudra penser au CSS

Code html :

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
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <meta charset="utf-8" />
  <script>
  function afficher_cacher(id){
    var element = document.getElementById(id);
    var bouton  = document.getElementById('bouton_'+id);
    
    if(element.style.display=="none") {
      element.style.display="block";
      bouton.value='Cacher le texte';
    } else {
      element.style.display="none";
      bouton.value='Afficher le texte';
    }
  }
  </script>
</head>
<body>
  <h5>1 : Les eaux et leurs catégorie</h5>
  <ul id="text">
    <li>1.1 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.1">L'eau a l'état naturel (<i>al-mâ' al-mutlaq</i>)</a></li>
    <li>1.2 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.2">L'eau déjà utilisée (<i>al-mâ' al-musta'mal</i>)</a></li>
    <li>1.3 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.3">L'eau mélangée à un corp pur</a></li>
    <li>1.4 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.4">L'eau en contact avec une impureté</a></li>
    <li>1.5 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.5">L'eau altérée par la salive (<i>as-su'r</i>)</a></li>
  </ul>
  <input type="button" value="Cacher le texte" id="bouton_text" onclick="afficher_cacher('text');" />
</body>
</html>

**mcvovol** · 12/01/2013, 20h16

Wahou j'en reviens pas !!! tu es un champion !!!

L'effet donne pile ce que je souhaite.

Je vous laisse vour le resultat :-)

http://dicodinn.free.fr/v1/Fiqh_as_Sunna_index_T1.php

Je posterai la solution dans un edit

Merci encore ^^

Me restera plus qu'a retirer les puces de la liste

Par contre, j'ai pas encore compris comment appliquer la chose sur plusieurs listes :'( car ma liste de lien est longue, longue longue...

Voici la marche que j'ai suivi :

Code html :

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

1
2
3
4
5
6
7
8
<p><h5><a onclick="javascript:afficher_cacher('text');">1 : Les eaux et leurs catégorie</a></h5></p></li>
				<ul id="text">
					<li>1.1 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.1">L'eau a l'état naturel (<i>al-mâ' al-mutlaq</i>)</a></li>
					<li>1.2 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.2">L'eau déjà utilisée (<i>al-mâ' al-musta'mal</i>)</a></li>
					<li>1.3 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.3">L'eau mélangée à un corp pur</a></li>
					li>1.4 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.4">L'eau en contact avec une impureté</a></li>
					<li>1.5 : <a href="Fiqh_as_Sunna_T1_A1.php#A.1.5">L'eau altérée par la salive (<i>as-su'r</i>)</a></li>
				</ul>

celui qui suit est en bas de page...

Code javascript :

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

1
2
3
4
5
<script type="text/javascript">
        //<!--
                afficher_cacher('text');
        //-->
        </script>

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
function afficher_cacher(id){
    var element = document.getElementById(id);
    var bouton  = document.getElementById('bouton_'+id);
 
    if(element.style.display=="none") {
      element.style.display="block";
      bouton.value='Cacher le texte';
    } else {
      element.style.display="none";
      bouton.value='Afficher le texte';
    }
  }

Code css :

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

1
2
3
4
ul 
{
   list-style-type:none;
}

Ca peut paraitre brouillon mais ca a l'air de cacher certain parti, le souci est qu'il y a plusieurs "text" donc ca pause probleme

**NoSmoking** · 13/01/2013, 00h35

Tu pourrais une fois la page chargée, récupérer toutes les balises UL pour leur affecter une ID à la volée et mettre l'action de cache/affiche sur le bouton de celle ci.

Vérifies quand même la structure de tes listes

Code html :

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

1
2
3
4
5
6
7
8
<ul>
  <li>Titre
    <ul>
      <li>texte</li>
      <li>texte</li>
    </ul>
  </li>
</ul>

**mcvovol** · 13/01/2013, 21h30

Bonsoir,

le souci c'est que si je fais ceci :

Code html :

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

1
2
3
4
5
6
7
8
<ul>
  <li onclick="javascript:afficher_cacher('text');">Titre
    <ul id="text">
      <li>texte</li>
      <li>texte</li>
    </ul>
  </li>
</ul>

et que dans mon javascript je cache la balise text incluse dans plusieurs liste. Ca va les cacher mais en cliquand sur mon <li> qui comporte onclick ca va afficher toutes les balises texte et non celle ciblé :'(

A moins de pouvoir inclure deux id dans une balise

**NoSmoking** · 13/01/2013, 23h37

dans un document une ID DOIT ETRE UNIQUE, qu'on se le dise.

Dans ton cas il n'ait d'ailleurs pas besion d'ID, il suffit de parcourir le document à la recherche des UL, ensuite d'affecter à son parent, donc un LI, une action qui sur son onclick affichera/cachera celui ci.

Il te faut dans ce cas une structure rigoureuse, pour éviter les imprévus.

Le code d'une façon de faire...

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
var oUl = document.getElementById('ul_main');
// récupération des enfants UL
var oParent, oTitre = oUl.getElementsByTagName('UL'),
    i, nb = oTitre.length;
 
for( i=0; i <nb; i++){
  //get le LI parent
  oParent = oTitre[i].parentNode;
  // on peut rajouter du style
  oParent.className += ' cliquable';
  // stoque l'élément
  oParent.elementUL = oTitre[i];
  // fonction sur click du LI
  oParent.onclick = function( e){
    e = e || event;
    oSrce = e.target || e.srcElement;
    // élément cliqué et non un enfant
    if( oSrce === this){
      // affiche/masque suivant hauteur
      this.elementUL.style.display = this.elementUL.offsetHeight ? 'none' : '';
     }
  };
  // on masque l'élément qui sera visible si javascript désactivé
  oTitre[i].style.display ='none';
}

et le fichier de test pour mieux voir cela...

Code html :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[...]</title>
<meta name="Author" content="NoSmoking">
<style>
.cliquable{
  color:blue;
  font-weight:bold;
}
.cliquable ul{
  color:black;
  font-weight:normal;
}
</style>
<script>
</script>
</head>
<body>
<ul id="ul_main">
  <li>Titre 1
    <ul>
      <li>texte 1.1</li>
      <li>texte 1.2</li>
    </ul>
  </li>
  <li>Titre 2
    <ul>
      <li>Titre 2.1
        <ul>
          <li>Titre 2.1.1
            <ul>
              <li>texte 2.1.1.1</li>
              <li>texte 2.1.1.2</li>
            </ul>
          </li>
          <li>texte 2.1.2</li>
        </ul>
      </li>
      <li>texte 2.2</li>
    </ul>
  </li>
  <li>Titre 3
    <ul>
      <li>texte 3.1</li>
      <li>texte 3.2</li>
    </ul>
  </li>
</ul>
<script>
var oUl = document.getElementById('ul_main');
// récupération des enfants UL
var oParent, oTitre = oUl.getElementsByTagName('UL'),
    i, nb = oTitre.length;
 
for( i=0; i <nb; i++){
  //get le LI parent
  oParent = oTitre[i].parentNode;
  // on peut rajouter du style
  oParent.className += ' cliquable';
  // stoque l'élément
  oParent.elementUL = oTitre[i];
  // fonction sur click du LI
  oParent.onclick = function( e){
    e = e || event;
    oSrce = e.target || e.srcElement;
    // élément cliqué et non un enfant
    if( oSrce === this){
      // affiche/masque suivant hauteur
      this.elementUL.style.display = this.elementUL.offsetHeight ? 'none' : '';
     }
  };
  // on masque l'élément qui sera visible si javascript désactivé
  oTitre[i].style.display ='none';
}
</script>
</body>
</html>

il y a de la reprise de code HTML en perspective.

visibility pas si visible :?

JavaScript

Discussions similaires

Partager

Partager