We Keep Coding

Custom cursor is reset to top left of page every time a new page is loaded

I have a custom cursor on my site that is working perfectly apart from one thing. When clicking through to a new page, when the page loads the cursor resets itself to the top left of the page regardless of where you leave the mouse on the page, then once you moved the mouse the cursor moves back to where the mouse is. I have tried removing "top" & "left" from the CSS but the problem remains. I cant see what is causing this to happen, and I just need the cursor to stay where the mouse is positioned on the page and not reset every time you navigate to a new page.
jQuery(document).ready(function($) {
let cursor = document.querySelector('#custom-cursor');
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
$('#custom-cursor').remove();
}
else { cursor.style.display = 'block';}
document.addEventListener('mousemove', evt => {
let { clientX: x, clientY: y } = evt;
let scale = 1;
if (evt.target.matches('a,span,[onclick],img,video,i')) {
cursor.classList.add('active');
scale = 0.5;
} else {
cursor.classList.remove('active');
}
cursor.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
});
});
* {
cursor: none;
}
#custom-cursor {
display: none;
position: fixed;
width: 20px; height: 20px;
top: -10px;
left: -10px;
border: 2px solid black;
border-radius: 50%;
opacity: 1;
background-color: #fb4d98;
pointer-events: none;
z-index: 99999999;
transition:
transform ease-out 0.15s,
border 0.5s,
opacity 0.5s,
background-color 0.5s;
}
#custom-cursor.active {
opacity: 0.5;
background-color: #000;
border: 2px solid #fb4d98;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="custom-cursor"></div>

Use ordinary CSS cursor as shown in the other answer and replace it with you fancy cursor in the first mouse event:
jQuery(document).ready(function($) {
let cursor = document.querySelector('#custom-cursor');
document.addEventListener('mousemove', evt => {
document.body.classList.add('custom-cursor-moved')
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
$('#custom-cursor').remove();
} else {
cursor.style.display = 'block';
}
let {
clientX: x,
clientY: y
} = evt;
let scale = 1;
if (evt.target.matches('a,span,[onclick],img,video,i')) {
cursor.classList.add('active');
scale = 0.5;
} else {
cursor.classList.remove('active');
}
cursor.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
});
});
body {
height: 100vh;
}
html,
body {
margin: 0;
padding: 0;
}
* {
cursor: url(https://i.stack.imgur.com/7pmmV.png) 0 0, auto;
}
.custom-cursor-moved,
.custom-cursor-moved * {
cursor: none !important;
}
#custom-cursor {
display: none;
position: fixed;
width: 20px;
height: 20px;
top: -10px;
left: -10px;
border: 2px solid black;
border-radius: 50%;
opacity: 1;
background-color: #fb4d98;
pointer-events: none;
z-index: 99999999;
transition: transform ease-out 0.15s, border 0.5s, opacity 0.5s, background-color 0.5s;
}
#custom-cursor.active {
opacity: 0.5;
background-color: #000;
border: 2px solid #fb4d98;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="custom-cursor"></div>
Try me.<br> Try me.
It needs a bit of modifications (better cursor image, fix it hotspot etc.) but it works.
Be very, very careful when doing such thing. Try to not break any accessibility tools and please do not assume that Android/some specific user-agent HAS touchscreen, etc.. Use proper APIs.

Use CSS cursor property instead:
html {
cursor: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) 0 0, auto;
height: 100%;
}
Try me.

Collision detection in nuxt.js. code is running without errors. But some functionalities not working

