Skip to content

Instantly share code, notes, and snippets.

View NerdyDeedsLLC's full-sized avatar
💣
Ministry of Code Deletion

Jason Jurusz (@JJ) NerdyDeedsLLC

💣
Ministry of Code Deletion
  • Nerdy Deeds, LLC
  • Kansas City, MO, USA
  • 02:07 (UTC -05:00)
View GitHub Profile
@NerdyDeedsLLC
NerdyDeedsLLC / readme.md
Last active December 23, 2018 05:11
CSS/JS Coordinate-Targeting Reticle (with visible pixel coordinates) - works by passing X/Y coordinates, specifying target element, or onClick anywhere within the window

Reticle.js

Displays a crosshair reticle (along with its corresponding coordinate pair) on screen. Useful for verifying object positioning, cursor position, locating X/Y coordinates of an object for callouts, etc.

Sample Red Reticle

Implementation/Usage Modes

Reticle currently has three modes:

1. Direct Placement Mode (Red Reticle)

A red reticle will be placed such that it's center lies precisely at the on-screen coordiantes specified. That is to say, it will entirely ignore your current scroll position. This is due to the reticle being absolutely-positioned. A fixed position reticle will respect the true coordinates, but will bollocks onClick mode. Thus, if you're so inclined to extend this out, keep that in mind.