Floating Crosshair within Div - Limited to Container

Question

Floating Crosshair within Div - Limited to Container

I'm attempting to implement a crosshair-style cursor effect on a div that houses a D3 Datamap. I've managed to achieve this using jQuery, but the crosshairs appear to extend beyond the boundaries of their parent div on the bottom and right sides, while staying within those boundaries on the top and left.

To illustrate, I have put together this fiddle.

Despite my efforts to adjust the position property of the crosshair div, I haven't been able to resolve this issue.

Interestingly, when I set the position to absolute on my website, it does confine the crosshairs correctly within the container, but there is an offset in the center point from the actual cursor coordinates (e.pageX, e.pageY). Unfortunately, these results cannot be reproduced in the fiddle since changing between

fixed, static, relative, absolute

doesn't seem to make a difference.

One workaround I discovered was to assign fixed values for the width and height of both the container and the crosshairs. However, this poses an issue as I require the container to be responsive.

css

Answer 1

Answer №1

Initially, the vertical and horizontal lines were overlapping the box on the top and left side, but they were not visible due to the body-viewport.

After conducting some research, I discovered that the optimal solution would involve placing the crosshair-lines inside the map-container with absolute positioning relative to the map-container. This approach allows for better control over the position and behavior of the crosshair-lines, while also ensuring flexibility for the map-container!

To facilitate testing, I included the default cursor. - Check out the code snippet at: https://jsfiddle.net/9r4rtcz9/6/

//Map Hover Crosshairs
$(function() {
  var cH = $('#crosshair-h'),
    cV = $('#crosshair-v');
  $('.map_wrapper').on('mouseover', function() {
    cH.css('visibility', 'visible');
    cV.css('visibility', 'visible');

    $('.map_wrapper').bind('mousemove', function(e) {
      cH.css('top', e.pageY);
      cV.css('left', e.pageX);
    });
  });

  $('.map_wrapper').on('mouseout', function() {
    cH.css('visibility', 'hidden');
    cV.css('visibility', 'hidden');
    $('.map_wrapper').unbind("mousemove");
  });
});

.map_wrapper {
  position: relative;
  height: 100px;
  width: 300px;
  border: 1px solid black;
  overflow: hidden;
  cursor: default;
}

.hair {
  float: left;
  position: absolute;
  background-color: rgba(100, 100, 100, 0.5);
  z-index: 10;
  pointer-events: none;
}

#crosshair-h {
  width: 100%;
  height: 2px;
  margin-top: -8px;
  visibility: visible;
}

#crosshair-v {
  height: 100%;
  width: 2px;
  margin-left: -8px;
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="map_wrapper">
  <div class="hair" id="crosshair-h"></div>
  <div class="hair" id="crosshair-v"></div>
</div>

<p class="datamaps">D3 Data Maps Here</p>

Answer 2

Initially, the vertical and horizontal lines were overlapping the box on the top and left side, but they were not visible due to the body-viewport.

After conducting some research, I discovered that the optimal solution would involve placing the crosshair-lines inside the map-container with absolute positioning relative to the map-container. This approach allows for better control over the position and behavior of the crosshair-lines, while also ensuring flexibility for the map-container!

To facilitate testing, I included the default cursor. - Check out the code snippet at: https://jsfiddle.net/9r4rtcz9/6/

//Map Hover Crosshairs
$(function() {
  var cH = $('#crosshair-h'),
    cV = $('#crosshair-v');
  $('.map_wrapper').on('mouseover', function() {
    cH.css('visibility', 'visible');
    cV.css('visibility', 'visible');

    $('.map_wrapper').bind('mousemove', function(e) {
      cH.css('top', e.pageY);
      cV.css('left', e.pageX);
    });
  });

  $('.map_wrapper').on('mouseout', function() {
    cH.css('visibility', 'hidden');
    cV.css('visibility', 'hidden');
    $('.map_wrapper').unbind("mousemove");
  });
});

.map_wrapper {
  position: relative;
  height: 100px;
  width: 300px;
  border: 1px solid black;
  overflow: hidden;
  cursor: default;
}

.hair {
  float: left;
  position: absolute;
  background-color: rgba(100, 100, 100, 0.5);
  z-index: 10;
  pointer-events: none;
}

#crosshair-h {
  width: 100%;
  height: 2px;
  margin-top: -8px;
  visibility: visible;
}

#crosshair-v {
  height: 100%;
  width: 2px;
  margin-left: -8px;
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="map_wrapper">
  <div class="hair" id="crosshair-h"></div>
  <div class="hair" id="crosshair-v"></div>
</div>

<p class="datamaps">D3 Data Maps Here</p>

Floating Crosshair within Div - Limited to Container

Answer №1

Similar questions

Personalized Tumblr-style button

unable to enforce max-height using bootstrap

Increasing the size of the center image by using CSS elements placed along the circumference

Is it possible to create a HTML 5 tile with a contemporary Metro-style UI?

The functionality of jQuery is not functioning properly on dynamically created identical divs

"The Vuetify calendar widget is cutting off some dates at the end of the month

Background of jQuery-UI Slider

What is preventing me from getting this straightforward CSS transition to function properly?

Ion-row appears out of frame

I'm having trouble applying CSS stylings to my components in my React project. What could be the issue causing this?

Assign the class name of the clicked div to another specific div

Place a JavaScript code block within a designated div container

Complete Navigation Bar Expands Alongside Drop-down Menu

Manipulate elements by adding and removing classes sequentially based on an array

Assign position values to an element inside a DIV container using JavaScript, Cascading Style Sheets, and

How can I ensure my md-sidenav takes up the entire height when using ui-router?

Is there a way to adjust the text color based on whether a value is negative?

Utilizing a ListView Below a LinearLayout: Step-by-Step Guide

What is the best way to clear and fill a div without causing it to resize?

What could be causing the width of my aside not to display as I intended?