Develop Reference

Margin and padding issue when doing window.print

I am trying with Javascript window.print to print a content inside the div container. The div container is managed by angular js.
CSS file
#media print
{
body, html, #wrapper {
width: 100%;
margin:0px;
padding:0px;
border: 1px solid red;
}
.no-print, .no-print * {
display: none !important;
}
.col-sm-12 {
width: 100%;
}
}
HTML containing the DIV
<div ng-show="views.invoice">
<div class="row col-sm-12" style="margin:0px; padding:0px; width:100%">
test
</div>
<div class="row no-print">
<div class="col-12">
<button class="btn btn-success btn-default" onclick="window.print();"><i class="fa fa-print"></i> {{phrase.Print}}</button>
</div>
</div>
</div>
This is how it is shown in the browser
When I do the print it is printing to PDF as below
I see a big margin around the text 'test'. How can I print without any margin or padding?

The Problem
It's most likely because you've set the visibility your drawer and your navbar (the left-side navigation and the top-side navigation) to hidden. When something's visibility is set to hidden, it is still in the layout and preserves its height, width, margin, and padding. This is why you're seeing the space of your drawer and navbar, respectively causing the space on the left side and the top side.
You can run and try printing the below screen. You'll see the problem I mentioned (the space caused by the preserved sizes [height, width, padding, margin]).
#media print {
body,
html,
#wrapper {
width: 100%;
margin: 0px;
padding: 0px;
border: 1px solid red;
}
#drawer {
visibility: hidden;
}
#navbar {
visibility: hidden;
}
.no-print {
display: none;
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
position: relative;
width: 100%;
height: 100%;
}
#wrapper {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
}
#navbar {
width: 100%;
background: blue;
color: white;
padding: 20px;
}
#section--right {
flex-grow: 1;
}
#drawer {
height: 100%;
width: 100px;
background: red;
color: white;
padding: 20px;
}
#navbar .text {
display: inline-block;
height: 50px;
background: #121212;
}
<div id="wrapper">
<div id="drawer">Some drawer</div>
<div id="section--right">
<div id="navbar"><span class="text">Some navbar</span></div>
<div id="print__section">
test
</div>
<button id="print__button" class="no-print" onclick="window.print()">Print now</button>
</div>
</div>
Solution
My suggestion is to set a special id or class to the printable region. Then, set all the other elements' visibility inside body that have no such special id or class to hidden. Furthermore, because setting visibility to hidden still allows the elements to preserve their dimensions, set their sizes (height, width, margin, and padding) to 0 too. Note that you can't use display: none because your printable region will also not be displayed.
Here's a working example that will solve your problem.
#media print {
body,
html,
#wrapper {
width: 100%;
margin: 0px;
padding: 0px;
border: 1px solid red;
}
/* Makes all divs that are not inside the print region invisible */
/* Then, set the size to 0 by setting everything (height, width, margin, and padding) to 0 */
body *:not(#print__section) {
visibility: hidden;
height: 0;
width: 0;
margin: 0;
padding: 0;
}
/* Parents' visibility cascade to children's visibility */
/* Make the print region visible again to override parent's visibility */
#print__section {
visibility: visible;
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
position: relative;
width: 100%;
height: 100%;
}
#wrapper {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
}
#navbar {
width: 100%;
background: blue;
color: white;
padding: 20px;
}
#section--right {
flex-grow: 1;
}
#drawer {
height: 100%;
width: 100px;
background: red;
color: white;
padding: 20px;
}
#navbar .text {
display: inline-block;
height: 50px;
background: #121212;
}
<div id="wrapper">
<div id="drawer">Some drawer</div>
<div id="section--right">
<div id="navbar"><span class="text">Some navbar</span></div>
<div id="print__section">
test
</div>
<button id="print__button" class="no-print" onclick="window.print()">Print now</button>
</div>
</div>

Scrollable CSS div with fixed parent element

