We Keep Coding

Why I am getting wrong cursor position when scaling entire body?

I'm scaling the entire using a CSS scale transform. The problem is that I get the wrong cursor position. I want to create a new div where the cursor is clicked but div is being created in wrong position.
$(document).ready(function() {
$('body').css({
transform: 'scale(0.5,0.5)'
});
var k = 1;
$('.container').off('click').on('click', function(e) {
var top = e.pageY;
var left = e.pageX;
$('<div />', {
id: 'temp' + k
}).css({
position: 'absolute',
top: top + 'px',
left: left + 'px',
width: '50px',
height: '50px',
border: '1px solid red'
}).appendTo('.container');
k++;
});
});

How to make popover appear where my mouse enters the hover target?

This is an example code to show the popover window display below my button:
$.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, {
placement: 'bottom', content: ''
Now I want the popover window appear on the place where my cursor moves on(not only top/bottom/left/right, but a specific location which depends on where user put their cursor on).
How to get it?

In bootstrap-tooltip.js, replace (at about line 72)
, enter: function (e) {
with
, enter: function (e) {
var mousePos = { x: -1, y: -1 };
mousePos.x = e.pageX;
mousePos.y = e.pageY;
window.mousePos = mousePos;
and replace (at about line 144)
case 'right':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
break
with
case 'right':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
break
case 'mouse':
tp = {top: window.mousePos.y, left: window.mousePos.x}
break
Then call your popover like this:
$('.pop').popover({'placement': 'mouse'});
This is a quick-n-dirty way to go about it (hacking core files), but it works. Perhaps someone else has a nicer method. Note that the popover pointer will need some work as it doesn't appear.
This example was tested in Bootstrap 2.0.3, but the code appears similar in 2.2.2.

For bootstrap 3.x.x
Add attribute atMouse:false to the inline class Tooltip.DEFAULTS{}.
Tooltip.DEFAULTS = {
animation: true,
placement: 'top',
selector: false,
template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
trigger: 'hover focus',
title: '',
delay: 0,
html: false,
container: false,
atMouse: false,
viewport: {
selector: 'body',
padding: 0
}
}
Go to the line 1368 inside of method "Tooltip.prototype.enter" and change the following code:
if (obj instanceof $.Event) {
self.inState[obj.type == 'focusin' ? 'focus' : 'hover'] = true
}
to:
if (obj instanceof $.Event) {
self.inState[obj.type == 'focusin' ? 'focus' : 'hover'] = true
self.options.mousePos = {posX: obj['pageX'], posY: obj['pageY']}
}
Inside of the method "Tooltip.prototype.show" add following code:
if(this.options.atMouse) {
pos['posY'] = this.options.mousePos['posY'];
pos['posX'] = this.options.mousePos['posX'];
}
before this line of code:
var calculatedOffset = this.getCalculatedOffset(placement, pos,
actualWidth, actualHeight)
Prepend to the body of Tooltip.prototype.getCalculatedOffset method following code:
if(this.options.atMouse) {
return placement == 'bottom' ? {top: pos.top + pos.height, left: pos.posX - (actualWidth / 2)} :
placement == 'top' ? {top: pos.top - actualHeight, left: pos.posX - (actualWidth / 2)} :
placement == 'left' ? {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.posX - actualWidth} :
{top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.posX}
}
Call tooltip/popover something like this:
$("[data-toggle='popover']").popover({
html: true,
container: 'body',
atMouse: true,
trigger: 'hover',
animation: false,
placement: "top auto"
});
Work for me.

How do I shrink a div using its center as reference point in jQuery?

I have the following div :
<div id = "shrink-test" style = "position:absolute;top:100px;left:50%;margin-left:-50px;height:100px;width:100px;background-color: red;" />
and I want to use jQuery's animate() to shrink the div to half of its size but keep the animation and position of my div centered.
I'm trying:
$("#shrink-test").animate(
{
height: 50,
width: 50
});
but it shrinks the div using its top left corner as reference. How can I make it use its center as the reference point?
Thanks for any help!

As your div is positioned absolutely by using top and margin-left, you will need to animate those as well:
$("#shrink-test").animate({
height: 50,
top: 125, // 100 + 50 / 2
width: 50,
marginLeft: -25 // 50 / -2
});
For a programmatical approach it might be easier to use a negative margin for the y-axis, too.

Here's just a simple jQuery plugin for this
$.fn.resize = function( w, h ) {
w = ( undefined !== w ? w : 50 );
h = ( undefined !== h ? h : 50 );
var cw = this.width();
var ch = this.height();
if ( 'static' === this.css( 'position' ) ) {
this.css( {
'position' : 'relative',
'top' : '0px',
'left' : '0px'
} );
}
this.stop().width( cw ).height( ch ).animate( {
'top' : '+=' + ( (ch - h) / 2 ) + 'px',
'left' : '+=' + ( (cw - w) / 2 ) + 'px',
'width' : w + 'px',
'height' : h + 'px'
} );
};
$( function() {
$( '#shrink-test' ).resize(50,50);
} );
Test it here: http://jsfiddle.net/bukfixart/nPjMa/1/

You can animate top and left like so:
$("#shrink-test").animate(
{
height: 50,
width: 50,
top: '+=25px',
left: '+=25px'
});
See this fiddle

You'll have to animate the position on the page at the same time using something like top and left or margin properties, like so:
$("#shrink-test").animate(
{
height: 50,
width: 50,
top: '150px',
left: '75%'
});
Using appropriate values for each.

Optimizing how my jQuery code is written

I have just currently started learning jQuery and I seem to be able to get it work how I want but I feel that the way that I am writting it is not very efficient. Could anyone assist me in this example below:
$('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});
$(window).resize(function() {
$('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});
});
So here I am positioning a div in the center of the screen. And then it also does it again on window resize as its contents width properties are percentage values. It works perfectly but I can't help but feel that there must be a better way to write this. Any help would be greatly appreciated. Thank you

You can cache the object and trigger the resize event, this way the resize handler is executed on DOM Ready.
$(window).resize(function() {
var $elem = $('.tiles-wrapper');
$elem.css({
top: '50%',
left: '50%',
margin: '-' + ($elem.height() / 2) + 'px 0 0 -' + ($elem.width() / 2) + 'px'
});
}).resize()

var $tilesWrapper = $('.tiles-wrapper');
function setWrapperStyle () {
var halfWidth = $tilesWrapper.width() * 0.5;
var halfHeight = $tilesWrapper.height() * 0.5;
$tilesWrapper.css({
top: '50%',
left: '50%',
margin: '-' + halfHeight + 'px 0 0 -' + halfWidth + 'px'
});
}
setWrapperStyle();
$(window).on('resize', setWrapperStyle);

You should make a fonction with your first line :
function center(){
$('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});
}
and then you call it a first time and you call it when you resize your window:
center();
$(window).resize(center);

Do you really need jquery here ?
You can use directly css
.tiles-wrapper{
top:50% ;
left:50% ;
width: //what u given
height: //what u given
margin-left: //tiles width/2
margin-right: //tiles height/2
position: //absolute or float
}
if you want to calculate height and width dynamically
just write this on document ready
var $elem = $('.tiles-wrapper');
$elem.css({
top: '50%',
left: '50%',
margin: '-' + ($elem.height() / 2) + 'px 0 0 -' + ($elem.width() / 2) + 'px'
});
In re-size it will automatically on center position.

Javascript drag from mouse position?

I have a script which allows a user to drag a div around the screen on iOS, and as it is now, when you start to drag a div, it makes the dragable point the center. Is it possible to make this point wherever the user touches?
The code looks like this:
xPos = drag.offsetWidth / 2;
yPos = drag.offsetHeight / 2;
drag.addEventListener("touchmove", function() {
event.preventDefault();
$(this).css({
"left" : event.targetTouches[0].pageX - xPos + "px",
"top" : event.targetTouches[0].pageY - yPos + "px",
"z-index" : "1000"
});
$("div").not(this).css("z-index", "1");
$("div[id]").each(function() {
var id = $(this).attr("id");
localStorage.setItem(id + "-z","1");
});
});
Is there anyway I can make it so that the offset is however far away the user's finger is away from the box's edge?
I thought the following might work but it doesn't seem to, all it does is cause it to jitter:
$(this).css({
"left" : event.targetTouches[0].pageX - parseInt($(this).css("left"), 10) + "px",
"top" : event.targetTouches[0].pageY - parseInt($(this).css("top"), 10) + "px",
});

Figured it out. After testing, the following only produced the number of pixels from the left or top of the parent.
event.targetTouches[0].pageX - $(this).offset().left
The trick was to subtract that FROM event.targetTouches[0].pageX, which is the number of pixels that the finger is from the edge of the screen.
So, the completed code would look like this:
drag.addEventListener("touchstart", function() {
left = event.targetTouches[0].pageX - $(this).offset().left;
top = event.targetTouches[0].pageY - $(this).offset().top;
});
drag.addEventListener("touchmove", function() {
$(this).css({
"left" : event.targetTouches[0].pageX - left + "px",
"top" : event.targetTouches[0].pageY - top + "px",
});
});