ToMMy!!!
09-02-2008, 19:40
Salve ragazzi, ho da porvi un problema che ho riscontrato sul mio sito utilizzando uno script in JS che permette, cliccando su del testo, di espandere (un pò come ciò che fa wikipedia nelle sue pagine delle categorie, quando si clicca per vedere le sottocategorie). Lo script che utilizzo è basato sugli elenchi numerati.
In pratica lo script mostra ciò che è racchiuso tra i tag <h3> e nasconde l'elenco sottostante; cliccando sulla scritta tra gli <h3> compaiono tutte le voci del menù.
Il codice JS è il seguente (il file che lo contiene è expand.js):
window.onload=function(){
if(document.getElementsByTagName && document.getElementById){
document.getElementById("nav").className="jsenable";
BuildList();
}
}
function BuildList(){
var hs=document.getElementById("nav").getElementsByTagName("h3");
for(var i=0;i<hs.length;i++){
hs[i].onclick=function(){
this.parentNode.className=(this.parentNode.className=="show") ? "hide" : "show";
}
}
}
Poi ho creato un file css che è il seguente (il file si chiama jsmenu.css):
div.jsenable h3{cursor: pointer; text-decoration: underline;}
div.jsenable ul ul{display:none}
div#nav li.hide ul{display:none}
div#nav li.show ul{display:block}
div#nav li.show h3{background-color: #CCFFCC}
La pagine html è invece così strutturata:
<head>
<link rel="stylesheet" type="text/css" href="jsmenu.css">
<script type="text/javascript" src="expand.js"></script>
</head>
<body>
<div id="nav">
<ul>
<li><h3>Linguaggi</h3>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">DOM</a></li>
<li><a href="#">PHP</a></li>
</ul>
</li><br>
<li><h3>Software</h3>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Fireworks</a></li>
<li><a href="#">Dreamweaver</a></li>
</ul>
</li><br>
<li><h3>Webdesign</h3>
<ul>
<li><a href="#">Webdesign</a></li>
<li><a href="#">Accessibilità</a></li>
<li><a href="#">Usabilità</a></li>
</ul>
</li><br>
</ul>
</div>
</body>
Il tutto funziona perfettamente, ed arrivo così al problema.
Una volta che uploado tutti i file, se apro la pagina .php strutturata come sopra, prima il menù è completamente espanso, quindi passano 2-3 secondi, e il menù si comprime, e funziona come vorrei... E io non voglio assolutamente questa transizione show/hide appena carica la pagina... è moooolto fastidioso..
Perchè succede questo? come prevengo?? E' meglio che cambio script?? Mi sapete linkare una pagina con altri buoni script??
utilizzo I.E. 6.x
Grazie a chi mi risponderà, e perdonate il post lunghissimo!! ;)
Nota: lo script è stato preso ed adattato da html.it
Nota 2: sul mio computer lo script funziona bene, senza attese fastidiose. Il sito è ospite di AlterVista
In pratica lo script mostra ciò che è racchiuso tra i tag <h3> e nasconde l'elenco sottostante; cliccando sulla scritta tra gli <h3> compaiono tutte le voci del menù.
Il codice JS è il seguente (il file che lo contiene è expand.js):
window.onload=function(){
if(document.getElementsByTagName && document.getElementById){
document.getElementById("nav").className="jsenable";
BuildList();
}
}
function BuildList(){
var hs=document.getElementById("nav").getElementsByTagName("h3");
for(var i=0;i<hs.length;i++){
hs[i].onclick=function(){
this.parentNode.className=(this.parentNode.className=="show") ? "hide" : "show";
}
}
}
Poi ho creato un file css che è il seguente (il file si chiama jsmenu.css):
div.jsenable h3{cursor: pointer; text-decoration: underline;}
div.jsenable ul ul{display:none}
div#nav li.hide ul{display:none}
div#nav li.show ul{display:block}
div#nav li.show h3{background-color: #CCFFCC}
La pagine html è invece così strutturata:
<head>
<link rel="stylesheet" type="text/css" href="jsmenu.css">
<script type="text/javascript" src="expand.js"></script>
</head>
<body>
<div id="nav">
<ul>
<li><h3>Linguaggi</h3>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">DOM</a></li>
<li><a href="#">PHP</a></li>
</ul>
</li><br>
<li><h3>Software</h3>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Fireworks</a></li>
<li><a href="#">Dreamweaver</a></li>
</ul>
</li><br>
<li><h3>Webdesign</h3>
<ul>
<li><a href="#">Webdesign</a></li>
<li><a href="#">Accessibilità</a></li>
<li><a href="#">Usabilità</a></li>
</ul>
</li><br>
</ul>
</div>
</body>
Il tutto funziona perfettamente, ed arrivo così al problema.
Una volta che uploado tutti i file, se apro la pagina .php strutturata come sopra, prima il menù è completamente espanso, quindi passano 2-3 secondi, e il menù si comprime, e funziona come vorrei... E io non voglio assolutamente questa transizione show/hide appena carica la pagina... è moooolto fastidioso..
Perchè succede questo? come prevengo?? E' meglio che cambio script?? Mi sapete linkare una pagina con altri buoni script??
utilizzo I.E. 6.x
Grazie a chi mi risponderà, e perdonate il post lunghissimo!! ;)
Nota: lo script è stato preso ed adattato da html.it
Nota 2: sul mio computer lo script funziona bene, senza attese fastidiose. Il sito è ospite di AlterVista