I am building a mobile application which will have a scrollable element in the middle of the screen. Currently when I try and scroll the entire app moves. I would like the all other elements to remain fixed while my element scrolls.
Here is my main React App:
class MobileServices extends Component {
render() {
return (
<div className={style.app}>
<div className={style.mobileHeader}>
<div className={style.logoBox}>
Logo Here
</div>
<div className={style.contactBox}>
</div>
</div>
<div className={style.mainContent}>
<div className={style.contentOne}></div>
<div className={style.contentTwo}></div>
<div className={style.contentThree}></div>
</div>
</div>
);
}
}
Here is the CSS:
html, body {
margin: 0;
/* height: 100% */
}
.app {
background-color: green;
background-size : cover;
background-attachment: fixed;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.contactBox {
margin: 1rem;
padding: 1rem;
}
.contentOne {
background-color: blue;
display: flex;
height: 10rem;
width: 100vw
}
.contentTwo {
background-color: red;
display: flex;
height: 10rem;
width: 100vw
}
.logoBox {
border: 2px solid white;
margin: 1rem;
padding: 2rem;
}
.mainContent {
flex: 1;
display: flex;
overflow: scroll;
margin-top: 4rem;
height: 10rem;
width: 300vw;
overflow-x: auto;
}
.mobileHeader {
display: flex;
justify-content: space-between;
width: 100%;
}
I have tried making the app class fixed, but that only prevented me from being able to scroll at all.

body, html {
width: 100%;
height: 100%;
overflow: hidden;
}
.app {
// your css and
display: flex;
flex-direction: column;
}
.mainContent {
flex-grow: 1;
overflow: auto;
// rest of your css
}
Optional, you can set your mobielHeader to have position: sticky

Scroll Horizontally on hover only runs once?

I'm trying to make a simple scroll left and right div on hover. I'm really not sure what I'm doing wrong, I hover, but it only moves the 50 specified in the if statement. Do I need to add some kind of loop while I'm still hovering? Any help would be greatly appreciated.
Basically, I want to be able to hover over the two black boxes right and left and while it's hovered move right or left, when I remove the mouse it should stop.
$("#left").hover(function() {
var leftPos = $('#wrapper').scrollLeft();
$("#wrapper").animate({
scrollLeft: leftPos - 50
}, 1);
});
$("#right").hover(function() {
var leftPos = $('#wrapper').scrollLeft();
$("#wrapper").animate({
scrollLeft: leftPos + 50
}, 1);
});
html,
body {
background-color: #eeeeee;
margin: 0;
overflow-x: scroll;
overflow-y: hidden;
}
#left {
position: absolute;
width: 10vw;
height: 100vh;
top: 0;
left: 0;
z-index: 1;
background-color: black;
}
#right {
position: absolute;
width: 10vw;
height: 100vh;
top: 0;
right: 0;
z-index: 1;
background-color: black;
}
#wrapper {
width: 100%;
height: 100vh;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
}
#inner_wrap {
width: 4000px;
height: 100vh;
align-items: center;
display: flex;
}
#firstcontent {
align-items: center;
display: flex;
vertical-align: middle;
color: white;
float: left;
margin-left: 20vw;
width: 400px;
height: 250px;
background-color: #2d2d2d;
}
.thumbone {
width: 400px;
height: 250px;
background-color: lightgrey;
display: inline-block;
}
.thumbtwo {
width: 400px;
height: 250px;
background-color: grey;
display: inline-block;
}
<script src="https://corporate3.bdjobs.com/js/jquery.min.js"></script>
<div id="left"></div>
<div id="right"></div>
<div id="wrapper">
<div id="inner_wrap">
<div id="firstcontent">hover or scroll</div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
</div>
</div>
Link to script
jsfiddle
[also a side note, why does this work only on jsfiddle and no where else?]

