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/

Answer 1

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.