Ridimensionare dinamicamente CFWindow per adattarsi al contenuto

Question

Attualmente sto lavorando a un sito che utilizza molti oggetti CFWindow e mi chiedevo se qualcuno sasse un modo per ridimensionare dinamicamente la finestra in modo che tutto il contenuto si inserisca senza la necessità di barre di scorrimento.

Ho provato a usare la configurazione Overflow = visibile ma non sembra fare la differenza.

Grazie in anticipo per qualsiasi consiglio.

Answer 1

Bene, questo è una specie di compito classico quando si utilizzano pop-up per la visualizzazione di immagini. È stato fatto misurando la dimensione dell'immagine e ridimensionando la finestra generata usando window.resizeBy(w,h). Questo è ancora un metodo applicabile, credo.

Seconda opzione simile è il calcolo della dimensione necessaria sul lato server e il passaggio al cfwindow attributi width e height. Dì, puoi catturare il contenuto nel cfcontent e controlla la sua lunghezza nei caratteri.

Si noti che entrambi questi metodi non sono affidabili quando si lavora con il contenuto di testo, perché il rendering dei caratteri può essere davvero diverso per gli utenti. Pertanto, può essere utile riservarsi un'altezza aggiuntiva.

Un altro modo complicato è verificare se sono presenti barre di scorrimento, per una finestra già aperta. C'è un attributo scrollHeight con cui puoi confrontare clientHeight e aumentare l'altezza. Questo può eventualmente produrre alcuni brutti effetti di "salto" in alcuni browser, ma dovrebbe funzionare.

Ero interessato e ho provato un test rapido dell'ultimo metodo. Primo pop-up generato con W/H = 200 e questo testo di risposta (parole sopra) come contenuto. Successivamente l'ho fatto nella finestra pop-up:

<script type="text/javascript">
window.onload = function() {

    // check the size before resize
    alert("Window Width = " + window.innerWidth + "\nWindow Height = " + window.innerHeight + "\nScrollHeight =  " + document.body.scrollHeight);

    if (window.innerHeight < document.body.scrollHeight) {
        // here's where we can play with resize steps and other specific trickery
        // now we're trying to expand size a bit
        window.resizeBy(window.innerWidth + 50, window.innerHeight + 50);
    }

    // check the size after resize
    alert("Window Width = " + window.innerWidth + "\nWindow Height = " + window.innerHeight + "\nScrollHeight =  " + document.body.scrollHeight);

}
</script>

Avviso n. 1:

Window Width = 200
Window Height = 200
ScrollHeight =  783

Alert #2:

Window Width = 450
Window Height = 450
ScrollHeight =  358

Si prega di notare che non sono sicuro al 100% (e non posso verificarlo in questo momento) window.innerWidth/Height Gli attributi funzionano in IE - dovresti anche considerare document.documentElement.clientWidth/Height attributi.

Spero che sia di aiuto.