I am working with collision detection in vue.js using nuxt.js framework. I have done a similar program from this source
https://codepen.io/dropinks/pen/MrzPXB
I have converted this js code in vue friendly template and script. Only problem is that the the collision is not being detected . Please take a look at my code and tell where i made mistake.
Here is the link for codesandbox online editor where i have the code
https://codesandbox.io/s/wispy-hill-466s7?file=/pages/index.vue
template code:
<template>
<div class="container">
<div class="rectangle-1" id="rect">Hover Me</div>
<div class="rectangle-2" id="dragMe">Drag Me</div>
</div>
</template>
styles:
<style scoped>
container {
position: relative;
}
.rectangle-1 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #4CAF50;
width: 180px;
height: 150px;
border-radius: 5px;
transition: 0.3s all ease;
color: #fff;
text-align: center;
line-height: 150px;
font-size: 25px;
}
.rectangle-1.collide {
background: #EF5350;
}
.rectangle-1:after {
content: ":-)";
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
}
.rectangle-1.collide:after {
content: ":-(";
}
.rectangle-2 {
position: absolute;
background: #F5B041;
width: 100px;
height: 100px;
border-radius: 5px;
z-index: 10;
cursor: move;
transition: 0.5s box-shadow ease, 0.5s transform ease;
transform: translate(0, 0);
top: 40%;
left: 30%;
text-align: center;
line-height: 100px;
font-size: 17px;
}
.rectangle-2.onDrag {
box-shadow: 5px 5px 25px 0px rgba(0, 0, 0, 0.2);
transform: translate(-3px, -3px);
}
</style>
script
<script>
export default {
data() {
return {
dragMe: "",
rect: "",
};
},
created: function () {
if (process.client) {
this.myFunction();
}
},
methods: {
myFunction: function () {
this.rect = document.getElementById("rect");
this.dragMe = document.getElementById("dragMe");
this.initDrag({
element: this.dragMe,
drag: function () {
this.isCollapsed(this.dragMe, this.rect);
},
});
},
isCollapsed: function (dragMe, rect) {
var object_1 = this.dragMe.getBoundingClientRect();
var object_2 = this.rect.getBoundingClientRect();
if (
object_1.left < object_2.left + object_2.width &&
object_1.left + object_1.width > object_2.left &&
object_1.top < object_2.top + object_2.height &&
object_1.top + object_1.height > object_2.top
) {
rect.classList.add("collide");
document.getElementById('dragMe').style.background = 'blue';
} else {
rect.classList.remove("collide");
}
},
initDrag: function (options) {
var element = options.element;
var mousedown,
mouseup,
mousemove,
dragStart,
initX,
initY,
offsetLeft,
offsetTop;
function mouseMove(ev) {
if (dragStart) {
var newX = offsetLeft + (ev.pageX - initX);
var newY = offsetTop + (ev.pageY - initY);
element.style.top = newY + "px";
element.style.left = newX + "px";
options.drag.call();
}
}
function mouseUp(ev) {
dragStart = false;
document.removeEventListener("mousemove", mouseMove, false);
document.removeEventListener("mouseup", mouseUp, false);
options.stop.call();
}
function mouseDown(ev) {
initX = ev.pageX;
initY = ev.pageY;
dragStart = true;
offsetLeft = element.offsetLeft;
offsetTop = element.offsetTop;
document.addEventListener(
"mousemove",
function (ev) {
mouseMove(ev);
},
false
);
document.addEventListener(
"mouseup",
function (ev) {
mouseUp(ev);
},
false
);
options.start.call();
}
element.addEventListener(
"mousedown",
function (ev) {
mouseDown(ev);
},
false
);
},
},
};
</script>

Add delay to show loading GIF on button, then close div (to load results)

