Menu
We've all seen those military movies with that full screen crosshair cursor on the computers, or even in some animations you see it.
For example in the beginning of this video on YouTube titled, "Dishonorable Disclosures" you see exactly what I'm talking about. - https://www.youtube.com/watch?v=X-Xfti7qtT0
Another example is the program "CrossHair 1.1" for Windows - http://www.softpedia.com/get/Desktop-Enhancements/Other-Desktop-Enhancements/CrossHair.shtml
I do believe it's possible to do this in HTML5, but have absolutely no idea if it is in JQuery, let alone how to do it in either language. However I'd love to find out so I can do it myself. If anyone has any links, resources, or anything to help out with this as I'm sure others would want to learn how as well. Any help would be greatly appreciated.
Thanks and take care.
Much thanks to "Gaby aka G. Petrioli" for figuring this out. I put the full code down below (with a little styling) to save some of you time.
<!DOCTYPE html>
<html>
<head>
<title>Fullscreen Crosshair Cursor</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
html, body {
cursor:none;
padding:0;
margin:0;
width:100%;
height:100%;
background-color:#003131;}
a {
cursor:none;
color:rgba(255,255,255,0.5);
text-shadow:0px 0px 8px silver;
transition:all 300ms ease-in-out;
-webkit-transition:all 300ms ease-in-out;
-moz-transition:all 300ms ease-in-out;
-o-transition:all 300ms ease-in-out;
-ms-transition:all 300ms ease-in-out;
border-radius:10px;}
a:hover {
color:rgba(255,255,255,0.8);
text-shadow:0px 0px 8px rgba(255,255,255,0.8);}
#crosshair-h {
width:100%;
height:2px;
margin-top:-1px;}
#crosshair-v {
height:100%;
width:2px;
margin-left:-2px;}
.hair {
position:fixed;
background-color:rgba(0,250,253,0.5);
box-shadow:0 0 5px rgb(0,250,253);
pointer-events:none;
z-index:1;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var cH = $('#crosshair-h'),
cV = $('#crosshair-v');
$(document).on('mousemove',function(e) {
cH.css('top',e.pageY);
cV.css('left',e.pageX);
});
$("a").hover(function() {
$(".hair").stop().css({backgroundColor: "white"}, 800);
$(".hair").stop().css({boxShadow: "0 0 5px rgb(255,255,255)"},800)},
function() {
$(".hair").stop().css({backgroundColor: "rgba(0,250,253,0.5)"}, 800);
$(".hair").stop().css({boxShadow: "0 0 5px rgb(0,250,253)"},800)
});
});
</script>
</head>
<body>
<div id="crosshair-h" class="hair"></div>
<div id="crosshair-v" class="hair"></div>
</body>
</html>
333
The cross-hair cursor is displayed when working in the Project window and in the editors, facilitating navigation and editing, especially when arranging large projects.
In Home Designer 2020 and newer program versions, the cross hairs can also be turned off by navigating to View> Crosshairs from the menu. On the Edit panel, uncheck Enable in Plan and Elevation Views if you want to turn them off or check this option if you want to turn them on.
You can do it with CSS and a tiny jQuery ..
$(function(){
var cH = $('#crosshair-h'),
cV = $('#crosshair-v');
$(document).on('mousemove',function(e){
cH.css('top',e.clientY);
cV.css('left',e.clientX);
});
});*{cursor:none;}
#crosshair-h{
width:100%;
height:2px;
margin-top:-1px;
}
#crosshair-v{
height:100%;
width:2px;
margin-left:-1px;
}
.hair{
position:fixed;
background-color:rgba(100,100,100,0.5);
box-shadow:0 0 5px rgb(100,100,100);
pointer-events:none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="crosshair-h" class="hair"></div>
<div id="crosshair-v" class="hair"></div>Demo at http://jsfiddle.net/WmZ44/1/
181
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
