visibility pas si visible :?

Version imprimable

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:

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:

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

12/01/2013, 08h37
NoSmoking

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.

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:

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

html:

Code:

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:

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 :'(

12/01/2013, 11h40
Bovino

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

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

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:

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...

12/01/2013, 11h55
NoSmoking

Citation:

Envoyé par mcvovol

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

:ccool: en lui appliquant les bonnes valeurs :fleche: http://torgar.developpez.com/glossai...t.php#adisplay

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:

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 ?

12/01/2013, 13h59
Bovino

Code:

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

:mur:

Code:

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;
}

:ccool:?

12/01/2013, 15h52
Kaamo

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

Citation:

Envoyé par NoSmoking

:ccool: en lui appliquant les bonnes valeurs :fleche: http://torgar.developpez.com/glossai...t.php#adisplay
12/01/2013, 16h02
mcvovol

Pourtant je l'ai lu de long en large, vous n'avez pas une idée pour m'eclairer un peu plus ?
12/01/2013, 16h15
Kaamo

Code:

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

Donc,

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

et dans le javascript je fais :

Code:

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;
}

12/01/2013, 17h25
Kaamo

Pourquoi t'as remis style.visibility :aie:

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

Code:

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:

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... :lol:

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:

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>

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:

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:

1 2 3 4 5 <script type="text/javascript"> // </script>
Code:

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:

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

13/01/2013, 00h35
NoSmoking
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:

1 2 3 4 5 6 7 8 <ul> <li>Titre <ul> <li>texte</li> <li>texte</li> </ul> </li> </ul>
13/01/2013, 21h30
mcvovol
Bonsoir,

le souci c'est que si je fais ceci :
Code:

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 :ccool:

:!: 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:

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:

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.

14/01/2013, 00h11
mcvovol

Bonsoir et merci de votre réponse mais nous avons du mal nous comprendre.

Dans mon cas, il y a plusieurs catégories : A, B, C...

Mon but etant de pouvoir ouvrir soit A soit B soit C et ainsi de suite.

Votre code est merveilleusement bon et rigoureux je vous en félicite

Mais dans mon cas je ne sais pas si cela est applicable :calim2:
14/01/2013, 20h05
NoSmoking

Citation:

Mon but etant de pouvoir ouvrir soit A soit B soit C et ainsi de suite.

il est bon de le préciser, ce qui n'a pas été le cas jusqu'à lors.

Citation:

Votre code est merveilleusement bon et rigoureux je vous en félicite

Merci :oops:

Citation:

Mais dans mon cas je ne sais pas si cela est applicable :calim2:

sans aucun doute, mais il te faudra épurer ton code HTML.

Petite précision : dans ton cas il serait plutôt souhaitable de construire ta page avec des listes OL LI (liste ordonnée).

Revenons au code, il suffit lors du parcours de repérer les LI de premier niveau et de les stocker dans un tableau, par la suite si tu cliques sur un élément de premier niveau tu masques le contenu de tous les autres sauf celui cliqué et le tour est joué bien sûr.
16/01/2013, 20h02
mcvovol

Bonjour et merci de vos reponse :-)

Je vais remanier le code avec des OL LI comme convenu et vous tiens au courant les jours prochains. Excusez moi pour l'attente je suis pas mal occupé en ce moment

Merci de votre aide et a tres vite (dans quelques jours ^^)

EDIT : Bon sang, OL Li c'est juste magnifique !!!!