jQuery - Récupère la largeur d'un élément si la largeur de la fenêtre était 'x'

Je crée un plugin pour rendre les sites plus réactifs. La première étape consiste à créer une sécurité intégrée afin que les choses semblent toujours comme elles sont supposées le faire.jQuery - Récupère la largeur d'un élément si la largeur de la fenêtre était 'x'

Lors du chargement de la page, je souhaite obtenir la largeur des éléments à la taille maximale de la fenêtre. À l'heure actuelle, je fais ceci:

var theElements = ['div', 
       'section', 
       'table', 
       'article', 
       'aside', 
       'details', 
       'figcaption', 
       'figure', 
       'footer', 
       'header', 
       'hgroup', 
       'nav', 
       'section', 
       'summary']; 


for (var i=0; i<theElements.length; i++){ 

    $(theElements[i]).each(function(){ 
     var theWidth = $(this).width(); 
     $(this).css('max-width', theWidth + "px"); 
    }); 
}

Cela fonctionne assez bien, mais il obtient seulement la largeur de l'élément à la taille de la fenêtre à la page charge - donc si la fenêtre est seulement 500px, c'est la taille du contenant I suis coincé avec.

Ce que je voudrais faire

En termes simples, je suis en train de faire ce que la page est signifiait ressembler, comment il a été conçu pour regarder. Il n'y a aucun moyen de savoir si le concepteur du site a utilisé des marges, des valeurs de pixels concrets ou des pourcentages pour coder leur site. Le plus simple est donc de rendre la fenêtre assez large pour dire "Oui, c'est comme ça". Je voudrais pouvoir soit très rapidement définir la largeur de la fenêtre, par exemple, 1280px, calculer theElements largeurs puis le remettre à ce qu'il était (ce n'est pas une bonne option car il est envahissant pour l'utilisateur) ou sinon trouver un moyen de calculer la largeur des éléments SI la largeur du corps était de 1280px (beaucoup mieux UX mais pas sûr si c'est possible).

Quelle est la meilleure façon d'y parvenir?

Source

2013-01-23 Jascination

Vous pouvez définir le corps largeur de (ou, à défaut, l'élément de <html>) à 1280, calculer toutes vos largeurs, puis changer Auto. Tant que JS fonctionne sans interruption, le navigateur ne redessinera rien.

La seule autre option que je peux voir est de cloner tout le document dans un élément caché avec une largeur fixe, puis tout jeter. C'est un peu plus cher, cependant.

Source

2013-01-23 20:46:23 Eevee

J'ai utilisé une variante de cette réponse - J'ai obtenu la largeur initiale du corps et l'ai placée dans une variable, j'ai défini la largeur à 1280px, j'ai couru mon code, j'ai redéfini la largeur du corps. Pour mes fins, cela a eu le plus de sens et a joué avec les choses les moins. – Jascination

Bien que je ne comprenne pas entièrement pourquoi vous définissez la largeur maximale de vos éléments à la largeur de vos éléments, cela devrait le rendre sensible aux changements de taille d'écran.

$(window).on("resize", function(){ 
    for(var i = 0, n; n = theElements[i]; ++i){ 
    $(n).each(function(){ 
     $(this).css({"max-width" : $(this).width() + "px"}; 
    }) 
    } 
})

Source

2013-01-23 20:44:33

J'ai clarifié un peu la question, voir «Ce que j'essaie de faire» ci-dessus. Je ne veux pas écouter le redimensionnement de la fenêtre car cela va à l'encontre du but! – Jascination

jQuery - Récupère la largeur d'un élément si la largeur de la fenêtre était 'x'

Répondre

Questions connexes