|
|||||||
|
|
|
 |
|
|
Strumenti |
09-02-2008, 18:40
|
#1 |
|
Junior Member
Iscritto dal: Aug 2007
Messaggi: 7
|
[JS] script per espandere / comprimere voci di menù
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): Codice:
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";
}
}
}
Codice:
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}
Codice HTML:
<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> 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 |
|
|
|
09-02-2008, 18:58
|
#3 |
|
Senior Member
Iscritto dal: Jan 2005
Città: Siena
Messaggi: 1313
|
Il tutto accade perchè lo script viene lanciato con l'evento onload, ossia quando la pagina ha finito di caricare, il fatto che sia su un server chissà dove e non sul tuo pc rende il caricamento della pagina un pochino più lento e finchè lo script non viene avviato allora rimane tutto visibile. Un buon modo per evitare ciò è dare di default agli elementi che vuoi nascondere la proprieta CSS "display: none"
|
|
|
|
|
09-02-2008, 19:28
|
#4 |
|
Junior Member
Iscritto dal: Aug 2007
Messaggi: 7
|
@vladix
ho fatto come consigliato nel thread da te linkato, e la cosa funge... cioè all'apertura della pagina, il menù è compresso, e poi al click si espande... però prima che si carichi lo script passano sempre 2-3 secondi, e così le voci rimangono inattive appena carica, e solo dopo un pò è possibile cliccarci per espandere il menù... @astorcas sì, è proprio come dici tu, e l'ho notato nel momento in cui ho aggiunto il codice <li class="hide"> come consigliato da vladix... però non capisco il tuo consiglio: la proprietà css display:none è impostata nel css, il cui codice è scritto nel mio primo post... o forse non ti riferivi a quello?? La cosa strana è che la pagina è molto leggera, c'è SOLO testo, solamente le immagini indispensabili (un header, una pubblicità di google, pochi altri script)... insomma, possibile che quello script è proprio l'ultimo ad essere caricato?? Ci sono altre soluzioni per ottenere lo stesso effetto?? (la pagina, per capirci, è http://todoslogos.altervista.org/progr.php) Ringrazio per la celere risposta, siete gentilissimi, davvero!! 
|
|
|
|
|
09-02-2008, 20:09
|
#5 |
|
Senior Member
Iscritto dal: Jan 2005
Città: Siena
Messaggi: 1313
|
Ehm hai ragione ho riguardato bene il codice e.... secondo me dovrebbe funzionare...
 EDIT: ho fatto la prova sia su firefox che IE 7 e non ho avuto il problema che mi dici! |
|
|
|
|
09-02-2008, 20:47
|
#6 |
|
Junior Member
Iscritto dal: Aug 2007
Messaggi: 7
|
sì astorcas, lo script in locale funziona alla perfezione... si attenderà giusto qualche frazione di secondo...
il problema nasce in rete, probabilmente ki mi ospita è sovraccarico di dati, e quindi il caricamento ne risente... ho provato ad alleggerire la pagina, e la situazione è già migliorata... per un risultato ottimale, aspetterò di spostarmi su un serve più potente  grazie delle risposte
|
|
|
|
|
|
| Strumenti | |
|
|
Tutti gli orari sono GMT +1. Ora sono le: 14:53.
