I have one button, when I click in this button one div generates in the body which has this css:
div#transparentDiv {
width: 100%;
background-color: rgb(0, 0, 0);
opacity: 0.7;
height: 100%;
position: fixed;
top: 0 !important;
left: 0;
z-index: 95;
}
and one div that has none css display, remove none display and get this css
.popUp {
color: #fff;
margin: 0 auto;
position: fixed;
top: 37px;
z-index: 98;
width: 61%;
background-color: #d8d8d8;
left: 0;
right: 0;
}
now my problem is this section, my div that fixed and i can't see full content,
and when I scroll page this div fixed and don't scroll down to see the lower height
What should I do?
Without any HTML this is realy hard to answer. Try to add
overflow: scroll;
or
overflow: auto;
To your fixed div. Then you can scroll the content of your div seperatly.
If you could scroll down to see the contents of a fixed div, then it would not be fixed would it?
try this:
.popUp {
position: absolute;
}
Related
I'm loading an image inside a div #popup, which is inside a main wrapper called #main
#mask {
display: block;
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.84);
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
overflow-y: auto;
overflow-x: hidden;
}
and
#popup {
display: block;
position: absolute;
top: 30px;
max-width: 960px;
z-index: 9999;
background-color: #efefef;
height: auto;
left: 80px;
right: 80px;
margin: 0 auto;
margin-bottom: 80px;
}
with jQuery i load an image inside #popup and i can scroll it up and down, but when i close the overlay and I load another image, the image is not visible form the top...it maintains the same scroll position when i left/close the first image...
dunno why...how can I reset it without resetting the whole page?
$('#popup').scrollTop(0);
seem is not working...
You are trying to reset the scrolling of the wrong div, you should reset the scroll of the div that has the overflow property set.
In this case the div that handle the scroll is the #mask div, so apply the scrollTop() the #mask element.
$('#mask').scrollTop(0); will do the work.
Make sure the element (#mask) is already visible when calling the scrollTop() will not work.
After a lot of research, I am unable to find a proper solution for the shifting to the right of fixed positioned elements, cover images, and standard content, when a modal window is open.
Note: I am looking for a general, clean solution, not an hardcoded fix that would work just on a specific layout.
Does anyone know how to fix this issue? Please refer to this example: http://codepen.io/microcipcip/pen/kXdRWK
body {
height: 2500px;
&.-modal-open {
overflow: hidden;
}
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 0;
background: #FF0000;
}
.modal {
overflow-x: hidden;
overflow-y: scroll;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity .2s ease-in-out;
body.-modal-open & {
opacity: 1;
}
}
The solution is very simple and a pure css fix:
.-modal-open .fixed,
.-modal-open .content {
overflow-y:scroll;
}
..however, this requires that your content is styled differently. You should never use a margin for your content, but rather wrap it in a container and use padding instead.
The scrollbar's width isn't always 17px... 17px is for Firefox, but 15px for chrome, sometimes IE doesn't even have a scrollbar width depending on the code.
Here is the updated pen:
http://codepen.io/scooterlord/pen/KgKLwB
edit: forgot to say, that this is a cross-browser solution and works flawlessly everywhere I tested it. If the browser is mobile, then no change of width happens anyway from the addition/removal of the extra scrollbars and depending on the browser the newly created scrollbars for the content/fixed elements is always the same as the initial body scrollbar.
The main trick is to not use body as your content wrapper. Use a dedicated div as wrapper and place your modals outside so the scrollbars don't interfere with each other.
var $btnShow = document.querySelector('.show');
var $btnHide = document.querySelector('.hide');
var $body = document.querySelector('.modal');
$btnShow.addEventListener('click', function() {
$body.classList.toggle('-modal-open')
});
$btnHide.addEventListener('click', function() {
$body.classList.toggle('-modal-open')
});
.wrapper {
position: fixed;
top: 0;
left: 0;
bottom:0;
right:0;
overflow: auto;
}
.content {
background: url('https://www.dropbox.com/s/m16kxhb2jg5jwwh/bear-800x450.jpg?dl=0&raw=1');
background-size: cover;
background-position: center center;
height: 2500px;
width: 100%;
}
.clickme {
position: fixed;
top: 50%;
left: 50%;
padding: 10px;
border: none;
background: #000000;
color: #ffffff;
text-transform: uppercase;
transform: translate(-50%, -50%);
}
.clickme:hover {
background: grey;
cursor:pointer
}
.modal {
overflow-x: hidden;
overflow-y: scroll;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
display: none;
transition: opacity .2s ease-in-out;
z-index: 3;
}
.modal.-modal-open {
display:block;
}
.modal-content {
min-height: 1500px;
margin: 100px;
background: url('https://www.dropbox.com/s/u520y7yo711uaxi/poster2.jpg?dl=0&raw=1');
background-size: cover;
}
<div class="modal">
<div class="modal-content">Content
<button class="clickme hide">Toggle Modal HIDE!</button>
</div>
</div>
<div class="wrapper">
<div class="content">
<button class="clickme show">Toggle Modal SHOW!</button>
</div>
</div>
How about adding 17px right-margin to the body each time a modal is opened. That would emulate the space that was reserved for the scroll bar. (17px is the width of standard browser width)
body.-modal-open {
margin-right: 17px;
}
meanwhile, for for fixed element you recalculate the width;
.-modal-open .fixed {
width: calc(100% - 17px);
}
There is still one problem though, the CSS background image is still shifted, the solution is simply placing it in a div container instead of the body.
I'm trying to put div with position:fixed inside div with position:relative.
This is CSS:
#wrapper {
background-color: #199eaf;
height: auto;
left: 0;
min-height: 100%;
position: relative;
text-align: left;
top: 0;
width: 100%;
}
.menu-space {
background: #fff none repeat scroll 0 0;
height: 174px;
left: 0;
overflow: hidden;
padding: 43px;
position: fixed;
top: 0;
transform: skewY(-10deg);
width: calc(100% + 100px);
z-index: 800;
}
This for some reason doesn't work as I expect. My div goes inside next div in #wrapper div (See screenshot: http://www.awesomescreenshot.com/image/445294/fb3d41bfb92a0f76d60266ed0ac4f0a9) I can make this work just if I use one of this two solution for .menu-space div
transform: skewY(-10deg) translate(0px, -101px);
or
top: -170px;
But I really don't want to use those minus values. Can someone please help me to find better solution?
This is how menu should look
http://www.awesomescreenshot.com/image/445297/e799ee584ead6007b9fe16628ccc15bc
and on scroll:
http://www.awesomescreenshot.com/image/445300/cee6600490bab7e58a479da23ac9974a
Thank you!
By default, transforms happen from the center of the element. Your skew is twisting the element from its center, causing the left side to drop and the right side to rise.
Set transform-origin: top left (or 0 0 if you prefer) and you can get rid of the negative top or translate.
.menu-space {
background: #fff none repeat scroll 0 0;
height: 174px;
left: 0;
overflow: hidden;
padding: 43px;
position: fixed;
top: 0;
transform: skewY(-10deg);
transform-origin: top left;
width: calc(100% + 100px);
z-index: 800;
}
See MDN
The reason for this is the transform: skewY(-10deg);. As per the W3C spec, if position: fixed; is used on an element inside an element with a transformation applied to it, the fixed-position element is positioned relative to that transformed element.
I have a popup window in which an element called fade is supposed to extend to the full width of the screen (it does this when there is no scrollable content). However when content exceeds 100% of the browser window it does not extend to 100% of the page height.
If i set html, body { height: 100%; overflow-y: hidden; } I get the result I want but then I get 2 scrollbars on the right hand side.
http://jsfiddle.net/Dpqg5/
HTML
<div id="fade"></div>
<div id="popup"></div>
<span id="open">Open Box</span>
CSS
#fade { display:none;width: 100%; min-height: 100%; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; z-index: 1;}
#popup { width: 200px; height: 300px; background-color: #ccc; position: absolute; top: 30px; left: 50%; margin-left: -100px;display:none; }
#open { cursor: pointer; }
Any ideas on how to get this element to extend fully to the height of the web browser even when there is more scrollable content?
set your fade css to:
#fade {
display: none;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
I have a div at the top of my site which is 100% wide and in a absolute and fixed position. The code for it is like:
div.header{
height: 60px;
width: 100%;
position: absolute;
position: fixed;
top: 0px;
left: 0px;
background-color: #eeeeee;
}
Now everything in that works, but when users scroll down the site content appears behind this. Is there a way that I can prevent this from happening?
remove position: fixed;
it should be like
div.header{
height: 60px;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
background-color: #eeeeee;
}
If you want to make it fixed than remove position:absolute. both will not work together.
you have position:absolute and fixed both together, but fixed will override the position because it is after absolute.
Now if you want to appear any element above of other and it has a position: absolute or fixed you can use z-index, heigher z-index element will cover up the lower z-index element.
A div element that needs to be displayed on front should have a higher z-index value than the element that needs to be behind.
eg.
div.header{
....
....
z-index:9999;
}
div.normal{
....
....
z-index:9998;
}
On my website I have a div footer that always appears at the bottom. I use the following code - It may come in handy in the future or for someone searching for a similar query.
#bottom
{
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
z-index: 999;
background-color: rgb(30,122,212);
border-top:3px solid black;
border-bottom:1px solid black;
-moz-box-sadow: 0 0 10px white;
box-shadow: 0 0 10px white;
}
I hope this helps.
It is a silly question. Just remove the position: fixed; property from your class.