am having 2 divs with different height and width having image as background.
my requirement is to get the cropped coordinates of one div, and position that coordinates to another div.. i need the coordinates..
how can i do that.
Have a look at getBoundingClientRect()… Note that you need to take care of the parent Nodes. If the parents of the div elements have diffrent positions, than you need to take this difference into accout.
The code below assumes that both divs have the same parent and are positioned absolute.
var bbox = div1.getBoundingClientRect();
div2.style.top = bbox.top + 'px';
div2.style.left = bboox.left + 'px';
div2.style.width = bbox.right - bbox.left + 'px';
div2.style.height = bbox.bottom - bbox.top + 'px';
Related
I have a div with a background image - the div is set to the exact size of the image and my pointer is set to a crosshair over the div.
I want to mark each click with its x and y positions in the div over the image background. This I can do but the mark on the div is always lower and to the left of the actual cursor why is this?
function showClick(x,y)
{
$('.clickable').append('<span id="'+x+y+'_span" style="position: absolute;top:'+y+'px;left:'+x+'px;" class="red">+</span>');
}
$('.clickable').bind('click', function (ev) {
var $div = $(ev.target);
var offset = $div.offset();
var xMargin = ($div.outerWidth() - $div.width()) / 2;
var yMargin = ($div.outerHeight() - $div.height()) / 2;
var x = (ev.pageX + xMargin) - offset.left;
var y = (ev.pageY + yMargin) - offset.top;
showClick(x,y);
});
working example: https://jsfiddle.net/b94ypmae/3/
You are not taking into account the size of the span (and the character inside it).
Your code is working properly, in that a span is being placed in your div at the position of your cursor, but that position is based on the upper left corner
If you put a border around your span you can see it is a perfect alignment of your upper left corner: JSFiddle showing border
You could fix this by taking into account the size of the placed span(if you know it will always be the same you could hard code it as well). Here's an example of getting the size of the placed span and moving it by half it's width and height: Fixed JSFiddle
var placedSpan = $("#" + x + y + "_span");
var width = placedSpan.width();
var height = placedSpan.height();
placedSpan.css('left', x - width / 2 + 'px');
placedSpan.css('top', y - height / 2 + 'px');
What I'm looking to accomplish is to get the position of the mouse in relation to a zoomed out div with matrix transform. As you will see in the fiddle below I have a red div with a width of 4000px, but since it's zoomed out it appears smaller then said 4000px. What should happen is if you click on the intersecting lines in the red div, relX should read (around) 2000 and relY should read around 325.
$(".crazyWide").click(function(e){
var clickPos = $(this).offset();
var relX = e.pageX - clickPos.left;
var relY = e.pageY - clickPos.top;
//Used to display current click coords
$(".debug").empty();
$(".debug").prepend("relX: " + relX + " relY: " + relY);
});
Fiddle
The element is shrunk to a factor of 0.12 in both directions. As such, you can calculate the relative mouse click position by dividing the relX and relY by 0.12:
$(".debug").prepend("relX: " + (relX / 0.12) + " relY: " + (relY / 0.12));
Updated fiddle
I am trying to position a div based on mouse position, I managed to get it to work 50%.
The problem is that DIV always seems to be much lower than the actual mouse position, I try to minus the offset, no luck.
Basically what I want is to float the div(the NEXT link in jsfiddle) vertically, but the DIV should not be able to go outside of the container it is in(the div that has the image in the jsfiddle)
here is the jsfiddle: http://jsfiddle.net/LYmVH/7/
below is the JS, which is also in the jsfiddle:
$('.post-single-content').mousemove(function(e){
var height=e.pageY,
height1 =$('.content-top').height();
$('.btnNext').css({top: (e.pageY + 50) + "px"});
});
You need measure against the top of the parent element since it's absolutely positioned in it.
Try changing your JS to:
$('.post-single-content').mousemove(function(e){
var top = (e.pageY - $(this).offset().top) + 'px';
$('.btnNext').css({ top: top });
});
Upon reading some comments lemme update, by making use some basic math and create "collision". Somthing like:
$('.post-single-content').mousemove(function(e){
var y = e.pageY, // mouse y axis position
tHeight = $(this).height(), // container height
bHeight = $('.btnNext').height(), // button height
oTop = $(this).offset().top, // offset top position of container
abBot = tHeight - $('.btnNext').height(), // absolute top of button when at bottom
bHalf = bHeight / 2, // half button height
top = y - oTop - bHalf, // initial top pos of button
bot = y - oTop + bHalf; // bottom of button while moving
if (top < 0) top = 0; // ensure button doesn't go to far north
else if (bot > tHeight) top = abBot; // ensure it cant go past south
$('.btnNext').css({ top: top }); // 'px' not neccesary
});
jsFiddle
I have been trying to find a solution to a problem I have.
My website has different thumbnails on it and I added a onmouseover / onmouseout function. So if you move your mouse over a picture, a hover image (the original size) is shown in the upper right corner.
This all works fine, but if I have bigger image, it will overlap my thumb img and stuff gets crazy.
So what I wanted was to get the right side position of my thumbnail IMG tag and subtract that from the screen size. The screen size is not a problem, but the right position of my img tag is.
How could i get that position? (marked with bold red line in pic)
The code looks something like this:
function imghover(id, src, width, height) {
var thumb = document.getElementById(id);
var hover = document.getElementById('hoverimg');
alert(thumb.
hover.src = src;
if(width > screen.width){
hover.width = (width / 100) * 20;
hover.height = (height/ 100) * 20;
}
else if(height > screen.height) {
hover.width = (width / 100) * 40;
hover.height = (height/ 100) * 40;
}
else {
hover.width = width;
hover.height = height;
}
}
As you can see i have everything I need: Thumb ID, scr for new pic (original), width & height of original. So how to get the right side position of the Thumb?
Thanks a lot in advance.
right is usually calculated as
right = totalScreenWidth - left - sizeOfBox(or what ever detail you wand to + -);
The equation is followed in a relative way .. say for example the whole thing is in a div container rather than in window.
You can get left for image like ..
totalLeft = image.getBoundingClientRect().left + imageParent.getBoundingClientRect().left + .... cascadingly .. till you cover each element from image to window.
or use jquery to use it like $(#img).position().left .. etc
Here is the code for your problem: http://jsfiddle.net/B24QL/
You can view the preview here : http://jsfiddle.net/B24QL/embedded/result/
jQuery
$(document).ready(function(){
var a = $('img').offset().left + $('img').width(),
b = $(window).width() - a;
alert("Position of right border of image: " + a + "px from left edge.\n Distance between right border and image = " + b + "px.");
});
I have to set auto height for relative positioned div which contains multiple absolute position div's inside it. Without mentioning height to the outer div positioned relative the content inside the absolute div is not visible due to overflow:hidden property.
Is there any Javascript to make this possible.. If so please advise me.
Thanks in advance.
Since absolute positioned children does not affect parents size, you should calculate the bounds of parent div manually. For instance to get height of the parent you should iterate over child elements and find maximum value of child's top plus height, and to get width you should find maximum left plus width pair. You can use the following function to adjust parent's width an height:
function setSize() {
var i, count,
maxWidth = 0,
maxHeight = 0,
top, left, width, height,
parent = document.getElementById('parent');
for(i=0,count=parent.childNodes.length;i<count;i++) {
if(parent.childNodes[i].nodeType === 1) {
top = parent.childNodes[i].offsetTop;
left = parent.childNodes[i].offsetLeft;
width = parent.childNodes[i].offsetWidth;
height = parent.childNodes[i].offsetHeight;
if(top + height > maxHeight) {
maxHeight = top + height;
}
if(left + width > maxWidth) {
maxWidth = left + width;
}
}
}
parent.style.width = maxWidth + 'px';
parent.style.height = maxHeight + 'px';
}
the function assumes that you parent div have an id="parent"
Working example you can find here: http://jsbin.com/ifelur/1/edit