Position absolute div with reference to its parent parent - javascript

I have structure of three nested div
<div id="div1">
<div id="div2"> // has come content
<div id="div3">
// has some content with a form
</div>
</div>
</div>
All three div are absolute.Now I want the #div3 to be positioned according to #div1
if I #div3 is right:0px; then it should go to the right most of #div1
Note Please Don't ask to Correct the structure as it not developed by me and #div1 and #div2 are not in my control.
only Idea I have is to move the #div3 and append it to #div1 by jQuery.but I will like to have a pure CSS solution if possible. else i will go with the jQuery append
I thought I have explained well css will not be required. but hear it is
CSS
#div1 {
position: absolute;
display: none;
}
#div2
{
position: absolute;
top: 85px;
left: 56px;
width: 300px;
z-index: 2;
}
#div3 {//what ever you want to write to make it relative to #div1 }

If the position of div3 is absolute, it'll look in his ancestors until it finds a parent that's relatively positioned. To achieve what you want you'd need:
#div1 { position: relative; }
#div2 { position: static; } // default positioning for DIVs
#div3 { position: absolute; right: 0; }

Use position() method to get DIV2 position relative to it's parent DIV1 and use those values as negative in order to make DIV 3 appear to be in div1.
Following should place DIV3 in top left corner of DIV1
var div2Pos= $('#div2').position();
$('#div3').css({top: 0-div2Pos.top, left: 0-div2Pos.left})
DEMO: http://jsfiddle.net/q5RgZ/1
Another simple solution would be to move div3 out of div2 and place in div1
$('#div3').appendTo('#div1')

Setting #div1 position to relative should do the trick. But if using position:absolute in #div1 is required, then the element containing these three div tags should use position:relative . Like this:
HTML:
<div id="container">
<div id="div1">
<div id="div2"> // has come content
<div id="div3">
// has some content with a form
</div>
</div>
</div>
</div>
CSS:
#container {
position: relative;
}

Related

Overflow hidden property is not working with parallax scrolling

The overflow hidden property is not working as expected when trying it with parallax scrolling.
I am trying to accomplish parallax scrolling with JavaScript everything should work fine but when i try to set the overflow to hidden the image still appearing outside the div
Here is the HTML
<div id="page2">
<p id="bb">The title</p> //Some title
<div id="bg"></div> //Blue box in front of the image(design decision)
<img src="img/Food.jpg" alt="prlx" id="prlx"/> //The image which has the proprety
</div>
Here is my JavaScript eventListener and the function :
window.addEventListener("scroll",func,false);
function func(){
prlx_lyr_1 = document.getElementById("prlx");
prlx_lyr_1.style.top = (window.pageYOffset/4)+"px"
}
And this is my CSS for the image which i am trying to hide the overflowing parts :
#page2 img{
position:relative;
top:-300px;
}
And this is the CSS of the div which contain the image
#page2{
overflow:hidden;
height:250px;
}
There is some extra CSS for the #bg
Update:
here is a
You can notice that the overflow is not hidden the container div is the blue side in the page
Here is a js fiddle
So the issue is position: fixed breaks the element out of the flow of the document and unlike absolute it can't be contained by using relative on a parent. Instead you should set this image as a background set to fixed on a div that is position: absolute:
HTML
<div id="page2">
<p id="bb">The chef</p>
<div id="bg"></div>
<div id="bg-image"></div>
</div>
CSS
#page2{
overflow:hidden;
height:250px;
position: relative;
}
#bg{
background: #33c1c9;
height:250px;
width:100%;
position:relative;
z-index:74897;
opacity:0.4;
}
#bg-image{
background: url("http://im47.gulfup.com/1Y5tcL.jpg") no-repeat fixed;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
FIDDLE

Make Div fixed bottom & scrollable

