Kontakt

michael trenkler eBuisness Solutions
Humboldtstraße 1
79098 Freiburg

Email info@mtcd.de
Telefon+49 761 453 89 72  
Mobil+49 151 234 34 080

jQuery Tricks - mit center() ein Element zentrieren

Es gibt so ein paar Dinge, die mir an jQuery fehlen. Und für die es nicht zwangsläufig ein Plugin braucht.

Beispielsweise eine Funktion zum Zentrieren eines Elementes auf der Seite.
Für diese Aufgabe existieren (wie immer) mehrere Lösungsansätze, folgender funktioniert sehr gut für mich:

 

Beispiel

Dieses Beispiel ist mit jQuery center() zentriert

Quelltext des Beispiels (inklusive HTML und CSS)

<button id="triggerExample">Beispiel zentriert anzeigen</button><div id="exampleDiv">
  Dieses Beispiel ist mit jQuery center() zentriert<br/><button id="close">Schliessen</button></div><style>
button#triggerExample       {}
div#exampleDiv              {display:none;box-shadow:2px 2px 2px #aaa;width:400px;height:200px;padding:20px 10px;border:1px solid #aaa;background:white}
div#exampleDiv button.close {}
</style><script>
  jQuery('document').ready(function(){

  jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
    this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
    return this;
  }

    jQuery('button#triggerExample').click(function(){
      jQuery('div#exampleDiv').show();
      jQuery('div#exampleDiv').center();
    });

    jQuery('button#close').click(function(){
      jQuery('div#exampleDiv').hide();
    });

  });

</script>
 
 
 

Definition der jQuery-Funktion

// Definition:
// Vor jQuery(document).ready(function(){..

jQuery.fn.center = function () {
  this.css("position","absolute");
  this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
  this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
  return this;
}

// Aufruf:
$('selector').center();