diff --git a/static/scripts/viz/trackster/tracks.js b/static/scripts/viz/trackster/tracks.js index 914a6c8d872..ed683c69c2b 100644 --- a/static/scripts/viz/trackster/tracks.js +++ b/static/scripts/viz/trackster/tracks.js @@ -1091,8 +1091,7 @@ var TracksterView = Backbone.View.extend({ } }); - // Dragging in the top label track allows selecting a region - // to zoom in + // Dragging in the top label track allows selecting a region to zoom in on selected region. this.top_labeltrack.bind( "dragstart", function( e, d ) { return $("
").addClass('zoom-area').css( "height", view.browser_content_div.height() + view.top_labeltrack.height() + view.nav_labeltrack.height() + 1 @@ -1116,6 +1115,27 @@ var TracksterView = Backbone.View.extend({ $(d.proxy).remove(); view.request_redraw(); }); + + // For vertical alignment, track mouse with simple line. + var mouse_tracker_div = $('').addClass('mouse-pos').appendTo(parent_element); + + // Show tracker only when hovering over view. + parent_element.hover( + function() { + mouse_tracker_div.show(); + parent_element.mousemove(function(e) { + mouse_tracker_div.css({ + // -1 makes it appear next to the mouse w/o obscuring clicking + // and dragging on view elements. + left: e.pageX - 1 + }); + }); + }, + function() { + parent_element.off('mousemove'); + mouse_tracker_div.hide(); + } + ); this.add_label_track( new LabelTrack( this, { content_div: this.top_labeltrack } ) ); this.add_label_track( new LabelTrack( this, { content_div: this.nav_labeltrack } ) ); diff --git a/static/style/blue/trackster.css b/static/style/blue/trackster.css index fb463471e8e..cecff6b40c9 100644 --- a/static/style/blue/trackster.css +++ b/static/style/blue/trackster.css @@ -79,5 +79,6 @@ input.color-input{float:left} .feature-popup{position:absolute;z-index:2;padding:5px;font-size:10px;filter:alpha(opacity=80);background-repeat:no-repeat;background-image:url(../images/tipsy.gif);background-position:top center} .feature-popup-inner{padding:5px 8px 4px 8px;background-color:black;color:white} .zoom-area{position:absolute;top:0px;background-color:#ccf;opacity:0.5;z-index:2} +.mouse-pos{position:absolute;top:0px;background-color:black;opacity:0.15;height:100%;width:1px} .draghandle{margin-top:2px;cursor:move;float:left;background:transparent url(../images/visualization/draggable_horizontal.png) center center no-repeat;width:10px;height:12px} .dragging{border:1px solid blue} diff --git a/static/style/src/less/trackster.less b/static/style/src/less/trackster.less index 89efaa6f503..c615e8f6de0 100644 --- a/static/style/src/less/trackster.less +++ b/static/style/src/less/trackster.less @@ -531,6 +531,15 @@ input { z-index: @overlay-index; } +.mouse-pos { + position: absolute; + top: 0px; + background-color: black; + opacity: 0.15; + height: 100%; + width: 1px; +} + .draghandle { margin-top: 2px; cursor: move;