I'm trying to make a div that stretches over the screen and that the user needs to click to dismiss. It works well on computer and Android phones but not on the lesser unit iPhone.
Here is the code:
.hidden-overflow {
overflow: hidden;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150%;
z-index: 10;
background-color: #FFF228;
}
.overlay.ng-hide-add {
transition: .8s linear all;
height: 100%;
overflow: hidden;
}
.overlay.ng-hide-add-active {
height: 0;
}
<div ng-if="showOverLay">
<div class="overlay" ng-init="overlayShow()" ng-click="overlayRemove()" ng-hide="hideOverlay">
<h1 class="header" data-translate>Welcome!</h1>
<h2 class="header" data-translate>JADA JADA JADA <br>Click to continue</h2>
</div>
</div>
It seems like its the overflow that isn't working. How can I fix this?
Since you're already using an absolute positioned element, I would disregard height and width entirely and stretch the image to the entirety of the page using positioning:
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
#overlay {
background: tomato;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<body>
<div id="overlay"></div>
</body>
Going a step further, you likely want the overlay to not scroll away on longer pages. For this, use position:fixed. This only has the disadvantage of scrolling still being enabled; so if a user scrolls, the overlay will look correct, but once they click it away, they will end up in the middle of the page. Addressing this requires a JS solution that goes beyond the scope of this question.
Related
I have the following setup:
HTML
<div>
<img src="https://placehold.it/300x300" />
</div>
CSS
div
{
position: absolute;
top: 0;
right: 0;
height: 100%;
}
img
{
height: 100%;
}
When I load the page it renders correctly. However, if I adjust the height of the browser, the left side of the image remains in place while the image expands outside (or shrinks inside) of the viewport.
If I refresh the page then it immediately redraws correctly. The issue appears to be present in all browsers.
I found the following question but not sure if the issue is quite the same. The non-JS solutions didn't work; I didn't attempt any of the JS suggestions.
Does anyone why this might be happening and know of a fix (using CSS) to make the div/image redraw when I resize the browser?
Its because the browser doesnt redraw the div as it does not know it suppose to be 100% wide.
Try this setup:
div
{
position: absolute;
top: 0;
right: 0;
height: 100%;
width:100%;
}
img
{
height: 100%;
position: absolute;
top: 0;
right: 0;
}
Check out this fiddle: https://jsfiddle.net/ash06229/z55827t9/
div
{
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100%;
}
img
{
max-height: 100%;
max-width: 100%;
}
I have a little pseudo modal I am building for my app that takes over the screen for a moment when a user clicks the button. I have it set as position fixed so it can overtake the entire screen infront of the user. I have it show and hiding right now with just toggling between display: block and display: none, my css right now just looks like so :
(SCSS) :
.sort-fullscreen {
display: none;
top: 0;
left: 0;
right: 0;
height: 100vh;
width: 100vw;
background-color: $modal-bg-color;
position: fixed;
z-index: 101;
transition: all 0.5;
&.open {
display: block;
}
}
And there is just a
<div class="sort-fullscreen">
... users content
</div>
Sitting at the bottom of my page.
So this works fine, however I am trying to figure out if there is a way to animate the position fixed coming onto the page - perhaps sliding on and off?
Initially - I tried something like this
.sort-fullscreen {
display: block;
top: 0;
left: -100%;
right: 0;
height: 100vh;
width: 100vw;
background-color: $modal-bg-color;
position: fixed;
z-index: 101;
transition: all 0.5;
&.open {
left: 0%;
}
}
However, this does not seem to work for me. I cannot seem to find a clean way to animate a position fixed onto the page. Any help on how to achieve this would be appreciated. Thanks!
Your code seemed to work for me, albeit after adding 's' in your transition time:
transition: all 0.5s;
Fiddle: https://jsfiddle.net/dt2j6872/1/
I have my resume in an iframe div that overlays my portfolio section when a link in my nav is clicked. I have an "X" image for user to click to close overlay, and I want to place it to the right of the resume iframe (ie: it butts up against the outer right edge of the iframe).
I can't seem to figure out how to do this - I tried using various different float, positioning and margin setups but the closest I can get is where the "x" is on the right side but its position moves with the window rescaling. I would like for it instead to "stick" to the right edge of the resume and stay there! Is there a way to do this? Here is my code:
HTML:
<header>
<nav></nav>
</header>
<div id="resume-overlay">
<div id="resume">
<iframe src="resume.html"></iframe>
<img class="button" src="img/x-button.png">
</div>
</div>
<div id="portfolio">
</div>
CSS:
header {
height: 80px;
width: 1600px;
position: fixed;
top: 0px;
z-index: 1;
background-color: white;
margin-left: 100px;
}
#resume-overlay {
display: none;
position: fixed;
z-index: 2;
top: 80px;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, .9);
}
.resume {
position: relative;
max-width: 1600px;
}
iframe {
position: absolute;
width: 100%;
height: 100%;
}
.button {
position: absolute;
z-index: 3;
right: 0;
padding-right: 10%;
}
And my jQuery if needed:
$(function() {
$('#overlay').on('click', function() {
$('#resume-overlay').fadeToggle('fast');
});
$(".button").click(function(event) {
event.preventDefault();
history.back(1);
$('#resume-overlay').fadeToggle('fast');
});
});
To illustrate, I want to move that blue X to the right edge of the white box
I'm not sure they type of error you're seeing yet, but your code here:
.button {
position: absolute;
z-index: 3;
right: 0;
padding-right: 10%;
}
Is all I think you need to address, try adding
top: 0;
right: 0;
And remove the padding, work with those values to get the button where you want it, and it shouldn't move from those setting regardless of window size.
How do you make a background img that would:
Stretch across the window horizontally
Have a fixed height
Crop height when it's bigger than the content's height (do not shrink)
Currently I have this code that implements #1 and #2 but I can't seem to make it do #3:
<img class="background" src="images/page-background.png"/>
html {
position: relative;
}
.background {
width: 100%;
height: 2800px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
I tried moving the img inside a div with overflow: hidden but that didn't work for some reason:
<div class="background-wrap">
<img class="background" src="images/page-background.png"/>
</div>
.background-wrap {
position: absolute;
width: 100%;
height: 1000px;
overflow: hidden;
z-index: -1;
}
How would you do this properly in CSS / HTML (without JavaScript)?
You could use a css background-image on a div like so:
.background-wrap {
background: url(images/page-background.png) no-repeat;
background-size: 100% 500px;
}
The background-size specifying that;
Stretch 100% across the window horizontally, and have a 500px fixed height (change this to auto if you want the image height to scale in proportion to the width).
Sorry guys, it turns out I completely forgot to remove a duplicate background <img> that I left after splitting my HTML in multiple files (actually PHP files but that's irrelevant).
For the sake of future reference, the following worked for me:
<html>
<head>...</head>
<body>
<div class="background-wrap">
<img class="background" src="images/page-background.png"/>
</div>
</body>
</html>
html {
position: relative;
}
.background-wrap {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
overflow: hidden;
z-index: -1;
}
.background {
width: 100%;
height: 2800px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
I have a web app where I have a lot of tall images that I want to display horizontally centered on the page inside a scrolling div with no padding on top or bottom whatsoever, with the whole thing wrapped in a "window" like in the example code. Now, the problem here is that if you remove the font-size: 0 declaration from the .view, you get a tiny amount of padding underneath the image. Setting the font size to 0 gets rid of that padding, but at the same time, it makes the scrolling inside the div really slow in Firefox because the scroll speed in Firefox is tied to font-size, as detailed here. My question is - is there a way in this scenario to get rid of that annoying bit of extra padding without also crippling the Firefox scroll speed in the process?
I would like to avoid any kind of solutions that would rely on hardcoded values, eg. I don't want to do something like img { margin-bottom: <-Xpx/-Xem>; }, as this is not reliable cross-browser (for example, setting a 16px font size results in the extra padding being 3px in Chrome, 4px in Firefox and 5px in IE11).
HTML:
<div class="window">
<div class="view">
<img src="http://placekitten.com/300/2000" alt="kitty" />
</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
}
.window {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.view {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
font-size: 0;
}
Playing around with my own JSFiddle I managed to figure this one out on my own - I simply needed to wrap the image in an extra div and move the font-size: 0 declaration inside it, and as a result the scroll speed remains sane in the actually scrolling parent div. Seems like posting about this ended up being a successful case of rubber duck debugging.
HTML:
<div class="window">
<div class="view">
<div class="wrap">
<img src="http://placekitten.com/300/2000" alt="kitty" />
</div>
</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
}
.window {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.view {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
}
.wrap { font-size: 0; }