Develop Reference

Drag event with Hammer.js

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);
}
});
})

Div apperas on second hover

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/

Animation ( bar fills up over time ) with Jquery (Suggestion)

I would like to replicate the same functionality as at ign.com, where the indicator bar fills up over time. I got it working but I got some sync issues after a while. So i'm open to suggestions to do it from scratch (I'm beginner with all this animation stuff).
This is the code.
function GoProgressBar() {
var $lineStatus = $('.featured-articles-line-status');
$lineStatus.css('width', '0px');
$lineStatus.animate({ width: '694px' }, 12000, 'linear', GoProgressBar);
};
function GoOverlay(width, isLast, currentWidth) {
var $overlayLine = $('.status-overlay');
if (isLast) {
$overlayLine.css('width', '0px');
return;
}
if (currentWidth) {
$overlayLine.css('width', currentWidth);
$overlayLine.animate({ width: width }, 700);
} else {
$overlayLine.css('width', '0px');
$overlayLine.animate({ width: width }, 700);
}
};
function ShowNextElement() {
var $elements = $('.element'),
$overlayLine = $('.status-overlay'),
$liElements = $('#elements li'),
width;
if (currentElement === elements[elements.length - 1]) {
currentWidth = $overlayLine.width() + 'px',
width = currentWidth + $($liElements[(elements.length - 1)]).outerWidth() + 'px';
GoOverlay(width, true, currentWidth);
currentElement = elements[0];
$elements.hide();
$(currentElement).fadeIn(1000);
return;
}
i = elements.indexOf(currentElement) + 1;
var currentTab = $liElements[(i - 1)],
currentWidth = $overlayLine.width();
if (currentWidth) {
width = currentWidth + $(currentTab).outerWidth() + 'px';
GoOverlay(width, false, currentWidth);
} else {
width = $(currentTab).outerWidth() + 'px';
GoOverlay(width, false, false);
}
currentElement = elements[i];
$elements.hide();
$(currentElement).fadeIn(1000);
}
Thanks!

http://jqueryui.com/progressbar/
You could try this..
There are more features in addition to this,check it out.
Might come useful :)

There are a wealth of ways in which you could do this.
You should have some kind of controller to manage the show and hide.
var Application = {
show : function() {
jQuery('.application-overlay').stop().animate({ top: 40 }, 500);
jQuery('.cf-ribbon').stop().animate({height: 1000},500);
},
hide : function() {
jQuery('.application-overlay').stop().animate({ top: -1200 }, 500);
jQuery('.cf-ribbon').stop().animate({height: 200},500);
}
};
Then you have your triggers : Application.show();
jQuery(document).ready(function() {
jQuery('.cf-speakers .span2 a').hover(function() {
jQuery('span',this).stop().animate({ opacity: 1.0 },100);
}, function() {
jQuery('span',this).stop().animate({ opacity: 0.0 },100);
});;
jQuery('.apply-now').click(function(e) {
Application.show();
e.stopPropagation();
e.preventDefault();
});
jQuery('body').click(function(e) {
var application = jQuery('.application-overlay');
if( application.has(e.target).length === 0)
Application.hide();
});
jQuery('.gallery a').click(function(e) {
var src = jQuery(this).attr('href');
jQuery('.main-container img').hide().attr('src', src).fadeIn('fast');
jQuery('.gallery a').each(function() {
jQuery(this).removeClass('active');
});
jQuery(this).addClass('active');
e.stopPropagation();
e.preventDefault();
});
});
Your css would of course come into play also but that can be left to you!
This should give you an example of what you need .. But you're already on the right track, sometimes there is merit in reusing other people code too you know! :)

Enabling and disabling Events in javascript

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.

Making click events into touch events when run on tablets

I have made a spelling game for primary school children. I want to make the click events in my game touch events so it can be compatible on tablets. Is there a way I can put them alongside my click events so that one program is compatible to both, or will I have to make a tablet version?
Here I have the code for one of my click events as an example
$('.drag').on('click', function(e) {
e.preventDefault();
if (animation) return;
animation = true;
setTimeout(function() {
animation = false;
}, 700);
$(".minibutton").css('visibility', 'hidden');
$('.next').css('visibility', 'hidden');
var target = $('.drop-box.spellword:not(.occupied):first');
var targetPos = target.position();
var currentPos = $(this).offset();
var b = $(this);
if (target.length) {
target.addClass("occupied");
b.clone().addClass(
b.data("letter") == target.data("letter") ? "wordglow3" : "wordglow").appendTo("table").css({
background: "transparent",
position: "absolute",
top: currentPos.top,
left: currentPos.left
}).animate({
top: targetPos.top,
left: targetPos.left
}, "slow", function() {
$(this).css({
top: 0,
left: 0
}).appendTo(target);
var spellWord = $('.drop-box.spellword');
if (!spellWord.filter(':not(.occupied)').length) {
var wordIsCorrect = 0;
spellWord.each(function() {
if ($(this).data("letter") == $(this).find("div").data("letter")) {
wordIsCorrect++;
}
});
if (spellWord.length == wordIsCorrect) {
spellWord.addClass('wordglow2');
$(right).val('Right!');
$(right).show();
success.play();
$(wrong).hide();
score.right++;
score.attempts++;
if (score.right == 3) {
$('.answers').css('visibility', 'visible');
$('.answers').html("Well done! </br> You correctly spelt " + score.right + ". </br> Keep it up.").show();
$('table').fadeOut(3000);
$('.right').hide();
$('.box-style2').hide();
$('.box-style').hide();
$('.picstyle').hide();
$('.play').hide();
$('.minibutton2').hide();
$("#mysoundclip").attr('src', listOfWords[rndWord].audio);
audio.stop();
$("#mypic").attr('src', listOfWords[rndWord].pic);
pic.hide();
}
setTimeout(function() {
jQuery('.minibutton').trigger('click');
}, 1500);
setTimeout(function() {
jQuery(right).hide();
}, 1500);
} else {
//spellWord.addClass("wordglow4").css('color', 'transparent');
$(wrong).val('Wrong!');
$(wrong).show();
failure.play();
$(right).hide();
score.wrong++;
score.attempts++;
if (score.wrong == 3) {
$(".minibutton").css('visibility', 'visible');
$('.next').css('visibility', 'visible');
}
$('.drop-box.spellword').animate({
'opacity': 1
}, 1500, function() {
$(this).removeClass('wordglow4').removeClass('occupied').html('')
});
setTimeout(function() {
jQuery(wrong).hide();
}, 1500);
}
}
});
}
});
Can someone point me in the right direction as I have never done this before.
Here is a fiddle to help (Sound warning!!) http://jsfiddle.net/smilburn/7Y7A5/8/

You could add the tap event and include jQuery Mobile in your mobile version.
$('.drag').on('click tap', function(e) {...}