Hace unas semanas preguntaba en este mismo foro la manera de hacer en jquery una especie de mira o "eje de coordenadas dinámico" (crosshair) que aparezca al pasar el ratón por un div. Encontré este efecto en un código de una librería gráfica para jquery (flot, bastante conocida). Hasta aquí todo perfecto.
El problema llegó a la hora de insertar este código. Resulta que el código está "preparado" para que el crosshair aparezca sólo cuando "debajo" haya un gráfico de esta librería. Lo que me esta ocurriendo es que cuando debe aparecer, aparece, pero "borra" todo lo que hay sobre el div que no sea un gráfico de flot.
Concretamente lo que quiero/necesito es "desvincular" de alguna manera el código que genera este crosshair de la dependencia con flot. Es decir, hacer simplemente ese crosshair independientemente de lo que haya en ese div.
El código es un poquito largo. Les dejo el contenido:
Código:
y la llamada a dicho codigo:(function ($) { var options = { crosshair: { mode: null, // one of null, "x", "y" or "xy", color: "rgba(20,20,20,0.50)", lineWidth: 1 } }; function init(plot) { // position of crosshair in pixels var crosshair = { x: -1, y: -1, locked: false }; plot.setCrosshair = function setCrosshair(pos) { if (!pos) crosshair.x = -1; else { var axes = plot.getAxes(); crosshair.x = Math.max(0, Math.min(pos.x != null ? axes.xaxis.p2c(pos.x) : axes.x2axis.p2c(pos.x2), plot.width())); crosshair.y = Math.max(0, Math.min(pos.y != null ? axes.yaxis.p2c(pos.y) : axes.y2axis.p2c(pos.y2), plot.height())); } plot.triggerRedrawOverlay(); }; plot.clearCrosshair = plot.setCrosshair; // passes null for pos plot.lockCrosshair = function lockCrosshair(pos) { if (pos) plot.setCrosshair(pos); crosshair.locked = true; } plot.unlockCrosshair = function unlockCrosshair() { crosshair.locked = false; } plot.hooks.bindEvents.push(function (plot, eventHolder) { if (!plot.getOptions().crosshair.mode) return; eventHolder.mouseout(function () { if (crosshair.x != -1) { crosshair.x = -1; plot.triggerRedrawOverlay(); } }); eventHolder.mousemove(function (e) { if (plot.getSelection && plot.getSelection()) { crosshair.x = -1; // hide the crosshair while selecting return; } if (crosshair.locked) return; var offset = plot.offset(); crosshair.x = Math.max(0, Math.min(e.pageX - offset.left, plot.width())); crosshair.y = Math.max(0, Math.min(e.pageY - offset.top, plot.height())); plot.triggerRedrawOverlay(); }); }); plot.hooks.drawOverlay.push(function (plot, ctx) { var c = plot.getOptions().crosshair; if (!c.mode) return; var plotOffset = plot.getPlotOffset();
Código:
pertenece a uno de los ejemplos que viene de serie con la librería, concretamente al ejemplo llamado "tracking".<script language="javascript" type="text/javascript"> var plot; $(function () { plot = $.plot($("#coordenadas"),[],{crosshair:{mode: "xy" }, }); }); </script>
http://people.iola.dk/olau/flot/examples/
Estoy seguro de que no debe ser muy dificil de "extraer" pero no doy con la manera correcta de hacerlo...
Si alguien me pudiese echar un cable, o al menos orientarme sobre la manera de empezar a hacerlo o como hacerlo le estaria enormemente agradecido.
1 saludo y muchas gracias. que paseis buenos dias.