jQuery: click and get the width

Question

If the user clicks somewhere in the bar, can the indicator get that width. (Similar to a progress bar in a video)

$(function(){        
  $("#play").click(function() {
    $("#indicador").animate({"width": "150px"}, 8400);
  });
});

Here to try and play:http://jsfiddle.net/SwkaR/7/

This other stack overflow question should help http://stackoverflow.com/questions/4249648/jquery-get-mouse-position-within-an-element — Barry Carlyon, Feb 02 '13 at 16:28

score 2 · Accepted Answer · answered Feb 02 '13 at 16:35

You can get the coordinates where the user clicked from the Event object passed as first parameter to the click event handler. You simply have to subtract the element offset relative to the page from $.offset() to get the position relative to the element.

$("#bar").click(function(e) {
    var offset = $(this).offset();
    var relativeX = e.pageX - offset.left;
    var relativeY = e.pageY - offset.top;
    // Do something with these
});

For example, here's a forked fiddle which allows you to place the indicator by clicking anywhere in the bar.

I love this solution because it is so clean and clear and made with just a few lines of code. And the explanation helped a lot to understand. Thank you so much! — Nrc, Feb 02 '13 at 17:02

score 1 · Answer 2 · edited May 23 '17 at 12:18

1

I've gone for http://jsfiddle.net/SwkaR/13/ and http://jsfiddle.net/SwkaR/18/

$(function(){

  $("#play").click(function() {
    $("#indicator").animate({"width": "150px"}, 8400);
  });
    $('#bar').click(function(e) {
        var parentOffset = $(this).parent().offset();
         var relX = e.pageX - parentOffset.left;
        $("#indicator").animate({"width": relX + "px"});
    });
    $('#indicator').click(function(e) {
        var parentOffset = $(this).parent().offset();
         var relX = e.pageX - parentOffset.left;
        $("#indicator").animate({"width": relX + "px"});
    });        
});

Set Indicator width to the point where user clicked in the bar

Using jQuery get mouse position within an element as a reference to get the Mouse Click Position in the bar and set indicator to that

edited May 23 '17 at 12:18

Community

1
1

answered Feb 02 '13 at 16:33

Barry Carlyon

1,039
9
13

It works well but only to make the bar grow. It then it clicks to a smaller position doesn't get that. Anyway it is a first step! – Nrc Feb 02 '13 at 16:40
My Indicator click detection might be borked when the bar is in the way. – Barry Carlyon Feb 02 '13 at 16:47
So duplicate the $('#bar').click function for $('#indicator').click I've updated my solution to include #indicator click detect (Not tested) – Barry Carlyon Feb 02 '13 at 16:49
Lovely glad to of been of help :-D – Barry Carlyon Feb 02 '13 at 17:18

score 0 · Answer 3 · answered Feb 02 '13 at 16:32

To get the indicator width, use $("#indicator").width()

JQuery:

$(function(){

  $("#play").click(function() {
    $("#indicator").animate({"width": "150px"}, 8400);
  });

    $("#indicator").click(function() {
        alert($(this).width());
    });

});

Refer LIVE DEMO

jQuery: click and get the width

3 Answers3

JQuery: