Newsgroup: it.comp.lang.javascript
Titolo: aprire dinamicamente un div delle dimensioni del padre

Salve a tutti.
Sto lavorando a una paginetta che usa javascript ma ho dei problemi.
Ho un div id="padre" che contiene una tabella.
Vorrei fare in modo che cliccando su una riga della tabella si apra un 
div id="messaggio" che abbia sfondo grigio e che contenga un messaggio 
preimpostato.
Non voglio usare alert, ma un'effetto tipo quello usato nelle gallery: 
lo schermo diventa grigio come se venisse frapposto un livello superiore 
e si vede l'immagine principale con sotto le anteprime delle altre.
Per essere più chiari: vorrei fare qualcosa di molto simile a quello che 
succede su google analytics quando si toccano le tabelle: compare 
l'iconcina "ajax loading" e poi viene aggiornata la tabella.
Ora vi chiedo: come faccio a far apparire un div che copra esattamente 
la misura del div padre?
Grazie a tutti.

 preimpostato.
puoi prendere spunto da questo:
// mostra/nasconde il div semitrasparente di attesa
// param elemento: l'elemento DOM che deve essere ricoperto/protetto dal
div
//                      Es.: document.forms[0] --> ricopre tutto il form
//                           document.getElementById("divElenco") -->
ricopre il div con id "divElenco"
// param azione:  "mostra"/"nascondi"
// param nomeGif  il nome della gif animata che simboleggia l'attesa
//                      Es.: "../image/attesaColor.gif"
function nascondiMostraDivAttesa(elemento, azione, nomeGif){
  inizializza();
  if (azione=="mostra"){
    if (!document.getElementById("divAttesaAnimato")){
      // crea il div
      var divAttesa = document.createElement("div");
      divAttesa.id = "divAttesaAnimato";
      divAttesa.style.top = elemento.offsetTop;
      divAttesa.style.left = elemento.offsetLeft;
      divAttesa.style.width = elemento.offsetWidth+"px";
      divAttesa.style.height = elemento.offsetHeight+"px";
      divAttesa.style.zIndex = 100;
      divAttesa.style.position = "absolute"; 
      // aggiunge il div di attesa al body
      var padre = elemento.parentNode;
      padre.appendChild(divAttesa);
      // aggiunge table al div
      var tabella = document.createElement("table");
 
tabella.id
="tableAttesa";
      tabella.style.width = elemento.offsetWidth+"px";
      tabella.style.height = elemento.offsetHeight+"px";
      tabella.border ="1px";
      divAttesa.appendChild(tabella);
      // aggiunge tbody alla table
      var tbody = document.createElement("tbody");
      tbody .id = "tbodyAttesa";
      tabella.appendChild(tbody);
      // aggiunge tr al body
      var riga = document.createElement("tr");
 
riga.id
 = "trAttesa";
      tbody.appendChild(riga);
      // aggiunge td alla tr
      var colonna = document.createElement("td");
 
colonna.id
 = "tdAttesa";
      colonna.align = "center";
      colonna.valign ="middle";
      colonna.style.backgroundColor="#ECECEC";
      if(document.all) { // ie
        colonna.style.filter='Alpha(opacity=50)';
      } else { // firefox
        colonna.style.opacity = 0.50;
      }
      //document.getElementById("trAttesa").appendChild(colonna);
      riga.appendChild(colonna);
      // crea l'immagine animata 
      var imgAnimata = document.createElement("img");
      imgAnimata.name="attesaAnimata";
      imgAnimata.src=nomeGif;
      // aggiunge l'immagine al td
      colonna.appendChild(imgAnimata);
    }
    mostra("divAttesaAnimato");
  } else {
    nascondi("divAttesaAnimato");
  }
}
function inizializza(){
 if (document.all) {
  documento="document.all";
  parA="["";
  parB=""]";
  visibilita=".style.visibility";
  nascosto=""hidden"";
  visibile=""visible"";
  } else if (document.layers){
   documento="document.layers";
   parA="["";
   parB=""]";
   visibilita=".visibility";
   nascosto=""hide"";
   visibile=""show"";
 } else if (document.getElementById) {
   documento="document.getElementById";
   parA="("";
   parB="")";
   visibilita=".style.visibility";
   nascosto=""hidden"";
   visibile=""visible"";
  }
}
function nascondi(livello) {
 eval(documento+parA+livello+parB+visibilita+"="+nascosto+";");
}
function mostra(livello) {
 eval(documento+parA+livello+parB+visibilita+"="+visibile+";");
}
ciao
mrz
-- 
questo articolo e` stato inviato via web dal servizio gratuito 
http://www.newsland.it/news
 segnala gli abusi ad 
ab...@newsland.it

 
grazie! mi metto subito a provare...

 
L'ho testato ed è pienamente funzionante! Mi sono permesso di 
"ritoccare" il tutto utilizzando un po' di css.
Grazie mille!

       divAttesa.style.left = elemento.offsetLeft;
Un'unico problema... se il div padre è a sua volta contenuto in una 
tabella... ad esempio è in una tabella 3x3 nella cella centrale (cioè la 
2,2) il div sovrapposto viene spostato a sinistra e in alto: in pratica 
non tiene conto dello "spessore" della prima colonna e della prima riga.
hai idea di quale possa essere il motivo?
intanto grazie comunque!

 intanto grazie comunque!
prego
riguardo alla domanda ho sempre usato quanto postato per coprire/bloccare
l'intero document o un div non annidato; ora non ho tempo per fare delle
prove ma penso che questo link possa essere di aiuto per risolvere il tuo
problema:
http://www.quirksmode.org/js/findpos.html
Se trovi la soluzione puoi postarla? (sia per me sia per altri a cui
potrebbe interessare)


 potrebbe interessare)
La soluzione era in quel link!
Fra 5 minuti pubblico tutto su un post dal titolo "le mie piccole 
funzioni per ajax".