<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	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/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Design Gala &#187; axis</title>
	<atom:link href="http://designgala.com/tag/axis/feed/" rel="self" type="application/rss+xml" />
	<link>http://designgala.com</link>
	<description>Web Usability, Web Technology, User Experience</description>
	<lastBuildDate>Thu, 26 Aug 2010 11:13:17 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>jQuery: How to get X-axis Y-axis value?</title>
		<link>http://designgala.com/jquery-how-to-get-x-axis-y-axis-value/</link>
		<comments>http://designgala.com/jquery-how-to-get-x-axis-y-axis-value/#comments</comments>
		<pubDate>Sat, 30 Jan 2010 19:59:12 +0000</pubDate>
		<dc:creator>Mukesh Chapagain</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[axis]]></category>
		<category><![CDATA[value]]></category>

		<guid isPermaLink="false">http://www.designgala.com/?p=1480</guid>
		<description><![CDATA[Well, it&#8217;s terrifically easy to get the x-axis and y-axis value of any point with jQuery. I mean the mouse pointer position. We simply do it with event.pageX and event.pageY. event.pageX gives the mouse position relative to the left edge of the document. And event.pageY gives the mouse position relative to the top edge of [...]]]></description>
			<content:encoded><![CDATA[
<div class="topsy_widget_data topsy_theme_jade" style="float: right;float: right;margin:-30px 0 5px 2px; background: url(data:,%7B%20%22url%22%3A%20%22http%253A%252F%252Fdesigngala.com%252Fjquery-how-to-get-x-axis-y-axis-value%252F%22%2C%20%22shorturl%22%3A%20%22http%3A%2F%2Fis.gd%2F7nb4G%22%2C%20%22style%22%3A%20%22small%22%2C%20%22title%22%3A%20%22jQuery%3A%20How%20to%20get%20X-axis%20Y-axis%20value%3F%22%20%7D);"></div>
<p><a href="http://www.designgala.com/wp-content/uploads/2010/01/parabola1.jpg"><img src="http://www.designgala.com/wp-content/uploads/2010/01/parabola1.jpg" alt="" width="320" height="220" class="alignleft size-full wp-image-1497" /></a></p>
<p>Well, it&#8217;s terrifically easy to get the x-axis and y-axis value of any point with jQuery. I mean the mouse pointer position. We simply do it with <strong>event.pageX</strong> and <strong>event.pageY</strong>.</p>
<p><strong>event.pageX</strong> gives the mouse position relative to the left edge of the document. And <strong>event.pageY</strong> gives the mouse position relative to the top edge of the document. </p>
<p>The following function fetches x and y axis on mousemove over the div content.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>	
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#content&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">mousemove</span><span style="color: #009900;">&#40;</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: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#value&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;x-axis: &quot;</span><span style="color: #339933;">+</span>e.<span style="color: #660066;">pageX</span><span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;&lt;br /&gt;y-axis: &quot;</span><span style="color: #339933;">+</span>e.<span style="color: #660066;">pageY</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>		
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p><a target="_blank" href="http://www.cssbreak.com/examples/axis/">View Demo</a> | <a target="_blank" href="http://www.cssbreak.com/examples/axis.zip">Download Code</a></p>

<img src="http://designgala.com/?ak_action=api_record_view&id=1480&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://designgala.com/jquery-how-to-get-x-axis-y-axis-value/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
