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)
Related
I have 3 separate divs.
First one 100vw and 100vh.
Second one has 100vw and 100vh and it has a div(".move") inside of 400vw and 100vh - which will be moving later on to the left and to the right.
Third one is 100vw and 100vh.
When I scroll down, I want the second div to get position fixed. (at this point div third jumps into div second position).
Then I want to scroll to the right of div ".move".
At the end of scroll I want to add position absolute to div second and keep scrolling down through div third.
I dont know how much should I keep adding to scrollX (or translateX(-?px) or left = -? , doesnt matter I guess) so it is equal to normal scrollY at the end.
Also when I scroll quickly it jumps to div third and div ".move" barely get scrolled.
I would like to do it either useing scrollbar or mousewheel.
It should look like in this page:
bitsens.com/
And this is my current code:
codepen.io/Baromaro/pen/yLLMWMM
(the code is so sad..)
I have a navigation (Sample Wireframe) which has a colored background. The nav items are in a list, and at different resolutions. As the font size changes the nav container's height also expands or contracts. However, I want one of these items (the middle one) to have a larger height and break the bounds of the container.
Is the cleanest way to do this to set the height of the container to be equal to the height of the other buttons using javascript, or will that still always cut off the larger nav item? I can't seem to break out one of the items from the bounds of the container without doing absolute positioning which completely takes it out of the flow of the other list items, and I want the height of the container to stay consistent with the rest of the buttons. Any thoughts?
Create the item with position:absolute set as a style property.
You may need to create another element next to it with the regular height that will be hidden behind it to keep the width reserved.
position:absolute
will do the trick but also consider about having an extra div (nested div) so it isolates from the bigger item.
As others said, position: absolute. It is important to note that an absolutely positioned element will have its origin point at the nearest element with position: relative (or the root element), so if you set the parent container to relative, the absolute menu item will start there.
I have <div> elements as pages, and "next" and "back" buttons to switch between them. When the "next" button is clicked, the current page fades out and the next page fades in, using jQuery. As I've been doing it so far, the only way to ensure that the divs sit on top of each other instead of sitting next to each other is to style them position:absolute. However, this forces the divs to also overlay anything else on the page that they would otherwise push out of the way.
Is there any way to make divs basically positioned absolute only relative to each other, and still act as though they are positioned relative to the rest of the page? I've tried putting them inside a container that is positioned relatively, but the divs overflow their container, making it more or less useless.
Edit:
Basic fiddle: http://jsfiddle.net/9AXS4/4/
Yes, I mix up $ and jQuery. I've been using jQuery a lot after calling jQuery.noConflict()
If your pages, as you call them, are of fixed width and height, then you can set their container to be position:relative and also have the width and height of the pages..
.container{
position:relative;
width:500px; /*the total width of a page, including padding and borders*/
height:400px; /*the total height of a page, including padding and borders*/
}
This way the container element will handle the pushing around of the other elements
Here is your corrected fiddle: http://jsfiddle.net/gaby/9AXS4/2/
(the width/height of the container must account for paddings and border on the page elements)
Also you were targeting the container with .pagecontainer instead of #pagecontainer (since you used an id)
Update (after comment about arbitrary heights..)
Since your pages height is not fixed, you will need to resort to jQuery to resize the container..
Here is a full demo : http://jsfiddle.net/gaby/9AXS4/7/
The divs can't be positioned absolute in relation to each other, but they can be positioned absolutely in relation to an outer div. The container that holds the page divs should have position: relative in order to contain the inner page divs that are absolutely positioned.
If there is unwanted overlap, you can use overflow: hidden or overflow: auto on the outer div to hide it, depending on whether or not you want to allow for scrolling. If you are going to use the overflow property, be sure to include a height and width so the browser knows where the overflow should be.
http://jsfiddle.net/vkTXs/
$(".page").each(function(){
jQuery(this).hide();
});
$(".page").first().show();
$(".next").click(function() {
jQuery(this)
.parent().fadeOut()
.next().fadeIn();
var page = $(this).parent().next();
resizeContainer(page);
});
$(".back").click(function() {
jQuery(this)
.parent().fadeOut()
.prev().fadeIn();
var page = $(this).parent().next();
resizeContainer(page);
});
function resizeContainer(page){
// get height of next page
var newPageHeight = $(page).height();
// add padding and border
newPageHeight = newPageHeight + 14;
$('#pagecontainer').height(newPageHeight);
}
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.
I'll try to explain what i'm trying to get. I've a div with position:fixed (at the bottom of a page) into that div, there is some other divs. What i want is to show another div (with absolute position) aligned to the right with those divs... in other words, i wan't to know the left position of the divs...
Relative to the document:
$('#ID').offset().left
Relative to its offset parent:
$('#ID').position().left
$('#ID').position().left