I have the following jQuery and JS code:
$(function() {
function addMouseEvents() {
$('img').addClass('close-overlay-active')
var close_H = ($('.close-overlay-active').height() * 1.2);
var close_W = ($('.close-overlay-active').width() * 1.2);
document.addEventListener('mousemove', function(e) {
// console.log('move');
// console.log(e.pageX + " " + e.pageY );
var mouseX = e.pageX,
mouseY = e.pageY;
$('.close-overlay-active')
.css({
top: (mouseY - close_H),
left: mouseX - close_W
});
});
}
addMouseEvents();
});
The desired behaviour ofcourse is for the 'x' mark to be slightly above the cursor. That does happen most of the time , but sometimes the 'x' appears below the cursor that is towards the right bottom of the cursor and sometimes 1000px below the cursor. Why is this happening ? e.pageY seems to be returning the wrong value sometimes Why ?
Can anybody please explain this behavior please ?
FIDDLE HERE
Try this:
$(function() {
function addMouseEvents() {
$('img').addClass('close-overlay-active')
var close_H = ($('.close-overlay-active').height());
var close_W = ($('.close-overlay-active').width());
document.addEventListener('mousemove', function(e) {
// console.log('move');
// console.log(e.pageX + " " + e.pageY );
var mouseX = e.pageX,
mouseY = e.pageY;
$('.close-overlay-active')
.css({
top: (mouseY - close_H),
left: mouseX - close_W / 2
});
});
}
addMouseEvents();
});
img {
position: absolute;
top: 0;
left: 0;
}
.fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #b0e2ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="fixed">
<img src="https://cdn3.iconfinder.com/data/icons/sympletts-free-sampler/128/circle-close-128.png">
</div>
To get cursor exactly in the center, refer this FIDDLE
Related
Im trying to create a ball that follow the cursor inside my site: www.effevisual.altervista.org using wordpress and divi theme.
I tried this code lot of times without any problem but actually it looks like the objects block the ball.
I also want if possible to change the ball to less opacity when the cursor is hover a link.
<body onload = "followMouse();">
<div class="wrap">
<div id="ball"></div>
</div></body>
.wrap {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#ball {
width: 20px;
height: 20px;
background: #0034fc;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
margin: -10px 0 0 -10px;
pointer-events: none;
}
var $ = document.querySelector.bind(document);
var $on = document.addEventListener.bind(document);
var xmouse, ymouse;
$on('mousemove', function (e) {
xmouse = e.clientX || e.pageX;
ymouse = e.clientY || e.pageY;
});
var ball = $('#ball');
var x = void 0,
y = void 0,
dx = void 0,
dy = void 0,
tx = 0,
ty = 0,
key = -1;
var followMouse = function followMouse() {
key = requestAnimationFrame(followMouse);
if(!x || !y) {
x = xmouse;
y = ymouse;
} else {
dx = (xmouse - x) * 0.125;
dy = (ymouse - y) * 0.125;
if(Math.abs(dx) + Math.abs(dy) < 0.1) {
x = xmouse;
y = ymouse;
} else {
x += dx;
y += dy;
}
}
ball.style.left = x + 'px';
ball.style.top = y + 'px';
};
</script>
Any message error, just the ball doesnt follow properly.
So what I found is that you are applying a transform to the class .et_pb_code_0. transform: translateX(-89px) translateY(-81px) rotateX(0deg) rotateY(0deg) rotateZ(90deg); That alone has sent your ball to a different direction making left and right up and down and up and down now left and right.
Aside from that your wrapper and ball class are contained in many other divs which position it away from the top left of the page.
I can fix it in inspecter by dragging the wrap class to the top under the main-content1 class.
You will also have to apply position:fixed to the wrap class to keep it on the screen at all times. And a z-index for the lower parks of the page. And pointer-events:none so you can click links.
And something like this to get you started:
jQuery( "li" ).mouseenter(function() {
jQuery( "#ball" ).fadeTo( "slow" , 0, function() {
// Animation complete.
});
});
jQuery( "li" ).mouseleave(function() {
jQuery( "#ball" ).fadeTo( "slow" , 1, function() {
// Animation complete.
});
});
I have an element which I would like to move with the mouse.
var troll = document.getElementById('troll');
troll.addEventListener('dragover', (e) => {
e.preventDefault();
e.target.style.left = e.clientX + 'px';
e.target.style.top = e.clientY + 'px';
}, false);
img {
width: 100px;
cursor: pointer;
position: absolute;
}
<div id="troll">
<img src="http://images.mmorpg.com/features/7909/images/Troll.png" alt="Troll">
</div>
From left to right and from top to bottom it works OK. Not perfect, since the very first move takes a whole space and it doesn't look smooth. But the main problem is that I can't move from right to left or from bottom to top.
Any help would be appreciated.
You wanna use drag not dragover, and some logic to know where you're going up or down or left or top.
var troll = document.getElementById('troll');
var X,Y = 0;
troll.addEventListener('drag', (e) => {
e.preventDefault();
if (e.clientX > X)
{
e.target.style.left = X + 'px';
}
else if (e.clientX < X)
{
e.target.style.left = X-- + 'px';
}
if (e.clientY > Y)
{
e.target.style.top = Y + 'px';
}
else if (e.clientY < Y)
{
e.target.style.top = Y-- + 'px';
}
X = e.clientX;
Y = e.clientY;
}, false);
img {
width: 100px;
cursor: pointer;
position: absolute;
}
<div id="troll">
<img src="http://images.mmorpg.com/features/7909/images/Troll.png" alt="Troll">
</div>
My question is - Writing a page containing a small square,every time user brings the cursor close to the box, the box must move away from the mouse pointer. Finally when the box reaches the corner of the page, it should display a message.
So far, I have animated the box from INITIAL to last position on the screen. How to revert it back to original position, with an alert message??
$(document).ready(function() {
var x = $(window).width();
var y = $("#div2").width();
$("#div2").mouseover(function(){
for (var i = y ; i <= x ; i++) {
$("#div2").animate({
left: 100 + "px"
});
}
});
});
#div2 {
top: 100px;
/*left: 100px;*/
height: 100px;
width: 100px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div2" style="position: relative;"></div><br>
$(document).ready(function() {
var x = $(window).width();
var y = $("#div2").width();
var left = 0;
$("#div2").mouseover(function(){
left+= 100;
if(left <= x ){
$("#div2").animate({
left: left + "px"
});
} else {
alert('Back to original');
$(this).css('left', '0');
left=0; //this should be their else it will alert many times...
}
});
});
#div2 {
top: 100px;
/*left: 100px;*/
height: 100px;
width: 100px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div2" style="position: relative;"></div><br>
i i=529(window width=531) for quick out put initialize i=y then if it reaches end it will be moved to left:opx
you said you already made it to move to last and your mistake is you didn't assign i in left.
$(document).ready(function() {
var x = $(window).width();
var y = $("#div2").width();
$("#div2").mouseover(function(){
for (var i = 529 ; i <= x ; i++) {
$("#div2").animate({
left: i+"px"
});
}
alert("reached");
$("#div2").animate({
left: "0px"
});
});
});
#div2 {
top: 100px;
/*left: 100px;*/
height: 100px;
width: 100px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div2" style="position: relative;"></div><br>
Is this what you wanted?
$(document).ready(function() {
var x = $(window).width();
var y = $("#div2").width();
var left = 0;
$("#div2").mouseover(function(){
left+= 100;
if(left <= x ){
$("#div2").animate({
left: left + "px"
});
} else {
alert('Back to original');
$(this).css('left', '0');
left = 0;
}
});
});
#div2 {
top: 100px;
/*left: 100px;*/
height: 100px;
width: 100px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div2" style="position: relative;"></div><br>
First of all you don't need a loop to animate element to relative position, just use '+=100px' notation. You could also calculate element's next position to prevent if from overflow the window. Check this snippet.
$(document).ready(function() {
var vw = $(window).width();
var $el = $('#div2');
var width = $el.width();
var direction = 1;
var defaultAmount = 100; // Default travel distance
var amount = defaultAmount;
$el.mouseover(function() {
var changeDir = false;
// Check if element will be out of range
if (isOutOfRange() && direction === 1) {
alert('Will be at the end, will reverse')
amount = vw - $el.offset().left - width;
changeDir = true;
}
if (isAtBeginning() && direction === -1) {
alert('Will be at the beginning, will reverse')
amount = $el.offset().left;
changeDir = true;
}
$el.animate({
left: direction === 1 ? '+=' + amount + 'px' : '-='+ amount + 'px'
});
// Change direction to opposite if ellement is at the edge
if (changeDir) direction = direction * -1;
// Return to default
amount = defaultAmount;
});
function isOutOfRange() {
return width + amount + $el.offset().left >= vw;
}
function isAtBeginning(){
return $el.offset().left - amount <= 0;
}
});
#div2 {
top: 100px;
/*left: 100px;*/
height: 100px;
width: 100px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div2" style="position: relative;"></div><br>
Final Solution
$(document).ready(function() {
var direction=1;
var x = $(window).width();
var y = $("#div2").width();
var left = 0;
$("#div2").mouseover(function(){
if(left + y <= x )
{
left = left + direction*100;
$("#div2").animate({
left: left + "px"
});
}
else
{
alert("Moving Back!");
direction = -1;
left = left + direction*100;
$("#div2").animate({
left: left + "px"
});
}
if(left <= 0)
{
direction = 1;
left = left + direction*100;
alert("Moving Forward!!");
$("#div2").animate({
left: left + "px"
});
}
//$(this).css("left", "0");
});
});
I want to display true in a paragraph when mousemove is active and false when it is not active. tried an if statement but didn't work
$(document).ready(function() {
var Clickcount = 1;
$(".chimp").mousemove(function(e) {
if (Clickcount % 2) {
$('.chimp').css({
'top': e.clientY - 20,
'left': e.clientX - 20
});
}
});
$("body").mousemove(function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
$(".cords").html("clientX " + x + " clientY= " + y);
});
$(document.body).on('click', function() {
Clickcount++;
});
});
I'm not quite sure what you mean with mousemove is active. If you want to check if the mouse is insida a specific element or not you can use something like this:
$(".chimp").hover(function () {
$("#bool").text('true');
},function () {
$("#bool").text('false');
});
Demo
But if you want to detect if the mouse has stopped moving, you can try it with this code-snippet:
var timeout;
$(".chimp").mousemove(function () {
$("#bool").text('true');
clearTimeout(timeout);
timeout = setTimeout(function() {
$("#bool").text('false');
}, 1000);
});
This will trigger if the mouse is not moved for 1 second. You can adjust the treshold for that easily, just edit the number in the timeout-function.
Demo
Use "html" instead of "body"
$("html").mousemove(function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
$(".cords").html("clientX " + x + " clientY= " + y);
});
.cords {
width: 20em;
height: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="cords"></div>
here you go
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Drag Me</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
#dragg
{
position: absolute;
background-color: red;
height: 200px;
width: 200px;
}
p{
position: relative;
top: 210px;
right: 5px;
}
</style>
</head>
<body>
<div id="dragg">
red
</div>
<p id="bool"></p>
<script>
$(document).ready(function () {
$('#dragg').on({
mousedown: function (e) {
$(window).data({
down:true,
oX: e.offsetX,
oY: e.offsetY,
el:this
})
},
mouseup: function (e) {
$(window).data('down',false)
},
})
$(window).on({
mousemove: function (e) {
var data=$(window).data()
if (data.down) {
$("#bool").text('true');
$(data.el).css({
left: e.clientX - data.oX,
top: e.clientY - data.oY
});
}
else{
$("#bool").text('false');
}
},
})
});
</script>
</body>
</html>
OK, this works perfectly fine for following my mouse.
//
$(document).mousemove(function(e){
$("#follower").css({
'top': e.pageY + 'px';
'left': e.pageX + 'px';
});
});
//
And this works great for animating the mouse to a clicked point
//
$(document).click(function(e){
$("#follower").animate({
top: e.pageY + 'px';
left: e.pageX + 'px';
}, 800);
});
//
But I personally feel that logically this SHOULD work! Coming from my point of view as the webscripter. Amd then my question is, how can I make this work. I want the #follower to try and follow my mouse with a dynamic kind of lagging behind feel.
//
$(document).mousemove(function(e){
$("#follower").animate({
top: e.pageY + 'px';
left: e.pageX + 'px';
}, 800);
});
//
How about using setInterval and an equation called zeno's paradox:
http://jsfiddle.net/88526/1/
That's the way I usually do it.
As requested, I've included the code in this answer. Given a div with absolute positioning:
CSS:
#follower{
position : absolute;
background-color : red;
color : white;
padding : 10px;
}
HTML:
<div id="follower">Move your mouse</div>
JS w/jQuery:
var mouseX = 0, mouseY = 0;
$(document).mousemove(function(e){
mouseX = e.pageX;
mouseY = e.pageY;
});
// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
// change 12 to alter damping, higher is slower
xp += (mouseX - xp) / 12;
yp += (mouseY - yp) / 12;
follower.css({left:xp, top:yp});
}, 30);