I am trying to make this effect on a project
http://www.cera-groupecera.com/en/
like this page the footer is hidden and appears as you scroll.
The page is wrapped in a page-content element and the footer is fixed to the bottom z-indexed 0
what happens is as you reach the end of the window the page -content margin rises as you scroll.
I can't really find a way to do it with j query
Here is an example,you just position it on the bottom of the page or in any other place you want it to stay,to hide it you can use z-index=-1;
//<br><br><br><br><br><br><br><br><br>
<h2><code>fixed</code></h2>
<div class="fixed"><div class="expand"></div></div>
<br><br><br><br><br><br><br><br>
CSS
#import "compass/css3";
h2 {
text-align: center;
margin-top: 48px;
}
div {
height: 200px;
width: 50%;
max-width: 600px;
margin: 32px auto;
overflow-x: hidden;
// overflow-y: scroll;
}
.fixed {
background: url('http://lorempixel.com/600/200/animals');
background-attachment: fixed;
overflow: hidden;
}
.expand {
height: 400px;
width: 100%;
}
https://jsfiddle.net/cu01m218/
I did one example for you.
$(function(){
calcFooter();
function calcFooter () {
var footer = $('.footer').height();
var mainContent = $('.main-content');
mainContent.css('margin-bottom', footer);
}
$(window).resize(calcFooter);
});
body {
margin: 0;
}
.main-content {
position: relative;
z-index: 100;
height: 100vh;
background-color: grey;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
z-index: 10;
height: 200px;
width: 100%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="wrapper">
<div class="main-content" style="margin-bottom: 200px;">
<h1>This is main content.</h1>
<p>Scroll down to reveal footer!</p>
</div>
<div class="footer">
<p>This footer.</p>
</div>
</div>
Let's say that this element which appears at the bottom is footer tag.
In this case it will be something like this:
html:
<footer></footer>
in your css:
footer {
position: fixed;
bottom: 0;
display: none;
}
Then you have to add a class which will make footer appear
.active {
display: block;
}
and your jquery will be something like this:
$(window).on('scroll', function () {
if ($(this).scrollTop() > 50) {
if (!$(footer).hasClass('active')) {
$(footer).addClass('active');
}
} else {
if ($(footer).hasClass('active')) {
$(footer).removeClass('active');
}
}
});
Related
I want to print a specific <div> with an id using onclick() function on a button and window.print() property on it.
For this, I wrote some #media print CSS.
It prints the <div> content but it takes a lot of spacing, causing blank pages. Here is my code:
#media print {
body * {
visibility: hidden;
}
#printpage,
#printpage * {
visibility: visible;
}
#printpage {
overflow: visible;
position: absolute !important;
left: 0;
top: 0;
}
}
<button type="submit" class="btn btn-primary" onclick="window.print();">Print</button>
<div id="printpage"></div>
visibility: hidden; doesn't stop the element from taking up space on the page, it effectively makes it invisible but still take up space.
You may want to use display: none; which will also remove the space that the element takes up.
.container {
display: inline-block;
width: 100px;
height: 100px;
background-color: #888;
vertical-align: top;
}
.container div {
height: 20px;
}
.vis {
visibility: hidden;
}
.dis {
display: none;
}
<div class="container">
<div class="vis"></div>
Visibility
</div>
<div class="container">
<div class="dis"></div>
Display
</div>
How about setting the height and width of the printpage that has fixed position
#media print {
body{ margin: 0; padding: 0 }
#printpage {
min-height: 100vh; margin: 0; width: 100%; position: fixed; top: 0; left: 0
}
}
I have a div that is set to:
{
height: 100vh;
width: 100%;
background-color: black;
opacity: 0;
position: absolute;
z-index: 2;
}
This div is also at the top of the page.
I want to make it so that as I scroll down (and away from the div), it slowly fades in, and when I scroll back up it fades out.
How would I do this?
You may refer following code snippet. The point I am trying to make is in the script tag at the bottom just added the window scroll function which sets the opacity to your entire window of desired height in your css class ".top". So when you try to scroll in and out it will dynamically add an animation effect to your window.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<style>
body {
margin: 0;
height: 1000px;
}
.top {
margin: 0;
position: relative;
width: 100%;
background-color: #aaa;
height: 300px;
opacity: 1;
text-align: center;
font-family: 'helvetica';
font-size: 80px;
font-weight: 100;
color: #fff;
}
.title {
position: absolute;
top: 60%;
left: 100px;
}
</style>
</head>
<body>
<div class="top">
<div class="title">Fade Away</div>
</div>
</body>
</html>
<script>
$(window).scroll(function() {
$(".top").css("opacity", 1 - $(window).scrollTop() / 250);
});
</script>
document.body.addEventListener('wheel', (e) => {
let faceLayer = document.getElementById('your_id');
faceLayer.style.opacity = Math.abs(faceLayer.getBoundingClientRect().top / faceLayer.clientHeight).
})
I want to open a modal layer which overtakes the body scroll. To accomplish that, when the layer is shown I'm setting the body overflow to hidden and the overflow to scroll on the modal layer. Visually, one scrollbar replaces the other.
In the background I have a top bar with fixed position and 100% wide. What happens is when the body overflow is set to hidden, the 100% width div (top bar) takes the scrollbar space and its elements move to the right.
How can I prevent those elements from moving?
I tried to calculate (javascript) the width of the scrollbar and when setting the body overflow: hidden, give a margin-right: "scrollbar width" to the top bar. That didn't work.
Also tried a dummy div at the right end of the top bar with overflow set to scroll and force it to display a scroll bar when the layer is opened. The idea was to take the space of the missing scrollbar with another scrollbar, only on the top container. That almost worked but created a 1 or 2px flickering. Not good enough.
jsFiddle here with the basic problem
var body = $('body'),
main = $('.main'),
open_modal = $('.open-modal'),
close_modal = $('.close-modal'),
modal_container = $('.modal-container'),
toggleModal = function() {
body.toggleClass('body-locked');
modal_container.toggleClass('dp-block');
};
open_modal.on('click', toggleModal);
close_modal.on('click', toggleModal);
Basically...
When the modal is opened, set the menu width to it's current width and set a window.onresize event handler which will resize the menu to the body's width.
When the modal is closed, remove the fixed width and the window.onresize handler and return the menu to it's initial state.
In the spirit of less === more I've taken the liberty of simplifying your code as much as I can.
var body = $('body');
var menu = $('#topBarFixed');
function toggleModal() {
menu.css('width', body.hasClass('locked') ? '' : menu.width());
window.onresize = body.hasClass('locked') ? '' : function () {
menu.css('width', body.width());
}
body.toggleClass('locked');
}
body.on('click', '.open-modal, .close-modal', toggleModal);
body {
padding-top: 40px;
height: 1000px;
background: lightblue;
}
body.locked {
height: 100%;
overflow: hidden;
}
.modal-container {
display: none;
overflow-y: scroll;
position: fixed;
top: 0; right: 0;
height: 100%; width: 100%;
background-color: rgba(255, 255, 255, 0.3);
z-index: 400;
}
body.locked .modal-container {
display: block !important;
}
.modal {
height: 600px;
width: 200px;
margin: 50px auto;
background: indianred;
}
#topBarFixed {
width: 100%;
background-color: lightgray;
position: fixed;
top: 0;
left: 0;
text-align:center;
display: inline-block;
z-index: 200;
}
.topBarContent {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.inner1 {
width:30px;
line-height: 40px;
}
.open-modal {
position: relative;
top: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="topBarFixed">
<div class="topBarContent">
<div id="inner" class="inner1">div</div>
<div id="inner" class="inner1">div</div>
<div id="inner" class="inner1">div</div>
<div id="inner" class="inner1">div</div>
<div id="inner" class="inner1">div</div>
</div>
</div>
<p>Scroll down to open layer</p>
<button class="open-modal">Open layer</button>
<div class="modal-container">
<div class="modal">
<button class="close-modal">Close layer</button>
</div>
</div>
Your problem here is that topBarFixed has a 100% width. If this width was fixed you would not have this problem. The following has been tested on Chrome and Firefox:
Add this line to your toggleModal function's first line:
$(".topBarFixed").width($(".topBarFixed").width());
That will set the width to the actual width (in pixels) of the bar at that point. Then when you close the layer, set it back to 100%.
close_modal.on('click', function() { toggleModal(); $(".topBarFixed").width("100%"); });
The entire code looks like:
var body = $('body'),
main = $('.main'),
open_modal = $('.open-modal'),
close_modal = $('.close-modal'),
modal_container = $('.modal-container'),
toggleModal = function() {
$(".topBarFixed").width($(".topBarFixed").width());
body.toggleClass('body-locked');
modal_container.toggleClass('dp-block');
};
open_modal.on('click', toggleModal);
close_modal.on('click', function() { toggleModal(); $(".topBarFixed").width("100%"); });
And here is the jsFiddle: http://jsfiddle.net/wmk05t0b/5/
Edit
Optionally, you could just come up with a fixed width, and that will do the trick:
.topBarFixed
{
width:715px; /*changed from 100%*/
height: 40px;
background-color: lightgray;
position: fixed;
top: 0;
left: 0;
text-align:center;
display: inline-block;
z-index: 200;
}
Some errors in your code: id is only one. Use classes if you want to apply the same style to more elements.
<div class="topBarContent">
<div class="inner1">div</div>
<div class="inner1">div</div>
<div class="inner1">div</div>
<div class="inner1">div</div>
<div class="inner1">div</div>
</div>
Anyways, that's not what caused your problem. First of all, your body's overflow should be enough: don't add an overflowY to your .modal-container unless you want to prevent the background page from scrolling while modal is open. Second, fix the modal itself, and center it using the centered CSS trick (left:50%, margin-left:-half-of-your-width).
CSS:
.body-locked {
overflow:scroll;
}
.modal-container {
overflow:hidden;
position:fixed;
display: none;
top: 0; right: 0;
height: 100%; width: 100%;
background-color: rgba(255, 255, 255, 0.3);
z-index: 400;
}
.modal {
position: fixed;
height: 600px;
width: 200px;
margin: 50px auto 50px -100px;
background: indianred;
left:50%;
}
/*Reset your body, you never know*/
body {
margin:0;
padding:0
}
Hope it helps.
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 8 years ago.
So I have a webpage with a header, mainbody, and footer.
I want the mainbody to fill 100% of the page (fill 100% in between footer and header)
My footer is position absolute with bottom: 0. Everytime I try to set the mainbody to 100% height or change position or something it will also overflow the header. If if set the body to position absolute with top: 40 (cause my header is 40px high), it will just go 40px too far down, creating a scroll bar.
I created a simple html file since i cannot actually post the entire page/css from the actual project. With the sample code, even though the maincontent body fills the screen, it goes 40px too far down (cause of the header I assume).
html,
body {
margin: 0;
padding: 0;
}
header {
height: 40px;
width: 100%;
background-color: blue;
}
#maincontent {
background-color: green;
height: 100%;
width: 100%;
}
footer {
height: 40px;
width: 100%;
background-color: grey;
position: absolute;
bottom: 0;
}
<html>
<head>
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header></header>
<div id="maincontent">
</div>
<footer></footer>
</body>
</html>
Anyone knows the answer?
These are not necessary
remove height in %
remove jQuery
Stretch div using bottom & top :
.mainbody{
position: absolute;
top: 40px; /* Header Height */
bottom: 20px; /* Footer Height */
width: 100%;
}
check my code : http://jsfiddle.net/aslancods/mW9WF/
or check here:
body {
margin:0;
}
.header {
height: 40px;
background-color: red;
}
.mainBody {
background-color: yellow;
position: absolute;
top: 40px;
bottom: 20px;
width:100%;
}
.content {
color:#fff;
}
.footer {
height: 20px;
background-color: blue;
position: absolute;
bottom: 0;
width:100%;
}
<div class="header" >
</div>
<div class="mainBody">
<div class="content" >Hello world</div>
</div>
<div class="footer">
</div>
No Javascript, no absolute positioning and no fixed heights are required for this one.
Here's an all CSS / CSS only method which doesn't require fixed heights or absolute positioning:
/* Reset */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
/* Essentials */
.container {
display: table;
}
.content {
display: table-row;
height: 100%;
}
.content-body {
display: table-cell;
}
/* Aesthetics */
.container {
width: 100%;
height: 100%;
}
.header,
.footer {
padding: 10px 20px;
background: #f7f7f7;
}
.content-body {
padding: 20px;
background: #e7e7e7;
}
<div class="container">
<header class="header">
<p>This is the header</p>
</header>
<section class="content">
<div class="content-body">
<p>This is the content.</p>
</div>
</section>
<footer class="footer">
<p>This is the footer.</p>
</footer>
</div>
The benefit of this method is that the footer and header can grow to match their content and the body will automatically adjust itself. You can also choose to limit their height with css.
There is a CSS unit called viewport height / viewport width.
Example
.mainbody{height: 100vh;} similarly html,body{width: 100vw;}
or 90vh = 90% of the viewport height.
**IE9+ and most modern browsers.
This allows for a centered content body with min-width for my forms to not collapse funny:
html {
overflow-y: scroll;
height: 100%;
margin: 0px auto;
padding: 0;
}
body {
height: 100%;
margin: 0px auto;
max-width: 960px;
min-width: 750px;
padding: 0;
}
div#footer {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 60px;
}
div#wrapper {
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
div#pageContent {
padding-bottom: 60px;
}
div#header {
width: 100%;
}
And my layout page looks like:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="pageContent"></div>
<div id="footer"></div>
</div>
</body>
</html>
Example here: http://data.nwtresearch.com/
One more note, if you want the full page background like the code you added looks like, remove the height: auto !important; from the wrapper div: http://jsfiddle.net/mdares/a8VVw/
Using top: 40px and bottom: 40px (assuming your footer is also 40px) with no defined height, you can get this to work.
.header {
width: 100%;
height: 40px;
position: absolute;
top: 0;
background-color:red;
}
.mainBody {
width: 100%;
top: 40px;
bottom: 40px;
position: absolute;
background-color: gray;
}
.footer {
width: 100%;
height: 40px;
position: absolute;
bottom: 0;
background-color: blue;
}
JSFiddle
Well, there are different implementations for different browsers.
In my mind, the simplest and most elegant solution is using CSS calc(). Unfortunately, this method is unavailable in ie8 and less, and also not available in android browsers and mobile opera. If you're using separate methods for that, however, you can try this: http://jsfiddle.net/uRskD/
The markup:
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
And the CSS:
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
}
#footer {
background: #f0f;
height: 20px;
}
#body {
background: #0f0;
min-height: calc(100% - 40px);
}
My secondary solution involves the sticky footer method and box-sizing. This basically allows for the body element to fill 100% height of its parent, and includes the padding in that 100% with box-sizing: border-box;. http://jsfiddle.net/uRskD/1/
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#footer {
background: #f0f;
height: 20px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
#body {
background: #0f0;
min-height: 100%;
box-sizing: border-box;
padding-top: 20px;
padding-bottom: 20px;
}
My third method would be to use jQuery to set the min-height of the main content area. http://jsfiddle.net/uRskD/2/
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
}
#footer {
background: #f0f;
height: 20px;
}
#body {
background: #0f0;
}
And the JS:
$(function() {
headerHeight = $('#header').height();
footerHeight = $('#footer').height();
windowHeight = $(window).height();
$('#body').css('min-height', windowHeight - headerHeight - footerHeight);
});
Not sure exactly what your after, but I think I get it.
A header - stays at the top of the screen?
A footer - stays at the bottom of the screen?
Content area -> fits the space between the footer and the header?
You can do this by absolute positioning or with fixed positioning.
Here is an example with absolute positioning: http://jsfiddle.net/FMYXY/1/
Markup:
<div class="header">Header</div>
<div class="mainbody">Main Body</div>
<div class="footer">Footer</div>
CSS:
.header {outline:1px solid red; height: 40px; position:absolute; top:0px; width:100%;}
.mainbody {outline:1px solid green; min-height:200px; position:absolute; top:40px; width:100%; height:90%;}
.footer {outline:1px solid blue; height:20px; position:absolute; height:25px;bottom:0; width:100%; }
To make it work best, I'd suggest using % instead of pixels, as you will run into problems with different screen/device sizes.
Relative values like: height:100% will use the parent element in HTML like a reference, to use relative values in height you will need to make your html and body tags had 100% height like that:
HTML
<body>
<div class='content'></div>
</body>
CSS
html, body
{
height: 100%;
}
.content
{
background: red;
width: 100%;
height: 100%;
}
http://jsfiddle.net/u91Lav16/1/
Although this might sounds like an easy issue, but it's actually not!
I've tried many things to achieve what you're trying to do with pure CSS, and all my tries were failure. But.. there's a possible solution if you use javascript or jquery!
Assuming you have this CSS:
#myheader {
width: 100%;
}
#mybody {
width: 100%;
}
#myfooter {
width: 100%;
}
Assuming you have this HTML:
<div id="myheader">HEADER</div>
<div id="mybody">BODY</div>
<div id="myfooter">FOOTER</div>
Try this with jquery:
<script>
$(document).ready(function() {
var windowHeight = $(window).height();/* get the browser visible height on screen */
var headerHeight = $('#myheader').height();/* get the header visible height on screen */
var bodyHeight = $('#mybody').height();/* get the body visible height on screen */
var footerHeight = $('#myfooter').height();/* get the footer visible height on screen */
var newBodyHeight = windowHeight - headerHeight - footerHeight;
if(newBodyHeight > 0 && newBodyHeight > bodyHeight) {
$('#mybody').height(newBodyHeight);
}
});
</script>
Note: I'm not using absolute positioning in this solution, as it might look ugly in mobile browsers
This question is a duplicate of Make a div fill the height of the remaining screen space and the correct answer is to use the flexbox model.
All major browsers and IE11+ support Flexbox. For IE 10 or older, or Android 4.3 and older, you can use the FlexieJS shim.
Note how simple the markup and the CSS are. No table hacks or anything.
html, body {
height: 100%;
margin: 0; padding: 0; /* to avoid scrollbars */
}
#wrapper {
display: flex; /* use the flex model */
min-height: 100%;
flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}
#header {
background: yellow;
height: 100px; /* can be variable as well */
}
#body {
flex: 1;
border: 1px solid orange;
}
#footer{
background: lime;
}
<div id="wrapper">
<div id="header">Title</div>
<div id="body">Body</div>
<div id="footer">
Footer<br/>
of<br/>
variable<br/>
height<br/>
</div>
</div>
In the CSS above, the flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish the flexibility of the flex items. Mozilla has a good introduction to the flexible boxes model.
I have a div and within that div is an image, and layed on top of those is 2 divs which have jquery hover attached to them (same issue with onmouseover though, so not jquery).
Problem is when the image is loaded, even though the divs are layed on top of the image they won't fire because the image is always on top (even though it isn't actually, and i've tried putting it lower down on z-index but it didn't help).
jquery:
<script type="text/javascript">
$(document).ready(function () {
$(this).find("#largeInset").find(".content").css("width","0");
$("#largeInset").hover (function() {
$(this).find(".content").animate({width: '100%'}, 500, function() {});
},
function() {
$(this).find(".content").animate({width: '0'}, 500, function() {});
});
$(this).find("#largeArticles").find(".content").css("width","0");
$("#largeArticles").hover (function() {
$(this).find(".content").animate({width: '40%'}, 500, function() {});
},
function() {
$(this).find(".content").animate({width: '0'}, 500, function() {});
});
});
</script>
Html:
<div class="largeContent">
<img src="<?php echo $img[0]; ?>" border="0" alt="" title="" />
<div id="largeInset">
<div class="content">
[content]
</div>
</div>
<div id="largeArticles">
<div class="content">
<ul> (loop fills this)
<li>
[content]
</li>
</ul>
</div>
<br style="clear: both;" />
</div>
</div>
Is this a known IE bug that I just haven't come accross before? Or is there a bug in my code? When filled with content the largeInset and largeArticles divs should fire on hover and slide out across the image, works in chrome but not IE as IE seems to select the image on top of the divs even though they are actually below it (Would work fine if the image didn't load).
Any ideas? Hopefully I made sense.
CSS:
.articles { position: relative; width: 100%; padding: 0; float: left; background-color: #fff; }
.large { margin: 0 0 10px; border: 0px solid #000; min-height: 200px; }
.large img { max-width: 100%; min-width: 100%; min-height: 350px; z-index: -1; }
.largeContent { z-index: 99; position: absolute; top: 0; width: 100%; height: 100%; }
.filler { width: 100%; height: 100%; }
#largeInset { position: absolute; top: 0; right: 0; min-height: 100%; width: 25%; color: #fff; }
#largeInset .head { padding: 10px 0; }
#largeInset p { font-size: 0.9em; margin: 5px 10px; }
#largeInset .content { overflow: hidden; position: absolute; top:0; background-color: #000; right: 0; color: #fff; }
#largeArticles { position: absolute; top: 0; left: 0; width: 25%; min-height: 100%; }
#largeArticles .content { overflow: hidden; position: absolute; top: 0; left: 0; width: 40%; background-color: #000; }
I've solved this for now by adding content to the divs. IE will only fire when you mouseover the content in the div (maybe because position is absolute?). I added a transparent 1px image to the divs, but stretched to 100% x 100%, so you hover over the image and it will fire.
This seems a bit hacked together though
See http://iamnotahippy.com/ice/web/?cat=5 (hover over sides of image)