<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
		>
<channel>
	<title>Rivotril For Sale</title>
	<atom:link href="http://joegornick.com/2007/10/18/finding-out-when-someone-clicks-outside-of-my-element/feed/" rel="self" type="application/rss+xml" />
	<link>http://joegornick.com/2007/10/18/finding-out-when-someone-clicks-outside-of-my-element/</link>
	<description>Web Geekology 101</description>
	<lastBuildDate>Wed, 19 Jan 2011 14:13:09 -0800</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
		<item>
		<title>Rivotril For Sale</title>
		<link>http://joegornick.com/2007/10/18/finding-out-when-someone-clicks-outside-of-my-element/comment-page-1/#comment-40</link>
		<dc:creator>jgornick</dc:creator>
		<pubDate>Thu, 18 Oct 2007 19:51:04 +0000</pubDate>
		<guid isPermaLink="false">http://localhost/wordpress/?p=12#comment-40</guid>
		<description>Good point kangax!  I&#039;ve come up with this to answer your question:

&lt;pre lang=&quot;javascript&quot;&gt;
Event.observe(document.body, &#039;click&#039;, function(e)
{
  var eventXY = Event.pointer(e); // Event X/Y coords

  var dialogElement = $(&#039;dialog&#039;); // Element dialog container
  var dialogXY = dialogElement.cumulativeOffset(); // Dialog X/Y coords
  var dialogWH = dialogElement.getDimensions(); // Dialog W/H

  var dialogXRange = $R(dialogXY[0], (dialogXY[0] + dialogWH.width));
  var dialogYRange = $R(dialogXY[1], (dialogXY[1] + dialogWH.height));

  if (dialogXRange.include(eventXY.x) &amp;&amp; dialogYRange.include(eventXY.y))
    console.log(&#039;withtin element&#039;);
});
&lt;/pre&gt;

I tested quickly and seems to work great!

 - Joe</description>
		<content:encoded><![CDATA[<p>Good point kangax!  I&#8217;ve come up with this to answer your question:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">Event.<span style="color: #660066;">observe</span><span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">body</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
  <span style="color: #003366; font-weight: bold;">var</span> eventXY <span style="color: #339933;">=</span> Event.<span style="color: #660066;">pointer</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// Event X/Y coords</span>
&nbsp;
  <span style="color: #003366; font-weight: bold;">var</span> dialogElement <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'dialog'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// Element dialog container</span>
  <span style="color: #003366; font-weight: bold;">var</span> dialogXY <span style="color: #339933;">=</span> dialogElement.<span style="color: #660066;">cumulativeOffset</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// Dialog X/Y coords</span>
  <span style="color: #003366; font-weight: bold;">var</span> dialogWH <span style="color: #339933;">=</span> dialogElement.<span style="color: #660066;">getDimensions</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// Dialog W/H</span>
&nbsp;
  <span style="color: #003366; font-weight: bold;">var</span> dialogXRange <span style="color: #339933;">=</span> $R<span style="color: #009900;">&#40;</span>dialogXY<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#40;</span>dialogXY<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">+</span> dialogWH.<span style="color: #660066;">width</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #003366; font-weight: bold;">var</span> dialogYRange <span style="color: #339933;">=</span> $R<span style="color: #009900;">&#40;</span>dialogXY<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#40;</span>dialogXY<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">+</span> dialogWH.<span style="color: #660066;">height</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>dialogXRange.<span style="color: #660066;">include</span><span style="color: #009900;">&#40;</span>eventXY.<span style="color: #660066;">x</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> dialogYRange.<span style="color: #660066;">include</span><span style="color: #009900;">&#40;</span>eventXY.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
    console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'withtin element'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>I tested quickly and seems to work great!</p>
<p> &#8211; Joe</p>
]]></content:encoded>
	</item>
	<item>
		<title>Rivotril For Sale</title>
		<link>http://joegornick.com/2007/10/18/finding-out-when-someone-clicks-outside-of-my-element/comment-page-1/#comment-39</link>
		<dc:creator>kangax</dc:creator>
		<pubDate>Thu, 18 Oct 2007 18:24:31 +0000</pubDate>
		<guid isPermaLink="false">http://localhost/wordpress/?p=12#comment-39</guid>
		<description>Joe, you&#039;re absolutely right about findElement, but you there seems to be a confusion about actual postition of an element on a PAGE and its position in a DOCUMENT order. Having one paragraph defined within another in html doesn&#039;t mean that element is actually positioned within the parent on a page... To check actual page position you still need to calculate x/y bounds of both elements to see if they intersect... but for simple parent-child relationship, findElement is good enough.

Cheers,
kangax</description>
		<content:encoded><![CDATA[<p>Joe, you&#8217;re absolutely right about findElement, but you there seems to be a confusion about actual postition of an element on a PAGE and its position in a DOCUMENT order. Having one paragraph defined within another in html doesn&#8217;t mean that element is actually positioned within the parent on a page&#8230; To check actual page position you still need to calculate x/y bounds of both elements to see if they intersect&#8230; but for simple parent-child relationship, findElement is good enough.</p>
<p>Cheers,<br />
kangax</p>
]]></content:encoded>
	</item>
</channel>
</rss>

