.offset()

Get the current coordinates of the first element in the set of matched elements relative to the document.

Syntax

.offset() (getter)

Parameters

None

Return value

An object containing the properties top and left.

Description

.offset() retrieves the current position of an element relative to the document.

.position()retrieves the current position relative to the offset parent.

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var b = $("b:last");
            var offset = b.offset();
            alert(offset.left);
            alert(offset.top);

        });
    </script>
  </head>
  <body>
    <body>

       <b>Hello asdf asdf</b>
    </body>
</html>

Click to view the demo

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("*", document.body).click(function (e) {
                  var offset = $(this).offset();
                  e.stopPropagation();
                  alert(this.tagName + " coords ( " + offset.left + ", " +
                                                  offset.top + " )");
           });
        });
    </script>
  </head>
  <body>
    <body>
       <b>Hello asdf asdf</b>
    </body>
</html>

Click to view the demo

Syntax

.offset(coordinates)

Set the current coordinates of the first element in the set of matched elements relative to the document.

Parameters

coordinates: An object containing the top and left properties

Return value

The jQuery object, for chaining purposes.

Description

.offset() setter method moves an element to new position.

The element's position is specified relative to the document.

Examples

The following code gets the offset of a div with an id of "box", and displays the left and top properties with an alert box:

 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
  position: absolute;
  left: 10px;
  top: 50px;
  width: 20px;
  height: 20px;
  background-color: green;
}
</style>
<script
  src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
  $(function() {
    $("div#box").click(function() {
      var pos = $(this).offset();
      $("#watcher").text(pos.top + ":" + pos.left);
    });
  });
</script>
</head>
<body>
  <p>
    Where is the box? <span id="watcher"></span>
  </p>
  <div id="box"></div>
</body>
</html>

Click to view the demo

To reposition an element:

$(selector).offset(coordinatesObject);

where coordinatesObject is any object that contains a top and left property set to integer values. For example:

 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
  position: absolute;
  left: 10px;
  top: 50px;
  width: 20px;
  height: 20px;
  background-color: green;
}
</style>
<script
  src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
  $(function() {
    $("div#box").click(function() {
      var pos = $(this).offset({
                    top:100,
                    left:100
                });
      $("#watcher").text(pos.top + ":" + pos.left);
    });
  });
</script>
</head>
<body>
  <p>
    Where is the box? <span id="watcher"></span>
  </p>
  <div id="box"></div>
</body>
</html>

Click to view the demo