<?xml version="1.0" encoding="utf-8"?><rss version="2.0"><channel><title>Deerua about Coding: последние заметки с тегом &amp;laquo;coordinates&amp;raquo;</title><link>http://deer.org.ua/keywords/coordinates/</link><description></description><language>ru</language><generator>e2 (http://blogengine.ru/)</generator><item><title>Как найти координаты DOM элемента используя  JavaScript?</title><guid isPermaLink="true">http://deer.org.ua/2008/07/02/1/</guid><link>http://deer.org.ua/2008/07/02/1/</link><comments>http://deer.org.ua/2008/07/02/1/comments/</comments><description>Determine the coordinates {X, Y} using JavaScript &lt;pre&gt;&lt;span class="hl-comment"&gt;/* Определяем через паренты начало элемента по оси Х
Входной парметр, АйДи элемента
Возвращает Int*/
&lt;/span&gt;&lt;span class="hl-reserved"&gt;function &lt;/span&gt;&lt;span class="hl-identifier"&gt;findPosX&lt;/span&gt;&lt;span class="hl-brackets"&gt;(&lt;/span&gt;&lt;span class="hl-identifier"&gt;obj&lt;/span&gt;&lt;span class="hl-brackets"&gt;){
  &lt;/span&gt;&lt;span class="hl-reserved"&gt;var &lt;/span&gt;&lt;span class="hl-identifier"&gt;curleft&lt;/span&gt;&lt;span class="hl-code"&gt; = &lt;/span&gt;&lt;span class="hl-number"&gt;0&lt;/span&gt;&lt;span class="hl-code"&gt;;
  &lt;/span&gt;&lt;span class="hl-reserved"&gt;if&lt;/span&gt;&lt;span class="hl-brackets"&gt;(&lt;/span&gt;&lt;span class="hl-identifier"&gt;obj&lt;/span&gt;&lt;span class="hl-code"&gt;.&lt;/span&gt;&lt;span class="hl-identifier"&gt;offsetParent&lt;/span&gt;&lt;span class="hl-brackets"&gt;)
    &lt;/span&gt;&lt;span class="hl-reserved"&gt;while&lt;/span&gt;&lt;span class="hl-brackets"&gt;(&lt;/span&gt;&lt;span class="hl-number"&gt;1&lt;/span&gt;&lt;span class="hl-brackets"&gt;) {
      &lt;/span&gt;&lt;span class="hl-identifier"&gt;curleft&lt;/span&gt;&lt;span class="hl-code"&gt; += &lt;/span&gt;&lt;span class="hl-identifier"&gt;obj&lt;/span&gt;&lt;span class="hl-code"&gt;.&lt;/span&gt;&lt;span class="hl-identifier"&gt;offsetLeft&lt;/span&gt;&lt;span class="hl-code"&gt;;
      &lt;/span&gt;&lt;span class="hl-reserved"&gt;if&lt;/span&gt;&lt;span class="hl-brackets"&gt;(&lt;/span&gt;&lt;span class="hl-code"&gt;!&lt;/span&gt;&lt;span class="hl-identifier"&gt;obj&lt;/span&gt;&lt;span class="hl-code"&gt;.&lt;/span&gt;&lt;span class="hl-identifier"&gt;offsetParent&lt;/span&gt;&lt;span class="hl-brackets"&gt;)&lt;/span&gt;&lt;span class="hl-reserved"&gt;break&lt;/span&gt;&lt;span class="hl-code"&gt;;
      &lt;/span&gt;&lt;span class="hl-identifier"&gt;obj&lt;/span&gt;&lt;span class="hl-code"&gt; = &lt;/span&gt;&lt;span class="hl-identifier"&gt;obj&lt;/span&gt;&lt;span class="hl-code"&gt;.&lt;/span&gt;&lt;span class="hl-identifier"&gt;offsetParent&lt;/span&gt;&lt;span class="hl-code"&gt;;
    &lt;/span&gt;&lt;span class="hl-brackets"&gt;}
  &lt;/span&gt;&lt;span class="hl-reserved"&gt;else if&lt;/span&gt;&lt;span class="hl-brackets"&gt;(&lt;/span&gt;&lt;span class="hl-identifier"&gt;obj&lt;/span&gt;&lt;span class="hl-code"&gt;.&lt;/span&gt;&lt;span class="hl-identifier"&gt;x&lt;/span&gt;&lt;span class="hl-brackets"&gt;) &lt;/span&gt;&lt;span class="hl-identifier"&gt;curleft&lt;/span&gt;&lt;span class="hl-code"&gt; += &lt;/span&gt;&lt;span class="hl-identifier"&gt;obj&lt;/span&gt;&lt;span class="hl-code"&gt;.&lt;/span&gt;&lt;span class="hl-identifier"&gt;x&lt;/span&gt;&lt;span class="hl-code"&gt;;
  &lt;/span&gt;&lt;span class="hl-reserved"&gt;return &lt;/span&gt;&lt;span class="hl-identifier"&gt;curleft&lt;/span&gt;&lt;span class="hl-code"&gt;;
&lt;/span&gt;&lt;span class="hl-brackets"&gt;}
&lt;/span&gt;&lt;span class="hl-comment"&gt;/* Определяем Не Ие ли Броузер :)
Возвращает Bool*/
&lt;/span&gt;&lt;span class="hl-reserved"&gt;function &lt;/span&gt;&lt;span class="hl-identifier"&gt;isIE &lt;/span&gt;&lt;span class="hl-brackets"&gt;(){&lt;/span&gt;
    &lt;span class="hl-reserved"&gt;return &lt;/span&gt;&lt;span class="hl-builtin"&gt;navigator&lt;/span&gt;&lt;span class="hl-code"&gt;.&lt;/span&gt;&lt;span class="hl-identifier"&gt;userAgent&lt;/span&gt;&lt;span class="hl-code"&gt;.&lt;/span&gt;&lt;span class="hl-identifier"&gt;toLowerCase&lt;/span&gt;&lt;span class="hl-brackets"&gt;()&lt;/span&gt;&lt;span class="hl-code"&gt;.&lt;/span&gt;&lt;span class="hl-identifier"&gt;indexOf&lt;/span&gt;&lt;span class="hl-brackets"&gt;(&lt;/span&gt;&lt;span class="hl-quotes"&gt;"&lt;/span&gt;&lt;span class="hl-string"&gt;msie&lt;/span&gt;&lt;span class="hl-quotes"&gt;"&lt;/span&gt;&lt;span class="hl-brackets"&gt;)&lt;/span&gt;&lt;span class="hl-code"&gt; &amp;gt; -&lt;/span&gt;&lt;span class="hl-number"&gt;1&lt;/span&gt;&lt;span class="hl-code"&gt;;&lt;/span&gt;&lt;span class="hl-brackets"&gt;}
