So basically I have an event that occurs at page load. it causes an image to follow your cursor, but on a click event I would like to disable this event, and then on a second click re-enable the mouse follow event
I tried just creating a toggle variable but it just seems to be freezing my image.
Would .on() and .off() be appropriate here? I read the documentation but I am confused on how to implement them
I am confused as to how I would turn off an event i guess.
Jscript
var enabled = true;
$(document).ready(function() {
$(document).mousemove(function() {
if (enabled) {
$("#rocket").stop().animate({left:e.pageX, top:e.pageY});
}
});
$(document).click(function() {
enabled == !enabled;
});
});
Demo
LIVE DEMO
var enabled = true;
$(function () {
var $rocket = $('#rocket');
$(document).mousemove(function (e) {
if (enabled) {
$rocket.css({left: e.pageX, top: e.pageY});
}
}).click(function () {
enabled ^= 1;
});
});
Instead of animate() use .css()
If you really want to add a sleek animation to your catching spacecraft:
LIVE DEMO with 'animation'
$(function () {
var $rocket = $('#rocket'),
enabled = true,
mX =0, mY =0,
posX =0, posY =0,
lazy = 20; // Smooth move
$(document).mousemove(function(e){
mX = e.pageX;
mY = e.pageY;
}).click(function(){
enabled^=1;
});
intv = setInterval(function(){
if(enabled){
posX += (mX-posX) / lazy; // zeno's paradox equation "catching delay"
posY += (mY-posY) / lazy;
$rocket.css({left: posX, top: posY});
}
}, 10);
});
I might try to register and remove the handler like
$(document).ready(function () {
function handler(e) {
$("#rocket").css({
left: e.pageX,
top: e.pageY
});
}
$(document).on('mousemove.cursor', handler);
var enabled = true;
$(document).click(function () {
enabled = !enabled;
if (enabled) {
$(document).on('mousemove.cursor', handler);
} else {
$(document).off('mousemove.cursor');
}
});
});
Demo: Fiddle
Here are minor fixes to make your code work:
var enabled = true;
$(document).ready(function() {
$(document).mousemove(function(e) {
if (enabled) {
$("#rocket").stop().animate({left:e.pageX, top:e.pageY});
}
});
$(document).click(function() {
enabled = !enabled;
});
});
The fiddle is here http://jsfiddle.net/bmzyK/8/
Just added param e in the mousemove event and added JQuery to the JSFiddle. Also fixed the '==' typo.
Related
before i was trying to add this event listener to a div
i was using "scroll", this one works but "resize" is not working
and i can't find out why .
This is my code :
$('document').ready(function() {
var content = document.getElementById("scroller");
var tabs = document.getElementById("tabs");
var than, now;
than = tabs.clientHeight;
content.addEventListener("resize", function(event) {
now = tabs.clientHeight;
alert(now + "&" + than);
}, false);
});
JSFIDDLE DEMO
or is it possible something like this :
$('document').ready(function(){
var content = document.getElementById("scroller");
var hc , h;
window.addEventListener('resize', function(event){
h = event.clientHeight;
if(h>510) {
$(".godown").fadeout("0");
}
if(h<510) {
content.addEventListener('scroll', function(event){
hc = $('#scroller').scrollTop();
if (hc){
$(".godown").fadeOut("slow");
$(".gotop").fadeIn("slow");
}
if (!hc){
$(".godown").fadeIn("slow");
$(".gotop").fadeOut("slow");
}
}, false);
}
}, false);
});
You need to add the event listener to the window object, as it is the window resizing, not the element. window.addEventListener("resize", function(event) {...});
I have updated your jsfiddle here where you can see it working.
$('document').ready(function() {
var content = document.getElementById("scroller");
var tabs = document.getElementById("tabs");
var than, now;
than = tabs.clientHeight;
window.addEventListener("resize", function(event) {
now = tabs.clientHeight;
alert(now + "&" + than);
}, false);
});
Here is my js where i already did a swipeleft and swiperight events in order to show a toolbar on the left. (it is for a smartphone app, with touch events)
I wanted to add the drag event on it, to keep control on the bar (like on menu bar of Facebook, Tinder..
Do you know how i can do it ?
$(function(){
var page = document.getElementById("page");
var sidebar = 0;
Hammer(page).on("swipeleft", function(e) {
if (!sidebar){
return true;
}
$(page).animate({left: "-=300"}, 500);
sidebar = 0;
});
Hammer(page).on("swiperight", function(e) {
if (sidebar){
return true;
}
$(page).animate({left: "+=300"}, 500) ;
sidebar=1;
});
})
I already tried this but it doesn't recognize drag and e.gesture.direction...
Hammer(page).on("drag", function(e) {
if ( e.gesture.direction === "right" && !sidebar){
$(page).animate({left : e.gesture.deltaX + "px"}, 0);
}
});
The event is called pan not drag. See the docs.
Hammer(page).on("panright", function(e) {
if (!sidebar){
$(page).animate({left : e.gesture.deltaX + "px"}, 0);
}
});
Ok, I found it! You were right, #Cristy :)
Here is the working answer:
$(function(){
var page = document.getElementById("page");
var sidebar = 0;
Hammer(page).on("swipeleft", function(e) {
if (!sidebar){
return true;
}
$(page).animate({left: "-=300"}, 500);
sidebar = 0;
});
Hammer(page).on("panleft", function(e) {
if (!sidebar){
$(page).animate({left : e.deltaX + "px"}, 0);
}
});
Hammer(page).on("swiperight", function(e) {
if (sidebar){
return true;
}
$(page).animate({left: "+=300"}, 500) ;
sidebar=1;
});
Hammer(page).on("panright", function(e) {
if (!sidebar){
$(page).animate({left : e.deltaX + "px"}, 0);
}
});
})
I'm working on custom tooltip that ollows cursor, but it's only firing on second hover. I searched stack from floor to ceiling and all those advices i tried wasn't very helpful. I made code as simple as possible, but stil all works on second hover. I'm out of ideas.
Here is the code
$(".bar").bind('mouseover',handler);
$(".bar").bind('mousemove', function(e){
$('.tail').css({
left: e.pageX + 20,
top: e.pageY
});
});
function handler(ev) {
var target = $(ev.target);
var elId = target.attr('id');
if( target.is(".bar") ) {
$('#'+elId).hover(function() {
$('#tail'+elId).show();
}, function() {
$('#tail'+elId).hide();
});
}
}
And here goes the fiddle
http://jsfiddle.net/hj57k/3070/
Thanks or help.
EDIT
Whoa guys, that was really fast! All your solutions worked. +1 for everyone. But solution from MrUpsidown is most elegant... Thanks to all. :)
You could maybe do something easier:
$(".bar").bind('mouseenter', function () {
$('#tail' + $(this).attr('id')).show();
});
$(".bar").bind('mouseleave', function () {
$('#tail' + $(this).attr('id')).hide();
});
$(".bar").bind('mousemove', function (e) {
$('#tail' + $(this).attr('id')).css({
left: e.pageX + 20,
top: e.pageY
});
});
JSFiddle demo
Because you are attaching the hover event when mouseover. You should attach the hover event at the beginning, like this:
$(".bar").each(function(index,elem){
var target = $(elem);
var elId = target.attr('id');
if( target.is(".bar") ) {
$('#'+elId).hover(function() {
$('#tail'+elId).show();
}, function() {
$('#tail'+elId).hide();
});
$('#'+elId).bind('mousemove', function(e){
$('#tail'+elId).css({
left: e.pageX + 20,
top: e.pageY
});
});
}
});
It's because you init the hover function only when JS bind the mouseover.
You have to directly use hover method.
Have a good day !
I think your problem here is that the first hover yo do only binds the element to the function. I slightly modified your script, automatically running .show() and conditioning .hide() to a mouseout event. Like this:
function handler(ev) {
var target = $(ev.target);
var elId = target.attr('id');
if( target.is(".bar") ) {
$('#tail'+elId).show();
$('#'+elId).mouseout(function() {
$('#tail'+elId).hide();
});
$('#'+elId).bind('mousemove', function(e){
$('#tail'+elId).css({
left: e.pageX + 20,
top: e.pageY
});
});
}
}
You can see it here http://jsfiddle.net/cc7s9rcf/
I hope it helped.
Try this update
$(".bar").bind('mouseover',handler);
/*
$('.bar').hover(function() {
$('.tail').show();
}, function() {
$('.tail').hide();
});
*/
function handler(ev) {
console.dir(ev);
var target = $(ev.target);
var elId = target.attr('id');
if( target.is(".bar") ) {
console.dir(ev.type);
if (ev.type === 'mouseover') {
$('#tail'+elId).show();
} else {
$('#tail'+elId).hide();
}
/*
$('#'+elId).hover(function() {
$('#tail'+elId).show();
}, function() {
$('#tail'+elId).hide();
});*/
$('#'+elId).bind('mousemove', function(e){
$('#tail'+elId).css({
left: e.pageX + 20,
top: e.pageY
});
});
}
}
https://jsfiddle.net/hj57k/3276/
I just added display:block in this javascript
$('#'+elId).bind('mousemove', function(e){
$('#tail'+elId).css({
left: e.pageX + 20,
top: e.pageY,
display:'block'
});
});
http://jsfiddle.net/hj57k/3273/
I have a little script running so i can scroll trough a div with the mousedown option. Unfortunately it resets on each click and i can't quite figure out why it is doing this.
<script>
$(function () {
var clicked = false, clickX;
$("#gallery").on({
'mousemove': function(e) {
clicked && updateScrollPos(e);
},
'mousedown': function(e) {
clicked = true;
clickX = e.pageX;
},
'mouseup': function() {
clicked = false;
$('html').css('cursor', 'auto');
}
});
var updateScrollPos = function(e) {
$('#gallery').scrollLeft($(window).scrollLeft() + (clickX - e.pageX));
}
});
</script>
I am assuming it has something to do with
clickX = e.pageX;
$('#gallery').scrollLeft($(window).scrollLeft() + (clickX - e.pageX));
Why am I? because : "Returns the horizontal coordinate of the event relative to whole document."
So I am assuming it takes the original position when you click but it doesnt update when you actually scroll this. Anyone has a fix for this?
http://jsfiddle.net/fLr4d7kt/6/
We have fixed it like this :
$(function () {
var scroll = 0;
$(function () {
var clicked = false, clickX;
$("#gallery").on({
'mousemove': function(e) {
clicked && updateScrollPos(e);
},
'mousedown': function(e) {
clicked = true;
clickX = e.pageX;
scroll = $('#gallery').scrollLeft();
},
'mouseup': function() {
clicked = false;
$('html').css('cursor', 'auto');
}
});
var updateScrollPos = function(e) {
$('#gallery').scrollLeft(scroll + (clickX - e.pageX));
}
});
});
js: http://jsfiddle.net/fLr4d7kt/10/
I need help trying to do following:
One: Click once to begin the image to follow
Two: Click again to stop the image
Three: It will notify which of the two states the user is in
My jfiddle code example is below.
$(document).mousemove(function (e) {
$("#giraffeImg").stop().animate({
left: e.pageX,
top: e.pageY
});
});
http://jsfiddle.net/sure1thing/5q8zH/4/
Thanks
What about this:
var follow = false;
$(document).on('mousemove', function(e)
{
//console.log(e.pageX);
if(follow)
{
//alert('follow true');
$('#image').animate({
left: e.pageX,
top: e.pageY
}, 0)
}
})
$(document).click(function()
{
if(follow)
{
follow = false;
}
else
{
follow = true;
}
})
jsFiddle
I just use a "flag" to start and stop the animation.
Try this code:-
Fiddle link
$(document).ready(function(){
var count = 0,
anim = function(e){
$("#giraffeImg").stop().animate({left:e.pageX, top:e.pageY});
}
$(this).click(function(e){
count += 1;
if(count % 2){
console.log('Animation started')
$(this).on('mousemove',anim);
}else{
$(this).off('mousemove', anim);
console.log('Animation finished')
}
})
})