object central de largeur variable à l’aide de jQuery

Besoin de centrer un object dont la largeur change en fonction de la fenêtre du navigateur. Habituellement, j’utilise css avec les positions supérieure et gauche définies à 50% avec une marge négative égale à la moitié de la largeur et de la hauteur, mais cela ne répondrait évidemment pas à ce besoin.

Je pensais que ma fonction jQuery fonctionnerait … mais pas de bueno. est-ce que je manque quelque chose en CSS?

Merci!

http://jsfiddle.net/danielredwood/EbkLg/2/

Voici le CSS

#t { width:25%; height:25%; background:red; } 

JavaScript

 $(window).resize(function(){ resizenow(); }); function resizenow() { var browserwidth = $(window).width(); var browserheight = $(window).height(); $('#t').css('left', (browserwidth - $(this).width())/2).css('top', (browserheight - $(this).height())/2); }); 

Dans votre JSFiddle que vous avez lié à vous utilisez $(this).width() :

 $('#t').css('left', ((browserwidth - $(this).width())/2)) .css('top', ((browserheight - $(this).height())/2)); 

Mais lorsque la fonction resizenow () est appelée, this == window . Si vous remplacez $(this) par $("#t") cela fonctionnera bien, comme le montre ce JSFiddle: http://jsfiddle.net/jackfranklin/F2tR3/1/

Dans la fonction css() de jQuery, sa valeur n’est pas définie sur l’élément dont vous modifiez le (s) style (s), d’où la raison pour laquelle votre code d’origine n’a pas fonctionné.

Quelque chose comme ça?

  $(document).ready(function(){ var browserwidth = $(window).width(); var browserheight = $(window).height(); var x=browserwidth/4; $('#t').css({'left': (browserwidth - x)/2 + 'px', 'top': (browserheight - x)/2 + 'px'}); $(window).resize(function(){ var browserwidth = $(window).width(); var x=browserwidth/4; var browserheight = $(window).height(); $('#t').css({'width' : x, 'height' : x, 'left': (browserwidth - x)/2 + 'px', 'top': (browserheight - x)/2 + 'px'}); }); #t { width: 500px; height: 500px; position: relative; background:red; } }); 

Ou si vous ne voulez pas que ce soit un carré, ne définissez pas simplement la largeur et la hauteur dans jQuery, utilisez pourcentage dans css.

C’est la façon dont la valeur est analysée pour les valeurs de gauche et du haut que vous essayez de définir. Si vous les séparez comme ça, ça marche:

 var widthDelta = $(window).width() - $('#t').width(); var heightDelta = $(window).height() - $('#t').height(); $('#t').css('left', widthDelta / 2).css('top', heightDelta / 2); 

Je n’ai pas analysé exactement ce qui n’allait pas – j’ai juste cherché quelque chose qui a fonctionné en premier – je devrai l’examiner de plus près pour voir quel était le problème en particulier.

jQuery width() et height() renvoient une valeur de pixel sans unité conformément à la documentation jQuery .

Mais lorsque vous le reconnectez dans un calcul pour css() de jQuery, vous devez append l’étiquette des unités “px”.


MODIFIER:

Si votre calcul est basé sur des pourcentages, alors tout est faux puisque width() et height() sont des valeurs en pixels. Quoi qu’il en soit, vous devez toujours append des unités, «px» ou «%» dans css() de jQuery.


EDIT2:

Apparemment, css() utilise par défaut des pixels, mais si le PO utilise des pourcentages, il faut alors '%' .

Cela centrera horizontalement le div rouge, et sa largeur et sa hauteur changeront de façon dinamique en fonction de la taille de la fenêtre du navigateur;

 

Maintenant, le centrage vertical est une histoire un peu plus complexe …

Essayez d’append la position: fixée à votre CSS. Cela signifie que tout positionnement que vous spécifiez pour l’élément sera par rapport à la fenêtre réelle au lieu du document.

Je ne sais pas si cela résoudra le problème, mais ce devrait être le cas.