&lt;/span&gt;&lt;span class="hl-comment"&gt;/* Определяем через паренты начало элемента по оси Y
Входной парметр, АйДи элемента
Возвращает Int*/
&lt;/span&gt;&lt;span class="hl-reserved"&gt;function &lt;/span&gt;&lt;span class="hl-identifier"&gt;findPosY&lt;/span&gt;&lt;span class="hl-brackets"&gt;(&lt;/span&gt;&lt;span class="hl-identifier"&gt;obj&lt;/span&gt;&lt;span class="hl-brackets"&gt;){
  &lt;/span&gt;&lt;span class="hl-reserved"&gt;var &lt;/span&gt;&lt;span class="hl-identifier"&gt;curTop&lt;/span&gt;&lt;span class="hl-code"&gt;= &lt;/span&gt;&lt;span class="hl-number"&gt;0&lt;/span&gt;&lt;span class="hl-code"&gt;;
  &lt;/span&gt;&lt;span class="hl-reserved"&gt;if&lt;/span&gt;&lt;span class="hl-brackets"&gt;(&lt;/span&gt;&lt;span class="hl-code"&gt;!&lt;/span&gt;&lt;span class="hl-identifier"&gt;isIE&lt;/span&gt;&lt;span class="hl-brackets"&gt;) &lt;/span&gt;&lt;span class="hl-identifier"&gt;curTop&lt;/span&gt;&lt;span class="hl-code"&gt;= &lt;/span&gt;&lt;span class="hl-identifier"&gt;obj&lt;/span&gt;&lt;span class="hl-code"&gt;.&lt;/span&gt;&lt;span class="hl-identifier"&gt;offsetHeight&lt;/span&gt;&lt;span class="hl-code"&gt;;
  &lt;/span&gt;&lt;span class="hl-reserved"&gt;if&lt;/span&gt;&lt;span class="hl-brackets"&gt;(&lt;/span&gt;&lt;span class="hl-identifier"&gt;obj&lt;/span&gt;&lt;span class="hl-code"&gt;.&lt;/span&gt;&lt;span class="hl-identifier"&gt;offsetParent&lt;/span&gt;&lt;span class="hl-brackets"&gt;)
    &lt;/span&gt;&lt;span class="hl-reserved"&gt;while&lt;/span&gt;&lt;span class="hl-brackets"&gt;(&lt;/span&gt;&lt;span class="hl-number"&gt;1&lt;/span&gt;&lt;span class="hl-brackets"&gt;){
     &lt;/span&gt;&lt;span class="hl-identifier"&gt;curTop&lt;/span&gt;&lt;span class="hl-code"&gt;+= &lt;/span&gt;&lt;span class="hl-identifier"&gt;obj&lt;/span&gt;&lt;span class="hl-code"&gt;.&lt;/span&gt;&lt;span class="hl-identifier"&gt;offsetTop&lt;/span&gt;&lt;span class="hl-code"&gt;;
     &lt;/span&gt;&lt;span class="hl-reserved"&gt;if&lt;/span&gt;&lt;span class="hl-brackets"&gt;(&lt;/span&gt;&lt;span class="hl-code"&gt;!&lt;/span&gt;&lt;span class="hl-identifier"&gt;obj&lt;/span&gt;&lt;span class="hl-code"&gt;.&lt;/span&gt;&lt;span class="hl-identifier"&gt;offsetParent&lt;/span&gt;&lt;span class="hl-brackets"&gt;) &lt;/span&gt;&lt;span class="hl-reserved"&gt;break&lt;/span&gt;&lt;span class="hl-code"&gt;;
     &lt;/span&gt;&lt;span class="hl-identifier"&gt;obj&lt;/span&gt;&lt;span class="hl-code"&gt;= &lt;/span&gt;&lt;span class="hl-identifier"&gt;obj&lt;/span&gt;&lt;span class="hl-code"&gt;.&lt;/span&gt;&lt;span class="hl-identifier"&gt;offsetParent&lt;/span&gt;&lt;span class="hl-code"&gt;;
    &lt;/span&gt;&lt;span class="hl-brackets"&gt;} 
  &lt;/span&gt;&lt;span class="hl-reserved"&gt;else if&lt;/span&gt;&lt;span class="hl-brackets"&gt;(&lt;/span&gt;&lt;span class="hl-identifier"&gt;obj&lt;/span&gt;&lt;span class="hl-code"&gt;.&lt;/span&gt;&lt;span class="hl-identifier"&gt;y&lt;/span&gt;&lt;span class="hl-brackets"&gt;) &lt;/span&gt;&lt;span class="hl-identifier"&gt;curTop&lt;/span&gt;&lt;span class="hl-code"&gt;+= &lt;/span&gt;&lt;span class="hl-identifier"&gt;obj&lt;/span&gt;&lt;span class="hl-code"&gt;.&lt;/span&gt;&lt;span class="hl-identifier"&gt;y&lt;/span&gt;&lt;span class="hl-code"&gt;; 
  &lt;/span&gt;&lt;span class="hl-reserved"&gt;return &lt;/span&gt;&lt;span class="hl-identifier"&gt;curTop&lt;/span&gt;&lt;span class="hl-code"&gt;;
&lt;/span&gt;&lt;span class="hl-brackets"&gt;} 
&lt;/span&gt;&lt;span class="hl-comment"&gt;/* Определяем через функции findPosХ и findPosY координаты елемента
Входной парметр, АйДи элемента
Возвращает масив координат array {x,y}*/
&lt;/span&gt;&lt;span class="hl-reserved"&gt;function &lt;/span&gt;&lt;span class="hl-identifier"&gt;getPositionMy&lt;/span&gt;&lt;span class="hl-brackets"&gt;(&lt;/span&gt;&lt;span class="hl-identifier"&gt;e&lt;/span&gt;&lt;span class="hl-brackets"&gt;){
  &lt;/span&gt;&lt;span class="hl-reserved"&gt;return &lt;/span&gt;&lt;span class="hl-brackets"&gt;{&lt;/span&gt;&lt;span class="hl-identifier"&gt;x&lt;/span&gt;&lt;span class="hl-code"&gt;:&lt;/span&gt;&lt;span class="hl-identifier"&gt;findPosX&lt;/span&gt;&lt;span class="hl-brackets"&gt;(&lt;/span&gt;&lt;span class="hl-identifier"&gt;e&lt;/span&gt;&lt;span class="hl-brackets"&gt;)&lt;/span&gt;&lt;span class="hl-code"&gt;, &lt;/span&gt;&lt;span class="hl-identifier"&gt;y&lt;/span&gt;&lt;span class="hl-code"&gt;:&lt;/span&gt;&lt;span class="hl-identifier"&gt;findPosY&lt;/span&gt;&lt;span class="hl-brackets"&gt;(&lt;/span&gt;&lt;span class="hl-identifier"&gt;e&lt;/span&gt;&lt;span class="hl-brackets"&gt;)}&lt;/span&gt;&lt;span class="hl-code"&gt;;
&lt;/span&gt;&lt;span class="hl-brackets"&gt;}&lt;/span&gt;&lt;/pre&gt;&lt;hr /&gt;&lt;a href="http://deer.org.ua/2008/07/02/1/comments/"&gt;Комментарии&lt;/a&gt; к заметке&lt;br /&gt;&lt;br /&gt;Теги:&lt;br /&gt;&lt;a href="http://deer.org.ua/tags/javascript/"&gt;javascript&lt;/a&gt; &amp;gt; &lt;a href="http://deer.org.ua/tags/javascript/coordinates/"&gt;coordinates&lt;/a&gt;&lt;br /&gt;&lt;a href="http://deer.org.ua/tags/html/"&gt;html&lt;/a&gt; &amp;gt; &lt;a href="http://deer.org.ua/tags/html/w3c/"&gt;w3c&lt;/a&gt; &amp;gt; &lt;a href="http://deer.org.ua/tags/html/w3c/dom/"&gt;DOM&lt;/a&gt;</description><pubDate>Wed, 02 Jul 2008 15:43:31 +0200</pubDate></item></channel></rss>