Your issue is because the mouseenter and mouseleave events (which underpin the hover() logic) only fire once, when the mouse enters/leaves the targeted element. If you want to repeatedly perform an action whilst the element is over those elements you'll need to implement your own logic.
To achieve this you can use an interval within the mouseenter handler of the hover() to repeatedly shift the scroll position of the required element. Then in the mouseleave you can clear that timer.
Also note that you can DRY up your code by using a common class on both elements along with a data attribute to govern the movement increment per tick of the interval. Try this:
var timer;
$('.hover-scroll').hover(function() {
var increment = $(this).data('pos');
timer = setInterval(function() {
var leftPos = $("#wrapper").scrollLeft();
$("#wrapper").animate({
scrollLeft: leftPos + increment
}, 1);
}, 50);
}, function() {
clearInterval(timer);
});
html,
body {
background-color: #eeeeee;
margin: 0;
overflow-x: scroll;
overflow-y: hidden;
}
#left {
position: absolute;
width: 10vw;
height: 100vh;
top: 0;
left: 0;
z-index: 1;
background-color: black;
}
#right {
position: absolute;
width: 10vw;
height: 100vh;
top: 0;
right: 0;
z-index: 1;
background-color: black;
}
#wrapper {
width: 100%;
height: 100vh;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
}
#inner_wrap {
width: 4000px;
height: 100vh;
align-items: center;
display: flex;
}
#firstcontent {
align-items: center;
display: flex;
vertical-align: middle;
color: white;
float: left;
margin-left: 20vw;
width: 400px;
height: 250px;
background-color: #2d2d2d;
}
.thumbone {
width: 400px;
height: 250px;
background-color: lightgrey;
display: inline-block;
}
.thumbtwo {
width: 400px;
height: 250px;
background-color: grey;
display: inline-block;
}
<script src="https://corporate3.bdjobs.com/js/jquery.min.js"></script>
<div id="left" class="hover-scroll" data-pos="-50"></div>
<div id="right" class="hover-scroll" data-pos="50"></div>
<div id="wrapper">
<div id="inner_wrap">
<div id="firstcontent">hover or scroll</div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
<div class="thumbone"></div>
<div class="thumbtwo"></div>
</div>
</div>
If you want to speed up or slow down the scroll, change the delay on the interval

JQuery create expanding div on navigation

