Outils pour utilisateurs

Outils du site


Panneau latéral

webdev:javascript:snippets:resize_event

Le resize event

Permet de forcer un élément à avoir une hauteur de 80% :

    function checkSize()
    {
        // Adaptation de la hauteur de l'iframe de PDF viewer
        jQuery('iframe.pdfjs-viewer').height( jQuery(window).height()*0.8+"px" );
    }

    // Quand on change la taille de la fenêtre il faut réinitialiser menuPosition
    jQuery(window).resize(function(e)
    {
        checkSize();
    });

    // On vérifie une première fois au lancement
    checkSize();

Pour vérifier quelle largeur va faire une image si on met sa hauteur à 90% du viewport :

function change_size_seul()
    {
        if( jQuery(window).width() < 350 )
        {
            if( jQuery('.colonneB-image').first().children().first().attr('width') / jQuery('.colonneB-image').first().children().first().attr('height') * jQuery(window).height() * 0.9 > jQuery(window).width() )
            {
                // Si on redimentionne la hauteur de l'image à 90% de la hauteur du viewport elle va dépasser en largeur, donc on reste adapté en largeur
                jQuery('.colonneB-image').first().children().first().css('width', '100%').css('height', 'auto');
            }
            else
            {
                // Ça ne va pas dépasser, on peut se mettre à 90% de la hauteur
                jQuery('.colonneB-image').first().children().first().css('width', 'auto').height( jQuery(window).height()*0.9 );
            }
        }
        else
        {
            jQuery('.colonneB-image').first().children().first().css('width', '100%').css('height', 'auto');// Réinitialise la taille de l'image en cas de retour en 2 colonnes
        }
        
        jQuery('#colonneB').height( jQuery('.colonneB-image').first().height()+20 );// Une fois la taille de l'image modifiée on peut adapater la taille de #colonneB
    }
    
    jQuery(window).resize(function(e)
    {
        change_size_seul();
    });

La formule est : (largeur image / hauteur image) x hauteur viewport * 0,9

webdev/javascript/snippets/resize_event.txt · Dernière modification: 05/11/2018 17:36 de dolo