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/
Related
I have tried to implement resizable table columns as follow
function mousemove(event) {
var parent = $element.parent();
var next = parent.next();
var th = parent.parent();
var oldParentWidth = $(parent).width();
var oldNextWidth = $(next).width();
var totalWidth = oldParentWidth + oldNextWidth;
var newParentWidth = event.pageX -$(parent).offset().left;
if( newParentWidth > totalWidth )
return;
if( newParentWidth >= oldParentWidth ) {
$(next).css({
width: (totalWidth - newParentWidth) + "px"
});
$(parent).css({
width: totalWidth - $(next).width() + "px"
});
} else {
$(parent).css({
width: newParentWidth + "px"
});
$(next).css({
width: (totalWidth - $(parent).width()) + "px"
});
}
}
The working demo is here: http://jsfiddle.net/4kc873ec/3/
When I am trying to resize the width of th its not working properly first time. Then after it is working correctly. After that it is working properly. What am I doing wrong?
Thanks in advance.
Try changing bind with on
$('.resizeBar').on('mousedown', function(event) {
event.preventDefault();
$element = $(this);
$(document).on('mousemove', mousemove);
$(document).on('mouseup', mouseup);
});
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! :)
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')
}
})
})
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.
How do I position a div next to a mouse click using JQuery?
Thanks
You can try:
$( "td").click( function(event) {
$("#divId").css( {position:"absolute", top:event.pageY, left: event.pageX});
});
After additional question was asked in the comment:
$( "td").click( function(event) {
var div = $("#divId");
div.css( {
position:"absolute",
top:event.pageY,
left: event.pageX});
var delayTimer = setTimeout( function( ) {
$that.fadeIn( "slow");
}, 100);
div.mouseover( function( event) {
if (delayTimer)
clearTimeout( delayTimer);
}).mouseout( function(){
if (delayTimer)
clearTimeout( delayTimer);
var $that = $(this);
delayTimer = setTimeout( function( ) {
$that.fadeOut( "slow");
}, 500)
});
});
Something like:
$('#cell').bind('click',
function(e){
$('#div').css('left',e.pageX + 'px' );
$('#div').css('top',e.pageY + 'px' ); });
The div's position should be set to absolute.