How to detect position of mouse cursor in a div

Question

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?

I would use one of the countless existing jQuery UI widgets. What do you mean an "elegant" way? You should try just writing it, and post a real question here if you get stuck. — user229044, Mar 26 '13 at 19:03
Of what unit of measurement? Pixels of the entire page or just the div? — cygorx, Mar 26 '13 at 19:22

score 4 · Accepted Answer · edited Mar 26 '13 at 21:56

4

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;
}

edited Mar 26 '13 at 21:56

Rudie

52,220
42
131
173

answered Mar 26 '13 at 20:16

couzzi

6,316
3
24
40

You're gonna need a fallback though. http://caniuse.com/#feat=input-range Firefox is not fast with the HTML5 form elements. – Rudie Mar 26 '13 at 20:44
@Rudie, good call. Updated above. – couzzi Mar 26 '13 at 21:47
Wrong URL? I no see a fallback on fiddle V3ygq... – Rudie Mar 26 '13 at 21:50

How to detect position of mouse cursor in a div

1 Answers1

Consider using <input type="range"/> in conjunction with <span>

HTML

jQuery

CSS

Consider using `<input type="range"/>` in conjunction with `<span>`