Develop Reference

how to change touches with changedtouches?

i have this code which moves a gif on html screen using two touch fingers
<script id="jsbin-javascript">
var $img = $('<img/>').attr({
'id': 'cursor',
'src': 'skin1.gif'
});
$(document).on('touchstart touchmove ', function (e) {
var touch1 = e.originalEvent.touches["0"];
var touch2 = e.originalEvent.touches["1"];
$img.css({
top: (touch1.clientY+touch2.clientY)/2 - 105,
left: (touch1.clientX+touch2.clientX)/2 - 25,
display: 'block'
});
});
$img.appendTo('body');
</script>
now i need to try changedTouches instead of two var for each finger
and i tried this and it is not working
<script id="jsbin-javascript">
var $img = $('<img/>').attr({
'id': 'cursor',
'src': 'skin1.gif'
});
$(document).on('touchstart touchmove ', function (e) {
var touches = e.originalEvent.changedTouches;
$img.css({
top: (touches["0"].clientY+touches["1"].clientY)/2 - 105,
left: (touches["0"].clientX+touches["1"].clientX)/2 - 25,
display: 'block'
});
});
$img.appendTo('body');
</script>
any help please
thanks

How to open own context menu at cursor coordinates?

I have own my contextmenu which I want to call and set its coordinates to X and Y coordinates. How can I do that?
https://jsfiddle.net/coolerprinter/xg10vzeL/
This code isn't valid and does not work:
$("body").on("contextmenu", function(e){
var x = function(e) {
return e.pageX
};
var y = function(e) {
return e.pageY
};
$(".contextmenu").css({
"display": "block",
"left": x,
"top": y
});
return false;
});

Firstly you need to hook the event to the document, not the body. Secondly you need to provide the actual values of pageX and pageY to the left and top CSS properties, not functions. Try this:
$(document).on("contextmenu", function(e) {
e.preventDefault();
$(".contextmenu").css({
"display": "block",
"left": e.pageX,
"top": e.pageY
});
});
Updated fiddle
To expand this to behave like a normal context menu, where it disappears when a click occurs outside it, then you need an additional click handler on the document:
$(document).on({
contextmenu: function(e) {
e.preventDefault();
$(".contextmenu").css({
"display": "block",
"left": e.pageX,
"top": e.pageY
});
},
click: function(e) {
var $target = $(e.target);
if ($target.is('.contextmenu') || $target.closest('.contextmenu').length) {
e.preventDefault();
} else {
$(".contextmenu").hide();
}
}
});
Example fiddle

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

ligthweight draggable lock in parent width and height area

Found a lightway draggable function. How can I lock the draggable black block in parent area? Do i need to do a width and height to limit black block area?
online sample http://jsfiddle.net/zqYZG/
.drag {
width: 100px;
height: 100px;
background-color: #000;
}
.box{
width: 500px;
height: 400px;
background-color:red;
}
jQuery
(function($) {
$.fn.draggable = function(options) {
var $handle = this,
$draggable = this;
options = $.extend({}, {
handle: null,
cursor: 'move'
}, options);
if( options.handle ) {
$handle = $(options.handle);
}
$handle
.css('cursor', options.cursor)
.on("mousedown", function(e) {
var x = $draggable.offset().left - e.pageX,
y = $draggable.offset().top - e.pageY,a
z = $draggable.css('z-index');
$draggable.css('z-index', 100000);
$(document.documentElement)
.on('mousemove.draggable', function(e) {
$draggable.offset({
left: x + e.pageX,
top: y + e.pageY
});
})
.one('mouseup', function() {
$(this).off('mousemove.draggable');
$draggable.css('z-index', z);
});
// disable selection
e.preventDefault();
});
};
})(jQuery);
$('.drag').draggable();

Here is a simple way to do it, using the getBoundingClientRect() function: updated JSFiddle
This just constrains the l and t variables from your original code, to be within the parent node's dimensions.

See containment option!
use :
$( ".selector" ).draggable({ containment: "parent" });

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