I have a div that I want to completely cover a page. I don't want anything on the page to be showing. The div should overlay on the page and hide everything on it. To create such an overlay I use the following CSS:
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
}
But if the page that the overlay is over is too long, some parts of the page still shows. How can I make it so that the div completely covers the page? Setting the position to fixed doesn't help because the overlay is multi pages long and the scrollbars get wracked.
The CSS that you're going to want to use for the overlay div is this.
.overlay {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
}
This should completely cover the page with a black div.
Related
What I am trying to do should be simple. But somehow I am not able to find an answer to it.
Here is my codepen:
https://codepen.io/mvsimple/pen/wvgbvgQ
HTML:
<div class="parent">
<iframe class="child" src="https://reesgargi.com/"></iframe>
</div>
CSS
.parent {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 62.5%;
}
.child {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
I want the iframe to fit inside the div (so that its width = parent div width)
But iframe loads the page zoomed in, from the center.
I have tried using CSS (Flexbox, Table display, and W3S trick
But I am helpless. I tried the iframe resizer library but it had its own issues. (Dragging)
Please advise my fellow programmers.
Finally found a solution!
All I had to was to scale down the iFrame and set its width equal to the original size (source of that iframe).
.child{
width: 1280px;
/* Magic */
transform-origin: 0 0;
transform: scale(0.703);
}
I have the following website, where a parent div that scales dynamically with browser size contains a child div with an image. The desired effect is as follows: https://shibori-demo.squarespace.com/workshops-shibori/
My pug code is as follows:
article.eventlist-event.eventlist-event--upcoming.eventlist-event--hasimg.eventlist-hasimg.eventlist-event--multiday
a.eventlist-column-thumbnail.content-fill(href=`${link}`)
img(src=`${img_src}`, alt=`${img_src}`
, style='position: static; float:left; width: 100%; object-fit: contain'
)
This code achieves the following effect (the parent div is red for effect): https://lingxiaoling-1.appspot.com/code.
Some examples:
In conclusion I would like the images to be:
1. centered relative to the parent div
2. resize according to the size of the parent div so that it fills the parent div
3. does not overflow the parent div.
There is couple solutions.
a) The easiest way to make it work is to use backgrund-image instead of img tag:
.image {
background-image: url(url-to-image);
background-size: cover;
}
b) If the image proportions are always the seme, you make it work with img:
.parent {
position: relative;
}
.img {
position: absolute;
height: 100%;
width: auto;
top: 0;
left: 0 // or if you want to center it left: 50%; transform: translateX(-50%)
}
c) or you can make a parent the same width-height ratio as parent:
.parent {
width: 100%;
height: 0;
padding-top: cacl(100% * (width of pic / height of pix));
position: relative;
}
.img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
There are probably many others.
I cannot enter your website, and you didn't provide enough of your markup and styles to reproduce exact problem, so this is all i can recommend from what you wrote above.
If neither solution will solve your problem, you will need to post more markup and css, to get help.
I am trying to make my site responsive.But no matter how much I scroll it still keeps me on the same div element.I am using a plugin called jquery-momentum-scroll.js and a plugin called vide.js.The wrapper covering the whole is given below-
#main {
height: inherit;
bottom: 0px;
transition: transform 1.2s ease-out;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
padding: 0px;
z-index: 2;
display: block;
backface-visibility: hidden;
}`
The element that is showing no matter how much I scroll is given below-
#banner_wrapper {
margin-top: 55px;
width: 100%;
height: 900px;
position: relative;
top: 0;
left: 0;
opacity: 0.4;
z-index: 0;
}
I have tried removing the "position: fixed;" property but still that did not do the trick.But when I resize the browser it shows fine.The link of the site is given below-
https://robustious-methods.000webhostapp.com/
The reason the #main section is taking over the view-port no matter where you scroll, is because you are using position: fixed; for the element's positioning.
With position: fixed, this takes the element out of the flow of the document, and fixes it relative to the screen. In this case, you've set it to take up 100% of the width and using top: 0; bottom: 0; in your styling, you're telling it to take up 100% of the height also.
If you want to keep the element in the flow of the document, change position: fixed to position: relative; on the #main selector, or remove it completely.
If you'd like to maintain the full height banner, in the #banner_wrapper selector, remove height: 900px; and add height: 100vh;.
More reading about CSS positioning here.
I have a HTML5 code. It has a parent div, and two child div. The parent div takes the whole page and each child div takes half a page. I add some images to the left div and some to the right div. Now I need to add an image to the parent div and keep the images on both left and right child divs visible, i. e I want all images super imposed and visubale.
What is the easiest way of doing this?
Code is like this:
<div id="parent"... >
<div id="leftChild">... </div>
<div id="rightChild">... </div>
</div>
Something like this?
http://moody.es/nons/kek.html
View page source to see the code.
The parent image has position: absolute; and I've the set the children's <img> to have z-index: 1;. When using z-index, the element in question must be positioned, hence the position: relative;
Depending on what you are doing you may need to make parent container relative or you can keep it as it is!
#parent{
width: 100%;
height: 100%;
position: absolute;
background-image: url("http://www.slate.com/content/dam/slate/articles/health_and_science/science/2015/07/150730_SCI_Cecil_lion.jpg.CROP.promo-xlarge2.jpg");
opacity: 0.75;
z-index: 9;
}
#leftChild{
width: 250px;
height: 125px;
position: absolute;
top: 0px;
left: 0px;
background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQBUBNygUQANzDPmF45jMi81XQ-nJ70Zw4LGvfpvpTLehLNjWZK8w");
z-index: 0;
}
#rightChild{
width: 250px;
height: 150px;
position: absolute;
top: 0px;
right: 0px;
background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSMc12mb4F7OWtwX_r9Sry0SOQgme7GUwXTHVhIipN2WkCWpGZnNQ");
z-index: 0;
}
#parent, #leftChild, #rightChild{
background-repeat: no-repeat;
background-size: 100% 100%;
}
<div id="parent"... ></div>
<div id="leftChild">... </div>
<div id="rightChild">... </div>
My fixed footer has an arrow icon on top of it. Clicking the arrow should "lower" the footer below the page until only the arrow is visible. Clicking it again should bring back the footer.
I tried playing with the bottom value but it doesn't hide the footer, only pushes it below while the page becomes taller to make room for it:
$('#footer_arrow').toggle(function() {
$('#footer_wrap').css('bottom', '-84px');
}, function() {
$('#footer_wrap').css('bottom', '0');
});
I want the same but with the footer actually disappearing below the page with just the arrow visible on top of it.
MARKUP:
<div id='footer_wrap'>
<footer>
<div id='footer_arrow'></div>
<div>
content
</div>
</footer>
</div>
CSS:
#footer_wrap {
position: absolute;
bottom: 0;
height: 84px;
}
footer {
position: absolute;
bottom: 0;
z-index: 9999;
position: relative;
}
#footer_arrow {
position: absolute;
width: 61px;
height: 23px;
top: -23px;
left: 50%;
background: url(images/footer_arrow.jpg) 0 0 no-repeat;
z-index: 9999;
cursor: pointer;
}
A couple things. First off, I recommend using toggleClass() instead of toggle(). That way, you can just add a class with the required CSS, and toggle it using toggleClass(). This way, you can change any styles necessary from pure CSS, instead of making the modifications in the JavaScript code. However, the toggle() from jQuery's event handling suite that you are currently using will work just fine nonetheless.
Secondly, to move the footer off screen, you'll need to use fixed positioning instead of absolute on #footer_wrap. Otherwise, the bottom is moving relative to the page, which means it just extends it. However, with fixed, the element is positioned at a fixed point in the viewport, which can be moved off screen without extending the page.
$('#footer_arrow').click(function() {
$('#footer_wrap').toggleClass('down');
});
#footer_wrap {
position: fixed;
bottom: 0;
height: 84px;
}
footer {
position: absolute;
bottom: 0;
z-index: 9999;
position: relative;
}
#footer_arrow {
position: absolute;
width: 61px;
height: 23px;
top: -23px;
left: 50%;
background: url(http://www.placehold.it/61x23) 0 0 no-repeat;
z-index: 9999;
cursor: pointer;
}
.down {
bottom: -84px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='footer_wrap'>
<footer>
<div id='footer_arrow'></div>
<div>
content
</div>
</footer>
</div>
What You have to do imho is not .toggle() a #footer_arrow element. You need to .toggle() a #footer_wrap element after clicking on #footer_arrow
Look into this fiddle: http://jsfiddle.net/tdcrsn2j/
I've changed Your HTML & CSS a little, but You can bring it back. It was done just to show case.
go with this
when you want to show
$('#footer_wrap').css({"display":"block"});
when you want to hide
$('#footer_wrap').css({"display":"none"});