Next »
95/185
« Previous

.offset()

In this chapter you will learn:

  1. Syntax and Description for .offset() getter
  2. How to print offset for an event
  3. Syntax and Description for .offset() setter
  4. How to reposition an element

Syntax and Description for .offset() getter

.offset() (getter)

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

Its return value is an object containing the properties top and left.

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

The following code gets the offset of last b tag.

<html><!--from  ja va2s  .  c  o m-->
  <head>
    <script src="http://java2s.com/style/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 java2s.com java2s.com</b>
    </body>
</html>

Click to view the demo

Offset from an event

The following code prints out offset from an event.

<html><!--from ja  v a 2 s .  com-->
  <head>
    <script src="http://java2s.com/style/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 java2s.com java2s.com</b>
    </body>
</html>

Click to view the demo

Syntax and Description for .offset() setter

.offset(coordinates) setter

sets the current coordinates of the first element in the set of matched elements relative to the document. coordinates is an object containing the top and left properties. Return value is the jQuery object, for chaining purposes.

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

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

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><!--  j  ava  2s .  co m-->
<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/style/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">java2s.com</span>
  </p>
  <div id="box"></div>
</body>
</html>

Click to view the demo

Reposition an element

We can use .offset() setter 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><!--from j  av a 2s .com-->
<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/style/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

Next chapter...

What you will learn in the next chapter:

  1. Syntax and Description for .offsetParent()
Next »
« Previous