Javascript drag from mouse position? - javascript

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",
});
});

Related

Changing the position of div

take a look at this Fiddle (Which tells everything).
i just wanna position the .app accoring to the a position . I have defined the hyperlinks in fiddle as to where .app should appear and given id to each hyperlinks but as these id will not be there in my websites. Since i have to find the position of hyperlinks and accordingly position the .app so that it does not makes the body show a scrollbar as in this case .... can anyone position the .app accordingly ?
$('a').mouseover(function(){
$('.app').css({
top : $(this).position().top + $(this).height() + 5,
left : $(this).position().left + $(this).width()/2
}).show();
}).mouseout(function(){
$('.app').hide();
});
you can find solution for this. It's not perfect and it hasn't covered every cases, but just issue with "appear top", but it's easy fixed the rest ....
$('a').mouseover(function(){
$('.app').css({
top : (( $(this).position().top + $('.app').height() + 5)>$(window).height())?
$(this).position().top - $(this).height() -$('.app').height() - 5:
$(this).position().top + $(this).height() + 5,
left : $(this).position().left + $(this).width()/2
}).show();
}).mouseout(function(){
$('.app').hide();
});
$('a').mouseover(function () {
$('.app').css({
top: (($(this).position().top + $('.app').height() + 5) > $(window).height()) ? $(this).position().top - $(this).height() - $('.app').height() - 5 : $(this).position().top + $(this).height() + 5,
left: (($(this).position().left + $(this).width() / 2 + $('.app').width()) > $(window).height()) ? $(this).position().left - $(this).width()/2 - $('.app').width()/2 : $(this).position().left + $(this).width()/2
}).show();
}).mouseout(function () {
$('.app').hide();
});
This code did the work !
http://jsfiddle.net/DT7Us/2/ -DEMO

How to Pan a div using JQuery

I have been trying for a while now to get a simple pan of a div to work, I however can not seem to get it to 100%. It partially works with bugs.
$("#view_point").mousedown(function(e) {
start_x = e.pageX;
start_y = e.pageY;
e.preventDefault()
//On Click set start x and y vars
}).mousemove(function(e) {
temp_x = e.pageX;
temp_y = e.pageY;
e.preventDefault();
}).mouseup(function(e) {
temp_x = Math.abs(temp_x - start_x);
temp_x = Math.abs(temp_y - start_y);
console.log(temp_x + " - " + temp_y);
//Animate the map
$("#tiles").animate({
marginTop: '-' + temp_x,
marginLeft: '-' + temp_y
}, 50);
});​
How do I go about making a pan script that will pan inside a div that has its overflow property set to hidden.

Getting mouse coordinates relative to jQuery dialog window and not viewport?

I have the following bit of code which is responsible for displaying a tooltip. I am unhappy with this code for two reasons:
I use pageXOffset and pageYOffset 'magic numbers' to correct the visual state per-browser.
The dialog window must remain stationary for the numbers to be correct.
I have tried binding to the dialog window's mousemove event instead of the document. The results were identical to my current implementation which binds to document's mousemove.
var shouldDisplay = false;
$(document).mousemove(AdjustToolTipPosition);
function DisplayTooltip(tooltip_text) {
shouldDisplay = (tooltip_text != "") ? true : false;
if (shouldDisplay) {
$('#CustomTooltip').html(tooltip_text);
$('#CustomTooltip').show();
}
else {
//Sometimes the tooltip hasn't finished fading in before we ask to hide it. This causes it to hide, then fade back in.
$('#CustomTooltip').hide();
}
}
function AdjustToolTipPosition(e) {
if (shouldDisplay) {
//msie e.page event should be standardizes, but seems to go awry when working inside of a modal window.
var pageYOffset = $.browser.msie ? 260 : 572; //-314
var pageXOffset = $.browser.msie ? 474 : 160; //+314
$('#CustomTooltip').css('top', e.pageY - pageYOffset + 'px');
var offsetLeft = e.pageX - pageXOffset;
var isOutsideViewport = $("#HistoricalChartDialog").width() - $("#CustomTooltip").width() - offsetLeft < 0;
//Prevent the tooltip from going off the screen by changing the offset when it would go off screen.
if (isOutsideViewport) {
offsetLeft = $("#HistoricalChartDialog").width() - $("#CustomTooltip").width();
}
$('#CustomTooltip').css('left', offsetLeft + 'px');
}
}
// Initialize the Historical Chart dialog.
$('#HistoricalChartDialog').dialog({
autoOpen: false,
buttons: {
'Close': function() {
$(this).dialog('close');
}
},
hide: 'fold',
modal: true,
draggable: false,
resizable: false,
position: 'center',
title: 'Historical Charts',
width: 700,
height: 475
});
I provide the jQuery dialog initializer just for the sake of it. The tooltip only displays inside of this dialog window -- but the coordinates are for the entire page. Is it possible to retrieve coordinates relative to the dialog window so that I can leverage the fact that jQuery's mousemove standardizes coordinates with the pageX and pageY properties?
EDIT solution:
//Seperate file because the offsets are different for the image under MVC.
var shouldDisplay = false;
$("#HistoricalChartDialog").mousemove(AdjustToolTipPosition);
function DisplayTooltip(tooltip_text) {
shouldDisplay = (tooltip_text != "") ? true : false;
if (shouldDisplay) {
$('#CustomTooltip').html(tooltip_text);
$('#CustomTooltip').show();
}
else {
//Sometimes the tooltip hasn't finished fading in before we ask to hide it. This causes it to hide, then fade back in.
$('#CustomTooltip').hide();
}
}
function AdjustToolTipPosition(e) {
if (shouldDisplay) {
var xPos = e.pageX - $(this).closest('.ui-dialog').offset().left + 15;
var widthDifference = $(this).width() - $("#CustomTooltip").width();
//Prevent the tooltip from going off the screen by changing the offset when it would go off screen.
xPos = (widthDifference - xPos < 0) ? widthDifference : xPos;
$('#CustomTooltip').css('left', xPos + 'px');
var yPos = e.pageY - $(this).closest('.ui-dialog').offset().top - 10;
$('#CustomTooltip').css('top', yPos + 'px');
}
}
To get the position of the mouse relative to a specific div, not the viewport, you take the eventX/Y and subtract the left/top position of the div:
$("#example").mousemove(function(e) {
var xPos = e.pageX - $(this).position().left;
var yPos = e.pageY - $(this).position().top;
$("#pos").text("x: " + xPos + " / y: " + yPos);
});
Example fiddle
Given your example, this should work. You may need to look at your isOutsideViewport logic though.
function AdjustToolTipPosition(e) {
if (shouldDisplay) {
var xPos = e.pageX - $(this).position().left;
var yPos = e.pageY - $(this).position().top;
var isOutsideViewport = $("#HistoricalChartDialog").width() - $("#CustomTooltip").width() - xPos < 0;
if (isOutsideViewport) {
offsetLeft = $("#HistoricalChartDialog").width() - $("#CustomTooltip").width();
}
$('#CustomTooltip').css({
'top': yPos + 'px',
'left': xPos + 'px'
});
}
}