I want to have a long page, with a fixed top 100px div, and a fixed 50px bottom div. However, I want the bottom div to scroll as you scroll down the page.
Its hard to explain, but the best example of this is on the front page of PayPal.com
On the first page load, the bottom div looks like it is fixed, and as you adjust the height of the browser window, that div stays at the bottom. Yet as you scroll down the page it is not fixed.
Can anyone explain how they have done this? I am trying to re-create something similar, but cant see how they have managed it.
As far as I can see they have this html...
<div id="fixed-top">
<header class="table-row">
// header content
</header>
<div class="table-row table-row-two">
// Video content
</div>
<div class="table-row">
//bottom content
</div>
</div>
And this CSS...
#fixed-top {
height: 100%;
width: 100%;
display: table;
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.table-row {
display: table-row;
}
But that alone doesn't do it. I also can't see any js thats getting window height and applying it to the main fixed div.
Help! :)
EDIT:
Have just found a way to do it with javascript, controlling the height of the middle row using the window height, minus the 150px for the header and third row.
jQuery(document).ready(function(){
$('div.table-row-two').css({'height':(($(window).height())-150)+'px'});
$(window).resize(function(){
$('div.table-row-two').css({'height':(($(window).height())-150)+'px'});
});
});
But saying that, Zwords CSS only method seems like a winner.
From what I understand, you are looking for something like a sticky footer. So basically if the content is not enough, the footer should go sit at the bottom like its fixed, but if content comes in, it should scroll down like other content.
Try this - http://css-tricks.com/snippets/css/sticky-footer/
First off, you'll need to set the height of the body and html tag, otherwise the table won't take the full screen. Then I altered your code, made it a bit easier.
HTML:
<div id="fixed-top">
<header>
// header content
</header>
<div>
// Video content
</div>
<div>
//bottom content
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
#fixed-top {
display: table;
width: 100%;
height: 100%;
}
#fixed-top > * { /* makes all the direct children of #fixed-top a table row*/
display: table-row;
background: lightblue;
}
#fixed-top > *:nth-child(1) {
background: lightgreen;
height: 40px;
}
#fixed-top > *:nth-child(3) {
background: lightgreen;
height: 25%;
}
You can either set the height to a fix height (in px) or percentages. If you only give two of the three rows a height, the third one will automaticly fill up the rest space.
Also, check this demo.
Check this fiddle / Fullscreen
Using display:table;,display:table-row;,min-height to adjust to screen
HTML
<div class="wrapper">
<div class="row">menu</div>
<div class="row">content</div>
<div class="row">footer</div>
</div>
<div class="wrapper">
<div class="row">content1</div>
<div class="row">content2</div>
<div class="row">content3</div>
</div>
CSS
html,body,.wrapper{
width:100%;
height:100%;
margin:0px auto;
padding:0px;
}
.wrapper{
display:table;
border:1px solid black;
}
.wrapper .row{
display:table-row;
background-color:rgb(220,220,220);
}
.wrapper .row:nth-of-type(1){
min-height:15px;
}
.wrapper .row:nth-of-type(2){
height:100%;
background-color:white;
}
.wrapper .row:nth-of-type(3){
min-height:15px
}
You can do this easily with jQuery using $(window).height() and subtracting your footer/header's heights. See Fiddle for an example.

Hide and Show div in same level

I have my jsp page like this :
EDIT : http://jsfiddle.net/F4nA9/
<div id="fonctiondetails">
[...]
<img onclick="showoption()" ... />
[...]
</div>
<div id="addqualite" style="display: none;">
[...]
</div>
And my jQuery function to hide and show my DIVs
function showoption() {
$( "#fonctiondetails" ).hide('slide',1000);
$( "#addqualite" ).show('slide',1000);
}
The problem is that when my first div disappear the second div come from the bottom and go up and replace the first div, but me I want her to display in the same level as the first div and come from the left or the right of the first div.
Your divs must be in same place/level in design;
Think that:
<style>
#fonctiondetails{
position: absolute;
top:0;
left:0;
}
#addqualite{
position: absolute;
top:0;
left:0;
display:none;
}
</style>
In that case, 2 divs are in same place and so while the firs div being disappear, second div will be shown. And they will be no movement effect because they are in the same place.
Example style was to show you the place of div. But you have to design your divs according to your template/page.
Try using position style (absolute, relative, static or fixed)
I think this will be helpfull
You can see this http://jsfiddle.net/modaloda/F4nA9/1/
div {
position: absolute;
top: 0;
}
#fonctiondetails {
z-index: 1;
}
You can use setTimeout:
setTimeout(function(){
$( "#addqualite" ).show('slide',1000);
},200);
I made my own solution, I create a container div like this:
<div id="animateslide">
<div id="fonctiondetails"> ... </div>
<div id="addqualite" > ... </div>
</div>
and css file like this:
#animateslide {
position: relative;
[...] /* it's good to specify a height of your choice */
}
#fonctiondetails {
position: absolute;
z-index: 1;
[...]
}
#addqualite{
position: absolute; /* even if we did'nt specify position it's work */
[...]
}

