tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
1
ZUGRIFFE
2994
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 10.02.09 19:15 #1
    OneGunner Tutorials.de Gastzugang
    Code:
    PHP-Code:
    $.fn.x = function(n) {
    var     result = null;
    this.each(function() {
    var     o = this;
    if (    n === undefined) {
    var     x = 0;
    if (    o.offsetParent) {
    while (    o.offsetParent) {
    x += o.offsetLeft;
    o = o.offsetParent;
    }
    }
    if (    result === null) {
    result = x;
    } else {
    result = Math.min(result, x);
    }
    } else {
    o.style.left = n + 'px';
    }
    });
    return     result;
    };

    // Quelle: http://osdir.com/ml/lang.javascript.jquery/2006-10/msg00242.html

    $(document).ready(function(){
        $(    "#box").click(function () {
                alert($(this).x());
        });
    }); 
    Leider bekomme ich die Position des Elements im Bodybereich angezeigt,
    aber ich würde gerne die relative Position vom Element selbst bekommen.
    Also ich hab eine DIV-Box die 500px breit und 250px hoch ist
    und beim draufklicken würde ich gerne die relative Mausposition
    vom Startpunkt der Box aus erhalten.
    jQuery - onclick-veranschaulichung.jpg
     
    Zitieren Zitieren
  2. 11.02.09 00:13 #2
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    überwache den click-Event für das Dokument. Tritt er ein, prüfst du, ob das auslösende Element das geforderte DIV-Element ist. Im Erfolgsfall ermittelst du die Klickkoordinaten (über das Event-Objekt) und subtrahierst davon die Koordinaten des DIV-Elements.

    Beispiel:
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
$(document).ready(function(){
  $(document).click(function(objEvt) {
    if(objEvt.target.id == "tester"){
      alert("x = " + (objEvt.pageX - $('#tester').offset().left) + "\ny = " + (objEvt.pageY - $('#tester').offset().top));
    }
  });
});
 //-->
</script>
</head>
<body>
<div style="padding: 30px; margin: 50px; border: 1px solid #f00;">
  <div style="width: 100px; height: 100px; border: 1px solid #0f0;"></div>
  <div id="tester" style="width: 100px; height: 100px; border: 1px solid #000;"></div>
</div>
</body>
</html>
    Ciao
    Quaese
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
« Java Version prüfen | Webseiten-Skriptfehler beheben?! »

Ähnliche Themen

  1. Formularverarbeitung im Hintergrund +File Upload / jquery /jquery.valitation
    Von Strafi im Forum PHP
    Antworten: 3
    Letzter Beitrag: 20.10.10, 20:47
  2. [jQuery-dataTables] jQuery dataTable erstellen mit DB-Einträgen
    Von Bexx im Forum Javascript & Ajax
    Antworten: 9
    Letzter Beitrag: 22.07.10, 15:51
  3. [jQuery] - Selektor Prinzip bzw. Struktur von jQuery nachbilden
    Von Munch im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 12.07.10, 13:27
  4. jQuery: jQuery auf AJAX Response anwenden
    Von pointsdächster im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 12.04.10, 01:15
  5. onmouseover omousout onclick ... bei onclick soll der divlayer stehenbleiben
    Von webjumper im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 06.09.07, 15:18