I am creating a web based billing system, in which I have to generate bill pdfs of multiple pages.
The problem is: I want to print the footer at the bottom of last print page.
#footer{
position: fixed;
bottom: 0px;
width:100%;
}
This code is printing footer on every page, but I want it only on last page.
Add this to your stylesheet, see if it helps you:
#media print {
body {
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
}
Reference: html footer at last page
In addition to #bhansa answer
<style>
#media print {
body {
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
.empty {
height: 150px;
width: 100%;
}
}
</style>
<body>
<div class="content">Somebody</div>
<div class="empty"><div>
<div id="footer" style="height=150px; width=100%">Footer</div>
</body>
In order not to overlap the content, add an empty div after the content that matches the height of the footer
Related
I got drag and drop to work nicely in my web application, but there is a problem I am not able to solve: I searched around and I found similar questions, also a few having referring to the opposite of my problem, but I wasn't able to understand what is going on.
The problem concerns the visual effect on dragover. On the dragover event, I add a dragging class which has a :before element, set in a way which should cover all the body, but as a matter of fact it only covers the viewport, so that if I scroll the window the rest of the body is not covered. Here is the CSS I used:
.dragging:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 200;
background-color: rgba(0,0,0,0.2);
}
I also created a jsfiddle to demonstrate the problem; for the sake of simplicity, I bound the addition of the class to the click event. If you click on the yellow body it gets slightly darker; if you scroll down, you'll see the regular backgrund reappearing. In my application, I cannot click on the content of the page below the div, but if I scroll down I can click on the remaining content.
The "opposite" of my problem I mentioned above was that somebody wanted to a div to cover the viewport rather than the full body, and he was suggested to use 100vh rather than 100%, so I guess there is something I am missing...
There are two ways to do this.
a. The general case
Parent (i.e. .draggable):
{
position:relative
}
Child (i.e. .draggable::before):
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
It's general in the sense your parent can be any element, have any size. It works as long as there is no other intermediate positioned element between parent and child (where positioned means having a set position value other than default one - static; if such an element exists, it will become the parent/reference element).
b. The exception (the viewport)
Sometimes it makes more sense give the child the size of the viewport instead of the size of its closest positioned ancestor in DOM. In this case, all you need is to apply the following to child (and the parent will be the viewport):
{
position: fixed;
top: 0;
left: 0;
width; 100%;
height: 100%;
/* you could also use right:0; bottom:0;, as above
* you don't need to set width and height
* but, since it was present in your code, I used it
*/
}
Please note the viewport is not always the browser window. For example, 3d transformed elements act as viewports for their children.
In your case, the general case would be: https://jsfiddle.net/v7bu6czy/11/
$("body").click(function(event) {
event.preventDefault();
event.stopPropagation();
$("body").addClass('dragging');
console.log('using position:absolute (general solution), ::before height is: ' + window.getComputedStyle(document.querySelector('.dragging'), ':before').height)
});
body {
margin: 0;
}
.longdiv {
height: 3000px;
background-color: yellow;
}
.dragging {
position: relative;
}
.dragging:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
background-color: rgba(0,0,0,0.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<head lang="en">
</head><body>
<div class="longdiv">
</div>
</body>
And the exception would be: https://jsfiddle.net/v7bu6czy/9/
$("body").click(function(event) {
event.preventDefault();
event.stopPropagation();
$("body").addClass('dragging');
console.log('using position:fixed, ::before height is: ' + window.getComputedStyle(document.querySelector('.dragging'), ':before').height)
});
html, body, document { height: 100%; margin: 0; }
.longdiv {
height: 3000px;
background-color: yellow;
}
.dragging:before {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 200;
background-color: rgba(0,0,0,0.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<head lang="en">
</head><body>
<div class="longdiv">
</div>
</body>
How to set footer stick bottom if .content is absolute?
I tried this and also another use same method adding padding bottom.... but it is not work if .content is set position absolute and top
p.s I don't want to set footer fixed...
Thanks.
.head{
position: absolute;
left: 0;
top: 40px;
height: 160px;
}
.content{
position: absolute;
top: 200px;
}
.footer{
position: absolute;
bottom: 0;
}
<body>
<div class="head"></div>
<div class="content"></div>
<div class="footer"></div>
</body>
Assuming you want to use the solution presented in the answer you linked to, you have to stop using position: absolute. You can use margins to replace top:
.head {
margin: 40px 0;
height: 160px;
}
However, trying to use the sticky footer trick with this triggers an unfortunate property of CSS: if you have a margin on the first child element, that margin will propagate to the parent element. This causes problems with the sticky footer trick.
The solution to that is to use padding on the wrapper rather than margin-top on the header. Your code might then look like this:
.wrap {
padding-top: 40px;
}
.head {
margin-bottom: 40px;
height: 160px;
}
Having made those changes, the method described in the answer you linked to should work.
How do i get a fixed sidebar like the one containing the social buttons on this site:
http://www.tripwiremagazine.com/2012/11/social-media-buttons-and-icon-sets.html
I want my sidebar to be fixed to the top of my screen when i scroll down but on the top of the page there must be an absolute position it so that it stops following the browser as i scrool.
Currently I am just using:
#sidebar { position:fixed; }
But this does not give it an absolute position when reaching the top of the page.
Thank you
html
<div class="wrapper"><div class="abs" id="sidebar"></div></div>
CSS
.abs { position: absolute; }
.fixed {
position: fixed;
top: 30px !important;}
#sidebar {
top: 150px;
left: 0;
height: 100px;
width: 20px;
background-color: #ccc;}
.wrapper {
height: 1500px;
padding: 20px;}
jQuery
$(document).scroll(function() {
var scrollPosition = $(document).scrollTop();
var scrollReference = 10;
if (scrollPosition >= scrollReference) {
$("#sidebar").addClass('fixed');
} else {
$("#sidebar").removeClass('fixed');
$("#sidebar").addClass('abs');
};
});
DEMO of this code:
http://jsfiddle.net/B3jZ5/6/
<div class="wrapper">
is the example of content.
You can also try this plugin:
https://code.google.com/p/sticky-panel/
i want to place text on top of the image inside container with width 80%
conainer.width 80% - code below not working
conainer.width 100% - code below working
screen shot of my brouser
<style type="text/css">
.conainer {
margin: auto;
width: 80%; /* change that to 100% code will work */
border: thin solid #000;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
</style>
<div class="conainer">
<div class="image">
<img src="img/banners.jpg" width="100%" height="100%" />
<h2>some text gos here</h2>
</div>
</div>
You should just set the background of your div, instead of trying to place the h2 on top of an img tag
It works for me. Is there any more code?
I think the most code-efficient and compatible method would be to define your banner image as the background-image of div.image using CSS.
Replace your h2 style as
h2 {
position: fixed;//yours is on top of image but absolutely positioned, so not visible
top: 200px;
left: 0; //Specify where you want to put your image with top and left properly now.
width: 100%;
}
Ok! i found the problem change top 200 => top 0
h2 {
position: absolute;
top: 0px;
left: 0;
width: 100%;
I want to make a screen unclickable by spreading a think transparent layer of any color over the screen on the click event of a button using CSS.
Please help with this.
Using jQuery and CSS, you could define a class .spread :
.spread {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
opacity: 0.5;
z-index: 200;
}
And when you click on the button:
$('body').append("<div class='spread'></div>");
This would add the div to the body, and the div would position itself in the top left corner. You may also have to put:
body {
margin: 0;
}
Example: http://jsfiddle.net/jcolicchio/TuP2A/
It should be super easy
HTML
<body>
some code here
<div class=overlay><div>
</body>
CSS
.overlay {
position: fixed;
z-index:100;
top:0;right:0;bottom:0;left:0;
background: rgba(0,0,0,.0);
}