How to Set the Offset in jQuery

June 3, 2023 | by Arround The Web | No comments

How to Set the Offset in jQuery

The “offset(coordinates)” is an object that contains the top and the left dimensions of an HTML element. These coordinates can be measured relative to their parent resource or to the document. The jQuery library provides the pre-defined “offset()” method to retrieve the offset coordinates of the HTML element relative to the document. It returns an object having two positions i.e., “top” and “left” in pixels. In addition, it also assists the user to set them properly as per requirements.

This guide explains the complete procedure to set the offset coordinates in jQuery.

How to Set the Offset in JavaScript?

The “offset()” method in jQuery sets or retrieves the current position(top, left) of the HTML elements corresponding to the window or document. It returns an offset value that is subtracted from all the coordinates of the associated HTML element and leaves a positive integer value as a reminder.

This section defines the generalized syntax to set and return the offset coordinate and also implements it practically with the help of an example.

Syntax (Set the offset Coordinates)

$(selector).offset({top:value,left:value})

The above syntax specifies the key values of the “top” and “left” coordinates of the specified selector in pixels as per user requirements.

Syntax (Return the offset Coordinates)

$(selector).offset()

The above syntax does not support any argument.

HTML Code

First, have a look at the stated HTML code:

<h2>jQuery Offset Method</h2>
<div id="Div1">
<p>This is a div.</p>
</div>
<button>Click it</button>
</body>

In the above code:

Define a subheading via the “<h2>” tag.
Next, add a “<div>” element having an id “Div1”.
Lastly, the “<button>” tag creates a button.

Note: This HTML code is considered throughout all the examples of this guide.

Example 1: Applying the “offset()” method to Set the HTML Element Offset Coordinates

This example applies the “offset()” method to set the HTML element offset coordinates using its defined generalized syntax.

jQuery Code

Let’s consider the following code:

</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").offset({top: 100, left: 100});
});
});
</script>
</head>

In the above code snippet:

The “<head>” tag includes the “<script>” tag that embeds the CDN path from the official website “https://jquery.com/” to enable jQuery.
After that, the second “<script>” tag first uses the “document” selector to select the targeted DOM element and associates the “ready()” method that defines the working of the “function()” when the document is loaded.
Next, the “button” selector is linked with the “click” method that will execute the function upon button click.
In the function definition, the “offset()” method is utilized to set the specified top and left positions of the targeted “div” HTML element, respectively.

Output

The outcome confirms that upon the button click, the offset coordinates of the desired HTML element change according to the defined parameters.

Example 2: Applying the “offset()” Method to Return the HTML Element Offset Coordinates

This section illustrates the working of the “offset()” method to return the offset coordinates of the targeted HTML element.

jQuery Code

Overview of the following code lines:

</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var elem=$("div").offset();
alert("Top: " + elem.top + " Left: " + elem.left);;
});
});
</script>
</head>

In the above code:

Recall the discussed approaches for associating the “ready()” and “click()” functions, respectively.
Now, the “function()” defines the variable “elem” that utilizes the “offset()” method to compute the fetched “div” element offset coordinates.
After that, the “alert” box utilizes the “top” property to return the top position and the “left” property to get the left position of the element, respectively.

Output

As seen, the output shows the alert box displaying the offset coordinates of the top and left positions upon button click.

Conclusion

jQuery uses the “offset()” method for setting the current top and left coordinates of an HTML element. It also provides a convenient way to retrieve the offset relative to its document. It accepts the “top” and “left” coordinates and their allocated key values and sets them accordingly. Moreover, it does not allocate any value for returning the offset coordinates. This guide provided a brief description of setting the offset in jQuery.

Source: linuxhint.com