PDA

View Full Version : [JavaScript & CSS] display:none & display:block su IE7 funziona, su FireFox no.... :(

Remoz
20-09-2007, 07:32
Ciao ragas..... ecco il codice del mio script (riporto le tre sezioni importanti, anche se il css č su file esterno..):

codice:<script type="text/javascript">
function ShowHide(id){
if(document.getElementById){
element=document.getElementById(id);
if(element.style.display=="none"){
element.style.display="block";
}
else{
element.style.display="none";
}
}
}
</script>


<style type="text/css">
.menuleft {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000033;
font-weight: bold;
font-size: 12px;
background-color: #FFFFFF;
height: 25px;
cursor: default;
vertical-align: middle;
text-align: center;
}
.menuleftexp {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-weight: bold;
font-size: 12px;
background-color: #66CCFF;
height: 25px;
cursor: default;
vertical-align: middle;
text-align: center;
}
.trhide {
display: none;
}
</style>


<html>
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td class="menuleft" onclick="ShowHide('menu1');">menu1</td>
</tr>
<tr class="trhide" id="menu1">
<td class="menuleftexp">sottomenu1</td>
</tr>
<tr>
<td class="menuleft" onclick="ShowHide('menu2');">menu2</td>
</tr>
<tr class="trhide" id="menu2">
<td class="menuleftexp">sottomenu2</td>
</tr>
<tr>
<td class="menuleft" onclick="ShowHide('menu3');">menu3</td>
</tr>
<tr class="trhide" id="menu3">
<td class="menuleftexp">sottomenu3</td>
</tr>
<tr>
<td class="menuleft" onclick="ShowHide('menu4');">menu4</td>
</tr>
<tr class="trhide" id="menu4">
<td class="menuleftexp">sottomenu4</td>
</tr>
</table>
</html>


Allora, su IE7 funziona benone, anche se appena aperta la pagina (2 frames, il menų č nel frameleft...) al primo click non succede NULLA, dal secondo in poi il menų appare e scompare regolarmente ad ogni pressione... Questo tutte le volte che si clicca un menu diverso.. Come mai?

Su Firefox invece ha comunque il problema del primo click che non fa nulla.. ma successivamente ad ogni apparizione e sparizione mi aumenta lo spazio vuoto con i menų che stanno sotto... In pratica č un menų a discesa messo in verticale, quando clicchi sul menu 1 gli altri si spostano in basso e appare il sottomenu del menu 1 tra il menu 1 e gli altri...
Ad ogni sparizione i successivi menu non ritornano al loro posto iniziale, ma rimangono dove sono, e al click successivo si spostano pių gių... dopo 10 cicli sono a metā pagina!!!
Oltretutto anche la forma dei sottomenu che appaiono č sbagliata, tiene solo metā colonna.... non capisco! Help me, please!
andbin
20-09-2007, 08:20
al primo click non succede NULLA, dal secondo in poi il menų appare e scompare regolarmente ad ogni pressioneLa questione del primo click che non fa nulla č molto facile da capire. Nonostante tu abbia messo come stile CSS display:none, all'inizio la proprietā element.style.display non č a "none" (č vuota). Pertanto al primo click imposti none. Cambia il test, basta fare: if(element.style.display != "block")

Per il resto, non saprei ... dovrei verificare meglio. Su Firefox ci sono due problemi: i sottomenų non sono larghi al 100% e sono solo un blocchetto a sinistra. Inoltre sembra che si "mangi" dello spazio. Appena ho tempo cerco di capire il perché.
Comunque se devi fare dei menų "espandibili" ti conviene usare le liste (<ul> <li>) o al massimo dei <div>.
Remoz
20-09-2007, 12:58
Grazie 1000, sei stato molto chiaro, appena riesco provo a modificare la condizione ma in effetti dev'esser cosė...! ;)
Per il resto mi hanno detto che per alcuni browser (come FireFox) invece di "block" bisogna usare "table-row"... Ho provato, ed in effetti funziona con Firefox, ma poi non funziona pių in Explorer!! :rolleyes:
Questo vuol dire che per forza devo fare un'altra condizione in cui se il browser č Firefox usa table-row, se č IE usa "block" ? Mammamia, perchč non si uniformano un pochino? Sapevo che c'erano differenze, ma queste mi sembrano abbastanza pesanti come differenze... :eek:

Ti faccio sapere entro sera, grazie 1000!! :cincin:
andbin
20-09-2007, 13:17
Per il resto mi hanno detto che per alcuni browser (come FireFox) invece di "block" bisogna usare "table-row"... Ho provato, ed in effetti funziona con Firefox, ma poi non funziona pių in Explorer!!Motivo in pių, come ho detto, per usare <div> o <ul>, comunque non delle celle di una tabella.
Remoz
20-09-2007, 13:38
Eccomi, grazie al tuo consiglio ho risolto tutto per quanto riguarda IE!
E nel frattempo ho cercato di risolvere anche la differenza tra i 2 browser impostando un ulteriore if():

<script type="text/javascript">
function ShowHide(id){

if (navigator.appName=="Microsoft Internet Explorer") {

if(document.getElementById){
element=document.getElementById(id);
if(element.style.display!="block"){
element.style.display="block";
}
else{
element.style.display="none";
}
}
}

if (navigator.appName=="Netscape") {

if(document.getElementById){
element=document.getElementById(id);
if(element.style.display!="table-row"){
element.style.display="table-row";
}
else{
element.style.display="none";
}
}
}
}
</script>
E sembra funzionare (anche se il riconoscimento dei browser non č per nulla completo ne dettagliato, ma per il momento mi basta questo...)!
Cosa ne dici? Visto che mi serve per un'applicazione e non per un sito, anche il riconoscimento lo lascerei cosė, tanto curerō io l'installazione del browser e quindi non dovrebbe servire riconoscerne altri oltre a firefox e IE...
Grazie ancora! ;)
Remoz
20-09-2007, 13:40
Motivo in pių, come ho detto, per usare <div> o <ul>, comunque non delle celle di una tabella.

Il fatto del <DIV> o <ul> mi piace si, perō dovrei documentarmi in merito a come dare l'apparenza che voglio tramite i CSS... sono un po' nullo in merito :stordita: