Accueil > Carnet > Popup redimentionnée automatiquement

Après plus de 14 années de présence sur le web, je continue encore aujourd'hui cette incroyable aventure qu'est la découverte du virtuel. Lampe torche, sac à dos, planche de surf et bien sûr ce calepin indispensable pour mémoire.

#313 Popup redimentionnée automatiquement - 18 Novembre 2008

Javascript

Attention, il est important de considérer que cet article est une archive, son contenu est probablement obsolète!

Dans le cas où un site ouvre plusieurs popup de tailles différentes pour du contenu variable (image, document, information complémentaire), voici un petit script fonctionnant avec JQuery qui se charge de redimensionner automatiquement la fenêtre suivant le contenu correspondant.

Par contre, dans le cas où il ne s'agit que de texte et de paragraphes, il doit y avoir une largeur fixe dans le document, sinon la fenêtre sera étirée verticalement mais pas horizontalement.

J'ai testé avec un body d'une largeur de 700 pixels.

window.onload = function() {           
    /**
     * First of all, we're resizing the window to 200 x 200. And then
     * we're making a comparaison with the window element's dimensions. If dimensions 
     * aren't corresponding to 200x200, we're looking the differences in order to
     * make futher adjustements. 
     **/
    var size = 
    {
        w : 200,
        h : 200
    };
 
    window.resizeTo(size.w, size.h);
 
    var diff = 
    {
        w: Math.abs($(window).width() - size.w),
        h: Math.abs($(window).height() - size.h)
    };
 
    if(diff.w == 0 && diff.h) 
        return; 
 
    var resize = 
    {
        w:$(document).width()+diff.w,
        h:$(document).height()+diff.h
    };
 
    /**
     * We're looking at the available screen's sizes in order to 
     * see if our modifications aren't going to be out of the
     * screen. It should stay in. 
     **/
    if(resize.w > screen.availWidth) 
    {
        resize.w = screen.availWidth;
    }
 
    if(resize.h > screen.availHeight)
    {
        resize.h = screen.availHeight;
    }
 
    window.resizeTo(resize.w, resize.h);
    window.onresize = function() { };
};

Commentaires

Ajouter un commentaire