Popup che si ridimensiona automaticamente in base alle dimensioni di un div

**LCV** · 26-07-2007, 14:55

Ho un sito con gallerie. Per ingrandire ciascuna immagine di una galleria sono ricorso al classico popup tramite <a href... onclick="window.open" ecc.>, che non fa che aprire un file html con un'immagine più grande, con una didascalia e poco testo insomma.

Ciascun html da aprire nel popup ha dimensioni diverse. Anziché creare tante funzioni javascript ne ho fatta una sola che mi permette di inserire i parametri width e height della nuova finestra ogni volta che chiamo quella funzione.

In ogni caso le pagine da aprire come popup sono molte e andranno aggiornate o cambiate nel tempo, sicché andare di volta in volta a controllare le dimensioni della pagina da aprire e trascriverle nella pagina che le chiama è un po' una seccatura

Mi chiedevo se non ci fosse la possibilità di usare un javascript per aprire un popup al centro dello schermo che si ridimensionasse automaticamente in base alle dimensioni di un layer che contiene immagini e testo di quella pagina html aperta dal popup. In pratica andasse a leggersi gli stili "height" e "width" di uno specifico DIV e copiasse quegli attributi per definire la propria alterzza e larghezza.

In questo modo nelle pagine da cui devo aprire i popup non dovrei definire nulla ogni volta, ma solo la pagina da aprire come popup.

Ho fatto alcune ricerche, ma ho trovato solo soluzioni datate, alcune un po' contorte e che non funzionano sui moderni browser (FF perlomeno).

Questa soluzione che espongo di seguito funziona con IE6, non funziona con FF2 né Opera9, ignoro se funzioni con IE7.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>Popup resized to fit content</title>


<script type="text/javascript">

function resizeWin() {
    if (document.all) {
        winHeight=document.all['window'].offsetHeight;
        winWidth=document.all['window'].offsetWidth;
    }
    window.resizeTo(winWidth+30,winHeight+60);
    if (window.moveTo) window.moveTo((screen.availWidth-winWidth)/2,(screen.availHeight-winHeight)/2);
}

</script>


</head>


<body onload="resizeWin()">

    <table style="border:0; text-align:center; vertical-align:middle">
        <tr>
            <td>
                <div id="window" style="width:300px; height:300px">
                
                    

Content goes here</p>

                </div>
            </td>
        </tr>  
    </table>

</body>

</html>

occorre chiamare la pagina di cui sopra in'unaltra pagina in cui sia contenuto il seguente link:

codice:

Test

Non c'è nessuna soluzione semplice per creare un popup cross browser che faccia al caso mio?

grazie

**LCV** · 27-07-2007, 21:19

ancora non ne sono venuto a capo

dunque riassumendo in breve
ho fatto 2 file html,

uno chiamato index.html
e l'altro (il popup) popup.htm

nel primo - index.html - ci ho messo nel body solo questa riga:

codice:



Apri popup
</p>

nel secondo, il popup, ci ho messo nell'head questo javascript:

codice:

<script type="text/javascript">
    function resizeWin() {
        var x=getComputedStyle(document.getElementById('bodyarea'),'').width,
	     y=getComputedStyle(document.getElementById('bodyarea'),'').height;
       }
        window.resizeTo(parseInt(x,10),parseInt(y,10));
window.moveTo(((parseInt(screen.width,10)-parseInt(x,10))/2),((parseInt(screen.height,10)-parseInt(y,10))/2));
       }

</script>

poi nel body ho specificato "onload="resizeWin()" e all'interno del body ho inserito un div con id="bodyarea" e style="width:200px; height:400px"

purtroppo ho provato sia in IE6 che FF2 ma non funziona

il popup si apre, ma la dimensione è sempre la stessa (più grande) e non
è nemmeno al centro dello schermo, ma in alto a sx (non a margine dello schermo);

cambiando le dimensioni height e width del DIV non cambia nulla

ho inserito del testo nel div e solo quello viene influenzato dalle
dimensioni specificate dallo stile

Dove ho sbagliato?

ciao

Discussione: Popup che si ridimensiona automaticamente in base alle dimensioni di un div

Strumenti discussione

Ricerca discussione

Visualizza

Popup che si ridimensiona automaticamente in base alle dimensioni di un div

Permessi di invio