How to set a position of an element 5px below a fixed position element

Ex: the 1st Div:
<div style='position: fixed; width=100%'> ....</div>
Now i want to put another Div 5px right below the previous Div. So i did
<div style='padding-top:5px; width=100%'> ....</div>
But it didn't work, seem padding-top compare itself to the top of window but not to its previous Div. If i remove the position: fixed; in the 1st div then it will be fine, but i don't want that.
I want the 1st Div got position fixed & the 2nd Div's position is 5px right below the 1st one. So how to do that?
position: fixed removes the element from the regular flow. You can't use flow positioning anymore.
There are likely proper ways to do what you want, but I don't know what you want because you told us about Y, not X: https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem
I think I understand what you want. If you always know how high the header is you can just add an offset, padding and margin should both work.
<div id="header" style="position: fixed; top: 0; width: 100%; height: 20px;">
<div id="content" style="margin-top: 20px;">Content goes here</div>
If the header can change height adjust your CSS so that the header and content change their height and content respectively.
<div id="container" class="adjustheaderheight">
<div id="header">
<div id="content">Content goes here</div>
</div>
#header { position: fixed; top: 0; width: 100%; height: 20px; }
#content { margin-top: 20px; }
#container.adjustheaderheight #header {
height: 40px;
}
#container.adjustheaderheight #content {
margin-top: 40px;
}
If your header changes height dynamically you'll need to change the content offset dynamically although I would strongly advise you not to have a dynamic header.
Have you tried margin-top instead?
margin-top: 5px
You might wanna include both these divisions within another division and make this new outer division position fixed. Like this --->
<div style='position: fixed; width=100%'>
<div style='width=100%'> ....</div>
<div style='padding-top:5px; width=100%'> ....</div>
</div>
put the two divs in a wrapper posioned fixed. Also you have invalid css syntax width=100% must be width:100%.
<div style="position: fixed;">
<div style=' width:100%'> ....</div>
<div style='margin-top:5px; width:100%'> ....</div>
</div>
however, this makes the 2 divs fixed... and this might not be what you want. You could do the following:
<div style='position: fixed; width:100%'> ....</div>
<div style='position:absolute; width:300px;height:200px;top:300px;left:300px'> ....</div>
css values are just for example...
UPDATE:
is this what you want?
http://jsfiddle.net/kasperfish/K8N4f/1/
<div id="fixed">fixed</div>
<div id="widget" >content <br>hjgjhgjhgjhgh</div>
#fixed{
width:100%;
position:fixed;
background:yellow;
height:50px;
z-index:2;
}
#widget{
background:blue;
position: absolute;
top:55px;
margin-top:15px;
width:100%
}
If you have tried Margin and it doesn't work feel free to use padding as long as you don't have a background color or image within the div then you won't be able to tell the difference between the two ways of doing this.

Creating a div whose display dimensions are different than it's contents dimensions

I would like to be able to make a div that allows users to dynamically add content to a specific spot in say a 100px by 200px area but would only display a window of 50px by 100px for the user to place the content. The user would scroll to reach the rest of the div. How can I do this using either CSS or JavaScript?
REVISE
I want my div's height and width to start as 100x200 but only display a window with dimensions of 50x100, with a scroll bar that lets the user reach the rest of the div.
Try this:
HTML:
<div id="window">
<div id="content">
</div>
</div>
CSS:
#window {
width: 50px;
height: 100px;
overflow: auto;
}
#content {
width: 100px;
height: 200px;
}
CSS:
#myDiv {
width:100px;
height:50px;
overflow:auto;
}
Overflow works the magic here.
Html:
<div id="myDivWindow">
<div id="myDiv">
</div>
<div>
Css:
#myDivWindow {
width:50px;
height:100px;
overflow:auto;
}
#myDiv {
width:100px;
height:200px;
}
Add your content to myDiv
The easiest way to do this would be to just use 2 div. Like this...
<div style="width:100px;height:50px;overflow:auto;">
<div style="width:200px;height:100px;overflow:none;">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
</div>
If you don't want to have nested div elements like this in you html you could add a class or id and dynamically add and style the second div with JavaScript.

Categories