Custom Cursor with Custom Elements (solved)

Ask the community
,
1

Hello, I’m trying to create a custom cursor with the new customizable element feature. The code ran smoothly, but the image is not found, and the cursor is replaced only by the secondary mandatory option that I defined in the style. I have already tested the change on the w3schools website and it works normally. t is an image present in the media library, inclusive.

Do I need to modify something in the image path? Because in the 404 error that appears in the console, the constant IMAGE_URL appears after my domain, although it is defined with the absolute path:
https://www.petersonevaristoalves.com/IMAGE_URL or https://en.petersonevaristoalves.com/IMAGE_URL

Here is the code:

const IMAGE_URL = ‘https://static.wixstatic.com/media/17a3fc_65d927f18bd34657bd15f1991f61b3e0~mv2.png’ ;
const DEBUG_TEXT = ‘Loading the code for Custom Element’ ;

const createStyle = () => {
const styleElement = document.createElement( ‘style’ );
styleElement.innerHTML = #comp-kjh39u74, #comp-kjh39u74 img, #comp-kjh39u74 svg, #comp-kjh39u74 button, #comp-kjh39u74 h2, #comp-kjh39u74 p { cursor: crosshair; // already tested without this line cursor: url(IMAGE_URL) 25 25 , crosshair; // the secondary option after comma is mandatory } ;
return styleElement;
};

class customC rosshair extends HTMLElement {
constructor() {
super ();
console.log(DEBUG_TEXT); // This text appears on the console (as it should) but right after it appears the warning of the image not found
}

connectedCallback() {
this .appendChild(createStyle());
}
}
customElements.define( ‘custom-crosshair’ , customC rosshair );

2

It’s not a good idea to try to apply your own style on Wix element IDs.
First of all, Wix can change it whenever they need and it will break your code.
and second, your style might be overridden by their own style (for example if they used “!important” or if they load some styling dynamically.
What you should do is to create your own button (and other elements) using Custom element and apply your styling to these elements.

3

And when you create your own elements, it’ll be better if you attach them to the shadow DOM to make sure Wix styling will never affect it.

4

Following, I am looking for a method to apply custom cursor site-wide(global scope)~

5

I’ve already posted here a few days (or weeks) ago on how to apply it globally.

6

Okay, thanks for the tip. About Wix breaking code with changes is nothing new for those who develop on this platform. As for the scope of the style, I will keep it safe with the body tag. About the explicit error in addressing the image, do you have any tips on how to resolve it and are you willing to respond?

7

@jonatandor35 Do you dedicate your time to reply crudely but don’t even post the link? The time you spent typing “(or weeks)” for example was longer than a CTRL + C and CTRL + V on the link.

8

@petersonevaristoalve Why do you think I have to search for it and not you? Is my time worth less than yours?

9

@jonatandor35

I don’t get paid for that. Do you want to prolong the discussion?

10

@petersonevaristoalve I don’t get paid for it either. I’m not a Wix employee. I try to help people voluntarily, but my time is limited. Sorry.

11

@jonatandor35 Okay, but if your time is that valuable, don’t waste it arrogantly. Have a nice day.

12

Well, I had to give up the constant and write the image address directly in the style code. I also included some tags in addition to the body to overlay the cursor on some clickable elements and it met what I needed.

Follow the code if it helps someone.

const createStyle = () => {
const styleElement = document.createElement( ‘style’ );
styleElement.innerHTML = html, body, div, h1, h2, p, a, img, button, svg { cursor: crosshair; cursor: url( 'https://static.wixstatic.com/media/17a3fc_65d927f18bd34657bd15f1991f61b3e0~mv2.png' ) 25 25 , crosshair !important; } ;
return styleElement;
};
class customCrosshair extends HTMLElement {
constructor() {
super ();
}
connectedCallback() {
this .appendChild(createStyle());
}
}
customElements.define( ‘custom-crosshair’ , customCrosshair);

13

Hi J.D.!

I’ve tried to apply the code you gave in a different forum (I pasted it below for reference) about the custom cursors but it would not work for me. I saw that you said to add the second code to the end if it didn’t work… I did both.

I got the image I want for my cursor (sparkle emoji) was by adding a new page to my website and making that page private and copying the address directly from the image and adding that to the code you provided. Nada.
Could you help me further? Thank you for taking time out!

For reference and others the code I copied from another forum:

J.D.: "You should either load your image to Wix (via the media manager) or get an external URL for this image:
Then go to the site dashboard > settings > custom code > Add Custom Code
And try to add this to the HEAD part and apply to all pages:

<style>
body {
cursor:url(https://my-image-url-address.png), auto !important;}</style>

I haven’t tried it and it may not work (it might be overridden by Wix styling). If it does not work, you can try to add the following to the end of the BODY part:

<script>
document.body.style.cursor = "url(https://my-image-url-address.png), auto";</script>
14

Where do yo put this code?