Help: Script d'arborescence ne fonctionnant que sur Internet Explorer

Version imprimable

Appel a l'aide: Script d'arborescence ne fonctionnant que sur Internet Explorer

Ci-dessous mon script.
Il ne fonctionne que sur Internet Explorer a cause de document.all et de sourceIndex a priori ...
Est-ce qu'une bonne ame pourrait m'aider a le rendre portable car je ne connais pas du tout Javascript ?

Merci d'avance de votre aide,
Cyril.

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
<html>
<head>
<style>
#foldheader{cursor:hand}
</style>
<script language="JavaScript1.2">
var head="display:''";
function getElementsById(theId){
  var __idArray = new Array();
  var __allArray = document.getElementsByTagName('li');
  for(var i=0;i<__allArray.length;i++){
    if(__allArray[i].id==theId){
      __idArray[__idArray.length] = __allArray[i]; 
    }
  }
  return __idArray;
}
 
function change(){
if(!document.all)
return;
if (event.srcElement.id=="foldheader") {
var srcIndex = event.srcElement.sourceIndex;
var nested = document.all[srcIndex+1];
 
var foldinglists = getElementsById("foldheader");
var nombre = foldinglists.length;
for (var i=0 ; i<nombre ;i++) {
        var srcIndex2 = foldinglists[i].sourceIndex;
        if (srcIndex != srcIndex2) { 
                document.all[srcIndex2+1].style.display="none";
        }
}
 
if (nested.style.display=="none") {
nested.style.display='';
}
else {
nested.style.display="none";
}
}
}
 
document.onclick=change;
</script>
</head>
 
<body>
<b><font face='' style='font-size:' color=''>
<li id="foldheader">Menu</li></font></b>
<ul id="foldinglist" style="display:none" style=&{head};> 
  <li>Ouverture menu</li>
  <li>Ouverture menu2</li>
</ul>
</body>
</html>

08/10/2006, 22h56
Auteur

bonsoir,

que doit faire ce code ?
09/10/2006, 18h06
cyrilk

Citation:

Envoyé par Auteur

bonsoir,

que doit faire ce code ?

Il est cense etre capable d'afficher une liste de categories qui quand on les clique s'ouvre pour faire apparaitre une liste de sous-categories (liens cliquables).
Dans l'exemple, il n'y a qu'une categorie et deux sous-categories. Sur Internet Explorer, la categorie s'ouvre quand on la clique mais pas sur Firefox.

Merci d'avance de votre aide.
Cordialement,
Cyril.
10/10/2006, 16h52
Auteur
Code:

1 2 3 if(!document.all) return;
Firefox ne connait pas document.all du coup la fonction change() n'est pas exécutée.

Franchement adpater ce code à Firefox n'est pas une mince affaire.

Petite parenthèse. J'ai très rarement vu cette syntaxe :
Code:

1 2 <ul id="foldinglist" style="display:none" style=&{head};>
il s'agit d'affecter le contenu de head à style. J'ai toujours eu droit à des résultats aléatoires chaque fois que je l'utilisais :)

Voilà :

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
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.conteneur{
 height: 150px;
 width: 200px;
 border: 5px #AAAAAA ridge;
 background-color: #CCCCCC;
 overflow: auto;
 padding: 5px;
}
.clListe{
 display: none;
}
.item{
 cursor: pointer;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
var oldObj = null;
function gestionListe(idObj)
{
  var liste = document.getElementById(idObj);
 
  if (oldObj==liste && liste.style.display!="block")
     oldObj = null;
 
  liste.style.display = "block";
 
  if (oldObj!=null)
     oldObj.style.display = "none";
 
  oldObj = liste;
}
 
 
//-->
</script>
 
</head>
 
<body>
<div class="conteneur">
 
<span class="item" onclick="gestionListe('liste1')">Afficher liste 1</span><br>
<ul class="clListe" id="liste1">
<li><a href="page1.htm">Item 1</a></li>
<li><a href="page2.htm">Item 2</a></li>
<li><a href="page3.htm">Item 3</a></li>
</ul>
 
<span class="item" onclick="gestionListe('liste2')">Afficher liste 2</span><br>
<ul  class="clListe" id="liste2">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
 
<span class="item" onclick="gestionListe('liste3')">Afficher liste 3</span><br>
<ul  class="clListe" id="liste3">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
 
</div>
 
</body>
 
</html>

j'ai ajouté un conteneur avec gestion de l'overflow (cf. CSS) dans le cas où la liste est plus grande que le conteneur.