Develop Reference

cursor with a following div

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 :)

Draggable element on scalable container mouse floats away from helper on creation

I am trying to drag a div on a scalable element and when I drag it, the mouse seems to float away from helper on creation. Could anyone help me out with this?
Here is a jsfiddle and my code is below of what I've tried.
$("div.text").draggable({
zIndex: 3000,
appendTo: 'body',
helper: function (e, ue) {
return $(this).css({
'transform': 'scale(' + percent + ')',
'-moz-transform': 'scale(' + percent + ')',
'-webkit-transform': 'scale(' + percent + ')',
'-ms-transform': 'scale(' + percent + ')'
}).appendTo('body');
}
});
I've also tried this which helps in some during the high percent, but still is off as you scale the container smaller.
return $(this).css({
'transform': 'scale(' + percent + ')',
'-moz-transform': 'scale(' + percent + ')',
'-webkit-transform': 'scale(' + percent + ')',
'-ms-transform': 'scale(' + percent + ')'
}).appendTo('body').offset({ top: e.pageY, left: e.pageX });

You are having an issue with setting the element position based on the mouse position instead of based on the position of the element relative to the mouse position. That, combined with the element scaling down on dragStart are causing it to jump to where your cursor is in the center and then above your cursor since it scales up. You could use getBoundingClientRect() to determine the actual position of the element and then set it manually with JS.
var containerBox = $(this)[0].getBoundingClientRect();
var docBox = document.body.getBoundingClientRect();
startTop = containerBox.top - docBox.top;
startLeft = containerBox.left - docBox.left;
$(this).css({
position: 'fixed',
top: startTop + 'px',
left: startLeft + 'px',
height: containerBox.height + 'px',
width: containerBox.width + 'px'
});
I didn't try it with your fiddle but it will most likely solve your issues. Also you should use jquery UI resizable widget as well if you are looking for resizability, instead of rewriting it yourself. Also, why is it that you are scaling the element after it is dragged and not before?

JS syntax breaks the page

I have the following code in my external JS file:
var myDiv = $(".myDiv");
if (myDiv.css('left') == 'auto') {
var pos = myDiv.position();
myDiv.css({ "left:" + pos.left + "px", "top:" + pos.top + "px" });
}
It appears that the following line breaks my page:
myDiv.css({ "left:" + pos.left + "px", "top:" + pos.top + "px" });
If I comment it out everything works fine, except this functionality, obviously.
And if I put the values in alert I get them correctly as well.
alert(pos.left + ' ' + pos.top)
What am I missing?

You are trying to create an object by passing in 2 strings.
Should probably look like this:
myDiv.css({
"left": pos.left + "px",
"top": pos.top + "px"
});

Simple fix, use javascript object notation for the css properties. Move the colon outside the quotes:
myDiv.css({ "left": pos.left + "px", "top": pos.top + "px" });

You need quotation marks around the values in the object you pass to the .css() function:
myDiv.css({ "left: '" + pos.left + "px'", "top: '" + pos.top + "px'" });

Change thickbox popup size dynamically

I'm using ThickBox to open popup in my page. In popup there is a tab on click on which i need to change the size of ThickBox popup window. How can i do that ?
Thanks in advance.

This is the code they use
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
}
so you can use the same with a slight change (assuming you use a modern version of jQuery)..
$('#yourbutton').click(function() {
var TB_WIDTH = 100,
TB_HEIGHT = 100; // set the new width and height dimensions here..
$("#TB_window").animate({
marginLeft: '-' + parseInt((TB_WIDTH / 2), 10) + 'px',
width: TB_WIDTH + 'px',
height: TB_HEIGHT + 'px',
marginTop: '-' + parseInt((TB_HEIGHT / 2), 10) + 'px'
});
});
Demo at http://jsfiddle.net/gaby/rrH8q/

Attach a click event handler to said tab that changes the TB_Window dimensions and margins to center it again, e.g.
$("#tab").click(function() {
$("#TB_window").css("height", newHeight);
$("#TB_window").css("width", newWidth);
$("#TB_window").css("margin-top", ($(window).height()-newHeight)/2 );
$("#TB_window").css("margin-left", ($(window).width()-newWidth)/2);
});

A little correction in Gaby aka G. Petrioli's answer so that popup should set the margins also correctly :
var TB_WIDTH = 500, TB_HEIGHT = 400;
// set the new width and height dimensions here..
$("#TB_window").animate({marginLeft: '"'+parseInt((($vitjs(window).width()-TB_WIDTH) / 2),10)
+ 'px"', width: TB_WIDTH + 'px', height: TB_HEIGHT + 'px',marginTop:'"'+parseInt((($vitjs(window).height()-TB_HEIGHT) / 2),10) +
'px"'});

I did something like this.
This needs to be re-launched if the wiewport is resized while the popup is open.
function tb_position() {
if(TB_WIDTH > $(window).width())
{
$("#TB_window").css({marginLeft: 0, width: '100%', left: 0, top:0, height:'100%'});
$("#TB_ajaxContent, #TB_iframeContent").css({width: '100%'});
$("#TB_closeWindowButton").css({fontSize: '24px', marginRight: '5px'});
}
else
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
}

You have to enclose this inside a setTimeout so that this will be done after the thickbox is opened, not when the button is click. Usually, it happens in between of "Clicking of button" and "opening of thickbox".
var TB_WIDTH = jQuery(window).width() > 400 ? 400 : jQuery(window).width(),
TB_HEIGHT = 400; // set the new width and height dimensions here..
setTimeout(function() {
jQuery("#TB_window").css({
marginLeft: '-' + parseInt((TB_WIDTH / 2), 10) + 'px',
width: TB_WIDTH + 'px',
height: TB_HEIGHT + 'px',
marginTop: '-' + parseInt((TB_HEIGHT / 2), 10) + 'px'
});
}, 0);

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 !