We Keep Coding

'mouseenter' and 'mouseleave' event keeps triggering with div as cursor

I made a 'custom cursor' by hiding the users cursor and displaying a div where the original cursor would normally be displayed on the screen.
Now the problem is I'd like to add some animations when hovering over an element (e.g. scale the 'cursor', or in this case the div that acts as the cursor).
In this example I made a button, and gave it a 'mouseenter' and 'mouseleave' event.
When you enter the button with your cursor, I console.log("enter");
When you leave the button, console.log("leave");
You can quickly see the problem: the two events are being triggered numerous times when hovering over the button, while the cursor is not actually leaving the element.
Also note that this problem doesn't occur when you're very slowly hovering to the left, or to the top (in a straight line), which is probably because of the 'left: e.pageX and top: e.pageY' piece of code in the script.
What can you do to fix this so the two events trigger properly?
$(document).ready(function() {
var cursor = $(".cursor");
/* Cursor */
$(document).on("mousemove", function(e) {
cursor.css({
left: e.pageX,
/*Or clientX and clientY */
top: e.pageY,
});
});
/* Button */
$(".btn").on("click", function(e) {
e.preventDefault();
});
$(".btn").on("mouseenter", function() {
console.log("entered");
});
$(".btn").on("mouseleave", function() {
console.log("left");
});
});
* {
cursor: none;
}
.cursor {
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
background-color: black;
}
.btn {
text-decoration: none;
font-family: sans-serif;
font-weight: bold;
text-transform: uppercase;
color: black;
background-color: white;
border: 4px solid black;
padding: 0.5rem 0.8rem;
display: inline-block;
margin: 100px 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!--Button-->
<div class="center marginB">
<a id="startChat" class="btn">Button</a>
</div>
<!--Cursor-->
<div class="cursor"></div>

Add pointer-events: none to your .cursor to make the cursor (black dot) never a target of any mouse events, and so it will never affect the mouse enter and mouse leave events. You can read more about pointer events here
See working example below:
$(document).ready(function() {
var cursor = $(".cursor");
/* Cursor */
$(document).on("mousemove", function(e) {
cursor.css({
left: e.pageX,
/*Or clientX and clientY */
top: e.pageY,
});
});
/* Button */
$(".btn").on("click", function(e) {
e.preventDefault();
});
$(".btn").on("mouseenter", function() {
console.log("entered");
});
$(".btn").on("mouseleave", function() {
console.log("left");
});
});
* {
cursor: none;
}
.cursor {
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
background-color: black;
pointer-events: none;
}
.btn {
text-decoration: none;
font-family: sans-serif;
font-weight: bold;
text-transform: uppercase;
color: black;
background-color: white;
border: 4px solid black;
padding: 0.5rem 0.8rem;
display: inline-block;
margin: 100px 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Button-->
<div class="center marginB">
<a id="startChat" class="btn">Button</a>
</div>
<!--Cursor-->
<div class="cursor"></div>

The problem is because there is a delay between the actual hidden cursor being moved by the user and the .cursor element moving to match its position, simply due to the performance of JS. As such the real cursor can, for a split second, go outside the bounds of .cursor and cause a mouseenter on the underlying button. The .cursor is then moved and the actual cursor then causes a mouseleave on the button as it's now over the .cursor element.
The simplest workaround would be to use CSS to set the cursor style to an image which matches the dot, as it performs far better than JS:
$(document).ready(function() {
$(".btn").on("click", function(e) {
e.preventDefault();
});
$(".btn").on("mouseenter", function() {
console.log("entered");
});
$(".btn").on("mouseleave", function() {
console.log("left");
});
});
* {
cursor: url('https://i.imgur.com/SyBk5p5.png'), auto;
}
.cursor {
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
background-color: black;
}
.btn {
text-decoration: none;
font-family: sans-serif;
font-weight: bold;
text-transform: uppercase;
color: black;
background-color: white;
border: 4px solid black;
padding: 0.5rem 0.8rem;
display: inline-block;
margin: 100px 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="center marginB">
<a id="startChat" class="btn">Button</a>
</div>

You should be able to do this with just pure CSS.
Since the div that houses your button and cursor are both part of the body they are siblings of the same container. You could use this to detect the hover on the button and then in turn change the styles of the cursor.
.marginB:hover ~ .cursor { background-color: yellow; }
https://jsfiddle.net/4nrtgx8o/
EDIT: If you remove your 100px margins from your button the hover effect wouldn't happen until you actually hover on the button. With your current CSS the button itself appears much smaller than the space it actually occupies as a piece of code. That's why the hover action happens before actually reaching the button.

text wont activate js and css animation

I'm not the best with javascript and I've been asked to include it in a page I'm creating. I'm nearly there, getting a box containing a video, to slide over the screen from above and create a dark overlay. I can only get it to work using an image. I want to activate it from a href text link. I've looked everywhere, but everything I see uses the same method, using an image. Can someone help please?
$(function() {
$('#activator').click(function() {
$('#overlay').fadeIn('fast', function() {
$('#box').animate({
'top': '120px'
}, 500);
});
});
$('#boxclose').click(function() {
$('#box').animate({
'top': '-500px'
}, 500, function() {
$('#overlay').fadeOut('fast');
});
});
});
a.activator {
background: url(Overlay/clickme.png) no-repeat top left;
z-index: 1;
cursor: hand;
}
.overlay {
background: transparent url(Overlay/images/overlay.png) repeat top left;
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 100;
}
.box {
position: fixed;
top: -500px;
left: 20%;
width: 610px;
background-color: #fff;
color: #7F7F7F;
padding: 20px;
border: 2px solid #F79510;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
z-index: 101;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="activator"><img src="images/Film-2.png" class="film"></a>
<!-- I want to add the text here, separate to the image, but to do the same activation. -->

Either you need to add the text inside the original "activator", or create another one.
Try this:
<a id="activator"><img src="images/Film-2.png" class="film"></a>
<div id="activator2"> Some text that activates the overlay </div>
And in your JS change
$('#activator').click(...
To:
$('#activator, #activator2').click(...
Now, both activators will trigger your script that makes the overlay show.
Also, in your CSS, you have a.activator while in your HTML is id="activator", but that might be just a typo.

Remove shadow from a button when its active

I have a button with javascript attached. When you click the button a hidden box will appear, when you click another one, the first box gets replaced with the second and so on. When my button is active, when the box is visible, it gets a shadow around. And i don´t want that! I tried to use the following css codes:
.nav > button{
width: auto;
font-family: 'OpenSansBold';
color: #000;
padding: 3px;
border: none;
margin-right: 10px;
margin-top: 5px;
font-size: 15px;
text-align: left;
background-color: #fff;
}
button:hover{
cursor: pointer;
border: none;
color: #7b1a2c;
}
button:visited{
font-family: 'OpenSansBold';
box-shadow: none;
}
button:active{
box-shadow: none;
}
But with no luck. Is there another CSS code for buttons when its active?
I have no clue about javascript, just copy pasted this thing. Maybe this is something that can be fixed in the js code? Just in case, I can show you guys:
$('div.box').slice(1).addClass('hidden');
$('.nav').children('button').on('click', function(){
// console.log('klikk');
$(this).data('content');
$('.box').not('hidden').addClass('hidden');
$( $(this).data('content')).removeClass('hidden');
});

Maybe you talk about outline property or :focus pseudo-class?
Try this one:
button:active, button:focus {
box-shadow: none;
outline: 0;
}

To give you a working example, play around with the following snippet, I think this behaves like you would want it to.
To completely remove the shadow, just remove the second JS rule.
// :active rules
$('button').on('mousedown', function () {
$(this).css('box-shadow', 'none');
});
// :visited rules
$('button').on('mouseup', function () {
$(this).css('box-shadow', '10px 10px 5px #888888');
});
button {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 10px 10px 5px #888888;
}
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<body>
<button>test</button>
</body>

Overlay is clickable through an element in front of it

I am using an overlay for a login which appears in front of everything when the user hit "sign-in". The overlay consists of an opaque wrapper which contains a solid inner-div where the login form is held.
Here is the html:
<div class="login_wrapper">
<div class="login_info">
<div class="login_form">
// form
</div>
</div>
</div>
and the css:
.login_wrapper{
position:absolute;
position: fixed;
margin: auto;
left:0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height:100%;
background-color:rgba(0, 0, 0, 0.5);
z-index:9998;
display: none;
}
.login_info{
font-family: "NimbusCondensed";
position:absolute;
margin: auto;
left:0;
right: 0;
top: 0;
bottom: 0;
width: 350px;
height:300px;
background: #cacaca;
border: solid #000000 1px;
border-radius: 10px;
z-index:99999;
pointer-events: none;
}
.login_form{
margin-top: 40px;
margin-left: 12.5%;
padding: 10 20 0 20;
width: 220px;
border: 1px solid black;
border-radius: 7px;
background: white;
box-shadow: 0px 5px 13px black;
z-index: 100000;
}
I would like this overlay to be hidden when the user clicks anywhere outside of the login_info.
I have the following JQuery handling this:
$(document).ready(function(){
$(".login_wrapper").click(function(){
$(".login_wrapper").fadeToggle(300);
});
});
But login_wrapper is hidden if the use clicks ANYWHERE on the overlay, including the form in the middle which prevent then form entering any info.
Somehow the click events are getting "through" login_form & login_info and the browser reacts like login_wrapper is clicked.
How can I resolve this so that jQuery code applies ONLY when the overlay is clicked outside the inner divs.
Thanks!

Change your code to this:
$(document).ready(function(){
$(".login_wrapper").click(function(){
$(".login_wrapper").fadeToggle(300);
});
$(".login_info").click(function(event){
event.stopPropagation();
});
});
This will stop the click event from bubbling up to the .login_wrapper. For more information on stopPropagation() see https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation.

First, you have to transform .login_wrapper in #login_wrapper, then add this:
$('#login_wrapper').click(function(e) {
if (e.target.id === "login_wrapper")
$('#login_wrapper').fadeToggle(300);
});
This will target only the element with the id login_wrapper.
Hope this helps

Help with Mootools Gallery - Transition text

I'm not sure if what i want is possible but i'm using a Mootools image gallery which you can see an example of here:
</script>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>
The gallery rotation is above but what i'd like to achieve, ideally, is the second text element (with the white background) to be wider than the top text element, so it looks more like the picture underneath.
There's a lot of Javascript involved so i don't know what i should post here to enable people to help, but just let me know what i should put in here and i'll come back and edit.
Or, if some knows of somethign similar in jQuery which would allow me to get the same effect, but not require too much JS coding, i'd be much obliged.
Thanks in advance as always,
Dan

Try this css and see if its what your after.
.slideInfoZone {
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
top:40px;
color: #FFF;
text-indent: 0;
overflow: hidden;
padding: 10px 0 0 20px;
height: 70px;
}
.slideInfoZone h3{
background: #000;
width: 200px;
padding: 30px;
margin-left: -30px;
display:inline;
}
.slideInfoZone p {
position: absolute;
bottom: 0;
background: #FFF;
font-size: 14px;
color: #000;
margin: 20px 0 0 -20px;
padding: 10px 0 10px 20px;
width: 50%;
}
Basically what I did was remove your background color for the containing element, then I gave the p tag a bg color, and modified the padding/margin for the h3. Im not too happy with what I had to do with the h3 but without changing the markup at all it works.