http://coding.pressbin.com/18/Display-a-Google-Map-when-you-hover-over-location-text/ I am following this tutorial on how to display google map over a text. Yes it appears but in a wrong place. See, the map is displaying on the bottom of the page. When I hover the map image the div itself has no attributes compared to the working ones.
Working code:
<div style="position: absolute; left: 678px; top: 170px; z-index: 999; display: none; padding: 1px; margin-left: 5px; background-color: rgb(51, 51, 51); width: 302px; box-shadow: 0pt 1px 10px rgba(0, 0, 0, 0.5);">
<a target="new" href="http://maps.google.com/maps?q=Brookhaven, PA&z=11">
<img border="0" src="http://maps.google.com/maps/api/staticmap?center=Brookhaven, PA&zoom=12&size=300x300&sensor=false&format=png&markers=color:blue|Brookhaven, PA">
</a>
</div>
What's in my browser:
<div style="display: none;">
<a target="new" href="http://maps.google.com/maps?q=4417 Edgmont Avenue, 19015&z=11">
<img border="0" src="http://maps.google.com/maps/api/staticmap?center=4417 Edgmont Avenue, 19015&zoom=16&size=300x300&sensor=false&format=png&markers=color:blue|4417 Edgmont Avenue, 19015">
</a>
</div>
I'm lost on the div part.
Please help!
This is what works for me:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>jQuery Test Script</title>
</head>
<body>
<span class="mapThis" place="600 Forbes Ave, Pittsburgh, PA 15282" zoom="16">Duquesne University</span> is located in the great town of <span class="mapThis" place="Pittsburgh, PA" zoom="12">Pittsburgh</span> in the great state of <span class="mapThis" place="Pennsylvania" zoom="6">Pennsylvania</span>.
<script src="jquery-ui-1.8.16.custom/js/jquery-1.6.2.min.js"></script>
<script src="scripts/test_script.js"></script>
</body>
</html>
Here's the jQuery to make it happen:
// JavaScript Document
$(document).ready(function () {
var cursorX;
var cursorY;
if (window.Event) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = getCursorXY;
$(".mapThis").each(function() {
var dPlace = $(this).attr("place");
var dZoom = $(this).attr("zoom");
var dText = $(this).html();
$(this).html('<a onmouseover="mapThis.show(this);" style="text-decoration:none; border-bottom:1px dotted #999" href="http://maps.google.com/maps?q=' + dPlace + '&z=' + dZoom + '">' + dText + '</a>');
});
});
var mapThis=function(){
var tt;
var errorBox;
return{
show:function(v){
if (tt == null) {
var pNode = v.parentNode;
pPlace = $(pNode).attr("place");
pZoom = parseInt($(pNode).attr("zoom"));
pText = $(v).html();
tt = document.createElement('div');
$(tt).html('<img border=0 src="http://maps.google.com/maps/api/staticmap?center=' + pPlace + '&zoom=' + pZoom + '&size=300x300&sensor=false&format=png&markers=color:blue|' + pPlace + '">');
tt.addEventListener('mouseover', function() { mapHover = 1; }, true);
tt.addEventListener('mouseout', function() { mapHover = 0; }, true);
tt.addEventListener('mouseout', mapThis.hide, true);
document.body.appendChild(tt);
}
fromleft = cursorX;
fromtop = cursorY;
fromleft = fromleft - 25;
fromtop = fromtop - 25;
tt.style.cssText = "position:absolute; left:" + fromleft + "px; top:" + fromtop + "px; z-index:999; display:block; padding:1px; margin-left:5px; background-color:#333; width:302px; -moz-box-shadow:0 1px 10px rgba(0, 0, 0, 0.5);";
tt.style.display = 'block';
},
hide:function(){
tt.style.display = 'none';
tt = null;
}
};
}();
function getCursorXY(e) {
cursorX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
cursorY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}
I know this post is old but I thought it might be useful if anyone stumbles upon this and is looking for a more updated example. Although the code in the answer works fine it is not written in a jQuery friendly format. I also found that the way the event listeners were configured made it's use a little difficult. Lastly, the fixed size of the map just does not work in today's responsive world. Hope this helps someone!
Add #mapHolder anywhere in your page and style it to your liking:
<div id='mapHolder' style='whatever you want'></div>
Place links anywhere in your page that you what to display a map when moused over:
<a class="mapthis" place="properly formatted address" zoom="12">MAP</a>
jQuery:
$(document).on("mouseenter", ".mapthis", function(e) {
var desiredMapWidthPercent = .8;
var mapWidth = Math.round($(window).width() * desiredMapWidthPercent);
var aspectRatio = mapWidth / $(window).height();
var mapHeight = Math.round($(window).height() * aspectRatio);
var boxWidth = mapWidth;
var boxHeight = mapHeight;
var scale = 1;
var pZoom = parseInt($(this).attr("zoom"));
var pPlace = $(this).attr("place");
if((mapHeight > 640) || (mapWidth > 640)){
mapHeight = Math.round(mapHeight / 3.5);
mapWidth = Math.round(mapWidth / 3.5);
scale = 2;
if(((mapHeight) > 1280) || ((mapWidth) > 1280)){
mapHeight = 640;
mapWidth = 640;
boxWidth = 1280;
boxHeight = 1280;
}else{
boxWidth = mapWidth * 2;
boxHeight = mapHeight * 2;
}
}
var fromleft = Math.max(0, ((($(window).width() - boxWidth) / 2) + $(window).scrollLeft()))+'px';
var fromtop = Math.max(0, ((($(window).height() - boxHeight) / 2) + $(window).scrollTop()))+'px';
var pText = $(this).html();
$('#mapHolder').html('<img border=0 src="https://maps.google.com/maps/api/staticmap?center=' + pPlace + '&zoom=' + pZoom + '&size='+mapWidth+'x'+mapHeight+'&scale='+scale+'&sensor=false&format=png&markers=color:blue|' + pPlace + '">');
$('#mapHolder').css({position:'absolute',top:fromtop,left:fromleft, width:boxWidth, z-index:'999'});
$('#mapHolder').show();
});
$(document).on("mouseleave", ".mapthis", function(e) {
if($(e.relatedTarget).closest('#mapHolder').length){
$("#mapHolder").on("mouseleave", function(e) {
$('#mapHolder').hide();
});
return;
}
$('#mapHolder').hide();
});
Related
I've tried adding the top and left changes, and margin (with different positioning changes too) changes to each element if one approaches another but only the margin change works once. Is there a way to make them work more consistently?
This is where I've used a function to add the event listeners:
var three = document.getElementById('three');
var test = document.getElementById('test');
var two = document.getElementById('two');
var obj = null;
function testmovea(object, event) {
obj = document.getElementById(object.id);
document.addEventListener("mousemove", move);
}
function move(event) {
obj.innerText = event.clientX + ' ' + event.clientY;
obj.style.position = 'absolute';
obj.style.left = event.clientX + "px";
obj.style.top = event.clientY + "px";
three.addEventListener('mouseover', borders);
three.addEventListener('mouseleave', bordersOff);
two.addEventListener('mouseenter', bTwo);
test.addEventListener('mouseenter', bTest);
two.addEventListener('mouseleave', bTwoReset);
test.addEventListener('mouseleave', bTestReset);
document.addEventListener("mouseup", stopMove);
}
function bTwo() {
two.style.margin = "10%";
}
function bTwoReset() {
two.style.margin = "0%";
}
function bTest() {
test.style.margin = "10%";
}
function bTestReset() {
test.style.margin = "0%"
}
This is the mouse stop event I use:
function stopMove() {
document.removeEventListener('mousemove', move);
test.removeEventListener('mouseover', bTest);
two.removeEventListener('mouseover', bTwo);
test.removeEventListener('mouseleave', bTestReset);
two.removeEventListener('mouseleave', bTwoReset);
}
the testmovea function relies on a onmousedown property defined for a DOM element of the page
Update:
I've managed to get it to partially work:
function collide(el1, el2) {
if(twoBoundX >= threeBoundY || threeBoundY >= twoBoundX) {
two.style.margin = + event.clientX + "px";
two.style.margin = + event.clientY + "px";
}
}
where twoBoundX and threeBoundY are getBoundingClientRect() of the respective elements
Here's the full code snippet:
<html>
<head>
<style type="text/css">
#two {
border: 1px solid black;
padding: 1%;
margin: 1%;
margin-top: 10%;
width: 10%;
}
#three {
border: 1px solid black;
padding: 1%;
margin-top: 2%;
}
</style>
</head>
<body>
<div id="two" onmousedown="testmovea(this, event)" onclick="currentTwoPos()">
stop movement
</div>
<div id="three" onmousedown="testmovea(this)">Expand div</div>
<div style="height: 30%" id="two" contenteditable="true">
some contenteditable</div>
</body>
<script>
var three = document.getElementById('three');
var two = document.getElementById('two');
const twoBound = two.getBoundingClientRect();
const threeBound = three.getBoundingClientRect();
var threeBoundX = threeBound.x;
var threeBoundY = threeBound.y;
var twoBoundX = twoBound.x;
var twoBoundY = twoBound.y;
var twoBoundBottom = null;
var twoBoundTop = null;
var obj = null;
function collide(el1, el2) {
if(twoBoundX >= threeBoundY || threeBoundY >= twoBoundX) {
two.style.left = event.clientX + "px";
two.style.top = event.clientY + "px";
three.style.left = event.clientX + "px";
three.style.top = event.clientY + "px";
}
}
function testmovea(object, event) {
obj = document.getElementById(object.id);
document.addEventListener("mousemove", move);
}
function move(event) {
obj.innerText = event.clientX + ' ' + event.clientY;
obj.style.position = 'absolute';
obj.style.left = event.clientX + "px";
obj.style.top = event.clientY + "px";
two.addEventListener('mouseover', collide);
three.addEventListener('mouseover', collide);
document.addEventListener("mouseup", stopMove);
}
function stopMove() {
mousemove = false;
document.removeEventListener('mousemove', move);
three.removeEventListener('mouseover', collide);
two.removeEventListener('mouseover', collide);
}
</script>
</html>
collision detection
You need to define a function that checks whether two of your shapes collide. If you only have rectangles whose vertex are parallel with the OX and OY vertexes, it would look like this:
function areColliding(r1, r2) {
return !(
(r1.x > r2.x + r2.w) ||
(r1.x + r1.w < r2.x) ||
(r1.y > r2.y + r2.h) ||
(r1.y + r1.h < r2.y)
);
}
Of course, if some rotation or even other shapes are involved into your problem, then you need to extend/adjust the collision detector accordingly.
a shared function
You need to create a function that would receive the current status of the elements and the move that happens. It would look like this:
function handleMove(currentPositions, proposedPositions) {
while (!validPositions(proposedPositions)) {
proposedPositions = generateNewPositions(currentPositions, handleCollisions(proposedPositions));
}
refreshUI(proposedPositions);
}
currentPositions is the set of positions your elements currently have
proposedPositions is the set of positions your elements are going to have if there are no collisions
validPositions checks for any pair of shapes that would collide and returns true if none of those pair collide and false if at least one such pair collides
proposedPositions is being refreshed while there are still collisions
generateNewPositions is your handler for collision-based changes
handleCollisions effectuates changes to avoid collision
refreshUI refreshes the UI
event handling
your mouse events should handle change updates by loading all the positions of your elements and calling this shared functionality.
Note: If you have further problems, then you might need to create a reproducible example so we could see your exact structure, styling and code as well.
<html>
<head>
<style type="text/css">
#two {
border: 1px solid black;
width: 10%;
padding: 1%;
margin: 1%;
margin-top: 10%;
}
#three {
border: 1px solid black;
padding: 1%;
margin-top: 2%;
}
</style>
</head>
<body>
<div id="two" onmousedown="testmovea(this, event)" style="position: relative;">
stop movement
</div>
<div id="three" onmousedown="testmovea(this)" style="position: relative;">Expand div</div>
<!--<div style="height: 30%; position: relative;" id="two" contenteditable="true">
some contenteditable</div>-->
</body>
<script>
var three = document.getElementById('three');
var two = document.getElementById('two');
let moveStarted = false;
function collide() {
const first = two.getBoundingClientRect();
const second = three.getBoundingClientRect();
if (!(
(first.x + first.width < second.x) ||
(second.x + second.width < first.x) ||
(first.y + first.height < second.y) ||
(second.y + second.height < first.y)
)) {
two.style.left = event.clientX + "px";
two.style.top = event.clientY + "px";
three.style.left = event.clientX + "px";
three.style.top = event.clientY + "px";
}
}
function testmovea(object, event) {
obj = document.getElementById(object.id);
if (!moveStarted) {
document.addEventListener("mousemove", move);
moveStarted = true;
}
}
function move(event) {
//obj.innerText = event.clientX + ' ' + event.clientY;
obj.style.left = event.clientX + "px";
obj.style.top = event.clientY + "px";
if (!obj.classList.contains("dragged")) obj.classList.add("dragged");
collide(obj);
}
function stopMove() {
mousemove = false;
if (moveStarted) {
document.removeEventListener('mousemove', move);
moveStarted = false;
}
}
document.addEventListener("mouseup", stopMove);
</script>
</html>
var arrow = document.getElementById("arrow");
function shot() {
var arrows = document.createElement("div");
document.body.appendChild(arrows);
arrows.style.backgroundColor = "black";
arrows.style.height = "80" + "px";
arrows.style.width = "3" + "px";
var arrowX = parseInt(document.arrow.style.left);
var arrowY = parseInt(document.arrow.style.top);
document.arrows.style.left = arrowX + "px";
document.arrows.style.top = arrowY + "px";
};
When I run it and click button which runs function shot it says it cannot read property "style" of undefined. It also spawns a new element on position it would spawn without any position defining.
Yep, my ids are correct.
Html:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="arrow"><div>
<button id="button" onclick="shot();"> Shot! </button>
</body>
</html>
CSS:
#arrow {
background-color: black;
height: 80px;
width: 1.5px;
position: relative;
left: 0px;
top: 0px;
}
Here is full project JS, which u dont need. Its not complete. There is button faster but it doesnt work, idk why. It should be archery game
var arrow = document.getElementById("arrow");
var arrowPos = -50;
var speed = 1000;
var speed2 = speed/100;
function arrow_move_right() {
arrowPos += 1;
arrow.style.left = arrowPos + "px";
if (arrowPos >= 280) {
return arrow_move_left()
}
else {
setTimeout(arrow_move_right, speed2);
};
};
function arrow_move_left() {
arrow = document.getElementById("arrow");
arrowPos -= 1;
arrow.style.left = arrowPos + "px";
if (arrowPos <= -50) {
return arrow_move_right()
}
setTimeout(arrow_move_left, speed2);
};
function faster() {
speed -= 100;
alert(speed)
}
function shot() {
var arrows = document.createElement("div");
document.body.appendChild(arrows);
arrows.style.backgroundColor = "black";
arrows.style.height = "80" + "px";
arrows.style.width = "1.5" + "px";
var arrowX = parseInt(arrow.style.left);
var arrowY = parseInt(arrow.style.top);
alert(arrowX);
alert(arrowY);
// arrows.style.left = arrowX;
// arrows.style.top = arrowY;
arrows.style.pos = "relative";
arrows.style.top = -50 + "px";
};
Hope this is what you are looking for!
var arrow = document.getElementById("arrow");
function shot() {
var arrows = document.createElement("div");
document.body.appendChild(arrows);
arrows.style.backgroundColor = "blue";
arrows.style.height = "80px";
arrows.style.width = "3px";
arrows.style.position = "absolute";
arrows.style.top = arrow.offsetTop + "px";
arrows.style.left = arrow.offsetLeft + "px";
};
#arrow {
height: 80px;
width: 3px;
background: black;
position: relative;
-webkit-animation: move 5s infinite; /* Safari 4.0 - 8.0 */
animation: move 5s infinite;
}
/* Styles for animating arrow */
/* Safari 4.0 - 8.0 */
#-webkit-keyframes move {
from {left: 0px;}
to {left: 400px;}
}
#keyframes move {
from {left: 0px;}
to {left: 400px;}
}
<div id="arrow"></div>
<button id="button" onclick="shot();"> Shot! </button>
Here is what I mean....
var arrow = document.getElementById("arrow");
function shot() {
var arrows = document.createElement("div");
document.body.appendChild(arrows);
arrows.style.backgroundColor = "black";
arrows.style.height = "80" + "px";
arrows.style.width = "3" + "px";
var arrowX = parseInt(arrow.style.left);
var arrowY = parseInt(arrow.style.top);
arrows.style.left = arrowX + "px";
arrows.style.top = arrowY + "px";
};
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="arrow"><div>
<button id="button" onclick="shot();"> Shot! </button>
</body>
</html>
I am trying to create a function for my game of pong for the ball to move around within a frame. When I call the function I am using a function called setStyle() to change the position of the ball every 100 milliseconds.
After I saw that it did not work I console logged the left and top positions to find that the function was getting called but the amount of pixels it was located at was the same.
//Javascript
function ballMove(){
var x = 5;
var y = 5;
var maxHeight = getStyle('frame', 'top') + getStyle('frame', 'height');
var maxWidth = getStyle('frame', 'left') + getStyle('frame', 'width');
var ballLeft = getStyle('ball', 'left');
var ballTop = getStyle('ball', 'top');
var minLeft = getStyle('frame', 'left');
var minTop = getStyle('frame', 'top');
if(ballTop >= minTop){
setStyle('ball', 'top', (ballTop + y) + "px");
}
else if(ballTop <= maxHeight){
setStyle('ball', 'top', (ballTop - y) + "px");
}
if(ballLeft >= minLeft){
setStyle('ball', 'left', (ballLeft + x) + "px");
}
else if(ballLeft <= maxWidth){
setStyle('ball', 'left', (ballLeft - x) + "px");
}
console.log(ballLeft);
console.log(ballTop);
}
function startIntervals(){
setInterval(ballMove, 100);
console.log("starting...");
}
Here is my css
#ball{
position: relative;
background-color: white;
height: 10px;
width: 10px;
left: 50px;
}
and the html
<body onload="startIntervals();">
<div id="main-div">
<div id="title">Pong</div>
<div id="frame">
<div id="paddlewasd">
</div>
<div id="paddlearrow">
</div>
<div id="ball">
</div>
</div>
</div>
I expected the ball to move but instead the function gets called and the left and top positions stay the same.My code
Although it depends fairly significantly on the rest of the code that wasn't posted the following implementations of getStyle and setStyle along with a css defintion of #frame allows the ball to move diagonally 5pixels right and down every 100 milliseconds
function getStyle(id, style) {
var element = document.getElementById(id);
var computedStyle = window.getComputedStyle(element);
var selectedStyle = computedStyle[style];
// Check if the style value matches a 'pixel' string format, if it does extract the numeric part and parse it as an integer
var pixelTokens = /([\d]*)px$/.exec(selectedStyle);
if (pixelTokens) {
return parseInt(pixelTokens[1]);
}
return selectedStyle;
}
function setStyle(id, style, value) {
var element = document.getElementById(id);
return element.style[style] = value;
}
function ballMove() {
var x = 5;
var y = 5;
var maxHeight = getStyle('frame', 'top') + getStyle('frame', 'height');
var maxWidth = getStyle('frame', 'left') + getStyle('frame', 'width');
var ballLeft = getStyle('ball', 'left');
var ballTop = getStyle('ball', 'top');
var minLeft = getStyle('frame', 'left');
var minTop = getStyle('frame', 'top');
if (ballTop >= minTop) {
setStyle('ball', 'top', (ballTop + y) + "px");
} else if (ballTop <= maxHeight) {
setStyle('ball', 'top', (ballTop - y) + "px");
}
if (ballLeft >= minLeft) {
setStyle('ball', 'left', (ballLeft + x) + "px");
} else if (ballLeft <= maxWidth) {
setStyle('ball', 'left', (ballLeft - x) + "px");
}
console.log(ballLeft);
console.log(ballTop);
}
function startIntervals() {
setInterval(ballMove, 100);
console.log("starting...");
}
#ball {
position: relative;
background-color: white;
height: 10px;
width: 10px;
left: 50px;
}
#frame {
width: 300px;
height: 300px;
top: 0px;
left: 0px;
background-color: green;
}
<body onload="startIntervals();">
<div id="main-div">
<div id="title">Pong</div>
<div id="frame">
<div id="paddlewasd">
</div>
<div id="paddlearrow">
</div>
<div id="ball">
</div>
</div>
</div>
</body>
I'm new with JS.
https://codepen.io/Maartinshh/pen/VbGOvm
Here's my code:
html
<img id="imgZoom" width="200px" height="200px" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="https://media.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAA20AAAAJDZhZjAwOTE3LTExMDQtNDE5OC05NDdhLWUxYTU0ODJiZTdkYQ.png">
<div id="overlay" onmousemove="zoomIn(event)"></div>
css
#overlay {
border: 1px solid black;
width: 450px;
height: 450px;
position: absolute;
display: inline-block;
background-image: url('https://media.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAA20AAAAJDZhZjAwOTE3LTExMDQtNDE5OC05NDdhLWUxYTU0ODJiZTdkYQ.png');
background-repeat: no-repeat;
}
js
function zoomIn(event) {
var element = document.getElementById("overlay");
element.style.display = "inline-block";
var img = document.getElementById("imgZoom");
var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;
element.style.backgroundPosition = (-posX * 1) + "px " + (-posY * 1) + "px";
}
function zoomOut() {
var element = document.getElementById("overlay");
element.style.display = "none";
}
Problem that occurs: If you see, then when I mouseover picture on left side, the right side (zoomed) picture, doesn't really follow correctly with zoom. What am I doing wrong?
Also, how can I change zoom level (zoom closer)?
Thanks in advance.
You need to do some calculations to add extra offset to place img at center of the div
var offY = (element.clientHeight -img.clientHeight)/2;
var offX = (element.clientWidth -img.clientWidth)/2;
edited codepen here
I am trying to produce a movement on a circle of some rectangular divs. I want that if a div is dragged near another div, the second div move within the first one the user is dragging. Is there a plugin that do this or I need to produce something calculating the position of 2 divs. And, the rectangular divs can be also 10 divs not only 2.
Here my solution.
<html>
<head>
<style type="text/css">
div#dynamic-container{width:400px; height:400px; background-color: lightgoldenrodyellow; position:relative; border: 1px solid black;}
div#innerCircle{width: 380px; height: 380px; position: absolute; left: 10px; top:10px; background-color: lightcoral;
border-radius:190px; -moz-border-radius: 190px; -webkit-border-radius: 190px;}
div.marker{width: 20px; height:20px; background: black; position:absolute; left:195px; cursor: pointer;
-moz-transform:rotate(45deg);
-moz-transform-origin:5px 200px;
transform:rotate(45deg);
transform-origin:5px 200px;
-ms-transform:rotate(45deg);
-ms-transform-origin:5px 200px;
-webkit-transform:rotate(45deg);
-webkit-transform-origin:5px 200px;
z-index:17;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="/lib/jquery.overlaps.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function rotateAnnotationCropper(offsetSelector, xCoordinate, yCoordinate, cropper){
//alert(offsetSelector.left);
var x = xCoordinate - offsetSelector.offset().left - offsetSelector.width()/2;
var y = -1*(yCoordinate - offsetSelector.offset().top - offsetSelector.height()/2);
var theta = Math.atan2(y,x)*(180/Math.PI);
var cssDegs = convertThetaToCssDegs(theta);
var rotate = 'rotate(' +cssDegs + 'deg)';
cropper.css({'-moz-transform': rotate, 'transform' : rotate, '-webkit-transform': rotate, '-ms-transform': rotate});
$('body').on('mouseup', function(event){ $('body').unbind('mousemove')});
}
function convertThetaToCssDegs(theta){
var cssDegs = 90 - theta;
return cssDegs;
}
$(document).ready(function(){
//$('.marker-1').draggable();
var items = $('#dynamic-container').find('.marker');
var i = 0;
var cssDegs = 15;
var rotate = 'rotate(' +cssDegs + 'deg)';
for (i; i<items.length; i++){
if(i == 0){
cssDegs = cssDegs*i;
}else{
cssDegs = cssDegs+20;
}
console.log("cssDegs: "+cssDegs);
rotate = 'rotate(' +cssDegs + 'deg)';
//Imposto i gradi a tutti i punti per differenziarli al document ready
$(items[i]).css({'-moz-transform': rotate, 'transform' : rotate, '-webkit-transform': rotate, '-ms-transform': rotate});
//items[i].css("background-color","blue");
}
console.log(items);
$('.marker').on('mousedown', function(){
$('body').on('mousemove', function(event){
//rotateAnnotationCropper($('#innerCircle').parent(), event.pageX,event.pageY, $('.marker'));
//rotateAnnotationCropper($('#innerCircle').parent(), event.pageX,event.pageY, $(event.target));
rotateAnnotationCropper($('#innerCircle').parent(), event.pageX,event.pageY, $(this).find('.marker-1'));
var markers = $(this).find('.marker');
var over = overlap(markers[0],$('#container'));
if(markers[0] != over){
console.log($(markers[0]));
console.log(over);
}else{
console.log('not over');
}
});
});
$('body').on('mouseup', function(event){ $('body').unbind('mousemove')});
});
function overlap (div1, div2){
var res = $(div1).overlaps($(div2));
return res;
}
</script>
</head>
<body>
<div id="container">
<div id ="dynamic-container">
<div class ="marker marker-1"></div>
<div class ="marker marker-2"></div>
<div id ="innerCircle"></div>
</div>
</div>
</body>
At the moment this snippet produce a circle with 2 divs. That can move on the circle border. I want that if the div the user drag a div when the dragged div touch the other, they move together.
I tried to use also jQuery Overlaps library to get if 2 divs are overlapped but I do something wrong.
Thanks in advance. Every library you can suggest are well accepted
EDIT:
A more complete example will be your example working:
Working JSFiddle:
https://jsfiddle.net/mcbo9bs3/
function rotateAnnotationCropper(offsetSelector, xCoordinate, yCoordinate, cropper){
//alert(offsetSelector.left);
var x = xCoordinate - offsetSelector.offset().left - offsetSelector.width()/2;
var y = -1*(yCoordinate - offsetSelector.offset().top - offsetSelector.height()/2);
var theta = Math.atan2(y,x)*(180/Math.PI);
var cssDegs = convertThetaToCssDegs(theta);
var rotate = 'rotate(' +cssDegs + 'deg)';
cropper.css({'-moz-transform': rotate, 'transform' : rotate, '-webkit-transform': rotate, '-ms-transform': rotate});
$('body').on('mouseup', function(event){ $('body').unbind('mousemove')});
}
function convertThetaToCssDegs(theta){
var cssDegs = 90 - theta;
return cssDegs;
}
$(document).ready(function(){
//$('.marker-1').draggable();
var items = $('#dynamic-container').find('.marker');
var i = 0;
var cssDegs = 15;
var rotate = 'rotate(' +cssDegs + 'deg)';
for (i; i<items.length; i++){
if(i == 0){
cssDegs = cssDegs*i;
}else{
cssDegs = cssDegs+20;
}
console.log("cssDegs: "+cssDegs);
rotate = 'rotate(' +cssDegs + 'deg)';
//Imposto i gradi a tutti i punti per differenziarli al document ready
$(items[i]).css({'-moz-transform': rotate, 'transform' : rotate, '-webkit-transform': rotate, '-ms-transform': rotate});
//items[i].css("background-color","blue");
}
console.log(items);
$('.marker').on('mousedown', function(){
$('body').on('mousemove', function(event){
//rotateAnnotationCropper($('#innerCircle').parent(), event.pageX,event.pageY, $('.marker'));
//rotateAnnotationCropper($('#innerCircle').parent(), event.pageX,event.pageY, $(event.target));
rotateAnnotationCropper($('#innerCircle').parent(), event.pageX,event.pageY, $(this).find('.marker-1'));
var markers = $(this).find('.marker');
});
});
$('body').on('mouseup', function(event){ $('body').unbind('mousemove')});
});
window.setInterval(function() {
$('#result').text(collision($('.marker-1'), $('.marker-2')));
}, 200);
function collision($div1, $div2) {
var x1 = $($div1).offset().left;
var y1 = $($div1).offset().top;
var h1 = $($div1).outerHeight(true);
var w1 = $($div1).outerWidth(true);
var b1 = y1 + h1;
var r1 = x1 + w1;
var x2 = $($div2).offset().left;
var y2 = $($div2).offset().top;
var h2 = $($div2).outerHeight(true);
var w2 = $($div2).outerWidth(true);
var b2 = y2 + h2;
var r2 = x2 + w2;
if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
return true;
}
To detect overlapping this code should work:
function collision($div1, $div2) {
var x1 = $($div1).offset().left;
var y1 = $($div1).offset().top;
var h1 = $($div1).outerHeight(true);
var w1 = $($div1).outerWidth(true);
var b1 = y1 + h1;
var r1 = x1 + w1;
var x2 = $($div2).offset().left;
var y2 = $($div2).offset().top;
var h2 = $($div2).outerHeight(true);
var w2 = $($div2).outerWidth(true);
var b2 = y2 + h2;
var r2 = x2 + w2;
if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
return true;
}
You can apply that to your code (replacing the overlap function).
Hope it helps!