Redimensionner dynamiquement CFWINDOW pour adapter le contenu

Question

Je travaille actuellement sur un site qui utilise beaucoup d'objets cfwindow et je me demandais si quelqu'un connaît un moyen de redimensionner dynamiquement la fenêtre de sorte que tout le contenu s'intègre sans avoir besoin de barres de défilement .

J'ai essayé d'utiliser la configuration overflow = visible mais cela ne semble pas faire de différence.

Merci d'avance pour tout conseil.

Answer 1

Eh bien, c'est une sorte de tâche classique lorsque vous utilisez des pop-ups pour afficher des images. Cela a été fait en mesurant la taille de l'image et en redimensionnant la fenêtre générée en utilisant window.resizeBy(w,h). C'est toujours la méthode applicable, je pense.

La deuxième option similaire consiste à calculer la taille requise côté serveur et à passer aux attributs cfwindowwidth et height. Dites, vous pouvez capturer le contenu dans le cfcontent et vérifier sa longueur en caractères.

Veuillez noter que ces deux méthodes ne sont pas fiables lorsque vous utilisez du contenu textuel, car le rendu des polices peut être très différent pour les utilisateurs. Donc, réserver une hauteur supplémentaire peut être utile.

Autre manière compliquée de vérifier si des barres de défilement sont présentes, pour une fenêtre déjà ouverte. Il y a un attribut scrollHeight que vous pouvez comparer avec clientHeight et augmenter la hauteur. Cela peut éventuellement produire des effets de "saut" laids dans certains navigateurs, mais cela devrait fonctionner.

J'ai été intéressé et j'ai essayé le test rapide de la dernière méthode. Le premier pop-up généré avec w/h = 200 et ce texte de réponse (mots ci-dessus) comme contenu. Ensuite, je l'ai fait dans la fenêtre 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> 

Alert # 1:

Window Width = 200 
Window Height = 200 
ScrollHeight = 783 

Alert # 2:

Window Width = 450 
Window Height = 450 
ScrollHeight = 358 

S'il vous plaît noter que je ne suis pas sûr à 100% (et ne peut pas vérifier en ce moment) que les attributs window.innerWidth/Height fonctionneront dans IE - vous devriez considérer aussi les attributs document.documentElement.clientWidth/Height.

Espérons que cela aide.