JavaScript Cursor

Introduction to JavaScript Cursor

JavaScript cursor is a thing used as a mouse cursor whenever it’s going to point on specific elements. There are various types of cursor available those are like wait, help, move, pointer, crosshair, cell, not allowed, zoom-in, zoom-out, etc. This cursor can be changed by assigning value to document.body.style.cursor. JavaScript also helps us to hide the cursor, it should be hide cursor from a webpage, hide cursor for a particular element, and with the help of CSS we are able to set the cursor to none. By using JavaScript along with CSS we can create varieties of a different cursor. We will see all those one by one in detail later.

What is JavaScript Cursor?

JavaScript having different kinds of predefined cursor already available. Some of them going to be used with CSS for proper positioning as well as with better user experience.

Cursor in JavaScript going to be Used with Different Values as follows:

• alias: This cursor position defined as the element that is an alias of an element to be created.
• all-scroll: Whenever we want to show something can be scrolled in any direction then it’s helpful to use all-scroll cursor value.
• auto: By default, auto is used to set cursor value.
• cell: This is used to show a particular selected element is a cell.
• col-resize: This cursor value is used to show the column is resized horizontally.
• copy:  This cursor type shows that something is to be copied.
• e-resize: This is used to show the edges of the box are going to move east means at right.
• grab: Whenever we want to show some grabbed data then we use this value to show the cursor.
• help: For a particular element, if some help is available then this cursor value is used.
• not-allowed: if something is not able to do any action then this type of cursor is used.
• progress: if there is something in progress or working, then it’s used as a progress cursor.

Syntax:

To use JavaScript cursor in our code we are going to use it with the following syntax:

object.style.cursor ="nameOfCursor";

• In the nameOfCursor defines the different types of cursor which are already available. So one can choose appropriate cursor name from the list for relevant actions like mouse pointer, link & status, general cursor, resize and scrolling, zooming and many more.
• One can set different values to the cursor for better effect. Where value can be auto, all-scroll, cell, col-resize, none, pointer, not-allowed, text, URL, wait, zoom-in, zoom-out, etc.

Syntax:

object.style.cursor = value;

• One can able to hide the mouse cursor in JS and CSS throughout the webpage: If we want to hide mouse cursor from the whole webpage then we can do this by using simple code in CSS like cursor: none; value.
• It’s also possible to hide cursor on a specific element using code like:

Syntax:

<style>
#element_id{
cursor: none;
}
</style>

How Do We Use JavaScript Cursor?

There are multiple ways through which we can use cursor in JavaScript, let’s see all those types one by one in details as follows description:

• Interactive Circle Cursor: This can be used along with JavaScript file called as pointer.js library which is helpful in creating interactive, circular, and customizable as well as many cursors to change already existing mouse pointer.
• Interactive cursor-dot Effect: With the help of vanilla JavaScript, one can create different effects on the cursor like customizable, interactive effects whenever it’s going to hover on particular elements.
• Interactive Custom cursors in JS & CSS: This type of cursor helps us with kursojs JavaScript for creating interactive cursors to the webpages.
• 90’s Cursor Move Effects: This type of cursor helps us to create animation along with 6 types of 90’s cursor move effects which is designed using pure JavaScript.
• Custom cursor – control-user-cursor: This is the type of cursor in which we are able to change the built-in library by using our own styles and applies cursor on related elements on the hover effect.

Examples to Implement JavaScript Cursor

Below are the examples of JavaScript Cursor:

Example #1

This can be one for the entire webpage or on a specific selected element from the page. Here we are hiding cursor from the whole webpage. Code for this is as follows:

Code:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Cursor</title>
<style>
{
cursor: none;
}
</style>
</head>
<body>
<h4>Hide cursor example</h4>
<div>Hover mouse here to see output:</div>
</body>
</html>

Output:

Example #2

This is a second example where we are checking cursor for wait. So it will look exactly as shown in the output screen below. Same thing we can use for showing processing cursor.

Code:

<html>
<body>
<p id="cursor">Hover the mouse on the text after clicking button to see changed cursor.</p>
<button type="button" onclick="Change()">Click to change Cursor</button>
<script>
function Change() {
document.getElementById("cursor").style.cursor = "wait";
}
</script>
</body>
</html>

Output:

Example #3

This is the example of a combination of multiple cursors going to use in Javascript. Let’s see output for a particular element on which we are going to hover.

Code:

<!DOCTYPE html>
<html>
<head>
<style>
.alias {cursor: alias;
}
.all-scroll {cursor: all-scroll;
}
.cell {cursor: cell;
}
.col-resize {cursor: col-resize;
}
.grab {cursor: -webkit-grab; cursor: grab;
}
.copy {cursor: copy;
}
.crosshair {cursor: crosshair;
}
.e-resize {cursor: e-resize;
}
.help {cursor: help;
}
.ew-resize {cursor: ew-resize;
}
.move {cursor: move;
}
.zoom-in {cursor:zoom-in;
}
.zoom-out {cursor: zoom-out;
}
</style>
</head>
<body>
<h3>The Javascript Cursor with different property Value </h3>
<p>Hover the mouse on particular option to see changeable Cursor</p>
<h4 class="alias">alias</h4>
<h4 class="all-scroll">all-scroll</h4>
<h4 class="cell">cell</h4>
<h4 class="col-resize">col-resize</h4>
<h4 class="grab">grab</h4>
<h4 class="copy">copy</h4>
<h4 class="crosshair">crosshair</h4>
<h4 class="e-resize">e-resize</h4>
<h4 class="help">help</h4>
<h4 class="move">move</h4>
<h4 class="zoom-in">zoom-in</h4>
<h4 class="zoom-out">zoom-out</h4>
</body>
</html>

Output:

Example #4

Code:

<html>
<body>
<h4 id="cell_cur">hover mouse here to see Cell cursor.</h4>
<button type="button" onclick="Change()">Cell Cursor</button>
<script>
function Change() {
document.getElementById("cell_cur").style.cursor = "cell";
}
</script>
</body>
</html>

Output:

Conclusion

From all the above information, we have seen the actual use of cursor along with its different types of values. So one can use cursor value as per their appropriate use of the element on the webpage.