Is this possible, or do I have to use JavaScript to set modal height to body height? for example:
$('.modal').height($('body').height())
I can't use this CSS:
.modal{
position: relative;
height: 100%;
}
Because modal parent height is calculated according other children.
You can use CSS as you list above but use absolute positioning.
.modal {
position: absolute;
height: 100%;
width: 50%;
top: 0;
left: 0;
}
Just remember that the element will be positioned relative to it's first positioned ancestor.
So, if you want this to be positioned relative to the top left corner of the browser, make sure the modal element is not nested inside of another positioned element elsewhere on the page.
Related
Is there anyway I can make an HTML div move down while scrolling instead of moving up without using javascript? I know you can use window.onscroll = function() { } and have that move the position of an object while scrolling, but is there anyway I can move an object down with just CSS and HTML?
I think you want to retain your div on the viewport while scrolling down.
There are 2 ways for it.
Make the element position fixed and apply positioning to that element.
Make parent element position relative and make your div position sticky and apply positioning.
Positioning means adding any one of the top, right, bottom, and left properties.
.parent {
height: 1200px;
width: auto;
position: relative;
}
.floating {
position: sticky;
top: 10px;
width: 100%;
height: 60px;
background: black;
color: white;
}
<div class="parent">
<p>Hi this is parent</p>
<div class="floating">
This is floating element
</div>
</div>
What I'm trying to achieve is a div container that is responsive but the ability to overlay highlight fields that will stay in the same place based on the parent div. I want to be able to highlight certain areas of text or form fields but have the form be responsive. Here's a link to an example: http://www.codeply.com/go/nufYSSEMir
As you can see the highlight div is position: absolute; so obviously it's going to stay exactly where it's at. I've tried using percents as top and left values but it doesn't scale with the background image. I have a feeling that my two options are to either have the width as a static value and set the meta viewport to scale to the window size, or get crazy with some JS and maybe jQuery.
Thanks in advance for any and all suggestions.
As said by divix, you need to set position : relative to the parent div.
This will tell the browser that your highlight's position : absolute is absolute in reference to outerContainer.
Basically any position:absolute will look at the first parent that has a position set (whether it's relative, fixed, absolute etc) to calculate top|right|bottom|left offset. If you don't have any parent that has a position set, it will just take the body as a reference
Edit: In order the get the right responsivness try this :
body {
background-color:#ddd;
}
#outerContainer {
background: transparent url("http://scontent-ord1-1.xx.fbcdn.net/hphotos-xpl1/t31.0-8/s960x960/12605534_504076036438839_6108375615162000201_o.jpg") no-repeat scroll center top / 100% auto;
height: 960px;
margin: 0 auto;
max-width: 742px;
width: 100%;
position: relative;
}
#media only screen AND (max-width:742px){
#outerContainer {
height:0;
padding-top:129.5%;
}
}
#innerContainer {
background-color: rgba(0, 255, 0, 0.5);
border: 1px solid #000;
height: 8%;
left: 12%;
position: absolute;
top: 14%;
width: 30%;
}
Simply add position: relative; to the #outerContainer, it works for me.
I have this div that appears on loading pages:
<div id="divProcessing" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: transparent; z-Index: 2000;overflow:hidden; display:none;border:none;"/>
My problem is that on a page that has scroll bars the div is not expanded on all the page, only on screen size and i can access the content behind the div if i scroll.
I don't know how to expand or how to calculate the width/height of content page
I would use jquery, and you can get the height of the body element.
$(body).css('height');
So you could then do the following:
$('#divProcessing').css('height', $(body).css('height') );
Which then sets your div's height to the same as the body of your page.
Edit: You mentioned width specifically but I was thinking height, the same will work for width, just replace 'height' with 'width'
If the div is a direct child of body, you can try adding:
html, body {
height: 100%;
overflow: hidden; /* in case your content is floated */
}
Do you have a page online where we can see it?
I am using an old CSS trick to get a semi-transparent background for some content, without the content appearing semi-transparent. Here is the HMTL:
<div id="frame">
<div id="opacityFrame">
</div>
<div id="contentFrame">
<div>
<!-- Main Site Content Here -->
</div>
</div>
</div>
Here is the corresponding CSS:
#frame
{
width: 90%;
margin: auto;
position: relative;
z-index: 0;
}
#opacityFrame
{
background: #00ff00;
opacity: .15;
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
#contentFrame
{
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
}
My problem is that because #frame is position: relative, it's height does not dynamically expand with its content. Both #opacityFrame and #contentFrame are set to 100% height and width and they appropriately expand to fill #frame which is great. The issue is that I need #frame's height to grow with the contents of the child DIV of #contentFrame because that DIV's height dynamically adjusts with the content placed in it.
I ended up having to create a jQuery function:
function resizeFrame()
{
$('#frame').height($('#contentFrame > div').height());
}
NOTE: The reason there is a child DIV of #contentFrame is because #contentFrame's height always reads as zero for some weird reason. I'm assuming it has to do with its position being absolute.
This code works great and accurately resizes #frame's height to the height of the child DIV of #contentFrame. However, I do a lot of ajax that changes the content within that DIV. One solution would be to call resizeFrame() with EVERY ajax event but it just seems so tedious. Is there an event or something I can tie to that would execute this function without my explicitly having to call it? I tried the following events but they didn't seem to work; maybe I did them wrong.
$('#subFrame > div').resize()
$('#subFrame > div').change()
Neither of these seemed to fire when the contents of the child DIV were modified. Maybe I'm going about this the wrong way? I do not want to use transparent images for the background.
Try taking position: absolute off of the contentFrame but leaving it on the opacityFrame. That should cause it's parent to resize, and the opacityFrame to still overlay everything.
do you have to use opacity? If it's a solid color, consider RGBA or if it's not solid, consider a semi-transparent PNG. That way you can nest them.
I want to show a div which is always visible even as the user scrolls the page. I have used the CSS position: fixed; for that.
Now I also want to show the div at the right hand corner of the parent div.
I tried to use this CSS code to achieve the goal:
.test {
position: fixed;
text-align: right;
}
But it doesn't align the element on the right side.
My example page can be found here, the div element I want to align is called test under the parent class parent.
Is there any CSS or JavaScript solution to aligning the fixed position element on the right side of the screen?
You can use two imbricated div. But you need a fixed width for your content, that's the only limitation.
<div style='float:right; width: 180px;'>
<div style='position: fixed'>
<!-- Your content -->
</div>
</div>
Use the 'right' attribute alongside fixed position styling. The value provided acts as an offset from the right of the window boundary.
Code example:
.test {
position: fixed;
right: 0;
}
If you need some padding you can set right property with a certain value, for example: right: 10px.
Note: float property doesn't work for position fixed and absolute
With position fixed, you need to provide values to set where the div will be placed,
since it's a fixed position.
Something like....
.test
{
position:fixed;
left:100px;
top:150px;
}
Fixed - Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties
More on position here.
Trying to do the same thing. If you want it to be aligned on the right side then set the value of right to 0. In case you need some padding from the right, set the value to the size of the padding you need.
Example:
.test {
position: fixed;
right: 20px; /* Padding from the right side */
}
make a parent div, in css make it float:right
then make the child div's position fixed
this will make the div stay in its position at all times and on the right
I use this to put a div (with its stuff inside) at the bottom-right of the page with some margin:
.my-div-container{
position: fixed;
bottom: 1rem;
left: 90%;
}
The best solution I found is to give the element a left margin . The elements below it in left margin will be ckickable
#my_id{
margin-left: 75%;
position:fixed;
right: 0;
}
<div id="my_id" >
My Text
</div>
Stack Overflow
Here's the real solution (with other cool CSS3 stuff):
#fixed-square {
position: fixed;
top: 0;
right: 0;
z-index: 9500;
transform: rotate(-90deg);
}
Note the top:0 and right:0. That's what did it for me.
Just do this. It doesn't affect the horizontal position.
.test {
position: fixed;
left: 0;
right: 0;
}