js+css = ridimensionamento colonne

[Gumble]

ciao, uso questo javascript in onload pagina per settare l'altezza dei miei 3 div (colonne) al max dei tre.

<script type="text/javascript">

matchHeight=function(){

var divs,contDivs,maxHeight,divHeight,d;
  // get all <div> elements in the document
  divs=document.getElementsByTagName('div');
  //divs=document.getElementById('upperContainer').getElementsByTagName('div');
  contDivs=[];
  // initialize maximum height value
  maxHeight=0;
  // iterate over all <div> elements in the document
  for(var i=0;i<divs.length;i++){
    // make collection with <div> elements with class attribute 'container'
    if(/\bsys_box/.test(divs[i].className)){
    d=divs[i];
    contDivs[contDivs.length]=d;
    // determine height for <div> element
    if(d.offsetHeight){
    divHeight=d.offsetHeight;
    }
    else if(d.style.pixelHeight){
    divHeight=d.style.pixelHeight;
    }
    // calculate maximum height
    maxHeight=Math.max(maxHeight,divHeight);
    }
  }
  // assign maximum height value to all of container <div> elements
  for(var i=0;i<contDivs.length;i++){
    contDivs[i].style.height=maxHeight;
  }
}

il problema é che dentro a uno di questi box ho un campo "nascosto" che si apre solo cliccando su un'immaginetta (in verticale). al riclick suddetto campo si "richiude".

su IE funziona tutto ok, cioé: all'aprire il campo nascosto si allunga il box.. e al richiudere il box si riregstringe all'altezza predefinita grazie alla funzione!

PROBLEMA:

su firefox non va... quando appare il campo nascosto, mi sposta tutto il testo sotto di lui in verticale (giusto).. ma il box non si allunga.. cosi il testo finisce per uscire dai bordi del box...

spero di essermi spiegato. chi mi puo dare una mano????

[Gumble]

up... forse non sono stato chiaro? se caso ditemelo che rispiego

[Mich_]

Direi che manca il codice HTML, CSS e il DOCTYPE (o un link alla pagina).

Probabilmente tu pensavi ad un problema di JS, mentre il problema potrebbe essere HTML+CSS, sganciato dal JS.

[Gumble]

allora: ecco un estratto (quello che ci interessa) di html e css

html:

<div id="whole">
  <div id="upperContainer">
    <div id="sys_info" class="sys_box sys_box_l">
      sinistra sinistra sinistra
      <div id="hidden" style="display:{variabile}">nascosto nascosto</div>
    </div>
    <div id="type_info" class="sys_box sys_box_c">
      centro centro centro centro
    </div>
    <div id="user_info" class="sys_box">
      destra destra destra
    </div>
    <hr style="clear:left;">
  </div>
  <div id="bottom">
   altro altro altro
  </div>
</div>

variabile --> con php genero metto "none" e poi con un js faccio lo switch tra "none" e "block".

css:

div#whole{
  font-family: sans-serif;
  font-size: 13px;
  border:1px solid black;
  width:100%;
  max-width:1000px;
  margin-top:-0.1em;
  float:middle;
  background-color:#F0F0F0;
  text-align:right;
}

div#bottom{
  margin-top:0.5em;
  text-align:right;
  height:15px;
  font-family: sans-serif;
  font-size: 12px;
  border-top: 1px solid black;
  font-style: italic;
}


div#upperContainer{
  /*background-color:blue;*/
  position:relative;
}

.sys_box{
  width: 31%;
  float: left;
  border: 1px solid black;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 5px;
  background-color: #E0E0E0;
  /*height:100%;*/
}

.sys_box_c{
  width: 34%;
  margin-left: 3px;
  margin-right: 3px;
}
.sys_box_l{
  width:33%;
  margin-left:2px;
}

il fatto é che per motivi che non sto a spiegare non posso definire un'altezza per il contenitore.. quindi ho risolto col js per avere le 3 colonne alte uguali!...

all'onload della pagina (ma dopo che tutto il resto é stato fatto) richiamo la funzione e quindi ridimensiono le colonne. ma evidentemente firefox ha problemi se apro i div nascosti.

spero di essere stato piu chiaro

[Mich_]

Mi permetto di metterti qualche pulce nell'orecchio, dato che ci sono alcune cose che non capisco o non condivido.

Perche` hai usato un posizionamento? Non e` che inserisci piu` problemi di quanti ne risolvi?
Perche` devi determinare le altezze? non puoi lasciar fare al browser? (di solito e` piu` bravo di un programmatore)
Perche` non usi le "false colonne"?

Mi par di capire che il problema sta nel #upperContainer, che a sua volta e` suddiviso in tre colonne. E` corretto o sbaglio io ad interpretare?

[Gumble]

hai ragione.. sta nell'UpperContainer... ma infatti io di altezze non ne voglio definire.. la colonna di centro é piu lunga delle altre (in base ai contenuti).. quindi voglio che le altre 2 si adattino.

il fatto é che il mio div contenitore in realtà é contenuto da tutto un altro layout attorno (tabellare) e ha dimensioni fisse e ed é un casino completo. per il posizionamento: posso anche toglierlo.. ma non riesco cmq a risolvere il problema con firefox (ricordo che con IE va bene).

le false colonne: ho provato di tutto ma niente... inoltre non é cosi semplice come vedi.. dentro ai box ci sono ancora altri div e altre cose ed é molto complicato...

non sai da cosa puo dipendere? il problema é che il js definisce un'altezza in pixel e quindi allargando il div hidden firefox non si adegua (non infrange cioé l'altezza definita dal js) mentre IE se ne frega e apre!

[Mich_]

Come avrai capito la mia proposta era di rifare tutto il layout.
Rimango dell'idea che sia la soluzione migliore: pero` e` necessario che i blocchi siano definiti secondo il significato semantico, altrimenti diventa troppo complesso; invece mi par di capire che il significato semantico nella tua pagina non c'e`.

Per fare una sistemazione contingente, si puo` anche pensare di lavorare sul JS, con tutti i difetti che una soluzione JS ha in questi casi (e sono molti, anche se nel tuo browser probabilmente non li vedi).
Mi par di capire che la funzione JS parte in funzione di alcuni eventi, e che il problema e` che il click in quel dato punto non triggera il JS (o meglio lo triggera solo in alcuni brwoser, ma non in tutti). \
Allora potresti forzare l'avvio della funzione al click in quel campo/spazio.
Pero` non so come e` fatto il tuo "bottone", per cui non posso essere piu` preciso.