Home Page
Articoli
Tips & Tricks
News
Forum
Archivio Forum
Blogs
Sondaggi
Rss
Video
Utenti
Chi Siamo
Contattaci
Username:
Password:
Login
Registrati ora!
Recupera Password
Home Page
Stanze Forum
HTML, Javascript, CSS, DHTML, XHTML
Problema con div in IE
giovedì 18 gennaio 2007 - 11.04
Elenco Threads
Stanze Forum
Aggiungi ai Preferiti
Cerca nel forum
poldo000
Profilo
| Newbie
5
messaggi | Data Invio:
gio 18 gen 2007 - 11:04
Ciao a tutti!!
Mi sto battendo con un problema di visualizzazione.
Posto una parte del codice, cmq funzionante.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
function radio_click()
{
var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i ++ )
{
divs[i].style.visibility = "hidden";
divs[i].style.top = "-1000px";
divs[i].style.position = "absolute";
// alert("Fine");
}
if (document.getElementById('text_radio').checked)
{
document.getElementById('sin_text_lev').style.visi bility = "visible";
document.getElementById('sin_text_lev').style.top = "0px";
document.getElementById('sin_text_lev').style.posi tion = "relative";
return;
}
if (document.getElementById('file_radio').checked)
{
document.getElementById('mul_file_lev').style.top = "0px";
document.getElementById('mul_file_lev').style.posi tion = "relative";
document.getElementById('mul_file_lev').style.visi bility = "visible";
return;
}
if (document.getElementById('bool_radio').checked)
{
document.getElementById('bool_lev').style.top = "0px";
document.getElementById('bool_lev').style.position = "relative";
document.getElementById('bool_lev').style.visibili ty = "visible";
return;
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="xaaa">
<table width="900" border="1" style="width: 900px; height: 100px; background-color: antiquewhite;">
<tr>
<td>
<label>
<input type="radio" name="arg_type" value="text" id="text_radio" onClick="radio_click()" checked="checked"/>
text</label>
<br>
<label>
<input type="radio" name="arg_type" value="file" id="file_radio" onClick="radio_click()">
file</label>
<br>
<label>
<input type="radio" name="arg_type" value="boolean" id="bool_radio" onClick="radio_click()">
boolean</label>
<br></td>
<td>
<div id="sin_text_lev" style="position:relative; z-index:1; top: 0px; visibility: visible;">
<p align="center">Default Value</p>
<p align="center"><input type="text" name="textfield3" id="sin_text" style=""></p>
</div>
<div id="mul_file_lev" style="position:absolute; z-index:1; top: -1000px; visibility: hidden;">
<p align="center">Default Value</p>
<p align="center">
<input type="text" name="textfield2" id="mul_text"></p>
<p align="center">
<input name="Add" type="button" id="Add1" value="+" onClick="add_res('mul_text')">
</p>
<p align="center">
<textarea name="textarea" id="mul_text_area"></textarea>
</p>
<br>
</div>
<div id="bool_lev" style="position:absolute; top: -1000px; z-index:1; visibility: hidden;">
<p align="center">Default Value</p>
<p align="center">
<input type="file" name="file" id="mul_file"></p>
<p align="center">
<input name="Add" type="button" id="Add2" value="+" onClick="add_res('mul_file')" align="middle">
</p>
<p align="center">
<textarea name="textarea2" id="mul_file_area"></textarea>
</p>
</div></td>
</form>
</body>
</html>
Con Firefox nessun problema.
Con Internet Explorer, invece, scompaiono le caselle di input. E la cosa strana è ke, invece, le label rimangono correttamente al loro posto!!!!!!
Il prob è in quel
divs[i].style.position = "absolute";
nella funzione. Sembra ke gli "input" ereditino quel valore e poi nn c'è modo di farlo tornare relative!
E allora, perchè nn levarlo? Provate a commentarlo e vedete ke succede (sia con Firefox, sia con IE)!
AIUTOOO!!
Grazie lo stesso,cmq!!
Brainkiller
Profilo
| Guru
7.999
messaggi | Data Invio:
gio 18 gen 2007 - 11:18
>nella funzione. Sembra ke gli "input" ereditino quel valore e
>poi nn c'è modo di farlo tornare relative!
>E allora, perchè nn levarlo? Provate a commentarlo e vedete ke
>succede (sia con Firefox, sia con IE)!
Quello che stai facendo è un po' strano.
Se non sbaglio sposti i div a posizione -1000px per spostarli fuori dallo schermo ?
Assurdo!
E' sufficiente che fai 3 div così:
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
li metti tutti con visibilità hidden, non tocchi il positioning, quindi rimuovi tutti i riferimenti ad absolute, relative e quant'altro, e poi gestisci il click cambiando solamente lo stile css della visibilità, visible o hidden.
In genere io uso lo stile CSS display:none per fare queste cose.
Tra parentesi il tuo codice non va neanche su Opera.
Ciao
David De Giacomi | Microsoft MVP
http://blogs.dotnethell.it/david/
poldo000
Profilo
| Newbie
5
messaggi | Data Invio:
gio 18 gen 2007 - 11:45
MA SEI UN GRANDE!
Supponevo ke la proprietà display e visibility avessero pressokè lo stesso comportamento.
Ed ero costretto a sparare i div invisibili in alto xkè altrimenti, anke se invisibili, occupavano spazio e mi si allungava la colonna della tabella!!
E' bastato mettere display:none o block e tutto funzia!
Grazie!
Giakkè mi trovo, e ke 6 stato così gentile e solerte a rispordermi, ti vorrei fare un'altra domanda
Vorrei sapere che differenza c'è tra la funzione load con oggetti DOM (activeX o "document.implementation.createDocument") e la open di ajax, successiva alla XMLhttprequest. Il mio obiettivo è caricare un file xml (e xsl relativo) garantendo la compatibilità sui diversi browser.
Posso usare una qualsiasi di queste due? Ke cambia (in soldoni)?
GRAZIEEEEEE!!!
Brainkiller
Profilo
| Guru
7.999
messaggi | Data Invio:
gio 18 gen 2007 - 11:54
>Posso usare una qualsiasi di queste due? Ke cambia (in soldoni)?
Allora XMLHttpRequest sta subendo un processodi standardizzazione sul W3, questo perchè come al solito ogni Browser a partire da IE la implementava a suo piacimento e poi le applicazioni andavano su uno e non sull'altro, qui trovi i riferimenti del working draft:
http://www.w3.org/TR/XMLHttpRequest/
Diciamo che il supporto è molto buono sui Browser più usati, IE, Firefox, ecc. In ogni caso su IE è sempre possibile utilizzare l'oggetto ActiveX. Leggiti questo post dove trovi un frammento di codice per utilizzare XmlHttpRequest, sia quello nuovo, nativo di IE7 e compatibile anche con altri browser, sia il vecchio ActiveX per IE6 e IE5.
http://blogs.msdn.com/ie/archive/2006/01/23/516393.aspx
Accetta la mia risposta con l'apposito link.
Ciao
David De Giacomi | Microsoft MVP
http://blogs.dotnethell.it/david/
poldo000
Profilo
| Newbie
5
messaggi | Data Invio:
gio 18 gen 2007 - 12:16
Quindi, x adesso, è meglio utilizzare la "load" che, a quanto ho capito, è supportata da tutti i browser, compreso IE fino al 6 e creare un oggetto active x o document.implementation.createDocument a senconda del browser (IE o non IE), visto ke la open funziona in maniera diversa a seconda dei browser.
O erro?
Brainkiller
Profilo
| Guru
7.999
messaggi | Data Invio:
gio 18 gen 2007 - 14:00
>al 6 e creare un oggetto active x o document.implementation.createDocument
>a senconda del browser (IE o non IE), visto ke la open funziona
>in maniera diversa a seconda dei browser.
Io personalmente non ho mai usato document.implementation.createDocument, non so neanche esattamente come funziona. Non si tratta di Load o non Load ma quale oggetto utilizzare per fare chiamate remote, e in genere si dovrebbe utilizzare la nuova implementazione di XMLHttpRequest compatibile con tutti i Browser perchè si appoggia al Draft del W3 che ti ho indicato.
Il codice contenuto nell'altro Link ti dimostra come usare il supporto XMLHTTP sia per i browser recenti Firefox, Opera, IE7 sia per i vecchi IE6, IE5.
Ciao
David De Giacomi | Microsoft MVP
http://blogs.dotnethell.it/david/
Torna su
Stanze Forum
Elenco Threads
Partecipa anche tu! Registrati!
Hai bisogno di aiuto ?
Perchè non ti registri subito?
Dopo esserti registrato potrai chiedere
aiuto sul nostro
Forum
oppure aiutare gli altri
Consulta le
Stanze
disponibili.
Registrati ora !