Take this snippet:
.container {
width: 150px;
height: 100px;
}
.test {
color: white;
background-color: red;
width: 100%;
height: 25%;
transition: height ease 1s;
}
.test:hover {
height: 100%;
}
<div class="container">
<div class="test">Hover Here</div>
</div>
A simple div inside a container which expands to 100% when hovered over. What I am trying to make is very simular to this, but in a navigation menu (similar to http://www.mineplex.com/).
When a user hovers over the container div (not the main box itself) I need the main div to expand from 0% to 100% in height.
I have tried using JQuery to solve this using a ".hovered" class with no luck. How can one code this?
Any help is much appreciated. Thanks!

Here's a demonstration:
Similarities between both the code snippets:
The containers make use of flex display to make a responsive navbar container, with each of its items spanning a width of 20% (which can be adjusted).
Each of the items (with relative positioning) has two sub containers (with absolute positioning), the first being overlay which we're making use for getting the blue transitioning background(z-index:1) and the second which has a fixed text on the front (z-index:2).
Now, the z-index makes sure that the overlay will be transitioned at the back and text will be fixed in the front, another thing to keep in mind is since we're transitioning it from the bottom up, we set the bottom:0 on the overlay class as well as height:0%;.
On hovering , we transition the height from 0% to 100%.
Differences between both the code snippets:
In the first snippet, we're transitioning each item on hover by making use of .items:hover .overlay.
Whereas in the second snippet, we're transitioning every item when the container is hovered instead of individual items by using .container:hover > *.items> .overlay ( ">" is a direct child selector ).
First: Hovering each item individually to expand the overlay.
.container {
width: 100%;
display: flex;
height: 80px;
background: gray;
justify-content: center;
align-items: center;
}
.items {
flex: 0 1 20%;
height: 100%;
margin-right: 5px;
position: relative;
overflow: hidden;
}
.overlay {
position: absolute;
background: blue;
z-index: 1;
width: 100%;
height: 0%;
bottom: 0;
transition: all 0.5s ease-in-out;
}
.item-text {
position: absolute;
text-align: center;
color: white;
z-index: 2;
width: 100%;
height: 100%;
top: 0;
}
.items:hover .overlay {
height: 100%;
}
<div class="container">
<div class="items">
<div class="overlay"></div>
<div class="item-text">Home</div>
</div>
<div class="items">
<div class="overlay"></div>
<div class="item-text">About</div>
</div>
<div class="items">
<div class="overlay"></div>
<div class="item-text">Contact</div>
</div>
<div class="items">
<div class="overlay"></div>
<div class="item-text">Other</div>
</div>
</div>
Second: When the user hovers over the container, expanding all the overlays.
.container {
width: 100%;
display: flex;
height: 80px;
background: gray;
justify-content: center;
align-items: center;
}
.items {
flex: 0 1 20%;
height: 100%;
margin-right: 5px;
position: relative;
overflow: hidden;
}
.overlay {
position: absolute;
background: blue;
z-index: 1;
width: 100%;
height: 0%;
bottom: 0;
transition: all 0.5s ease-in-out;
}
.item-text {
position: absolute;
text-align: center;
color: white;
z-index: 2;
width: 100%;
height: 100%;
top: 0;
}
.container:hover > *.items> .overlay {
height: 100%;
}
<div class="container">
<div class="items">
<div class="overlay"></div>
<div class="item-text">Home</div>
</div>
<div class="items">
<div class="overlay"></div>
<div class="item-text">About</div>
</div>
<div class="items">
<div class="overlay"></div>
<div class="item-text">Contact</div>
</div>
<div class="items">
<div class="overlay"></div>
<div class="item-text">Other</div>
</div>
</div>

ul{
list-style-type: none;
margin-left: 0;
padding-left: 0;
display: flex;
}
ul li{
border: 1px solid #d3d3d3;
text-align: center;
height: 100px;
width: 100px;
margin-right: 4px;
}
ul li a{
color: #000000;
text-decoration: none;
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
ul li a:after{
content: '';
position: absolute;
background: lightblue;
left: 0;
bottom: 0;
height: 0%;
width: 100%;
z-index: -1;
}
ul li a:hover:after{
animation: bounce 1s ease-in-out forwards;
}
#keyframes bounce {
0% {height: 0%}
20% { height: 100%}
55% { height: 95%}
100% {height: 100%}
}
<ul>
<li>Lorem, ipsum.</li>
<li>Saepe, asperiores!</li>
<li>Vitae, expedita?</li>
<li>Dicta, quo.</li>
<li>Sed, et.</li>
</ul>

i wrote some code
//html
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
//This is sass
ul {
list-style:none;
background:red;
li {
display:inline-block;
padding:10px;
position:relative;
&:before {
position: absolute;
content: "";
width: 100%;
height: 0%;
left: 0;
bottom: 0;
background:blue;
transition: height ease-in-out 0.5s;
}
a {
z-index:2;
position:relative;
color:white;
}
&:hover {
&:before {
height: 100%;
}
}
}
}

Website with a tricky structure with JS

Here is my tricky problem. I'm trying to do this:
http://www.hostingpics.net/viewer.php?id=767312test.gif
(More clear than an explication I think).
My structure :
<header></header>
<div class="section">
<div class="text"></div>
<div class="content"></div>
<div class="img"><img src="img1.png"/></div>
</div>
<div class="section">
<div class="text"></div>
<div class="content"></div>
<div class="img"><img src="img2.png"/></div>
</div>
<div class="section">
<div class="text"></div>
<div class="content"></div>
<div class="img"><img src="img3.png"/></div>
</div>
<footer></footer>
Important informations :
"Header" is fix
"Content" fit to the screen less the height of header
Every "section" are the same but with different content
When the image comes to an end, the "content" div is unfixed.
I am using "section" for implementing a next and previous button in the header (with anchors).
My problem is the scrolling part. I am really lost when I try to fix the "content" div. I don't know how to fix everything except the scroll of the image in the active "img" div when the active "content" div hits the header. (Everyone follows? Look here : http://www.hostingpics.net/viewer.php?id=767312test.gif
For the scrolling part in the "img" div, I was thinking use a sort of "overflow:scroll" but the scrollbar is really awful.
I don't know if it's enough clear. If there is any problem I can complete my problem. I am not very comfortable with complex structures in html with JS.
Thanks for your help!

This is pretty close to what you're asking for (using CSS only).
This relies on the fact that the backgrounds are solid colors. It uses various specifically-defined height properties as well that match some padding properties.
The .top-bar and .bottom-bar elements can probably be changed to pseudo elements if you don't want the extra HTML.
HTML:
<header>Header</header>
<div class="top-bar"></div>
<div class="bottom-bar"></div>
<div class="section">
<div class="text">Section 1 Text</div>
<div class="content">
<div class="img"><img src="http://placekitten.com/100/1000"/></div>
</div>
</div>
<div class="section">
<div class="text">Section 2 Text</div>
<div class="content">
<div class="img"><img src="http://placekitten.com/200/2000"/></div>
</div>
</div>
<div class="section">
<div class="text">Section 3 Text</div>
<div class="content">
<div class="img"><img src="http://placekitten.com/300/3000"/></div>
</div>
</div>
<footer>Footer</footer>
CSS:
body {
margin: 0;
padding: 100px 0 0;
}
header {
background-color: red;
height: 100px;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
footer {
background-color: blue;
height: 100px;
}
.section {
min-height: 400px;
}
.text {
background-color: aqua;
height: 50px;
}
.content {
background-color: green;
min-height: 100%;
padding: 40px 0;
position: relative;
}
.img {
background-color: yellow;
min-height: 70%;
margin: 0 auto;
padding: 40px 0;
text-align: center;
width: 80%;
}
.img > img {
vertical-align: middle;
}
.top-bar, .bottom-bar {
background-color: green;
height: 40px;
position: fixed;
width: 100%;
z-index: 5;
}
.top-bar {
top: 100px;
}
.bottom-bar {
bottom: 0;
}
footer, .text {
position: relative;
z-index: 6;
}
JSFiddle here.
For an almost completely correct solution, here is one with some jQuery involved.
New CSS:
body {
margin: 0;
padding: 100px 0 0;
}
header {
background-color: red;
height: 100px;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
footer {
background-color: blue;
height: 100px;
}
.section {
min-height: 400px;
}
.text {
background-color: aqua;
height: 50px;
}
.content {
background-color: green;
min-height: 100%;
padding: 40px 0;
position: relative;
}
.img {
background-color: yellow;
min-height: 70%;
margin: 0 auto;
padding: 40px 0;
text-align: center;
width: 80%;
}
.img > img {
vertical-align: middle;
}
.top-bar, .bottom-bar {
background-color: green;
height: 40px;
position: fixed;
width: 100%;
}
.top-bar {
top: 100px;
z-index: 5;
}
.bottom-bar {
bottom: 0;
z-index: 7;
}
footer, .text {
position: relative;
z-index: 8;
}
.img-fix {
bottom: 40px;
height: 400px;
overflow: hidden;
position: absolute;
width: 100%;
z-index: 6;
}
jQuery:
$(document).ready(function(){
$(".content").each(function(){
$(this).append($(this).html());
$(this).find(".img + .img").wrap("<div class='img-fix'></div>");
});
$(window).resize(function() {
resizeImgFix();
});
resizeImgFix();
});
function resizeImgFix() {
$(".img-fix").height($(window).height() - $("header").height() - $(".top-bar").height() - $(".bottom-bar").height());
$(".img-fix").each(function(){
$(this).scrollTop($(this).prop("scrollHeight"));
});
}
JSFiddle here.
Note: It duplicates the .img element and its children. This could be memory intensive depending. However, it does make it work as intended without any visual lag or artifacts.