cursor with a following div - javascript

I have a div that follows the cursor around the screen.
How can I tell the script to act like that only in a specific area of the page?
$(document).bind('mousemove', function(e){
$('.galleria-counter').css({
left: e.pageX,
top: e.pageY
});
});
JSFIDDLE — https://jsfiddle.net/83k4ahdm/1/
Thanks.

Don't mind me posting another answer of what I would consider most 'correct' :
$('#here').hover(function() {
$(this).on('mousemove', function(e) {
$('.galleria-counter').css({
left: e.pageX,
top: e.pageY
});
});
},
function() {
$(this).off('mousemove');
});
https://jsfiddle.net/83k4ahdm/5/

bind your script to only div instead of document
$('#here').bind('mousemove', function(e){
$('.galleria-counter').css({
left: e.pageX,
top: e.pageY
});
});
updated fiddle : fiddle

First, try not to use left and top properties when you want to move something and prefere translate:transform
Second, you can delimited your call by trying something like this:
if( e.pageX >= div.offset().left &&
e.pageX <= div.offset().left + div.width ||
e.pageY >= div.offset().top &&
e.pageY <= div.offset().top + div.height ) {
$('.galleria-counter').css({
left: e.pageX,
top: e.pageY
});
}
Hope it's help :)

Related

Scroll up a div instead of scrolling down

Weyoo, I have a div that appears when i right click, but the problem is it scrolls down like in this image:
But i would rather to scroll up like this:
Here's the code:
$("#Menu-File").finish().toggle(100).
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
Thanks in advance and sorry for my awful Paint mechanics.
Actually i have found the solution,
$("#Menu-File").finish().slideToggle(
css({
bottom: "calc(100% - " + event.pageY + "px)",
left: event.pageX + "px"
});

Javascript moving child when dragging on parent

I want to move child element when dragging on parent and the element itself, and the parent shouldn't be moved.
here is my demo
As in the demo, I want to move the red box when either drag on it or drag on its parent (the background), but I couldn't compute the right position, could you help me?
Other question is why I can't offthe mousemove event when I set .off('mousemove', mousemove')
Thank you very much
I have done some changes. This works ;)
DEMO
$(function(){
var graph = $('.graph')[0];
var parent = $(graph).parent();
var lockX = 0;
var lockY = 0;
var mousemove = function(e){
$(graph).offset({
top: e.pageY + lockY,
left: e.pageX + lockX
});
};
parent.on('mousedown', function(e) {
lockY = $(graph).offset().top - e.pageY;
lockX = $(graph).offset().left - e.pageX;
$(this).addClass('draggable')
.on('mousemove', mousemove)
.on('mouseup', function(){
$(this).off('mousemove', mousemove)
})
event.preventDefault()
});
$('.graph').parent().on('mouseup', function(e) {
$('.draggable')
.off('mousemove', mousemove)
.removeClass('draggable');
});
});
EDIT
The only actual change I made to make it work was:
.offset({
// instead of: e.pageY - $('.draggable').outerHeight() / 2 + dtop
top: e.pageY + dtop,
// instead of: e.pageX - $('.draggable').outerWidth() / 2 + dleft
left: e.pageX + dleft
})
PS: In the example in the JS Fiddle I changed dleft and dtop respectively to lockX and lockY. Ofcourse, that is a pure semantical thing.

hover effect after bind an image with mouse

I have this code to bind an image with mouse,
$(function(){
var $i = $('#gg');
$( "#gg" ).click(function() {
$(document).bind('mousemove',function(e){
$i.css({
left: e.pageX -42,
top: e.pageY -60
});
});
});
});
after bind i want to hide another image on mouseover.
Look at this FIDDLE
please give me any idea.
$(function () {
var $i = $("#gg")
$i.click(function () {
$i.css('pointer-events','none');
$(document).on('mousemove', function (e) {
$i.css({
left: e.pageX - 42,
top: e.pageY - 60
});
});
$('#gg1').one('mouseenter', function() {
$(this).hide();
});
});
});
FIDDLE

Creating a dynamic jquery tooltip

I make a jquery tooltip but have problem with it, when mouse enter on linke "ToolTip" box tooltip don't show in next to link "ToolTip" it show in above linke "ToolTip" , how can set it?
Demo: http://jsfiddle.net/uUwuD/1/
function setOffset(ele, e) {
$(ele).prev().css({
right: ($(window).width() - e.pageX) + 10,
top: ($(window).height() - e.pageY),
opacity: 1
}).show();
}
function tool_tip() {
$('.tool_tip .tooltip_hover').mouseenter(function (e) {
setOffset(this, e);
}).mousemove(function (e) {
setOffset(this, e);
}).mouseout(function () {
$(this).prev().fadeOut();
});
}
tool_tip();
Something like this works, you've still got a bug where the tooltip sometimes fades away on the hover of a new anchor. I'll leave you to fix that, or for another question.
function setOffset(ele, e) {
var tooltip = $(ele).prev();
var element = $(ele);
tooltip.css({
left: element.offset().left - element.width() - tooltip.width(),
top: element.offset().top - tooltip.height(),
opacity: 1
}).show();
}
And here's the jsFiddle for it: http://jsfiddle.net/uUwuD/4/
you need to calculate the window width and minus it with the width of your tooltip and offset
if(winwidth - (offset *2) >= tooltipwidth + e.pageX){
leftpos = e.pageX+offset;
} else{
leftpos = winwidth-tooltipwidth-offset;
}
if you want more detail please refer :)

How to make a div or object gradually move to point of mouseclick with javascript?

So I have an object or div that is a square 10x10 pixels. I want to be able to click somewhere in the browser window that causes the div to gradually move towards the point I clicked.
jQuery
$(document).click(function(event) {
var x = event.pageX,
y = event.pageY;
$('div').animate({
top: y,
left: x
}, 1000);
});
CSS
div {
background: red;
padding: 5px;
position: absolute;
}
HTML
<div>hello</div>
jsFiddle.
$(document).click(function(event) {
$('#divID').css({
'position': 'absolute',
'left': event.clientX + document.body.scrollLeft,
'top': event.clientY + document.body.scrollTop });
});
Demo
jQuery code
$("body").bind("click", function(e){
var str = "( " + e.pageX + ", " + e.pageY + " )";
$("span").text("Clicked at " + str);
});
after getting this you need to update your div.style.left and div.style.top !

Categories

Resources