miércoles, 23 de mayo de 2012

Saber la posición exacta de un elemento mediante position() jquery


Saber la posición exacta de un elemento mediante position() jquery

position() es una función de jquery que nos devolverá mediante un número las coordenadas x("top") e y("left") del elemento seleccionado, este número hace referencia a píxeles.

En el siguiente ejemplo puedes ver como mediante Jquery se puede obtener la posición, por ejemplo de un div ...


Pulsa el siguiente botón para ver el posicionamiento de la caja ...




El código es el siguiente ...

<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(":button#boton").click(function() {
$("#caja").animate({left: "+=100", top: "+=250"}, 3000, function(){
$("#caja").html("LEFT: " + $("#caja").position().left + " TOP: " + $("#caja").position().top);
});
$("#caja").animate({left: "-=100", top: "-=250"}, 3000, function(){
$("#caja").html("LEFT: " + $("#caja").position().left + " TOP: " + $("#caja").position().top);
});
});
});
</script>
</head>
<body>
<input type="button" id="boton" value="Position()">
<div id="caja" style="background-color: black; width: 150px; height: 60px; position: relative; color: white;"></div>
</body>
</html>