Develop Reference

Positioning draggable images with Javascript position()

I have a website with a draggable image inside a div, the script code looks like this:
var offset = 0,
xPos = 0,
yPos = 0;
$(document).ready(function(){
$(".item").draggable({
containment: '#house_wall1',
drag: function(){
offset = $(this).position();
xPos = offset.left;
yPos = offset.top;
$('#posX').text('x: ' + xPos);
$('#posY').text('y: ' + yPos);
},
// Find original position of dragged image.
start: function(event, ui) {
// Show start dragged position of image.
var Startpos = $(this).position();
$("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
},
// Find position where image is dropped.
stop: function(event, ui) {
// Show dropped position.
var Stoppos = $(this).position();
$("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
}
});
});
My problem is that the x and y values are specified from the edge of the screen and not the div that they are supposed to. So if you have a screen with a lower resolution or if you make the browser window smaller then the x and y values will differ from a screen with a lower resolution.
I posted a problem similiar to this earlier and thought it was fixed, but unfortunatly it wasn't. I heard that using position() instead of offset() should do the job, but this still fix nothing. Maybe it's because the position() is equal to offset() in this case?
Thanks in advance.

if you want a div as coordinates origin for left and top. you have to set the position style property. div position="relative" or div position absolute

sorry, i forgot to mention that also the offset Properties are relative to the next parent which has positon: relative or absolute, if no parent has set the position property, the origin for IE is the client origin, what mozilla does is suspect for me, i hope they changed that soon to IE standard. you can see the difference by putting a border to the document.body and setting a div element to the document body and call alert (divid.offsetLeft); IE and mozilla will throw different values. Mozilla shows a value which only includes the body margin but not the border, and if you do a document.body.offset in mozilla it show a minus value????..... which is 0 in IE
exception are table inner Elements like td and tr , for them the table is the offsetParent

Extend jsplumb.draggable drag behavior

I am sure that I am missing something here, but I would like to extend the drag behavior of a div with jsPlumb.draggable class attributes that is attached to an endpoint, while preserving the jsPlumb.draggable attributes.
I would like something like this (adapted from this SO):
$('#dragcodes').draggable(
{
drag: function(){
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
console.log('x: ' + xPos);
console.log('y: ' + yPos);
}
});
on an element that is created using:
jsPlumb.draggable($(".dragcodes"));
Here is an example of what I am trying to do. I want the top box to read the position out on drag like the bottom one is, but cannot figure out how to hack the drag: function in jsPlumb.draggable. The binding behavior here is getting close, but I want to target the div that is attached to the endpoint. If I override the drag: functionality, I lose the jsPlumb.draggable attributes. Thanks in advance for your help.

In Version 1.6.3 the following Code works:
jsPlumb.draggable("#dragcodes", {
drag: function (event, ui) { //gets called on every drag
console.log(ui.position); //ui.position.left and ui.position.top
}
});

jsPlumb.draggable helps to update the DOM element whenever it is dragged. Instead you can write that code in jQuery draggable as:
$('#dragcodes').draggable(
{
drag: function(){
jsPlumb.repaint($(this)); // (or) jsPlumb.repaintEverything(); to repaint the connections and endpoints
//followed by your code
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
console.log('x: ' + xPos);
console.log('y: ' + yPos);
}
});
Now there is no need for jsPlumb.draggable($(".dragcodes"));

The best approach is to configure DragOptions of jsPlumb.Defaults. You have to specify drag function:
jsPlumb.getInstance({
....,
DragOptions: {
drag: function() {
}
},
....
);

JsPlumb Version 2.1.4
jsPlumb.draggable("#yourElement", {
drag: function (event) {
console.log(event.pos[0]); // for left position
console.log(event.pos[1]); // for top position
}
);
Or
jsPlumb.draggable("#yourElement", {
drag: function (event) {
$(event.el).position().left; // for left position
$(event.el).position().top; // for top position
}
);

Determine whether mouse is always on the bottom of the page

How can I determine whether mouse is always on the bottom of the viewport? Let us assume that by bottom we mean the bottom 100 pixels of a given page (on a long scrolling page).
this is an example, check the arrow
http://discover.store.sony.com/tablet/#design/weight-distribution

Easy!
Calculate how much of that "bottom" area is showing in the current window with window.screen.height and document.height.
Then use onmousemove event to calculate if the mouse is stepping over that area.

Create a blank div with the dimensions that you want, use CSS to position:absolute; it on the bottom and z-index it above the other elements, then create a onHover to detect if the mouse is there
EDIT
This might work as a solution to avoid using CSS method above (untested)
$(function(){
$.mousemove(function(e){
var wHeight = $(window).height();
var yMouse = e.pageY;
if(yMouse > (wHeight - 100)) {
// Do something
}
});
});

I think i solved myself based on Pastor Bones code:
you have to calculate the window scrolltop
var scrollT = $(window).scrollTop() + wHeight;
so:
$(function(){
$.mousemove(function(e){
var wHeight = $(window).height();
var scrollT = $(window).scrollTop() + wHeight;
var yMouse = e.pageY;
if(yMouse > (scrollT - 100)) {
// Do something
}
});
});

In jQuery, is there a way to manually propagate an event onto a DOM object?

I know the mouseenter is coded such that it propagates mouseover to all the elements within the DOM that it is bound to.
So, like the question states, is there a way to manually apply this propagation to other elements that are separate from the DOM, which I bound the mouseenter event to.
The function, $.stopPropagation(), stops the propagation but is there an applyPropagationTo like function?
Here is the scenario:
Say I have a div, class=divCON. I have a absolute positioned div appended to the body, called divHOV, which is hid. When I mouseenter divCON, divHOV becomes visible and follows my mouse when I am within divCON.
I want it so that when my mouse is moving within divCON, the mouse tends to enter divHOV if the browser is slow to reposition the divHOV while moving the mouse. I want it so that I can propagate divHOV's mouseenter onto divCON so that a mouseleave event is not trigger when I go on divHOV.
jsFiddle: http://jsfiddle.net/vuxcR/
Note how when the mouse enters divHOV, it mouseleaves the divCON. I want it so that when it does not mouseleave divCON when I enter divHOV.

Fiddle: http://jsfiddle.net/vuxcR/1/
Here's the desired code. See the comments and bottom for explanation:
$(document).ready(function() {
var $divCON = $(".divCON");
$divCON.bind("mouseenter", function() {
//Cancel if this function has already run (so, if the next element
// has class divHOV
if($(this).next().hasClass('divHOV')) return;
$divHOV = $("<div class='divHOV'></div>");
$divHOV.mousemove(function(ev){
var offset = $divCON.offset();
var height = $divCON.height();
var width = $divCON.width();
var left = offset.left;
var top = offset.top;
var bottom = top + height;
var right = left + width;
// If the mouse coordinates are within the box
if(ev.pageX >= left && ev.pageX <= right &&
ev.pageY >= top && ev.pageY <= bottom){
//Trigger move.
$divHOV.css({'top': ev.pageY - 3 + 'px', 'left': ev.pageX + 3 + 'px'});
}
});
$(this).after($divHOV);
});
$divCON.bind("mousemove",function(e) {
$(".divHOV").css({'top': e.pageY - 3 + 'px', 'left': e.pageX + 3 + 'px'});
});
});
When the user enters .divCON for the first time, .divHOV is added. When moving the mouse (see bottom), divHOV is positioned again. Once the mouse enters .divHOV, the coordinates are calculated again IF the mouse is within the box of divCON.
When the mouse enters .divCON again, the function immediately returns, because .divHOV already exists: if($(this).next().hasClass('divHOV')) return;.

How to force positioned elements to stay withing viewable browser area?

I have a script which inserts "popup" elements into the DOM. It sets their top and left css properties relative to mouse coordinates on a click event. It works great except that the height of these "popup" elements are variable and some of them extend beyond the viewable area of the browser window. I would like to avoid this.
Here's what I have so far
<script type="text/javascript">
$(function () {
$("area").click(function (e) {
e.preventDefault();
var offset = $(this).offset();
var relativeX = e.pageX - offset.left;
var relativeY = e.pageY - offset.top;
// 'responseText' is the "popup" HTML fragment
$.get($(this).attr("href"), function (responseText) {
$(responseText).css({
top: relativeY,
left: relativeX
}).appendTo("#territories");
// Need to be able to determine
// viewable area width and height
// so that I can check if the "popup"
// extends beyond.
$(".popup .close").click(function () {
$(this).closest(".popup").remove();
});
});
});
});
</script>

You would compare the window width/height to the window's scrollTop, scrollLeft, etc.
Here are some methods for you to take a look at:
$(window).width()
$(window).height()
$(window).scrollTop()
$(window).scrollLeft()
$(window).scrollWidth()
$(window).scrollHeight()
Take a look at the jQuery documentation on these methods. Depending on exactly the behavior you want, you'll need to compare the width and position of your popup with the currently visible area of the window, determined with the scroll dimensions.
http://api.jquery.com/scrollTop/ .. etc

I figured out a solution. I added the following code in the place of my 4 line comment in the original question.
var diffY = (popup.offset().top + popup.outerHeight(true)) - $(window).height();
if (diffY > 0) {
popup.css({ top: relativeY - diffY });
}
var diffX = (popup.offset().left + popup.outerWidth(true)) - $(window).width();
if (diffX > 0) {
popup.css({ left: relativeX - diffX });
}
#liquidleaf pointed me in the right direction, so +1 and thanks for that.