Verwenden der Jquery Position Funktion

Ich arbeite an etwas, das im Grunde eine Visitenkarte online erstellen wird.Verwenden der Jquery Position Funktion

Ich versuche, die div Tags mit CSS zu legen. Dann möchte ich die x und y Koordinaten der div Tags relativ zu ihrem Container greifen, so dass es an PHP GD-Bibliothek weitergegeben werden kann, so dass das Bild erstellt werden kann.

Ich habe versucht, die .position() Funktion in jquery verwenden, aber es gibt die relative Position.

Hat jemand irgendwelche Hinweise, die helfen können?

Quelle

2009-04-07 user88039

Ich denke, Sie denken, dass Sie in der Lage sein werden, einen Screenshot des Bildes mit der PHP GD-Bibliothek zu machen? Ist das der Fall? Ich glaube nicht, dass das tun wird, was Sie wollen. – cgp

$ (elem).offset() – James

Überprüfen Sie die jQuery dimensions plugin, um die richtige Position eines Elements zu finden.

EDIT: Wie in den Kommentaren erwähnt, wurde das Dimensions-Plugin in den Kern zusammengeführt. Dokumentation finden Sie hier: offset und hier position.

Das verlinkte Beispiel könnte wie folgt erweitert werden: Ersetzen Sie den folgenden Code

var x = $("#Company_Name").position().left; 
var y = $("#Company_Name").position().top; 

$("p:last").text("Full Name: left: " + x + ", top: " + y);

mit diesem:

var $companyname = $("#Company_Name"); 
var x = $companyname.position().left; 
var y = $companyname.position().top; 
var ax = $companyname.offset().left; 
var ay = $companyname.offset().top; 

$("p:last").text("Full Name: left: " + x + "/" + ax + ", top: " + y + "/" + ay);

Hinweis, ich habe nur einmal das Element gesucht und es in eine Variable gestopft. Das ist eine gute Idee, wenn die Suche einige Zeit dauern kann.

EDIT2: Ich habe gerade festgestellt, dass dies nicht funktioniert, wie ich es erwartet habe. Ich habe eine Funktion geschrieben, um die relative Position zu berechnen:

Lassen Sie mich wissen, ob dies für Sie funktioniert. Und jemand kann mir sagen, was ist der Unterschied zwischen der Position und Offset in jQuery: - \

EDIT3: Um die Position mehr als ein Element zu erhalten, können Sie die Funktionen mit unterschiedlichen ids nennen oder geben sie alle gleich Name oder die gleiche Klasse, um etwas zu haben, um sie alle auszuwählen. Hier ist ein funktionierendes Beispiel:

<html> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 

<script type="text/javascript"> 

function toString(obj){ 
    return "{top: " + obj.top + " left: " + obj.left + "}"; 
} 

function getRelativePosition(selector){ 

    var $parentElem = $("#parentElem"); 
    var $element = $(selector); 

    var elementPosition = $element.position(); 
    var parentPosition = $parentElem.position(); 

    return {top: elementPosition.top - parentPosition.top, 
     left: elementPosition.left - parentPosition.left}; 
} 

$(document).ready(function(){ 

$(".cardfield").each(function(i){ 

    var position = $(this).position(); 
    var relativePosition = getRelativePosition(this); 

    $("p:last").append("element: " + this.id + " position: " + toString(position) + " relativePosition: " + toString(relativePosition) + "<br>"); 

}); 
}); 

</script> 
</head> 
<body> 

<br><br><br><br><br> 

<div id="parentElem" style="margin: 0px; top:10px; background-color: #ddd;"> 
<br><br> 
<div class="cardfield" id="Company_Name1">Foo Bar</div> 
<br> 
<div class="cardfield" id="Company_Name2">Company Name</div> 
<div class="cardfield" id="firstname" style="float: right;">Tim</div><br/> 
<div class="cardfield" id="lastname" style="float: right;">B&uuml;the</div> 
<br><br> 
</div> 

</p></p> 
</body> 
</html>

Anmerkung: Ich habe alle Felder der Klasse „cardfield“ und verwendet die jQuery, um sie auszuwählen. Dann habe ich die each Funktion verwendet, um mit den Elementen zu arbeiten. Innerhalb der Funktion, die ich jedem gegeben habe, bezieht sich "dies" auf das aktuelle Objekt.

Quelle

2009-04-07 10:53:42

das Plugin ist Teil von JQuery Core seit 1.3 (glaube ich) – mkoryak

Ich lese das auch, aber sie nahmen nur die beliebtesten oder Funktionen oder etwas, oder? Könnten Sie einen Zeiger zur Verfügung stellen? –

Hey yeah Dieses Plugin wurde bereits erwähnt, weiß jemand und gute Dokumentation darüber, die mir helfen kann, es für ein kleines Beispiel für Code zu verwenden, um die Position des div-Tags relativ zum Container zu zeigen? – user88039

für perfekte Position des Elements mit Absolute

var position = window.jQuery(this).position(); 

var parent_pos = window.jQuery(this).parent().position(); 

var xpos = position.top - parent_pos.top; 
var ypos = position.left - parent_pos.left;

, wenn Sie ganze die Mutter div Namen oder die ID, dann können Sie schreiben, wie

var parent_pos = window.jQuery(this).parent('#cardcreate').position();

folgen das funktioniert perfekt dafür.

Quelle

2012-11-30 11:17:04

Verwenden der Jquery Position Funktion

Antwort

Verwandte Themen