Centrare un elemento sullo schermo con ausilio di JQuery

Rate this post

A volte può essere necessario centrare verticalmente ed orizzontalmente un elemento nella finestra del browser (per esempio dovevo centrare il loader di una chiamata ajax, elemento era bindato su ajaxstart() e ajaxstop()), e mentre per l’orientamento orizzontale non ci sono difficoltà (basta usare css, per es. margin: 0px auto), per quello verticale bisogna sudare un pochetto.

Dopo una veloce ricerca su internet mi sono imbattuto su questo articolo. Io ho aggiunto una leggera modifica, ed ecco il risultato:

Si procede applicando un plugin di jquery (basta che includete il codice in modo tale che vada caricato dopo la libreria di JQuery)
[js]
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).outerHeight() – this.outerHeight() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).outerWidth() – this.outerWidth() ) / 2+$(window).scrollLeft() + "px");
return this;
}
[/js]

L’utilizzo è abbastanza banale:
[js]
$("#idElement").center();
[/js]

Et voilà

You may also like...

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">