{"id":1167,"date":"2012-09-16T07:44:34","date_gmt":"2012-09-16T07:44:34","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=1167"},"modified":"2012-09-16T07:44:34","modified_gmt":"2012-09-16T07:44:34","slug":"jquery-get-div-position-jquery-find-div-position-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-get-div-position-jquery-find-div-position-examples\/","title":{"rendered":"jQuery Get \/ Find DIV position Examples"},"content":{"rendered":"<p>If you have been trying to get Div position using jQuery or find Div position using jQuery, then this article is for you. In this article, I am going to show you with easy to follow examples how to <strong>easily <em>get\/find the position of a div<\/em><\/strong> with respect to the page. You can apply the same code to find the position of any other element of the page. Read on to find out more.<!--more--><\/p>\n<h2>How to Get DIV position \/ Find DIV position<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=1167\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>For the sake of the example, let&#8217;s assume that we have a div with the ID &#8220;my_div&#8221; and we want to get position of this div when a button is clicked. The code to find the div position is really small, so you will be able to follow very easily. Also I am going to specify two ways to get div position.<\/p>\n<ul>\n<li>The first way is to alert the div position when a button is clicked.<\/li>\n<li>The second way is to write the div&#8217;s position in another div bearing the ID &#8220;div_position&#8221;.<\/li>\n<\/ul>\n<h3>Examples to Get\/Find DIV position using jQuery<\/h3>\n<p>Here is the full source code (HTML + jQuery):<\/p>\n<pre class=\"lang:xhtml decode:true crayon-selected\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;jQuery Find \/ Get DIV position&lt;\/title&gt;\n&lt;script type=\"text\/javascript\" src=\"js\/jquery-1.8.2.min.js\"&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;div id=\"my_div\"&gt;This is my existing div.&lt;\/div&gt;\n\n&lt;input type=\"submit\" name=\"sbt_add\" id=\"sbt_add\" value=\"Get \/ Find Div Position\"&gt;\n\n&lt;div id=\"div_position\"&gt;&lt;\/div&gt;\n\n&lt;script type=\"text\/javascript\"&gt;\n\n$('#sbt_add').on(\"click\", function(){\n\nvar position = $(\"#my_div\").offset();\n\n\/\/Alert Div position using jQuery\nalert( \"Top: \" + position.top + \", \" + \"Left: \" + position.left );\n\n\/\/Write Div position to another Div using jQuery\n$('#div_position').html( \"Top: \" + position.top + \", \" + \"Left: \" + position.left );\n\n});\n\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>When you run the above code, you will see that the div positions are found and alerted and then written to another div. So far it&#8217;s been very simple, correct? Although the above procedure is correct, there is a caveat associated with it. I have written another article that explains in depth about this and also provided a solution. To read the article and to get a hold of the solution, visit:\u00a0<a title=\"jQuery Find Position | Find absolute position of element using offset\" href=\"https:\/\/theextremewebdesigns.com\/blog\/jquery-find-position-find-absolute-position-of-element-using-offset\/\">jQuery Find Position | Find absolute position of element using offset<\/a><\/p>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=1167\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<h5>Your Turn!<\/h5>\n<p>Do you know of any other ways to <em><strong>find \/ get div position using jQuery<\/strong><\/em>? Feel free to share by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you have been trying to get Div position using jQuery or find Div position using jQuery, then this article is for you. In this article, I am going to show you with easy to follow examples how to easily get\/find the position of a div with respect to the page. You can apply the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[40,42,41],"class_list":["post-1167","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-2","tag-jquery-demos-2","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-iP","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=1167"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1167\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=1167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=1167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=1167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}