El Posicionamiento: Top Left

El posicionamiento
De manera paralela a los mtodos de jQuery relacionados con los elementos, jQuery tiene mtodos
para determinar la posicin de stos.
position()
Devuelve el valor topy leftde la posicin de un elemento relativo a su elemento padre.
$("p:first").position();
Este mtodo devuelve un objeto de tipo object{top,left}.
offset()
Devuelve el valor topy leftde la posicin de un elemento relativo al documento.
$("p:first").offset();
Este mtodo devuelve un objeto de tipo object{top,left}.
Los mtodos scrollTop(valor) y scrollLeft(valor) son ms particulares, ya que permiten
modificar, para un elemento, su separacin con respecto al borde superior o al borde izquierdo. En
cierto modo, estos mtodos permiten controlar la amplitud de la barra de desplazamiento vertical y
horizontal.
scrollTop(valor)
Modifica la separacin (en pxeles) entre el borde superior del documento (top) y el elemento
seleccionado, tomando el valor que se pasa en el argumento.
valor: nmero positivo que representa la nueva distancia que se quiere aplicar (en pxeles).
$("div").scrollTop(300);
Este mtodo devuelve un objeto jQuery.
scrollLeft(valor)
Modifica la separacin (en pxeles) entre el borde izquierdo del documento (left) y el elemento
seleccionado, tomando el valor que se pasa en el argumento.
valor: nmero positivo que representa la nueva distancia que se quiere aplicar (en pxeles).
$("div").scrollLeft(300);
Este mtodo devuelve un objeto jQuery.
Ejemplo
Vamos a ilustrar esto con un ejemplo. Al hacer clic en un botn, vamos a permitir al usuario ir directamente
al segundo prrafo de un texto.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
div { position: relative;
width: 250px;
height: 130px;
border: 1px solid black;
margin-top: 10px;
padding: 3px;
font-size: 0.9em;
overflow: auto;}
p { margin:2px;
width:225px;
text-align: justify;}
span { font-weight: bold;
text-decoration: underline}
</style>
</head>
<body>
<button id="go">Ir al prrafo 2</button>
<button id="reset">Reset</button>
<div class="demo">
<p><span>Prrafo 1</span> Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Integer id semper enim. Vestibulum
metus felis, elementum sit amet tristique non, pulvinar vitae
metus. Pellentesque interdum, felis non placerat volutpat, nisi
justo eleifend magna, at tincidunt massa velit non dolor</p>
<p><span>Prrafo 2</span> In sem velit, placerat vel vestibulum
vel, interdum at tortor. Suspendisse vitae metus sem, ut venenatis
eros. Sed iaculis dapibus diam, in tempor eros tincidunt in. Ut id
vestibulum risus. Integer eu mauris at odio pharetra convallis.
In sem velit, placerat vel vestibulum vel, interdum at tortor.
Suspendisse vitae metus sem, ut venenatis eros. Sed iaculis
dapibus diam, in tempor eros tincidunt in. Ut id vestibulum risus.
Integer eu mauris at odio pharetra convallis.</p>
</div>
</body>
</html>
El script jQuery:
<script>
$(document).ready(function(){
$("#go").click(function () {
});
$("#reset").click(function () {
});
});
</script>
Explicacin del script:
Cuando se carga el DOM.
});
Al hacer clic en el botn, se modifica la posicin del texto con respecto al borde superior de la capa,
para ir al segundo prrafo.
});
El botn Reset restaura la separacin hacia arriba a su posicin inicial, para que aparezca de nuevo el
primer prrafo.
});
Fin del script.
El documento completo se presenta a continuacin.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="jquery.js" ></script>

<script>
});
});
});
</script>
<style>
div { position: relative;
width: 250px;
height: 130px;
border: 1px solid black;
margin-top: 10px;
padding: 3px;
font-size: 0.9em;
overflow: auto;}
p { margin:2px;
width:225px;
text-align: justify;}
span { font-weight: bold;
text-decoration: underline}
</style>
</head>
<body>
<button id="go">Ir al prrafo 2</button>
<button id="reset">Reset</button>
<div class="demo">
<p><span>Prrafo 1</span> Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Integer id semper enim. Vestibulum
metus felis, elementum sit amet tristique non, pulvinar vitae
metus. Pellentesque interdum, felis non placerat volutpat, nisi
justo eleifend magna, at tincidunt massa velit non dolor</p>
<p><span>Prrafo 2</span> In sem velit, placerat vel vestibulum
vel, interdum at tortor. Suspendisse vitae metus sem, ut venenatis
eros. Sed iaculis dapibus diam, in tempor eros tincidunt in. Ut id
vestibulum risus. Integer eu mauris at odio pharetra convallis.
In sem velit, placerat vel vestibulum vel, interdum at tortor.
Suspendisse vitae metus sem, ut venenatis eros. Sed iaculis
dapibus diam, in tempor eros tincidunt in. Ut id vestibulum risus.
Integer eu mauris at odio pharetra convallis.</p>
</div>
</body>
</html>

El Posicionamiento: Top Left

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

El Posicionamiento: Top Left

Uploaded by

Copyright:

Available Formats

El posicionamiento

<script src="jquery.js" ></script>

You might also like