How to detect position of mouse cursor in a div
ajax, javascript, jquery, php
Solution
Consider using `<input type="range"/>` in conjunction with `<span>`
-Edit-
In response to a comment, added fallback support for Firefox via this plugin
Updated Demo Fiddle with Polyfill : http://jsfiddle.net/V3ygq/2/
Demo Fiddle: http://jsfiddle.net/V3ygq/
HTML
Place the range inside of your 100px wide `<span>`.
<div id="console">...</div>
<span id="container">
<input id="myRange" type="range" min="0" max="100" />
</span>
jQuery
On `change()`, do something with the value:
$(function () {
$("#myRange").on('change', function () {
// Pull out value, set html of #console DIV
$("#console").html($(this).val());
});
// Set initial value of #console
$("#myRange").trigger('change');
});
CSS
Hide range selector in `<span>`, but still allow clicks to change its value
#container {
width: 100px;
background: #333;
}
#container input {
opacity: 0;
}
Problem
I have a rectangle span that is 100 pixels wide and I want the user to select from 0-100%. Wherever they click in the div along the width, that is the value that is saved and immediately shown to the user using ajax. So if they click in exactly in the middle of the div, the value saved would be 50%. I can't think of an elegant way of doing this! Any tips?