I would like to have a button, that when clicked shows a pre-loading gif for 1-second, and then closes the div #sidefilter, that the user has open.
I have been able to get both of them working independently, but they are not working as intended, I think I need to add a delay to #dismissiefilter, and then end the loading GIF when executed.
What needs to be added to enable the above to happen?
$('.showloader').button();
$('.showloader').click(function() {
$(this).html('<img src="http://www.bba-reman.com/images/fbloader.gif" />');
});
$('#dismisssidefilter, .overlay').on('click', function() {
$('#sidefilter').removeClass('active');
$('.overlay').removeClass('active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
See results
Working link:
https://clearing.co.uk/dev/universities/
Filter button next to 'search for a university' input field

I've updated my answer with a demo representing your site
$(function() {
var devActions = function(str, clear) {
let output = $('#dev-output');
if (typeof clear === 'boolean' && clear === true) {
output.empty();
}
output.append(' - ' + str + '<br />');
console.log('devActions:', str);
}
$('#sidefilterCollapse').on('click', function() {
var sidebar = $('#sidefilter');
if (!sidebar.hasClass('active')) {
sidebar.addClass('active');
devActions('#sidefilterCollapse clicked', true);
devActions('Adding .active class to #sidefilter');
if ($('#sidefilter').hasClass('active')) {
devActions('#sidefilter now has .active class');
} else {
devActions('somethings went wrong #sidefilter doesn\'t have .active class');
}
} else {
devActions('#sidefilter already has .active class');
}
})
$('.showloader').on('click', function(e) {
e.preventDefault();
var btn = $(this);
// add .loading class so we can prevent spam click
if (!btn.hasClass('loading')) {
btn.addClass('loading');
var saveOriginalText = $(this).html();
var duration = 3000;
btn.html('<img src="http://www.bba-reman.com/images/fbloader.gif" />');
if (btn.children('img').length) {
devActions('.showloader clicked and image was added.');
}
btn.stop(true).animate({
opacity: 1
}, {
duration: duration,
start: function() {
devActions('animation started');
},
complete: function() {
devActions('animation done');
// remove .loading class so we can make the button available again
btn.removeClass('loading');
btn.html(saveOriginalText);
if ($(this).html() == saveOriginalText) {
devActions('original button content was added on .showloader');
}
// do custom stuff after 1000ms
$('#sidefilter').removeClass('active');
if (!$('#sidefilter').hasClass('active')) {
devActions('.active class has been removed from #sidefilter');
}
}
})
} else {
devActions('---- don\'t spam click, currently loading ---');
}
});
})
body {
overflow-x: hidden;
font-family: "Segoe UI";
}
#sidefilterCollapse,
.showloader {
padding: 3px 5px;
line-height: 1rem;
width: 100px;
background: red;
color: white;
display: inline-block;
text-align: center;
border-radius: 20px;
cursor: pointer;
text-decoration: none;
}
#sidefilter {
text-align: center;
position: fixed;
right: -200px;
top: 0;
padding: 15px 10px;
box-sizing: border-box;
width: 200px;
height: 100%;
border-left: 1px solid lightgrey;
box-shadow: -2px 0 13px 2px grey;
transition: right 0.2s ease-in-out;
}
#sidefilter.active {
right: 0;
transition: right 0.2s ease-in-out;
}
#sidefilter p {
text-align: left;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidefilterCollapse">
Filter Button
</div>
<div id="sidefilter">
<p>
text text text text text text text text text
</p>
See results
</div>
<div id="dev-output"></div>

Stop element moving on mouse scroll using rotatable class

I am currently working on a drag-drop web application whereupon users can plan a marquee layout.
Part of the functionality is that users can rotate certain items of furniture on the canvas. However, it seems that scrolling whilst your mouse pointer is over a rotatable element will also rotate that element, which causes problems, especially if the user has got their layout perfect and then scrolls down the page to fill in a form - potentially messing up the layout.
The app uses the rotatable class from jQuery, and implements the draggable and droppable classes.
This is my javascript:
$(function() {
//Make every clone image unique.
var counts = [0];
var resizeOpts = {
handles: "all",
autoHide: true
};
var nw = $("<div>", {
class: "ui-rotatable-handle"
});
var ne = nw.clone();
var se = nw.clone();
$('.box div.ui-rotatable-handle').addClass("ui-rotatable-handle-sw");
nw.addClass("ui-rotatable-handle-nw");
ne.addClass("ui-rotatable-handle-ne");
se.addClass("ui-rotatable-handle-se");
$(".dragImg").draggable({
helper: "clone",
//Create counter
start: function() {
counts[0]++;
}
});
$("#dropHere").droppable({
drop: function(e, ui) {
if (ui.draggable.hasClass("dragImg")) {
$(this).append($(ui.helper).clone());
//Pointing to the dragImg class in dropHere and add new class.
$("#dropHere .dragImg").addClass("item-" + counts[0]);
$("#dropHere .img").addClass("imgSize-" + counts[0]);
//Remove the current class (ui-draggable and dragImg)
$("#dropHere .item-" + counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging").addClass('rotatable');
$('.rotatable').resizable().rotatable();
//$(".rotatable").append(nw, ne, se);
$(".small-table div[class*='ui-rotatable-handle-']").bind("mousedown", function(e) {
$('.rotatable').resizable().rotatable();
$('.rotatable').rotatable("instance").startRotate(e);
});
$(".item-" + counts[0]).dblclick(function() {
$(this).remove();
});
make_draggable($(".item-" + counts[0]));
$(".imgSize-" + counts[0]).resizable(resizeOpts);
}
}
});
var zIndex = 0;
function make_draggable(elements) {
elements.draggable({
containment: 'parent',
start: function(e, ui) {
ui.helper.css('z-index', ++zIndex);
},
stop: function(e, ui) {}
});
}
});
As you can see, each item that is dragged is cloned once it's dropped on the dropzone (#dropHere div) and then remains on there unless it's double clicked. I want to know, is there any way to stop the element rotating if the user scrolls their mouse over it?
EDIT: Here is a FIDDLE of the app:

Note that you just can configure you rotatable by passing parameters as and object , one of those parameters is the wheelRotate whihch set to true by default , so you've just to create an object contating this param with false value : var rotateParams = {wheelRotate:false}; and then passe the object in the rotatable() fanction as below :
$('.rotatable').resizable().rotatable(rotateParams);
Please see bellow working snippet :
//adds are commented
$(function() {
//Make every clone image unique.
var counts = [0];
var resizeOpts = {
handles: "all",
autoHide: true
};
var nw = $("<div>", {
class: "ui-rotatable-handle"
});
var ne = nw.clone();
var se = nw.clone();
$('.box div.ui-rotatable-handle').addClass("ui-rotatable-handle-sw");
nw.addClass("ui-rotatable-handle-nw");
ne.addClass("ui-rotatable-handle-ne");
se.addClass("ui-rotatable-handle-se");
$(".dragImg").draggable({
helper: "clone",
//Create counter
start: function() {
counts[0]++;
}
});
/****** adding config param ******/
var rotateParams = {
wheelRotate: false
};
/**/
$("#dropHere").droppable({
drop: function(e, ui) {
if (ui.draggable.hasClass("dragImg")) {
$(this).append($(ui.helper).clone());
//Pointing to the dragImg class in dropHere and add new class.
$("#dropHere .dragImg").addClass("item-" + counts[0]);
$("#dropHere .img").addClass("imgSize-" + counts[0]);
//Remove the current class (ui-draggable and dragImg)
$("#dropHere .item-" + counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging").addClass('rotatable');
/****** applying the config param ******/
$('.rotatable').resizable().rotatable(rotateParams);
//$(".rotatable").append(nw, ne, se);
$(".small-table div[class*='ui-rotatable-handle-']").bind("mousedown", function(e) {
/****** applying the config param ******/
$('.rotatable').resizable().rotatable(rotateParams);
$('.rotatable').rotatable("instance").startRotate(e);
});
$(".item-" + counts[0]).dblclick(function() {
$(this).remove();
});
make_draggable($(".item-" + counts[0]));
$(".imgSize-" + counts[0]).resizable(resizeOpts);
}
}
});
var zIndex = 0;
function make_draggable(elements) {
elements.draggable({
containment: 'parent',
start: function(e, ui) {
ui.helper.css('z-index', ++zIndex);
},
stop: function(e, ui) {}
});
}
});
#outer-dropzone {
height: 140px;
}
#inner-dropzone {
height: 80px;
}
.dropzone {
background-color: #ccc;
border: dashed 4px transparent;
border-radius: 4px;
margin: 10px auto 30px;
padding: 10px;
width: 80%;
transition: background-color 0.3s;
}
.drop-active {
border-color: #aaa;
}
.drop-target {
background-color: #29e;
border-color: #fff;
border-style: solid;
}
.drag-drop {
display: inline-block;
min-width: 40px;
color: #fff;
background-color: transparent;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
transition: background-color 0.3s;
}
.drag-drop.can-drop {}
.dragImg {
width: 50px;
height: 50px;
cursor: move;
}
.small-table {
width: 50px;
height: 50px;
cursor: move;
}
#dropHere {
width: 400px;
height: 400px;
border: dotted 1px black;
float: left;
}
.box {
border: 2px solid black;
width: 100px;
height: 100px;
background-color: green;
margin: 27px;
position: relative;
}
.ui-rotatable-handle {
background: url("https://image.ibb.co/knL4iF/1497037929_rotate_right.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 25px;
width: 25px;
position: absolute;
top: -10px;
left: -10px;
}
.ui-rotatable-handle-sw {
bottom: -27px;
left: -27px;
}
.ui-rotatable-handle-nw {
top: -27px;
left: -27px;
}
.ui-rotatable-handle-se {
bottom: -27px;
right: -27px;
}
.ui-rotatable-handle-ne {
top: -27px;
right: -27px;
}
.small-table {
background-image: url('https://image.ibb.co/gXCjiF/small_table.png');
background-size: contain;
}
.dance-floor {
background-image: url('https://image.ibb.co/gjHjiF/dance_floor.png');
background-size: contain;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ui.rotatable/1.1/jquery.ui.rotatable.min.js"></script>
<div class="container">
<div class="dragImg small-table"></div>
<div class="dragImg dance-floor"></div>
<div id="dropHere"></div>
</div>

Drag objects on top of a background image

I wrote the following code (using Interact.js) that enables dragging and dropping two objects on top of .dropzone while also cloning these objects. However when I add a background image to a div .dropzone, the dropped objects are located behind this background image. I want them to be on top of the image. How can I do it?
CSS:
<style>
#drag-1 {
background: #1ABB9C;
color: #000000;
width: 35px;
height: 35px;
border-radius: 50%;
text-align: center;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
#drag-2 {
background-color: #1ABB9C;
color: #000000;
width: 150px;
height: 20px;
text-align: center;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
.dropzone {
background-color: #e9ebed;
padding: 10px;
width: 100%;
height: 200px;
border: dashed 4px transparent;
float:left;
}
.drop-active {
border-color: #aaa;
}
.drop-target {
background-color: #3f5265;
color: #FFF;
border-color: #fff;
border-style: solid;
}
</style>
HTML:
<div id="drag-1" class="draggable"></div>
<div id="drag-2" class="draggable"></div>
<div id="dropzone" class="dropzone"></div>
JavaScript:
<script type="text/javascript">
// target elements with the "draggable" class
interact('.draggable').draggable({
inertia: true,
restrict: {
restriction: ".dropzone",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
autoScroll: true,
onmove: function (event) {
var target = event.target;
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
target.style.webkitTransform =
target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
},
onend: function(event) {
console.log(event);
}
}).on('move', function (event) {
var interaction = event.interaction;
if (interaction.pointerIsDown && !interaction.interacting() && event.currentTarget.getAttribute('clonable') != 'false') {
var original = event.currentTarget;
var clone = event.currentTarget.cloneNode(true);
var x = clone.offsetLeft;
var y = clone.offsetTop;
clone.setAttribute('clonable','false');
clone.style.position = "absolute";
clone.style.left = original.offsetLeft+"px";
clone.style.top = original.offsetTop+"px";
original.parentElement.appendChild(clone);
interaction.start({ name: 'drag' },event.interactable,clone);
}
});
// enable draggables to be dropped into this
interact('.dropzone').dropzone({
// Require a 50% element overlap for a drop to be possible
overlap: 0.50,
// listen for drop related events:
ondropactivate: function (event) {
// add active dropzone feedback
event.target.classList.add('drop-active');
},
ondragenter: function (event) {
var draggableElement = event.relatedTarget,
dropzoneElement = event.target;
// feedback the possibility of a drop
dropzoneElement.classList.add('drop-target');
},
ondragleave: function (event) {
// remove the drop feedback style
event.target.classList.remove('drop-target');
},
ondropdeactivate: function (event) {
// remove active dropzone feedback
event.target.classList.remove('drop-active');
event.target.classList.remove('drop-target');
}
});
$(".dropzone").html("<img style='position:absolute' src='https://s-media-cache-ak0.pinimg.com/originals/fb/d5/55/fbd5556e0e364b31166bebfce433c14e.jpg'>");
</script>