Develop Reference

How to Get position of a div or an image in the div (top and left position) and use those values in CSS?

I have a website which is dynamic and using bootstrap. I want to create an animation into it where the dynamic thumbnails in div class="col-md-4" on clicking zoom from there position to 100% at the center of the container.
I am to create an on click effect to zoom the image but not from the position of the div, but from the center of the page. I am trying positioning of the image.
x = document.getElementById("Image")
t = x.top;
l = x.left;
function hello() {
x.style.top = x.top + "px";
x.style.left = x.left + "px";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4">
<img id="Image" src="abc.jpg">
<h2>ABC</h2>
</div>
But no luck. If anyone can help me out. Please do. Thanks.

Try using getBoundingClientRect
x.getBoundingClientRect() it will give you the absolute position of the element to the document.
You can get the viewport's height and width using this StackOverflow
From there you can get the proper offset you're looking for.

Snap cursor to specific point of draggable element

I am dragging thumbnails from one DIV to another and attempting to imitate the "snap-to-a-grid" feature used in AutoCAD , Adobe Illustrator, many other graphics-editing software, etc.
Question 1:
How could I get the pointer to snap to the 0,0 position (x and y position) of the image I am clicking for dragging, regardless of where the pointer was on the image when clicked?
When I click to drag an image, the pointer sticks to where the pointer was when clicked and the coordinates I am going to track will be for the pointer.
I tried this:
cursor: url(mycustomcursor.png) 0 0 , auto;
and the custom pointer appears but doesn't snap to 0,0 as hoped.
Question 2:
How can I get my image to stick precisely where dropped in a DIV and return the offset in pixels from the top/left of the DIV it is being dropped into?
I don't know if the cursor position when dragging is relevant but when I drop my image with the following script the image shifts twice the distance I expect of in other words the offsetX value, doubled. I have added the script below and had to edit out a bunch of (hopefully) non-relevant script like CSS for colors, borders, etc. I am also only working with the X-coordinates for simplicity in testing.
<div style='overflow:scroll;text-align:left;position:absolute;width:90%; height:180px;' ondrop='drop(event)' ondragover='allowDrop(event)'>
<img id='image_1234' src='image_path/image.png' style='position:absolute;height:100px;' draggable='true' ondragstart='drag(event)'>
</div>
<div id='panel_frame' style='width:600px;height:300px;' ondrop='drop(event)' ondragover='allowDrop(event)'>
</div>
function allowDrop(evAllow) {
evAllow.preventDefault();
}
function drag(evDrag) {
evDrag.dataTransfer.setData('text', evDrag.target.id);
}
function drop(evDrop) {
evDrop.preventDefault();
var dropData = evDrop.dataTransfer.getData('text',evDrop.id);
evDrop.target.appendChild(document.getElementById(dropData));
var offsetLeft = evDrop.clientX + 'px';
document.getElementById(dropData).style.left = offsetLeft;
}
I am testing in Firefox. Any help is appreciated. Thanks!

Calculate the height of a DIV based on other DIVs after loading the page including YouTube iframe

I have the following html :
<div id="this-is-slide">
<div id="left" style="float:left;width:70%;">
<!-- slide here -->
</div>
<div id="right" style="float:left;width:30%">
<div id="rightYT">You Tube video here...</div>
<div id="RightText">some text here</div>
</div>
</div>
Here, I have a slide which takes 70% of the width, while the other one (which includes You Tube video) takes 30% of the width. Under the YouTube video content I am having some text.
I want to set height to this div which has text in such a way that the total height of right side content (you tube & text) will be equal to the height of left side content(slider).
To do this I wrote JavaScript under "window.onload" and $(document).ready() but it is not calculating the height of the DIVs properly. I assume that JavaScript is running before EVERYTHING is loaded thereby giving wrong figures for the height at the initial load of the page.
However window resize is working, but at the initial time, its not doing the calculation properly.
This is my JS:
<script>
window.onload = function () { resizeRightText(); }
$(window).resize(function() {
resizeRightText();
});
function resizeRightText() {
var containerHeight = $('#left').height();
var youtubeHeight = $('#rightYT iframe').height();
var textHeight = containerHeight - youtubeHeight;
$('#RightText').css('height',textHeight);
}
</script>
Please let me know how to make it work in such a way that when the page loads FIRST TIME, I WANT TO SET THE HEIGHT TO THE TEXT DIV.
Thanks a bunch,

Image Map with Image popup on hover over hotspot

I am building a calendar that has events on certain days. The calendar is a jpg that I have created an image map for. When you hover over a hotspot or "event" on the calendar, I want an image to hover next to the mouse pointer that will have the event information on it, and then disappear when the mouse goes off of the hotspot. I have six hotspots, and a javascript function for each. The functions replace the popup image with the correct event image. Below is an example of just one of the areas along with one function (the others are identical w/ different image names and coords)
I had the event images popping up below the calendar on hover but the page refused to relocate the position of the image to the current mouse location. How can I make the popup image relocate? What am I doing wrong? or should I be using a different method?
JS:
function pop(e) { //function called by first hotspot
Image.src = "../img/Bubble - Aloha.png" //event image
document.popup1.src = Image.src;
var thing = document.getElementById("popup1");
$("#popup1").toggle();
thing.style.left = e.screenX + 'px';
thing.style.top = e.screenY + 'px';
return true;
}
MAP:
<map id="feb1050" name="feb1050">
<area shape="rect" alt="" coords="464,170,588,263" HREF="../img/feb1050.jpg" onMouseOver="pop(event);" onMouseOut="pop(event);"/>
...</map>
HTML:
<ul><li>
<img src="../img/feb1050.jpg" width="1050" alt="calendar" USEMAP="#feb1050">
</li>
<li>
<div id="popup"><img NAME="popup1" id="popup1" src="../img/Bubble - Aloha.png" width="400" alt="calendar" style="display:none;top:-2000;left:-1000;>
</div><br />Click Here To RSVP!
</li>
</ul>

Perhaps rather than manipulating the position of the image itself, you could position the enclosing div. For the HTML:
<div id="popup" class="popup"><img NAME="popup1" id="popup1" src="../img/feb1050.jpg" alt="calendar">
<br />Click Here To RSVP!</div>
With some CSS for the div:
.popup {
position:absolute;
z-index:20000;
top: 0px;
left: 0px;
display: none;
}
And then the JS:
function pop(e) { //function called by first hotspot
Image.src = "../img/Bubble - Aloha.png" //event image
document.popup1.src = Image.src;
var thing = document.getElementById("popup");
thing.style.left = e.clientX + 'px';
thing.style.top = e.clientY + 'px';
$("#popup").toggle();
return true;
}
Note that I would also use clientX and clientY rather than screenX and screenY:
What is the difference between screenX/Y, clientX/Y and pageX/Y?
Working example on JSFiddle

One thing I have done (in a situation almost exactly like this: A client wanted some pricing boxes to appear when hovering over a price keyword) is almost purely CSS and HTML. You can generate the popup areas inside <a> tags, which are then placed inside some <span> (or absolutely-positioned <div>) placed next to the hover area. You make sure those span/div elements are only defined for the a:hover selector, and you set them to display:none; on the rest of the a:x selectors, so that the span/div box only appears when you are hovering over the anchor, and disappears when you are not.

Using coordinates to place elements inside fancybox

I have a div containing 2 images, one is sort of a map the other is a pinpoint image, I used javascript to capture mouse clicks as x,y coordinates and the pinpoint moved easily along with clicks, here how the code looked like:
<div id="areapage" onclick="javascript:SetValues();" style="display: none;">
<img src="mysource" style="width:420;position:relative;" >
<img id="pindiv" src="images/pin.png" style="position: absolute;top: 0;left: 0;">
</div>
<script>
function SetValues()
{
document.getElementById('pindiv').style.left = window.event.screenX + 'px';
document.getElementById('pindiv').style.top = window.event.screenY + 'px';
}
</script>
it worked perfectly, until I placed it inside a fancybox, obviously something has changed, maybe x,y now refers to the original document in the background that opened the fancybox?

Try setting the #areapage div to position:relative; this will make the pindiv absolute positioning be based on that div rather than it's parent.