Hi all!
I have written some velo code for my home page. The code works well in preview mode but does not work when I try it on my publised site.
I am trying to detect the mouse position using customElement (with premium), which is taken from Tracking Mouse Move with Velo Code | Velo by Wix .
The lines of code has been reduced to only return mouse coordinates, which works fine in preview mode.
This is the code in the home-page:
It changes the text if text-element #coorText and updates it using mouse-move.js which contains the code below this one.
$w.onReady(function () {
$w('#customElement1').on('coor', (event) => {
$w('#coorText').text="Mouse location: "+event.detail.x+','+event.detail.y;
//Arrow animation
setArrowDirection(event.detail.x,event.detail.y);
console.log('arrow position retrieved from customelement');
});
})
mouse-move.js
const functionsStr=
`document.body.addEventListener("mousemove", myFunction);
function myFunction(e) {
var x = e.clientX;
var y = e.clientY;
var coor = "Coordinates: (" + x + "," + y + ")";
document.getElementsByTagName("mouse-move")[0].dispatchEvent(new CustomEvent('coor',{detail:{x:x,y:y}}));
}`;
class MouseMove extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
var funcScript=document.createElement('script');
funcScript.innerHTML=functionsStr;
this.appendChild(funcScript);
}
}
customElements.define('mouse-move', MouseMove);
My custom element uses mouse-move.js as velo code and the tag name mouse-move.
Have any of you had similar experiences?
Kind regards, Johan
