29. September 2023

Mit jQuery Position innerhalb eines divs bestimmen

Mit folgendem jQuery-Script kannst du die Postion eines Punktes innerhalb eines divs bestimmen. Das ist zum Beispiel sehr hilfreich wenn du den Fokuspunkt eines Bildes bestimmen willst oder wenn du ein Overlay baust.

<div class="container" style="width:100%; height:300px;"></div>
<div id="position" style="padding-top:10px;"></div>

<script>
$(document).ready(function() {
    var $element = $('.container');
    var $position = $('#position');

    $element.on('mousemove', function(event) {
        var posX = event.pageX - $element.offset().left;
        var posY = event.pageY - $element.offset().top;

        var percentX = (posX / $element.width()) * 100;
        var percentY = (posY / $element.height()) * 100;

        $position.text(`X: ${percentX.toFixed(2)}%, Y: ${percentY.toFixed(2)}%`);
  });
});
</script>Code-Sprache: HTML, XML (xml)