Custom Cursor is not showing on Laptop with touch functionality

 0

I created a custom cursor with Javascript and hide the default cursor. The custom cursor should of course be hidden on mobile devices. However, it was reported that users using a laptop that also has touch functionality don't see the cursor.

I toggle the cursor visbility on mouse events, such as mousemove, mouseenter, mouseleave. I know that there are equivalenet events such as touchmove etc., but this would also trigger it on mobile touch devices and the cursor should be hidden on mobile.

TLDR:

• I want to show the custom cursor on laptop + touch functionality and desktop devices
• I want to hide the custom cursor on mobile devices, including iPads

How do I do that?

$(document).ready(function () {
    var cursor = {
        delay: 4,
        _x: 0,
        _y: 0,
        endX: (window.innerWidth / 2),
        endY: (window.innerHeight / 2),
        cursorVisible: true,
        cursorEnlarged: false,
        $dot: document.querySelector('.cursor-dot'),
        $outline: document.querySelector('.cursor-dot-outline'),

        init: function () {
            // Set up element sizes
            this.dotSize = this.$dot.offsetWidth;
            this.outlineSize = this.$outline.offsetWidth;

            this.setupEventListeners();
            this.animateDotOutline();
        },

        setupEventListeners: function () {
            var self = this;
            const CLICKABLE_ELEMENTS = 'a, button, select, .filter-boolean';

            document.querySelectorAll(CLICKABLE_ELEMENTS).forEach(function (el) {
                el.addEventListener('mouseover', function () {
                    self.cursorEnlarged = true;
                    self.toggleCursorSize();
                });
                el.addEventListener('mouseout', function () {
                    self.cursorEnlarged = false;
                    self.toggleCursorSize();
                });
            });

            // Click events
            document.addEventListener('mousedown', function () {
                self.cursorEnlarged = true;
                self.toggleCursorSize();
            });
            document.addEventListener('mouseup', function () {
                self.cursorEnlarged = false;
                self.toggleCursorSize();
            });


            document.addEventListener('mousemove', function (e) {
                // Show the cursor
                self.cursorVisible = true;
                self.toggleCursorVisibility();

                // Position the dot
                self.endX = e.clientX;
                self.endY = e.clientY;
                self.$dot.style.top = self.endY + 'px';
                self.$dot.style.left = self.endX + 'px';
            });

            // Hide/show cursor
            document.addEventListener('mouseenter', function (e) {
                self.cursorVisible = true;
                self.toggleCursorVisibility();
                self.$dot.style.opacity = 1;
                self.$outline.style.opacity = 1;
            });

            document.addEventListener('mouseleave', function (e) {
                self.cursorVisible = true;
                self.toggleCursorVisibility();
                self.$dot.style.opacity = 0;
                self.$outline.style.opacity = 0;
            });
        },

        animateDotOutline: function () {
            var self = this;

            self._x += (self.endX - self._x) / self.delay;
            self._y += (self.endY - self._y) / self.delay;
            self.$outline.style.top = self._y + 'px';
            self.$outline.style.left = self._x + 'px';

            requestAnimationFrame(this.animateDotOutline.bind(self));
        },

        toggleCursorSize: function () {
            var self = this;

            if (self.cursorEnlarged) {
                self.$dot.style.transform = 'translate(-50%, -50%) scale(0.75)';
                self.$outline.style.transform = 'translate(-50%, -50%) scale(1.5)';
            } else {
                self.$dot.style.transform = 'translate(-50%, -50%) scale(1)';
                self.$outline.style.transform = 'translate(-50%, -50%) scale(1)';
            }
        },

        toggleCursorVisibility: function () {
            var self = this;

            if (self.cursorVisible) {
                self.$dot.style.opacity = 1;
                self.$outline.style.opacity = 1;
            } else {
                self.$dot.style.opacity = 0;
                self.$outline.style.opacity = 0;
            }
        }
    }

    cursor.init();
});

html, body, html *, body * {
     cursor: none;
}

.cursor-dot-outline {
     pointer-events: none;
     position: fixed;
     top: 50%;
     left: 50%;
     border-radius: 50%;
     opacity: 0;
     transform: translate(-50%, -50%);
     transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
 .cursor-dot {
     width: 8px;
     height: 8px;
     background-color: transparent;
z-index: 99999;
}
 .cursor-dot-outline {
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: 2px solid #b560d5;
    z-index: 99999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor-dot-outline"></div>
<div class="cursor-dot"></div>

To hide the custom cursor on mobile devices, you can use a media query to detect the device's screen size and add a CSS rule to hide the cursor. Here's an example:
css
@media (max-width: 767px) {
  html, body, html *, body * {
    cursor: none;
  }
}
This will hide the cursor on screens with a maximum width of 767 pixels, which includes most mobile devices. Note that this will also hide the default cursor, so you may want to add a fallback cursor style for desktop users.
Alternatively, you can use feature detection to check if the device has touch capabilities and only hide the cursor if it does. You can use the ontouchstart property to check if touch events are supported, like this:
less
if ('ontouchstart' in window) {
  // device has touch capabilities, hide cursor
  html, body, html *, body * {
    cursor: none;
  }
}
You can add this code to your JavaScript file, after the cursor.init() function call. This will check if the device has touch capabilities and hide the cursor if it does.