I have this element, and i want to position it to specific coordinates on the page. The problem is that it's inside another positioned element, so position:absolute places it relatively to this element, while i want it to be placed relatively to the page.
Is there some way i can place an element at specific coordinates on the page?
You can see what i have on this page: http://bit.ly/NkfJk7 when you mouse over that yellow exclamation icon, i want the pink box to appear near that, but instead it appears in double that distance.
I figured it out, i was doing it wrong.
toolTip.style.left = button.offsetLeft + "px";
toolTip.style.top = button.offsetTop + "px";
No need to go absolute :)
You can use position: fixed for this
https://developer.mozilla.org/en/CSS/position
Fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and doesn't move when scrolled. When printing, position it at that fixed position on every page.
EDIT: Disregard this answer. Position-fixed positions relative to the screen, so it will follow around it the page scrolls.
Related
I have a simple canvas drawing program that works perfectly.
But when I want to use it on my webpage I have to position it. I need canvas element to be inside 1 div element and i need to position that div element in css. When I do change position of parent div element my canvas window moves regularly but when I try to draw, mouse position of my cursor is not matching line on the screen.
I would like to know how to solve this problem and how to position my canvas window correctly where I want.
Here is canvas program that works(color buttons are not positioned well but nevermind).
HjD7e -> jsfiddle id
And here is the one that is messed up(cursor position is not matching)
S6Dhe -> jsfiddle id
Since you are now offsetting multiple elements, you'll need to take the new positions into account. Seeing as you are positioning the parent container, it might be easier to put all your positioning there and remove the extra positioning from the canvas itself. Using:
#contain{
position:absolute;
top:300px;
left:500px;
width: 400px;
height: 400px
}
instead. From there, change the code getting the positions to:
contain = document.getElementById('contain');
currX = e.clientX - contain.offsetLeft + window.scrollX;
currY = e.clientY - contain.offsetTop + window.scrollY;
also accounting for scrolling in the window.
The working fiddle is here. (Caveat, only tested in Firefox)
I want to know how can we get exact position of an image and place an other image on that position
excepted positions are
top left, top center, top right
left center, center, right center
bottom left, bottom center, bottom right
For example I have a main image now I put another image on its bottom center.
Is this possible in jQuery?
User .offset() method to get the position of image. Explicitly use .offset().top or .offset().left to get top left coordinate. use .width() and .height() to get width and height of elements. Do some highschool maths and here you go. Voila you get the right answer.
Try experimenting with getBoundingClientRect().
var foo = bar.getBoundingClientRect();
You can set position of something dynamically using the returned variable foo.
foo.left, foo.right, etc.
Mdn for the api
Please try .position() function. The .position() method allows us to retrieve the current position of an element relative to the offset parent.
var div = $( "div ");
var position = div.position();
alert("left: " + position.left + ", top: " + position.top);
I need to have a simple pop up rectangle, preferably with jQuery or some such, that simply brings up a scaled down canvas (say, 1:2, representing a 1000px x 1600px browser window) that can be clicked on to get the x/y position in the full window.
It's really just a simple, visual way to help a client position content on a page (it has to be completely at their control, not on a grid).
Does anyone have an idea of something out there that already does something like this? (I'm looking for the wordpress admin, but should be able to work anything in pretty much).
Edit to clarify. Here is what I'm thinking might work if there is nothing out there that does this:
If you click a button, jQ an absolute positioned div (lightbox style), of the sized I talked about, then close the div upon clicking it, but somehow get the x/y position in the div where it was clicked and then scale this with some maths...
I think the thing I don't know how to do here is getting the x/y position relative to the size of the specific div.
Sorry, I think this is maybe a bit of a terribly worded question.
$('#popup').css("top", ($(window).height()) / 2 + $(window).scrollTop() + "px");
$('#popup').css("left", ($(window).width()) / 2 + $(window).scrollLeft() + "px");
your canva need to be set to
position: relative
then anything inside this element can be set to
position : absolute
top: [your Y position from top side of the canva]px;
left: [your X position from left side of the canva]px;
Absolute position always refers to the first element that has no default positionning, in this case relative.
Im getting spaces between my div.container elements as soon as I changed the parent div to position relative and it needs to be relative is there a way to fix this. here is my jsFiddle example jsFiddle
Name change, eh?
next.animate({
'left': next.offset().left + next.width()
});
The offset is giving you an offset from the edge of the screen and not your container. That's why the gap is the same size as space between the left edge of the window and the box.
I have two divs one above the other. The second on is absolutely positioned below it (an absolute div inside a relative div).
I want to move the second div on top of the other div, so it appears in the middle.
The procedure for this is to set the style.top of DIV2 to be the same as DIV1, this should in theory position it on top of it. However so far attempts have failed.
The absolute positioning is working correctly, because putting in values moves it correctly, but I think I am using the wrong way to get the height/top values of DIV1.
Ideas?
I tried this:
divLoading.style.top = divContent.style.top;
but it stays where it was.
Edit: The problem isn't how absolute/relative works but which javascript values are the correct ones to use. Using DIV2.style.top = DIV2.style.top - DIV1.clientHeight moves it to the top... but clientHeight is not correct, because if DIV1 changes size, it moves DIV2 way too far upwards.
Edit: offsetTop seems to be zero.
An absolute positioned div inside a relative positioned one, will by default 'borrow' it's top and left position from the relative parent. That means that by setting left:0; top:0 the divs will share the same position.
If you want to move the second div up, you will have to set a negative top (i.e. top: -200px). The top and left properties are relative to the base position, not the body (unless the div isn't in a relative positioned parent, in which case the body is the base position)
If div1 is positioned relative, then the top and left values will move the div relative to where it would have been in the normal flow. So style.top = 10 would move it 10 pixels down from its normal position.
If the position was "absolute", the style.top = 10 would move the div to 10 pixels down from the div it is being positioned relative to (ie, a previous element that had position: relative, or the body of the document)