JQuery Kochbuch (German Edition)

elementOffset.left;
    }

    var percentVerticalVisible = (verticalVisible / elementHeight) * 100;
    var percentHorizontalVisible = (horizontalVisible / elementWidth) * 100;

    if (percentVerticalVisible < 50 || percentHorizontalVisible < 50) {
     alert('weniger als 50% des Elements sind sichtbar, daher Scrollen');
     scrollToPosition(elementOffset);
    } else {
     alert('Element ist ausreichend sichtbar, daher kein Scrollen');
    }

} else {
    // Element ist nicht sichtbar, daher Scrollen
    alert('Element ist nicht sichtbar, daher Scrollen');
    scrollToPosition(elementOffset);
}

});
    ----
    Note
    Das Plugin scrollTo von Ariel Flesler bietet einen direkten Zugriff auf viele dieser Methoden. Sie schreiben einfach
$.scrollTo('#myElement')
und das Plugin kümmert sich um das Bestimmen der Position des Zielelements.
    ----

Zentrieren eines Elements im sichtbaren Bereich
    Problem
    Sie wollen im Fenster so scrollen, dass ein Element in der Mitte des sichtbaren Bereichs liegt.
    Lösung
    Holen Sie sich die Dimensionen des sichtbaren Bereich, bestimmen Sie Breite, Höhe und Offset des Elements und mit ein bisschen Rechnen zentrieren Sie dann das Element im sichtbaren Bereich:
jQuery(document).ready(function() {
    jQuery('#bar').click(function() {
     var viewportWidth = jQuery(window).width(),
     viewportHeight = jQuery(window).height(),

     $foo = jQuery('#foo'),
     elWidth = $foo.width(),
     elHeight = $foo.height(),
     elOffset = $foo.offset();

     jQuery(window)
     .scrollTop(elOffset.top + (elHeight/2) - (viewportHeight/2))
     .scrollLeft(elOffset.left + (elWidth/2) - (viewportWidth/2));
    });
});
    In den letzten Zeilen addieren wir den oberen Offset zur halben Höhe des Elements, um die vertikale Mitte des Elements zu bestimmen. Dann subtrahieren wir die halbe Höhe des sichtbaren Bereichs, um die Position zu bestimmen, an die das Fenster scrollen soll. Eine ähnliche Rechnung führen wir anschließend durch, um das Fenster auch horizontal zu zentrieren.

Absolute Positionierung eines Elements an seiner aktuellen Position
    Problem
    Sie wollen ein statisch oder relativ positioniertes Element in ein absolut positioniertes Element umwandeln.
    Lösung
    Um das zu erreichen, holen wir uns einfach die Position des Elements und nutzen diese, um die CSS-Eigenschaftenentsprechend zu setzen:
var $myElement = jQuery('#foo p').eq(0),
     elPosition = $myElement.position();

     $myElement.css({
     position : 'absolute',
     top : elPosition.top,
     left : elPosition.left
     });
    Wir können ein Element auch relativ zu seiner aktuellen Position versetzen:
var $myElement = jQuery('#foo p').eq(1),
     elPosition = $myElement.position();

     $myElement.css({
     position : 'absolute',
     top : elPosition.top + 20,
     left : elPosition.left + 20
     });

Ein Element relativ zu einem anderen Element positionieren
    Problem
    Sie wollen ein neues Element relativ zu einem bestehenden Element positionieren.
    Lösung
    Holen Sie sich die Breite, Höhe und den Offset des bestehenden Elements und nutzen Sie diese Werte, um das neue Element dementsprechend zu positionieren.
    Schauen Sie sich folgenden HTML-Code an:



    Der folgende Code fügt nun ein Element als Geschwister-Element hinzu, positioniert es aber »innerhalb« des Elements – 10 Pixel vom oberen und linken Rand des bestehenden Elements entfernt und 20 Pixel kleiner:
jQuery(document).ready(function() {
    var $foo = jQuery('#foo'),
     fooPosition = $foo.position(),
     $tooltip = $('').insertAfter($foo);

    $tooltip.css({
     position : 'absolute',
     top : fooPosition.top + 10,
     left : fooPosition.left + 10,
     width : $foo.width() - 20
    });
});
    Wollen Sie das neue Element irgendwo anders auf der Seite platzieren – soll es also kein Geschwister-Element des bestehenden Elements werden – dann können Sie Ihren Code so anpassen, dass er sich am Offset des ursprünglichen Elements anstatt an der Position orientiert:
jQuery(document).ready(function() {
    var $foo = jQuery('#foo'),
     fooOffset = $foo.offset(),
     $tooltip = $('').appendTo('body');

    $tooltip.css({
     position : 'absolute',
     top : fooOffset.top + 10,
     left : fooOffset.left + ($foo.width() / 2),
     width : $foo.width() - 20
    });
});

Stylesheets abhängig von der Browser-Breite