Issues with div following mousemove while scrolling.
-
Hey there,
My programming skills are very limited (learning by googling). Now I need your help :)I'm trying to make a DIV following my mouse (www.silly.berlin). So far so simple:
<div id="sillydot"></div>
<style>
transform: translateX(-50%) translateY(-50%);
position: absolute;
display: block;
background-color: #000;
width: 1.25vw;
height: 1.25vw;
user-select: none;
pointer-events: none;
</style>
<script>
jQuery(document).ready(function() {
jQuery("*").css( 'cursor', 'none' );
jQuery("#sillydot").css( 'pointer-events', 'none' );
jQuery(document).mousemove(function(e) {
jQuery('#sillydot').css({
"left": e.pageX,
"top": e.pageY,
"z-index": "9999",
});
});
});
<script>At the moment I'm trying to fix a problem which occurs when I'm scrolling my page. The DIV is scrolling with the content until I move my mouse again, then it jumps back into position. I guess I've to subtract the scrolled distance somehow. But how?
Thanks for helping!
Best
Robin -
Dear @silly-berlin
no worries. That is how you learn.
Have a look here:
http://laytheme.com/documentation.html#custom-javascript
Best!Marius
-
Solved it.
My mistake was:<style>
#sillydot { position: absolute; };
</style><script>
jQuery(document).mousemove(function(e) { jQuery('#sillydot').css({
"left": e.pageX,
"top": e.pageY,
}); });
</script>It should be:
<style>
#sillydot { position: fixed; };
</style><script>
jQuery(document).mousemove(function(e) { jQuery('#sillydot').css({
"left": e.clientX,
"top": e.clientY,
}); });
</script> -
I don't answer or check forum DMs, please just post on the forum.
Before you post:
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. Now see if your problem solved itself
5. Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it