Bonjour à tous,
Depuis ce matin, je me prends la tête (au propre comme au figuré) à cause du comportement curieux de mon code javascript. Je sais bien qu'il existe des librairies permettant de faire des toggles et autres accordéons, mais m'étant piqué d'en faire un, j'aimerais bien arriver au bout. L'essentiel parce que c'est un bon exercice.
Si quelqu'un à un peu de temps... Je sèche et comme l'énervement me guette, autant faire appel à un œil externe. Help!
Et merci par avance ^ ^[/i][/i][/i][/i][/i][/i]
Modifié par xephres (28 Jan 2010 - 12:13)
Depuis ce matin, je me prends la tête (au propre comme au figuré) à cause du comportement curieux de mon code javascript. Je sais bien qu'il existe des librairies permettant de faire des toggles et autres accordéons, mais m'étant piqué d'en faire un, j'aimerais bien arriver au bout. L'essentiel parce que c'est un bon exercice.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test WYSIWYG</title>
<style type="text/css">
body, a {
color : #ffffff;
}
dl {
background : #888888;
}
dt {
background : #000088;
height : 30px ;
}
dd {
background : #008800;
}
ul {
/* se superpose sur la couleur du dd */
background : #880000;
}
li {
/* se superpose partiellement sur le ul */
background : #880088;
/* supprime la puce */
list-style-type : none;
}
.ss_mn_1 {
height : 0px;
display : none ;
}
.ss_mn_2 {
height : 0px;
display : none ;
}
.ss_mn_3 {
height : 0px;
display : none ;
}
</style>
<script type="text/javascript">
function main() {
var addEvent = listener;
addEvent(document, "click", hidder)
}
function listener(obj,evType,fn)
{
if(obj.addEventListener)
{
obj.addEventListener(evType,fn,false);
}
else if(obj.attachEvent)
{
obj.attachEvent("on"+evType,fn) ;
}
}
function hidder(e)
{
if(!e) e=window.event
var el = e.target || e.srcElement;
var over_id = el.id;
var class_css = new Array();
menu_num = 3;
rules_num = document.styleSheets[0].cssRules.length;
/* Les boucles suivantes permetent d'établir la correspondance entre les classes html et les classes css*/
for (j=0; j< rules_num; j++)
{
rules_name = document.styleSheets[0].cssRules[j].cssText.substr(0,8);/*récupération du nom des classes*/
for (i=1; i<=menu_num; i++)
{
ss_mn = '.ss_mn_'+i;
if(ss_mn === rules_name)
{
class_css[i] = j; /*on remplit le tableau des correspondances*/
}
}
}
/* boucle de déploiment - fermeture des menus */
for (i=1; i<=menu_num; i++)
{
mn = 'mn_'+i;
if(over_id === mn)
{
j = class_css[i];
texte = document.styleSheets[0].cssRules[j].style.height;
maReg = new RegExp("[0-9]+", "g" ) ;
resultat = texte.match( maReg ) ;
height = parseInt(resultat[0]);
document.styleSheets[0].cssRules[j].style.display = 'block';
ref = j ;
heighter(ref,height);
}
else
{
//document.styleSheets[0].cssRules[class_css[i]].style.height = 0;
texte2 = document.styleSheets[0].cssRules[class_css[i]].style.height;
maReg = new RegExp("[0-9]+", "g" ) ;
resultat2 = texte2.match( maReg ) ;
height2 = parseInt(resultat2[0]);
ref2 = class_css[i] ;
min_heighter(ref2,height2);
//document.styleSheets[0].cssRules[class_css[i]].style.display = 'none';
}
}
}
function heighter(ref,height) /* permet d'augementer la propriété height */
{
if(height <= 30)
{
new_height = height+1;
document.styleSheets[0].cssRules[ref].style.height = new_height+'px' ;
setTimeout('heighter(ref,new_height)', 10);
}
}
function min_heighter(ref2,height2) /* permet de diminuer la propriété height */
{
if(height2 > 0)
{
new_height2 = height2-1;
document.styleSheets[0].cssRules[ref2].style.height = new_height2+'px' ;
setTimeout('min_heighter(ref2,new_height2)', 10);
}
}
main();
</script>
</head>
<body>
<dl>
<dt id="mn_1">
<a href="#">menu 1</a>
</dt>
<dd>
<ul>
<li class="ss_mn_1">
<a href="#">sous menu 1 1</a>
</li>
<li class="ss_mn_1">
<a href="#">sous menu 1 2</a>
</li>
<li class="ss_mn_1">
<a href="#">sous menu 1 3</a>
</li>
<li class="ss_mn_1">
<a href="#">sous menu 1 4</a>
</li>
</ul>
</dd>
<dt id="mn_2">
<a href="#">menu 2</a>
</dt>
<dd>
<ul>
<li class="ss_mn_2">
<a href="#">sous menu 2 1</a>
</li>
<li class="ss_mn_2">
<a href="#">sous menu 2 2</a>
</li>
<li class="ss_mn_2">
<a href="#">sous menu 2 3</a>
</li>
<li class="ss_mn_2">
<a href="#">sous menu 2 4</a>
</li>
</ul>
</dd>
<dt id="mn_3">
<a href="#">menu 3</a>
</dt>
<dd>
<ul>
<li class="ss_mn_3">
<a href="#">sous menu 3 1</a>
</li>
<li class="ss_mn_3">
<a href="#">sous menu 3 2</a>
</li>
<li class="ss_mn_3">
<a href="#">sous menu 3 3</a>
</li>
<li class="ss_mn_3">
<a href="#">sous menu 3 4</a>
</li>
</ul>
</dd>
</dl>
</body>
</html>
Si quelqu'un à un peu de temps... Je sèche et comme l'énervement me guette, autant faire appel à un œil externe. Help!
Et merci par avance ^ ^[/i][/i][/i][/i][/i][/i]
Modifié par xephres (28 Jan 2010 - 12:13)
Vu tout ce qui pose problème, c'est mieux de subdiviser en plusieurs petits cas simples.