[SOLUCIONADO] Obtener distancia entre x div y el cursor

[TrinityCore]

Hola gente, espero esten bien.

Miren, diseñando y programando un reproductor de audio y video totalmente personalizado para mi pagina web.

La verdad es que he logrado casi todo, y si, este "casi" es debido a que no puedo lograr saber la distancia en % que hay entre en inicio de un div y donde yo le he hecho click.

Esto es para poder modificar la barra de progreso del reproductor y asi mismo ese valor en % seria el tiempo actual del video/audio.

La verdad es que no se como obtener dicho valor, y espero que ustedes puedan ayudarme.


Espero su respuestas y gracias de antemano!

[ZedGe1505]

Quizás este ejemplo te pueda servir

[TrinityCore]

Iniciado por ZedGe1505

Quizás este ejemplo te pueda servir

la verdad que no, con ese ejemplo intente hacer que la barra de progreso se ponga a la anchura en donde yo tenia el puntero en la progress_box, pero no funciono..

seguire buscando, tal vez vea una web que tenga algo asi y pueda "pedirle prestado" el codigo de js.

saludos y gracias por responder.

[peperafa]

Que tal Hermano,

http://www.phpclasses.org/browse/file/1582.html

Coordenadas en del ratón en la parte visible del navegador:
event.clientX
event.clientY

Coordenadas absolutas del ratón en la página actual:
event.pageX
event.pageY

Coordenadas en un div:
event.pageX - this.offsetLeft;
event.pageY - this.offsetTop;

Tienes que tener dos elementos:
El contenedor de tu barra que va a tener el tamaño completo.
Y la barra que su tamaño será variable


Toma el valor de x del elemento contenedor de la barra con event.pageX - this.offsetLeft;
y a tu barra le colocas el tamaño de acuerdo a la coordenada x.

Aquí encontré una clase, no la he checado pero mírala a lo mejor encuentras algo útil:
http://www.phpclasses.org/browse/file/1582.html

[TrinityCore]

Iniciado por peperafa

Que tal Hermano

Buena!.

Funciona de 10, me da la medidas exactas en px del progress.

Ahora la cuestion seria, ¿como pasar ese resultado al %?

Ya que ese % es el que marcara el punto de la cancion, ya sea que se retroceda o adelante.

Espero me ayudes, porque no consigo hacerlo. saludos!

[TrinityCore]

Encontre la manera de controlar el tiempo de la musica.

asi que aqui dejo el code por si alguno alguna vez lo necesita.

Código Javascript:

//----> Controlar Barra de Progreso
        $("#progress_box").on("click", function(event){
            var mouseX = event.pageX - this.offsetLeft;
            var TemaDuracion = $("video")[0].duration;
            mouseX = mouseX*TemaDuracion/250; //----> 250 es el ancho total de la barra en px
            $("video")[0].currentTime = mouseX;
            ProgresoActual = $("video")[0].currentTime;
            var Progreso = ProgresoActual*100/TemaDuracion;
            $("#progress").css({"width":""+Progreso+"%"});
        });