{"id":280,"date":"2010-05-20T16:12:38","date_gmt":"2010-05-20T10:42:38","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=280"},"modified":"2010-05-20T16:12:38","modified_gmt":"2010-05-20T10:42:38","slug":"get-mouse-position-in-javascript-for-all-browsers","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/others\/tips\/get-mouse-position-in-javascript-for-all-browsers\/","title":{"rendered":"Get Mouse Position in JavaScript for all browsers"},"content":{"rendered":"<p style=\"text-align: center;\">&nbsp;<\/p>\n<figure id=\"attachment_342\" aria-describedby=\"caption-attachment-342\" style=\"width: 240px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2010\/05\/Mouse1.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-342 \" title=\"Get Mouse Movement in Javascript\" src=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2010\/05\/Mouse1.png?resize=240%2C240&#038;ssl=1\" alt=\"Get Mouse Movement in Javascript\" width=\"240\" height=\"240\" \/><\/a><figcaption id=\"caption-attachment-342\" class=\"wp-caption-text\">Get Mouse Movement in Javascript<\/figcaption><\/figure>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\nfunction mouseXPos(evt) {\nif (evt.pageX) return evt.pageX;\nelse if (evt.clientX)\nreturn evt.clientX + (document.documentElement.scrollLeft ?\ndocument.documentElement.scrollLeft :\ndocument.body.scrollLeft);\nelse return null;\n}\n\nfunction mouseYPos(evt) {\nif (evt.pageY) return evt.pageY;\nelse if (evt.clientY)\nreturn evt.clientY + (document.documentElement.scrollTop ?\ndocument.documentElement.scrollTop :\ndocument.body.scrollTop);\nelse return null;\n}\n<\/pre>\n<p><span style=\"font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 19px; font-size: 13px;\">To use above function, just pass the mouse event.<\/span><\/p>\n<h1 style=\"text-align: center;\"><span style=\"font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 19px; font-size: 13px;\"><a href=\"https:\/\/jitendrazaa.com\/blog\/wp-content\/uploads\/2010\/05\/SHowMousePos.html\">Live Demo<\/a><\/span><\/h1>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; function mouseXPos(evt) { if (evt.pageX) return evt.pageX; else if (evt.clientX) return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); else return null; } function mouseYPos(evt) { if (evt.pageY) return evt.pageY; else if (evt.clientY) return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return null; } To use above function, just pass the mouse event. Live [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[17],"tags":[126],"class_list":["post-280","post","type-post","status-publish","format-standard","hentry","category-tips","tag-javascript"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":1851,"url":"https:\/\/www.jitendrazaa.com\/blog\/java\/struts\/dynamic-results-in-struts-2\/","url_meta":{"origin":280,"position":0},"title":"Dynamic Results in Struts 2","author":"Jitendra","date":"March 30, 2011","format":false,"excerpt":"Example and sourcecode of creating Dynamic Results in Struts 2","rel":"","context":"In &quot;Struts&quot;","block_context":{"text":"Struts","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/java\/struts\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4107,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-drag-and-drop-file-uploader-component-with-progress-bar-html5-and-pure-javascript-based\/","url_meta":{"origin":280,"position":1},"title":"Salesforce &#8211; Drag and Drop File Uploader Component with Progress Bar &#8211; HTML5 and Pure Javascript Based","author":"Jitendra","date":"December 19, 2014","format":false,"excerpt":"You may find many ways to upload attachments in Salesforce using\u00a0visualforce\u00a0however most of them uses some Javascript libraries (means either you need to depend on static resources or add CDN in remote site settings) or they do not have progress bar or they are not drag and drop. I thought\u2026","rel":"","context":"In &quot;HTML&quot;","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"HTML5 Drag And Drop File","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/12\/HTML5-Drag-And-Drop-File-1024x205.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/12\/HTML5-Drag-And-Drop-File-1024x205.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/12\/HTML5-Drag-And-Drop-File-1024x205.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":4788,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/create-radar-chart-lightning-component\/","url_meta":{"origin":280,"position":2},"title":"Salesforce Lightning Component &#8211; Radar Chart","author":"Jitendra","date":"August 29, 2015","format":false,"excerpt":"How to create Radar chart using Lightning Component in Salesforce with the help of Chart.js library","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Lightning Component for Radar Chart","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/08\/GIF-Radar-Chart.gif?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":6101,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/limitless-chaining-of-continuation-object-in-salesforce\/","url_meta":{"origin":280,"position":3},"title":"Limitless Chaining of Continuation object in Salesforce","author":"Jitendra","date":"May 31, 2017","format":false,"excerpt":"How to create a Continuation Server in Salesforce with the help of JavaScript remoting and Continuation Object","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Chaining of Continuation Object in Salesforce","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/05\/Continuation-Object-GIF.gif?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/05\/Continuation-Object-GIF.gif?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/05\/Continuation-Object-GIF.gif?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/05\/Continuation-Object-GIF.gif?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/05\/Continuation-Object-GIF.gif?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/05\/Continuation-Object-GIF.gif?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":3347,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/ajax-based-autocomplete-component-in-salesforce-using-jquery-ui-and-json\/","url_meta":{"origin":280,"position":4},"title":"AutoComplete Component in Visualforce using JQueryUI","author":"Jitendra","date":"June 28, 2013","format":false,"excerpt":"In this tutorial, I am going to explain very Simple AJAX and JSON based Auto Complete component with the help of JQuery UI. First I am assuming that you already have Static Resource of named \"AutoCompleteWithModal\"\u009d. This Static resource has all images, CSS and JQuery library needed to implement this\u2026","rel":"","context":"In &quot;HTML&quot;","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"JQuery UI and JSON based AJAX AutoComplete Component in Salesforce","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":1643,"url":"https:\/\/www.jitendrazaa.com\/blog\/java\/jsp\/servlet-hibernate-jquery-and-ajax-based-google-like-chat\/","url_meta":{"origin":280,"position":5},"title":"Servlet, Hibernate, jQuery and Ajax based google like chat","author":"Jitendra","date":"March 14, 2011","format":false,"excerpt":"Servlet, Hibernate, jQuery and Ajax based google like chat with source code","rel":"","context":"In &quot;Hibernate&quot;","block_context":{"text":"Hibernate","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/java\/hibernate\/"},"img":{"alt_text":"Servlet, Hibernate, jQuery and Ajax based google like chat","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/03\/Servlet-Hibernate-jQuery-and-Ajax-based-google-like-chat.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=280"}],"version-history":[{"count":0,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/280\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}