Trying to make a div appear in the centre of a scrollable page - bug in my code?

Just as a preface to make sure I am clear, I don't want the div to appear dead centre in the middle of the page, I want it in the middle of the viewable window. So if you imagine a long page and the user has scrolled down to near the bottom and clicks the button the div will appear in the centre of the screen near the bottom of the page.
here is my code, which doesn't work in chrome:
function centerdiv() {
var scrolledX, scrolledY;
scrolledX = document.body.scrollLeft;
scrolledY = document.body.scrolltop;
var centerX, centerY;
centerX = document.body.clientWidth;
centerY = document.body.clientHeight;
var leftoffset = scrolledX + (centerX - 100) / 2;
var topoffset = scrolledY + (centerY - 100) / 2;
$('.current div[name="popup"]').css({'top' : topoffset + 'px', 'left':
leftoffset + 'px'});}
$(function() {
$("html").ajaxStart(function() {
centerdiv();
$(".current div[name=popup]").show();
});
$("html").ajaxComplete(function() {
$(".current div[name=popup]").hide();
});
});
Note, this is for an iphone mobile website and the ajaxstart function attaching to the html is crucial as it doesn't work on the iphone any other way on my website.
You forget to set position to absolute, or fixed
$('.current div[name="popup"]').css({'top' : topoffset + 'px', 'left':
leftoffset + 'px', 'position':'absolute' });}
Here is my solution that works fine:
var winH = $(window).height();
var winW = $(window).width();
$(this).css('top', winH/2 - $(this).height()/2);
$(this).css('left', winW/2 - $(this).width()/2);
$(this).show();
$(this) must refer to the DIV element you want to show in the center.
wh = $(window).height();
dh = $("#div").height();
$("#div").css("top",(wh - dh)/ 2 + $(window).scrollTop() + 'px');
Edit:
Not the same for width, it's actually:
ww = $(width).width();
dw = $("#div").width();
$("#div").css("left",(ww - dw)/ 2 + 'px');
But it really depends if you have a fixed viewport or not, there are many ways to center it...
Good Luck!
If you don't have horizontal scrolling you can do it partially with straight CSS
div{
left: 50%;
margin-left: -[box_width / 2]px;
}

how to animate following the mouse in jquery

OK, this works perfectly fine for following my mouse.
//
$(document).mousemove(function(e){
$("#follower").css({
'top': e.pageY + 'px';
'left': e.pageX + 'px';
});
});
//
And this works great for animating the mouse to a clicked point
//
$(document).click(function(e){
$("#follower").animate({
top: e.pageY + 'px';
left: e.pageX + 'px';
}, 800);
});
//
But I personally feel that logically this SHOULD work! Coming from my point of view as the webscripter. Amd then my question is, how can I make this work. I want the #follower to try and follow my mouse with a dynamic kind of lagging behind feel.
//
$(document).mousemove(function(e){
$("#follower").animate({
top: e.pageY + 'px';
left: e.pageX + 'px';
}, 800);
});
//
How about using setInterval and an equation called zeno's paradox:
http://jsfiddle.net/88526/1/
That's the way I usually do it.
As requested, I've included the code in this answer. Given a div with absolute positioning:
CSS:
#follower{
position : absolute;
background-color : red;
color : white;
padding : 10px;
}
HTML:
<div id="follower">Move your mouse</div>
JS w/jQuery:
var mouseX = 0, mouseY = 0;
$(document).mousemove(function(e){
mouseX = e.pageX;
mouseY = e.pageY;
});
// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
// change 12 to alter damping, higher is slower
xp += (mouseX - xp) / 12;
yp += (mouseY - yp) / 12;
follower.css({left:xp, top:yp});
}, 30);

Categories