There should be a simple solution, but I can't work one out. I need div with class of geltona to slide onto div with class of zydra. I must use only css, but I can't. It might be obvious, but I can't find a solution as I am only using floats and % in width and height, so I can't really set a location where it should go by keyframes.
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
p {
margin: 10px;
}
.header {
height: 5%;
width: 100%;
}
.geltona {
height: 15%;
width: 50%;
background-color: yellow;
float: left;
}
.zydra {
height: 15%;
width: 50%;
background-color: lightblue;
float: right;
}
.balta {
height: 30%;
width: 70%;
background-color: white;
float: left;
}
.juoda {
height: 75%;
width: 30%;
background-color: black;
float: right;
}
.oranzine {
height: 20%;
width: 35%;
background-color: orange;
display: inline;
float: left;
}
.melyna {
position: relative;
height: 45%;
width: 35%;
background-color: blue;
float: right;
}
.zalia {
height: 25%;
width: 35%;
background-color: green;
float: left;
}
.ruda {
height: 5%;
width: 100%;
background-color: brown;
float: left;
}
/* ANIMACIJOS */
/* 3. Blokas animuotai nukeliauja ant gretimo bloko, pilnai uždengęs gretimą bloką – išnyksta */
/* 20. Pasisuka nuo 45 laipsnių iki 0 laipsnių ir padidėja 30%; */
.zalia:hover {
animation: sukasi 3s;
}
#keyframes sukasi {
0%{transform: rotate(45deg)}
100%{transform: rotate(0deg) scale(1.3)};
}
/* 21. Nuotrauka atslenka iš viršaus ir mažėja (trukmė 5 sec); */
.header img {
position: absolute;
top: -145px;
max-width: 145px;
max-height: 145px;
background: transparent;
transition: 5s;
}
.header:hover img {
transition: 5s;
top: 0;
max-width: 45px;
max-height: 45px;
}
/* MEDIA QUERIES */
#media only screen and (max-width: 768px) and (max-height: 1024px){
.geltona {
height: 25%;
width: 100%;
}
.zydra {
display: none;
}
.balta {
height: 20%;
width: 70%;
}
.juoda {
height: 65%;
width: 30%;
}
.oranzine {
display: none;
}
.melyna {
height: 45%;
width: 40%;
}
.zalia {
height: 45%;
width: 30%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>IPP Kursinis</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" content="initial-scale=1">
<link rel="stylesheet" type="text/css" href="src/css/main.css">
</head>
<body>
<div class="header">
<img src="img/foto.jpg">
</div>
<div class="geltona"></div>
<div class="zydra"
id="keiciamaSpalva"
onmouseover="changeBackground(this.id, 'red', 'yellow');"
onmouseout="changeBackground(this.id, 'lightblue', 'black');">
<p>Lorem ipsum</p>
</div>
<div class="balta"
id="balta"
onmouseover="showClass();"
onmouseout="removeClass();">
</div>
<div class="juoda"></div>
<div class="oranzine"></div>
<div class="melyna">
<p id="demo"></p>
</div>
<div class="zalia"></div>
<div class="ruda"></div>
<!-- JAVASCRIPT prasideda nuo čia -->
<script type="text/javascript">
/* Keičiama teksto ir fono spalva pagal nurodymus. */
function changeBackground(id, color, textColor) {
document.getElementById(id).style.background = color;
document.getElementById(id).style.color = textColor;
};
/* Parodome bloko klasę ir ją ištriname, kad nesipildytų visas blokas*/
function showClass() {
var element = document.getElementById('balta');
element.innerHTML = element.innerHTML + "<p> Šio bloko klasė: "+element.className+"</p>";
};
function removeClass() {
document.getElementById('balta').innerHTML = "";
};
/* Rodoma lango, ekrano ir slankiklių informacija, tik tuomet, kai keičiame ekrano dydį. */
window.onresize = displayWindowSize;
function displayWindowSize(){
document.getElementById("demo").innerHTML =
"Ekrano plotis: " + screen.width + "<br>" +
"Ekrano aukštis: " + screen.height + "<br>" +
"Lango plotis: " + window.innerWidth + "<br>" +
"Lango aukštis: " + window.innerHeight + "<br>" +
"Slankiklio horizontali padėtis: " + window.scrollX + "<br>" +
"Slankiklio vertikali padėtis: " + window.scrollY;
};
</script>
</body>
</html>
With the least amount of changes for this code, I came up with this.
Wrap your two neighbouring containers (geltona and zydra) in another container (gelzy here) and give it the position:relative and the two child containers the position:absolute with left:0 and right:0 instead of the floats.
Make use of the transition on hover to move the geltona (with higher z-index)to 50% of the left to overlap on the blue container
.gelzy{
position:relative;
height:15%;
width:100%;
}
.geltona {
height: 100%;
width: 50%;
background-color: yellow;
left:0;
position: absolute;
z-index:2;
transition:left 1s ease-in-out;
}
.zydra {
height: 100%;
width: 50%;
background-color: lightblue;
right:0;
position: absolute;
}
.geltona:hover {
left:50%;
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
p {
margin: 10px;
}
.header {
height: 5%;
width: 100%;
}
.gelzy{
position:relative;
height:15%;
width:100%;
}
.geltona {
height: 100%;
width: 50%;
background-color: yellow;
left:0;
position: absolute;
z-index:2;
transition:left 1s ease-in-out;
}
.zydra {
height: 100%;
width: 50%;
background-color: lightblue;
right:0;
position: absolute;
}
.geltona:hover {
left:50%;
}
.balta {
height: 30%;
width: 70%;
background-color: white;
float: left;
}
.juoda {
height: 75%;
width: 30%;
background-color: black;
float: right;
}
.oranzine {
height: 20%;
width: 35%;
background-color: orange;
display: inline;
float: left;
}
.melyna {
position: relative;
height: 45%;
width: 35%;
background-color: blue;
float: right;
}
.zalia {
height: 25%;
width: 35%;
background-color: green;
float: left;
}
.ruda {
height: 5%;
width: 100%;
background-color: brown;
float: left;
}
/* ANIMACIJOS */
/* 3. Blokas animuotai nukeliauja ant gretimo bloko, pilnai uždengęs gretimą bloką – išnyksta */
/* 20. Pasisuka nuo 45 laipsnių iki 0 laipsnių ir padidėja 30%; */
.zalia:hover {
animation: sukasi 3s;
}
#keyframes sukasi {
0% {
transform: rotate(45deg)
}
100% {
transform: rotate(0deg) scale(1.3)
}
;
}
/* 21. Nuotrauka atslenka iš viršaus ir mažėja (trukmė 5 sec); */
.header img {
position: absolute;
top: -145px;
max-width: 145px;
max-height: 145px;
background: transparent;
transition: 5s;
}
.header:hover img {
transition: 5s;
top: 0;
max-width: 45px;
max-height: 45px;
}
/* MEDIA QUERIES */
#media only screen and (max-width: 768px) and (max-height: 1024px) {
.geltona {
height: 25%;
width: 100%;
}
.zydra {
display: none;
}
.balta {
height: 20%;
width: 70%;
}
.juoda {
height: 65%;
width: 30%;
}
.oranzine {
display: none;
}
.melyna {
height: 45%;
width: 40%;
}
.zalia {
height: 45%;
width: 30%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>IPP Kursinis</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" content="initial-scale=1">
<link rel="stylesheet" type="text/css" href="src/css/main.css">
</head>
<body>
<div class="header">
<img src="img/foto.jpg">
</div>
<div class="gelzy">
<div class="geltona"></div>
<div class="zydra" id="keiciamaSpalva" onmouseover="changeBackground(this.id, 'red', 'yellow');" onmouseout="changeBackground(this.id, 'lightblue', 'black');">
<p>Lorem ipsum</p>
</div>
</div>
<div class="balta" id="balta" onmouseover="showClass();" onmouseout="removeClass();">
</div>
<div class="juoda"></div>
<div class="oranzine"></div>
<div class="melyna">
<p id="demo"></p>
</div>
<div class="zalia"></div>
<div class="ruda"></div>
<!-- JAVASCRIPT prasideda nuo čia -->
<script type="text/javascript">
/* Keičiama teksto ir fono spalva pagal nurodymus. */
function changeBackground(id, color, textColor) {
document.getElementById(id).style.background = color;
document.getElementById(id).style.color = textColor;
};
/* Parodome bloko klasę ir ją ištriname, kad nesipildytų visas blokas*/
function showClass() {
var element = document.getElementById('balta');
element.innerHTML = element.innerHTML + "<p> Šio bloko klasė: " + element.className + "</p>";
};
function removeClass() {
document.getElementById('balta').innerHTML = "";
};
/* Rodoma lango, ekrano ir slankiklių informacija, tik tuomet, kai keičiame ekrano dydį. */
window.onresize = displayWindowSize;
function displayWindowSize() {
document.getElementById("demo").innerHTML =
"Ekrano plotis: " + screen.width + "<br>" +
"Ekrano aukštis: " + screen.height + "<br>" +
"Lango plotis: " + window.innerWidth + "<br>" +
"Lango aukštis: " + window.innerHeight + "<br>" +
"Slankiklio horizontali padėtis: " + window.scrollX + "<br>" +
"Slankiklio vertikali padėtis: " + window.scrollY;
};
</script>
</body>
</html>
Related
I'm trying to make an image inside a slider to keep its aspect ratio. With Chrome, it works like a charm. But unfortunately Safari is driving me crazy and I can't figure out why this is happening.
Screenshot from Chrome:
and here the screenshot from Safari:
I have no idea why, but Safari keeps "inserting" these gray spacings around the image.
Here is the HTML:
<div class="slideshow-wrapper">
<button
type="button"
class="visually-hidden slideshow__pause"
data-id="ee8tnv"
aria-live="polite"
>
<span class="slideshow__pause-stop">
<svg
aria-hidden="true"
focusable="false"
role="presentation"
class="m-icon m-icon--pause"
viewBox="0 0 24 24"
>
<path d="M14,19H18V5H14M6,19H10V5H6V19Z"></path>
</svg>
<span class="m-icon__fallback-text">Diashow pausieren</span>
</span>
<span class="slideshow__pause-play">
<svg
aria-hidden="true"
focusable="false"
role="presentation"
class="m-icon m-icon--play"
viewBox="0 0 24 24"
>
<path d="M8,5.14V19.14L19,12.14L8,5.14Z"></path>
</svg>
<span class="m-icon__fallback-text">Diashow abspielen</span>
</span>
</button>
<div
class="
keep-ar
slideshow slideshow--small
box
slick-initialized slick-slider slick-dotted
"
id="Slideshow-ee8tnv"
data-autoplay="false"
data-speed="5000"
>
<div class="slick-list draggable">
<div class="slick-track" style="opacity: 1; width: 750px">
<div
class="
slideshow__slide slideshow__slide--image-mgx38u
slick-slide slick-current slick-active
"
data-slick-index="0"
aria-hidden="false"
role="tabpanel"
id="slickSlide00"
aria-labelledby="slickDot00"
tabindex="-1"
style="
width: 375px;
position: relative;
left: 0px;
top: 0px;
z-index: 999;
opacity: 1;
"
>
<div class="keep-ar slideshow__image">
<picture>
<source
srcset="
//img-2.versacommerce.de/resize=master/gravity=center/++/vc-unsplash-proxy.s3.eu-central-1.amazonaws.com/UWkCguB75-E.jpg
"
/>
<img
data-src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
alt=""
/>
</picture>
</div>
<div class="slideshow__text-wrap slideshow__overlay">
<div class="keep-ar slideshow__text-content">
<div class="page-width">
<h2 class="h1 mega-title slideshow__title">Foto-Slide</h2>
<span class="mega-subtitle slideshow__subtitle">
Erzähle deine Geschichte mit Videos und Fotos
</span>
</div>
</div>
</div>
</div>
<div
class="slideshow__slide slideshow__slide--image-gy5hav slick-slide"
data-slick-index="1"
aria-hidden="true"
role="tabpanel"
id="slickSlide01"
aria-labelledby="slickDot01"
tabindex="-1"
style="
width: 375px;
position: relative;
left: -375px;
top: 0px;
z-index: 998;
opacity: 0;
"
>
<div class="keep-ar slideshow__image">
<picture>
<source
srcset="
//img-3.versacommerce.de/resize=master/gravity=center/++/vc-unsplash-proxy.s3.eu-central-1.amazonaws.com/c9FQyqIECds.jpg
"
/>
<img
data-src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
alt=""
/>
</picture>
</div>
<div class="slideshow__text-wrap slideshow__overlay">
<div class="keep-ar slideshow__text-content">
<div class="page-width">
<h2 class="h1 mega-title slideshow__title">Foto-Slide</h2>
<span class="mega-subtitle slideshow__subtitle">
Erzähle deine Geschichte mit Videos und Fotos
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<ul class="slick-dots" style="display: block" role="tablist">
<li
class="slick-active"
aria-hidden="false"
role="tab"
aria-selected="true"
aria-controls="slickSlide00"
id="slickDot00"
>
<button type="button" data-role="none" role="button" tabindex="0">
Slide 1
</button>
</li>
<li
role="tab"
aria-selected="false"
aria-controls="slickSlide01"
id="slickDot01"
>
<button type="button" data-role="none" role="button" tabindex="0">
Slide 2
</button>
</li>
</ul>
</div>
</div>
and the SCSS:
slideshow-height-small: 475px;
$slideshow-height-medium: 650px;
$slideshow-height-large: 775px;
$slideshow-loader: #fff;
$z-index-slideshow-image: 1;
$z-index-slideshow-video: 2;
$z-index-slideshow-text: 3;
$z-index-slideshow-controls: 4;
$color-slideshow-close-bg: #fff;
$color-slideshow-close-text: #000;
.slideshow-wrapper {
position: relative;
}
.keep-ar.slideshow {
height: fit-content; //$slider-small--medium;
height: -moz-fit-content; //$slider-small--medium;
&--medium {
height: fit-content; //$slider-small--medium;
height: -moz-fit-content; //$slider-medium--medium;
}
&--large {
height: fit-content; //$slider-large--medium;
height: -moz-fit-content; //$slider-large--medium;
}
// Make sure slides fill full height
.slideshow__slide,
.slick-list,
.slick-track {
height: fit-content; //100%;
height: -moz-fit-content;
}
.slick-prev,
.slick-next {
height: fit-content; //100%;
height: -moz-fit-content;
}
.slick-dots {
bottom: 0.5em; //$gutter-site-mobile;
}
#include respond('medium') {
height: fit-content; //$slider-small--medium;
height: -moz-fit-content;
&--medium {
height: fit-content; //$slider-medium--medium;
height: -moz-fit-content;
}
&--large {
height: fit-content; //$slider-large--medium;
height: -moz-fit-content;
}
}
#include respond('large') {
height: fit-content; //$slider-small--large;
height: -moz-fit-content;
&--medium {
height: fit-content; //$slider-medium--large;
height: -moz-fit-content;
}
&--large {
height: fit-content; //$slider-large--large;
height: -moz-fit-content;
}
}
}
.slideshow {
overflow: hidden;
height: $slider-small--medium;
margin-bottom: 0;
&--medium {
height: $slider-medium--medium;
}
&--large {
height: $slider-large--medium;
}
// Make sure slides fill full height
.slideshow__slide,
.slick-list,
.slick-track {
height: 100%;
}
.slick-prev,
.slick-next {
top: 0;
height: 100%;
margin-top: 0;
width: 40px;
}
.slick-prev {
left: 0;
}
.slick-next {
right: 0;
}
.slick-dots {
bottom: $gutter-site-mobile;
text-align: center;
left: 50%;
transform: translateX(-50%);
// sass-lint:disable SelectorDepth
li button::before {
color: $color-slideshow-dots;
}
}
#include respond('medium') {
height: $slider-small--medium;
&--medium {
height: $slider-medium--medium;
}
&--large {
height: $slider-large--medium;
}
}
#include respond('large') {
height: $slider-small--large;
&--medium {
height: $slider-medium--large;
}
&--large {
height: $slider-large--large;
}
}
}
.video-is-playing .slick-dots {
// sass-lint:disable no-important
display: none !important;
}
// Pause button (focusable by keyboard only)
.slideshow__pause:focus {
clip: auto;
width: auto;
height: auto;
margin: 0;
color: $color-btn-primary-text;
background-color: $color-btn-primary;
padding: $gutter-site / 2;
z-index: $z-index-skip-to-content;
transition: none;
.video-is-playing & {
display: none;
}
}
.slideshow__pause-stop {
display: block;
.is-paused & {
display: none;
}
}
.slideshow__pause-play {
display: none;
.is-paused & {
display: block;
}
}
/*================ General slide styles ================*/
.slideshow__slide {
position: relative;
overflow: hidden;
}
.slideshow__link {
display: block;
position: relative;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
&:active,
&:focus {
opacity: 1;
}
}
.slideshow__overlay {
#include overlay($z-index-slideshow-text);
}
/*================ Slide images ================*/
.keep-ar.slideshow__image {
img {
object-fit: contain; //cover;
}
}
.slideshow__image {
transition: $transition-image-slideshow;
opacity: 0;
height: 100%;
picture {
display: flex;
height: 100%;
}
img {
display: block;
min-width: 100%;
width: 100%;
height: auto;
object-fit: cover;
}
.slick-initialized &,
.no-js & {
opacity: 1;
}
.slideshow__slide--background-video & {
opacity: 0;
}
.no-autoplay & {
opacity: 1;
}
}
// z-index stacking issues in oldIE
.ie9 {
.slideshow__slide {
// sass-lint:disable no-important
z-index: 1 !important;
}
.slick-dots {
z-index: 2;
}
}
/*================ Slide text ================*/
.slideshow__text-wrap {
height: 100%;
.slideshow__link & {
cursor: inherit;
}
.slideshow__slide--has-background-video & {
padding-top: $gutter-site * 3;
}
.video-is-playing & {
display: none;
}
.slideshow__slide.video-is-paused & {
display: none;
}
}
.slideshow__text-content {
text-align: center;
position: absolute;
width: 100%;
top: 50%;
#include transform(translateY(-40%));
opacity: 0;
transition: $transition-text-slideshow;
transition-delay: 0.3s;
z-index: $z-index-slideshow-text;
.slick-active &,
.no-js & {
#include transform(translateY(-50%));
opacity: 1;
}
&::after {
content: '';
#include spinner(40px, $slideshow-loader);
#include animation(spin 0.65s infinite linear);
opacity: 1;
transition: all 1s cubic-bezier(0.29, 0.63, 0.44, 1);
bottom: -$gutter-site;
left: 50%;
}
.slick-initialized &,
.no-js & {
&::after {
opacity: 0;
visibility: hidden;
content: none;
}
}
}
#media only screen and (max-width: 500px) {
.keep-ar.slideshow__text-content {
font-size: 70%;
}
}
#media only screen and (max-width: 350px) {
.keep-ar.slideshow__text-content {
font-size: 60%;
}
}
.slideshow__title {
color: $color-overlay-title-text;
}
.slideshow__subtitle {
display: block;
color: $color-overlay-title-text;
}
I was able to fix it by just setting the height of the img to 100%.
img {
display: block;
min-width: 100%;
width: 100%;
**height: 100%;**
object-fit: cover;
}
I am working with this parallaxish 3d effect i found in a codepen. However I need to add an additional wrapper around all the html. When i wrap the html contents in a <div> everything disappears. When I wrap it in a <span> tag everything is fine. Also if i set that <span> tag to display:block; everything disappears again.
Why is this happening when wrapped in a block element?
Thanks!
https://codepen.io/anon/pen/JapeJX
When you add display: block make sure u set its height to 100% as its inner elements have height set in %.
Checkout https://stackoverflow.com/a/5658062/7333443
CodePen: https://codepen.io/anon/pen/QVQJPR
!(function ($doc, $win) {
var screenWidth = $win.screen.width / 2,
screenHeight = $win.screen.height / 2,
$elems = $doc.getElementsByClassName("elem"),
validPropertyPrefix = "",
otherProperty = "perspective(1000px)",
elemStyle = $elems[0].style;
if (typeof elemStyle.webkitTransform == "string") {
validPropertyPrefix = "webkitTransform";
} else if (typeof elemStyle.MozTransform == "string") {
validPropertyPrefix = "MozTransform";
}
$doc.addEventListener("mousemove", function (e) {
var centroX = e.clientX - screenWidth,
centroY = screenHeight - (e.clientY + 13),
degX = centroX * 0.02,
degY = centroY * 0.01,
$elem;
for (var i = 0; i < $elems.length; i++) {
$elem = $elems[i];
$elem.style[validPropertyPrefix] =
otherProperty + "rotateY(" + degX + "deg) rotateX(" + degY + "deg)";
}
});
})(document, window);
/* CREDITS TO DESKTOPOGRAPHY FOR IMAGE USED */
html,
body {
width: 100%;
height: 100%;
}
body {
background: #004382;
overflow: hidden;
}
.wrapper {
transform-style: preserve-3d;
margin: 0 auto;
max-width: 982px;
width: 100%;
height: 100%;
position: relative;
display: flex;
justify-content: center;
align-self: center;
background: url("http://portalpacific.net/img/desk/icon-circles.png")
no-repeat center center;
background-size: contain;
}
.bloc {
height: 100%;
width: 100%;
position: relative;
display: flex;
justify-content: center;
align-self: center;
background-size: contain;
background-position: center;
}
.content {
transform: translateZ(80px) scale(1);
-webkit-transform: translateZ(80px) scale(1);
height: 100%;
width: 100%;
max-width: 720px;
position: absolute;
margin: auto;
color: #fff;
z-index: 3;
}
.content1 {
background: url("http://portalpacific.net/img/desk/Website.png") no-repeat;
background-position: center;
max-width: 982px;
width: 100%;
height: 100%;
position: relative;
display: flex;
justify-content: center;
align-self: center;
background-size: contain;
}
.content p:nth-of-type(1) {
font-size: 36px;
line-height: 60px;
position: absolute;
}
.content p:nth-of-type(2) {
position: absolute;
}
.block {
display: block;
height: 100%;
}
<span class="block">
<div class="wrapper elem" style="transform: perspective(700px) rotateY(0deg) rotateX(0deg);">
<div class="bloc">
<div class="content content1"></div>
<div class="content content2">
</div>
</div>
</div>
</span>
I've created this website on codepen. While trying to make it responsive for all platforms I ran into a problem. It appears a single div covers the whole page (only on IOS) and not all heights are working properly (meaning nothing fits).
I've been at it for days and still have no clue, why all the heights and rules don't apply on IOS.
I've tried removing the video-section which reveals most of the page except the eind section which is just a blank white.
I've tried adding max-height which does reveal some of the other content, but it also seems as if the page can't get any taller on IOS so I'm still limited to a space to work with. Also it doesn't seem a proper solution.
I've tried changing the position but with no avail.
It just seems as if the heights don't properly work on IOS
Can anyone help me figure out why this is happening?
var $animation_elements = $('.animation-element');
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.addClass('in-view');
} else {
$element.removeClass('in-view');
}
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
var controller = new ScrollMagic();
var ctrl = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: 'onLeave'
}
});
//Enter section-1
new ScrollMagic.Scene({
triggerElement: "#coming-soon",
duration: "100%"
})
.setTween(TweenMax.to("#image-1", 1, { top: "0%" }))
.addTo(ctrl);
new ScrollMagic.Scene({
triggerElement: "#coming-soon",
duration: "100%"
})
.setTween(TweenMax.to(".sign-up-banner", 1, { top: "0%" }))
.addTo(ctrl);
new ScrollMagic.Scene({
triggerElement: "#coming-soon",
duration: "100%"
})
.setTween(TweenMax.to("#text-1", 1, { top: "0%" }))
.addTo(ctrl);
//Leave section-1
new ScrollMagic.Scene({
triggerElement: "#introductie-1",
duration: "100%"
})
.setTween(TweenMax.to("#image-1", 1, { top: "40%", opacity:-1 }))
.addTo(ctrl);
new ScrollMagic.Scene({
triggerElement: "#introductie-1",
duration: "100%"
})
.setTween(TweenMax.to("#text-1", 1, { top: "-50%", opacity:0 }))
.addTo(ctrl);
//leave seaction-2
new ScrollMagic.Scene({
triggerElement: "#introductie-2",
duration: "100%"
})
.setTween(TweenMax.to("#image-2", 1, { top: "-40%", opacity:0 }))
.addTo(ctrl);
new ScrollMagic.Scene({
triggerElement: "#introductie-2",
duration: "100%"
})
.setTween(TweenMax.to("#text-2", 1, { top: "-50%", opacity:0 }))
.addTo(ctrl);
new ScrollMagic.Scene({
triggerElement: "#introductie-2",
duration: "100%"
})
.setTween(TweenMax.to("#release", 1, {opacity:1 }))
.addTo(ctrl);
#import url("https://fonts.googleapis.com/css?family=Raleway:200");
* {
font-family: "Raleway", sans-serif;
font-size: 14px;
font-weight: 100 !important;
}
input {
-webkit-appearance: none;
}
html,
body,
section {
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
color: #666;
}
p,
h1,
h2,
h3,
h4 {
margin: 0px;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
margin: 50px 25px;
}
ul li .fa {
font-size: 5em;
transition: all 1s ease;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
a {
color: #666;
}
.desktop-only {
display: initial;
}
.align-center {
position: absolute !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.mobile-only {
display: none;
}
.icon {
background-color: antiquewhite;
border-radius: 50%;
width: 150px;
height: 150px;
margin: 20px auto;
}
.fa-icon {
font-size: 5em !important;
padding: 40px;
}
.nederland-icon {
width: 40%;
padding: 40px;
}
#mc_embed_signup form {
position: absolute !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* (x, y) => position */
-ms-transform: translate(-50%, -50%);
/* IE 9 */
-webkit-transform: translate(-50%, -50%);
/* Chrome, Safari, Opera */
padding-left: 0px !important;
}
.sign-up-banner {
z-index: 2;
position: relative;
top: -50%;
color: white;
height: 50%;
background-color: #f3c17e;
}
.sign-up-banner input::placeholder {
color: white;
}
.sign-up-banner #mc_embed_signup .mc-field-group input {
border-bottom: 2px solid #ffffff !important;
}
.sign-up-banner #mc_embed_signup {
background: #fff0;
}
.sign-up-banner #mc_embed_signup .mc-field-group input {
background-color: #ffffff00;
color: white;
}
.sign-up-banner #mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {
background-color: rgba(255, 255, 255, 0);
}
.video-section {
z-index: 3;
overflow: hidden;
position: relative;
top: 0px;
background-color: black;
max-height: 100%;
max-height: 100vh;
}
.video-section video {
width: 100%;
}
#coming-soon {
display: table;
position: absolute;
height: 100%;
width: 100%;
top: 0px;
color: white !important;
z-index: 3;
max-height: 100%;
max-height: 100vh;
}
.coming-soon h1 {
font-size: 52px;
}
.introductie {
position: relative;
z-index: 1;
}
#introductie-1 {
height: 100%;
}
#introductie-1 #image-1 {
overflow: hidden;
width: 25%;
margin: 90px auto;
max-height: 70%;
}
#introductie-1 .text-container {
width: 500px;
margin: 180px auto;
color: #666;
}
#introductie-1 .text-container h1 {
font-size: 2em;
margin-bottom: 40px;
}
#introductie-1 .text-container p {
font-size: 1.4em;
}
#introductie-2 {
height: 100%;
}
#introductie-2 h1 {
font-size: 2em;
margin-bottom: 40px;
}
#introductie-2 p {
font-size: 1.4em;
}
#introductie-2 .text-container {
width: 60%;
text-align: center;
margin: 0 auto;
}
#introductie-2 #text-2 {
position: relative;
}
#introductie-2 #image-2 {
overflow: hidden;
width: 60%;
margin: 90px auto;
position: relative;
}
#introductie-2 #image-2 img {
width: 100%;
}
.left,
.right {
width: 50%;
}
.left {
float: left;
}
.right {
float: right;
}
#image-1 {
position: absolute;
top: -70%;
left: 10%;
}
#text-1 {
top: 40%;
right: 10%;
position: absolute;
}
.center-container {
display: table-cell;
vertical-align: middle;
}
.center {
margin-left: auto;
margin-right: auto;
width: 80%;
}
.center-text {
text-align: center;
overflow: hidden;
}
#eind {
position: relative;
}
#release {
opacity: 0;
}
#disclaimer {
position: relative;
left: 48%;
bottom: 10px;
}
.fa-facebook:hover {
color: #3b5998;
}
.fa-instagram:hover {
color: #fbad50;
}
#eind ul {
padding: 0px;
}
#eind p {
margin-bottom: 100px;
}
.button {
background-color: #faebd7 !important;
color: #666 !important;
}
#mc_embed_signup {
width: 40%;
margin: 0 auto;
}
#mc_embed_signup .mc-field-group input {
border: 0px !important;
border-radius: 0px !important;
border-bottom: 2px solid #666666 !important;
}
#mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error {
border: 0px !important;
border-radius: 0px !important;
border-bottom: 2px solid #e85c41 !important;
}
#mc_embed_signup_scroll {
text-align: center;
}
textarea:focus,
input:focus {
outline: none;
}
#mc_embed_signup h2 {
margin-bottom: 10% !important;
}
.clear {
width: 150px;
margin: 0 auto;
margin-top: 5%;
}
.clear #mc-embedded-subscribe {
border-radius: 0px !important;
width: 150px !important;
margin: 0 auto !important;
height: 50px !important;
}
/*animation element*/
.animation-element {
position: relative;
}
/*bounce up animation for the subject*/
.bounce-up {
opacity: 0;
-moz-transition: all 700ms ease-out;
-webkit-transition: all 700ms ease-out;
-o-transition: all 700ms ease-out;
transition: all 700ms ease-out;
-moz-transform: translate3d(0px, 200px, 0px);
-webkit-transform: translate3d(0px, 200px, 0px);
-o-transform: translate(0px, 200px);
-ms-transform: translate(0px, 200px);
transform: translate3d(0px, 200, 0px);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.bounce-up.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
#media (max-width: 1440px) {
#disclaimer {
position: relative;
left: 48%;
bottom: 10px;
}
}
#media (max-width: 1024px) {
#image-1 img {
position: relative;
left: -244px;
}
}
#media (max-width: 768px) {
.video {
margin-top: 30%;
}
#introductie-1 .text-container {
width: 280px;
}
#image-1-container #image-1 {
width: 35%;
}
#mc_embed_signup {
width: 60%;
}
}
#media (max-width: 430px) {
.sign-up-banner {
position: sticky;
top: 0px !important;
max-height: 325px;
}
.desktop-only {
display: none;
}
#disclaimer {
left: 42%;
}
.mobile-only {
display: inherit;
}
.coming-soon h1 {
font-size: 45px;
}
.sign-up-banner {
height: 60%;
}
#introductie-1 {
height: 250%;
}
#introductie-2 {
max-height: 500px;
height: 200%;
}
#release {
opacity: 1;
}
.left,
.right {
width: 100%;
}
#introduction-1-container {
height: 100%;
}
#introductie-1 #image-1 {
display: none;
}
#introductie-2 #image-2 {
display: none;
}
#introductie-2 .text-container {
width: 80%;
text-align: center;
margin: 0 auto;
}
#introductie-1 .text-container {
position: initial;
width: 80%;
margin: 0 auto;
text-align: center;
margin-top: 40px;
}
#coming-soon h1 {
font-size: 24px;
}
#introductie-1 .text-container p {
font-size: 1.2em;
}
#introductie-2 p {
font-size: 1.2em;
}
.video {
margin-top: 60%;
}
.social-media ul {
padding: 0px;
}
#mc_embed_signup {
width: 100%;
margin: 0 auto;
}
#text-1 {
opacity: 1 !important;
}
#text-2 {
position: initial !important;
opacity: 1 !important;
}
#eind {
height: 120%;
max-height: 1000px;
}
.eind-block {
position: relative;
}
.fa-balance-scale {
padding: 40px 34px;
}
}
#media (max-width: 320px) {
#coming-soon h1 {
font-size: 24px;
}
#introductie-1 .text-container p {
font-size: 1.2em;
}
#introductie-2 p {
font-size: 1.2em;
}
.video {
margin-top: 60%;
}
.social-media ul {
padding: 0px;
}
#mc_embed_signup {
width: 100%;
margin: 0 auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
<title>Volks</title>
<link rel="stylesheet" href="styles/index.processed.css">
<script src="https://use.fontawesome.com/39f17a3ca2.js"></script>
</head>
<body>
<section class="video-section">
<div class="video">
<video loop autoplay id="video-background" muted playsinline>
<source src="http://rapio.nl/videos/teaser.mp4" type="video/mp4">
</video>
</div>
</section>
<section id="coming-soon">
<div class="align-center center-text coming-soon">
<h1 class="">Binnenkort verkrijgbaar.</h1>
</div>
</section>
<section class="sign-up-banner">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup {
background: #fff;
clear: left;
font: 14px Helvetica, Arial, sans-serif;
}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://volksphone.us17.list-manage.com/subscribe/post?u=e0b25e148103e039f3ed554d1&id=bbad48d887" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Ontvang een notificatie bij de bekendmaking van onze crowdfundings-campagne.</h2>
<div class="mc-field-group">
<input type="email" placeholder="Emailadres" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_e0b25e148103e039f3ed554d1_bbad48d887" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="verzend" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
<script type='text/javascript'>
(function($) {
window.fnames = new Array();
window.ftypes = new Array();
fnames[0] = "EMAIL";
ftypes[0] = "email";
fnames[1] = "FNAME";
ftypes[1] = "text";
fnames[2] = "LNAME";
ftypes[2] = "text";
fnames[3] = "BIRTHDAY";
ftypes[3] = "birthday";
})(jQuery);
var $mcj = jQuery.noConflict(true);
</script>
<!--End mc_embed_signup-->
</section>
<section class="introductie" id="introductie-1">
<div class="container" id="introduction-1-container">
<div class="left" id="image-1-container">
<div class="image-container " id="image-1">
<img src="media/image-1.jpg">
</div>
</div>
<div class="right">
<div class="text-container" id="text-1">
<div class="icon mobile-only"><img class="nederland-icon" src="media/nederland_icoon.png"></div>
<h1>Van Nederlandse Bodem</h1>
<p>Volks is een Amsterdamse startup achter de eerste Nederlandse high-end smartphone. Maak kennis met onze technologie, je zult verrast zijn.</p><br><br>
<div class="icon mobile-only"><i class="fa fa-balance-scale mobile-only fa-icon" aria-hidden="true"></i></div>
<h1>Balans tussen prijs en kwaliteit</h1>
<p class="mobile-only">Wanneer had je voor het laatst een smartphone in je handen? Precies, nu.</p><p>Wanneer had je voor het laatst een smartphone in je handen? Precies, nu.</p><p>Er is een overvloed aan smartphones. Helaas betaal je nog steeds de hoogste prijs, of iets minder maar ontbreekt goede ondersteuning en kwaliteit. Volks wilt een balans bieden tussen een eerlijke prijs, goede customer support en topkwaliteit.
</p><br><br>
<div class="icon mobile-only"><i class="fa fa-users fa-icon" aria-hidden="true"></i></div>
<h1 class=" mobile-only">En nu voor iedereen</h1>
<p class=" mobile-only">Het is bijna zover. Binnenkort start de crowdfunding-campagne en hier hebben we jouw hulp hard bij nodig. Tijdens deze campagne kom je in de gelegenheid een pre-order te plaatsen. Slechts een gelimiteerd aantal Volks toestellen zijn beschikbaar tijdens de voorverkoop.
</p>
</div>
</div>
</div>
</section>
<section class="introdcutie desktop-only" id="introductie-2">
<div class="text-container" id="text-2">
<div class="icon mobile-only"><i class="fa fa-users fa-icon" aria-hidden="true"></i></div>
<h1>En nu voor iedereen</h1>
<p>Het is bijna zover. Binnenkort start de crowdfunding-campagne en hier hebben we jouw hulp hard bij nodig. Tijdens deze campagne kom je in de gelegenheid een pre-order te plaatsen. Slechts een gelimiteerd aantal Volks toestellen zijn beschikbaar tijdens de voorverkoop.
</p>
</div>
<div class="image-container " id="image-2">
<img src="media/image-2.png">
</div>
</section>
<section id="eind">
<div class="align-center center-text coming-soon eind-block">
<p>Meer info over de datum en technische specificaties volgt binnenkort op onze Facebookpagina.</p>
<h1 class="">Volks<i class="fa fa-copyright" aria-hidden="true" style="font-size:15px;"></i> <br> December 2017</h1>
<div class="social-media">
<ul>
<li>
<i class="fa fa-facebook" aria-hidden="true"></i>
</li>
<li>
<i class="fa fa-instagram" aria-hidden="true"></i>
</li>
</ul>
</div>
</div>
</section>
<a id="disclaimer" href="disclaimer.html">disclaimer</a>
<!-- ==== scripts ==== -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>
<!-- ==== CUSTOM JS ==== -->
<script src="scripts/index.js"></script>
</body>
</html>
It's not matter of IOS, it's matter of responsiveness. You have set fixed height to each section so it is overlapping with each others on mobile devices.
Just set all section height to height: 100vh.
And
#media (max-width: 430px){
.introductie {
height: 300vh;
overflow: hidden;
}
}
It should works.
I've Found my answer.
It was a JS script that automaticly finds the height of the window and sets that height to a given class.
But, that wasn't the whole solution. The height's where better, and weren't all over the place as it was before when I applied height:100%; to the html, body and section.
I made media queries, on the max-height per phone size, so it was expand beyond the intended sections.
https://90c726a539a841eb97f1b7b3f2aaf646.codepen.website
The JS solution is:
// On document ready set the div height to window
$(document).ready(function(){
// Assign a variable for the application being used
var nVer = navigator.appVersion;
// Assign a variable for the device being used
var nAgt = navigator.userAgent;
var nameOffset,verOffset,ix;
// First check to see if the platform is an iPhone or iPod
if(navigator.platform == 'iPhone' || navigator.platform == 'iPod'){
// In Safari, the true version is after "Safari"
if ((verOffset=nAgt.indexOf('Safari'))!=-1) {
// Set a variable to use later
var mobileSafari = 'Safari';
}
}
//===== FULL HEIGHT =====\\
// If is mobile Safari set window height +60
if (mobileSafari == 'Safari') {
// Height + 60px
$('.full-height').css('height',(($(window).height()) + 60)+'px');
} else {
// Else use the default window height
$('.full-height').css({'height':(($(window).height()))+'px'});
};
});
// On window resize run through the sizing again
$(window).resize(function(){
// If is mobile Safari set window height +60
if (mobileSafari == 'Safari') {
// Height + 60px
$('.full-height').css('height',(($(window).height()) + 60)+'px');
} else {
// Else use the default window height
$('.full-height').css({'height':(($(window).height()))+'px'});
};
/* //===== HALF HEIGHT =====\\
// If is mobile Safari set window height +60
if (mobileSafari == 'Safari') {
// Height + 60px
$('.half-height').css('min-height',(($(window).height() /2) + 60)+'px'/2);
} else {
// Else use the default window height
$('.half-height').css({'min-height':(($(window).height()/2) )+'px'});
};
// On window resize run through the sizing again
$(window).resize(function(){
// If is mobile Safari set window height +60
if (mobileSafari == 'Safari') {
// Height + 60px
$('.half-height').css('min-height',(($(window).height()/ 2) + 60)+'px');
} else {
// Else use the default window height
$('.half-height').css({'min-height':(($(window).height()/ 2) )+'px'});
};
});
//===== DOUBLE HEIGHT =====\\
// If is mobile Safari set window height +60
if (mobileSafari == 'Safari') {
// Height + 60px
$('.half-height').css('min-height',(($(window).height()* 2) + 60)+'px');
} else {
// Else use the default window height
$('.half-height').css({'min-height':(($(window).height()* 2) )+'px'});
};
});
// On window resize run through the sizing again
$(window).resize(function(){
// If is mobile Safari set window height +60
if (mobileSafari == 'Safari') {
// Height + 60px
$('.half-height').css('min-height',(($(window).height()* 2) + 60)+'px');
} else {
// Else use the default window height
$('.half-height').css({'min-height':(($(window).height()* 2) )+'px'});
};*/
});
And the CSS (used SCSS) solution is:
//IPHONE&SAMSUNG PLUS
#media (max-height: 736px) {
.full-height{
max-height:736px;
}
.introductie-mobile {
height: 1200px !important;
max-height: 1200px;
}
}
//IPHONE 6/7/8
#media (max-height: 667px) {
.full-height{
max-height:667px;
}
.introductie-mobile {
height: 1200px !important;
max-height: 1200px;
}
}
//IPHONE %
#media (max-height: 568px) {
.full-height{
max-height:568px;
}
.introductie-mobile {
height: 1200px !important;
max-height: 1200px;
}
}
The height of the top black <div class="video-section"> is full height on any device including iPhone. So height in and of itself is not the problem.
On other devices however, the position of the next <div class="sign-up-banner"> changes dynamically so that it moves with a parallax effect as you scroll down. Once you're fully past the top black <div class="video-section"> the entire second <div class="sign-up-banner"> is fully visible. This is being done with the javascript code. For whatever reason, this javascript is not running on the iPhone.
Some of the CSS applied to the <form> within the <div id="coming-soon"> is still applied which leaves you with the div stuck behind the first one.
You can reverse this with the following css:
.sign-up-banner{
position: static;
height: auto;
}
#mc_embed_signup form{
position: static !important;
-ms-transform: none; /* IE 9 */
-webkit-transform: none; /* Chrome, Safari, Opera */
transform: none;
}
You could wrap that in a media query so it only applies to a particular screen. To get it to apply for the iPhone.
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
//insert your css here
}
That will apply css to a iPhone 4 and 4s. It's not guaranteed to not apply to other devices, but css cannot target particular devices so it's the best we've got. You can see media queries which target other devices including other iPhone models at https://css-tricks.com/snippets/css/media-queries-for-standard-devices/.
My application needs to print out an arbitrarily large canvas that can span multiple page width and height widths.
There was a similar question some time back where it was claimed the browser won't print to multiple page widths.
Since this was a while back I am wondering if it is still true. Also, what strategies are available to print out a large canvas without splitting it up?
var canvas = document.getElementById("canvas1");
function draw_a() {
var context = canvas.getContext("2d");
// // LEVER
//plane
context.fillStyle = '#aaa';
context.fillRect(25, 90, 2500, 400);
}
$(document).ready(function() {
draw_a();
});
canvas {
border: 1px dotted;
}
.printOnly {
display: none;
}
#media print {
html,
body {
height: 100%;
background-color: yellow;
}
.myDivToPrint {
background-color: yellow;
/*
height: 100%;
width: 100%;
position: fixed;*/
top: 0;
left: 0;
margin: 0;
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
}
#media print and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
html,
body {
height: 100%;
background-color: yellow;
}
.myDivToPrint {
background-color: yellow;
/*
height: 100%;
width: 100%;
position: fixed;*/
top: 0;
left: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 18px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="window.print();" class="no-print">Print Canvas</button>
<div class="myDivToPrint">
<div class="Aligner-item">
<canvas height="2500px" width="4000px" id="canvas1"></canvas>
<div class="printOnly Aligner-item--bottom"> Print Only</div>
</div>
</div>
It does seem that browsers will split up a large canvas into multiple pages. I tested on MacOS Sierra using latest chrome and safari browsers.
A possible approach for printing a canvas is to first transform it to a data URI containing a representation of the image using canvas.toDataURL(). You can then manipulate the image dimensions prior to printing.
"<img src='" + canvas.toDataURL() + "' height='500px' width='500px' />'"
In the following example, the large 4500px by 4500px canvas is translated into an img and placed inside an iframe, used for printing. You can probably append the image to the original document and than print that specific element, but the iframe may be more flexible to handle print output. You can manipulate the img dimensions according to your requirements and print a scaled representation of the canvas. Note that I hardcoded the width and height of the image but this can be calculated and changed as needed for printing.
Due to iframe cross-origin restrictions, the code snippet below will not work here, but it does work on this jsfiddle.
The scaled 500px by 500px image representing the canvas fits on one page when printed.
var canvas = document.getElementById("canvas1");
function draw_a() {
var context = canvas.getContext("2d");
// // LEVER
//plane
context.fillStyle = '#aaa';
context.fillRect(25, 90, 4500, 4500);
}
print = function() {
window.frames["myFrame"].focus();
window.frames["myFrame"].print();
}
function setupPrintFrame() {
$('<iframe id="myFrame" name="myFrame">').appendTo("body").ready(function(){
setTimeout(function(){
$('#myFrame').contents().find('body').append("<img src='" + canvas.toDataURL() + "' height='500px' width='500px' />'");
},50);
});
}
$(document).ready(function() {
draw_a();
setupPrintFrame();
});
canvas {
border: 1px dotted;
}
.printOnly, #myFrame {
display: none;
}
#media print {
html,
body {
height: 100%;
background-color: yellow;
}
.myDivToPrint {
background-color: yellow;
/*
height: 100%;
width: 100%;
position: fixed;*/
top: 0;
left: 0;
margin: 0;
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
}
#media print and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
html,
body {
height: 100%;
background-color: yellow;
}
.myDivToPrint {
background-color: yellow;
/*
height: 100%;
width: 100%;
position: fixed;*/
top: 0;
left: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 18px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="print()" class="no-print">Print Canvas</button>
<div class="myDivToPrint">
<div class="Aligner-item">
<canvas height="4500px" width="4500px" id="canvas1"></canvas>
<div class="printOnly Aligner-item--bottom"> Print Only</div>
</div>
</div>
#media print {
#page {
size: 297mm 210mm; /* landscape */
/* you can also specify margins here: */
margin: 25mm;
margin-right: 45mm; /* for compatibility with both A4 and Letter */
}
}
var canvas = document.getElementById("canvas1");
function draw_a() {
var context = canvas.getContext("2d");
// // LEVER
//plane
context.fillStyle = '#aaa';
context.fillRect(25, 90, 2500, 400);
}
$(document).ready(function() {
draw_a();
});
canvas {
border: 1px dotted;
}
.printOnly {
display: none;
}
#media print {
#page {
size: 297mm 210mm; /* landscape */
/* you can also specify margins here: */
margin: 25mm;
margin-right: 45mm; /* for compatibility with both A4 and Letter */
}
html,
body {
height: 100%;
background-color: yellow;
}
.myDivToPrint {
background-color: yellow;
/*
height: 100%;
width: 100%;
position: fixed;*/
top: 0;
left: 0;
margin: 0;
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
}
#media print and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
html,
body {
height: 100%;
background-color: yellow;
}
.myDivToPrint {
background-color: yellow;
/*
height: 100%;
width: 100%;
position: fixed;*/
top: 0;
left: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 18px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="window.print();" class="no-print">Print Canvas</button>
<div class="myDivToPrint">
<div class="Aligner-item">
<canvas height="2500px" width="4000px" id="canvas1"></canvas>
<div class="printOnly Aligner-item--bottom"> Print Only</div>
</div>
</div>
Try this!
var canvas = document.getElementById("canvas1");
function draw_a() {
var context = canvas.getContext("2d");
context.fillStyle = '#aaa';
context.fillRect (25, 90, 2500, 400);
}
$(document).ready(function(){
draw_a();
});
#page Section1 {
size:8.27in 11.69in;
margin:0;
mso-header-margin:0;
mso-footer-margin:0;
mso-paper-source:0;
}
<button onclick="window.print();" class="no-print">Print Canvas</button>
<div class="myDivToPrint">
<div class="Aligner-item">
<canvas height="2500px" width="4000px" id="canvas1" style="border: solid 10px #000;"></canvas>
</div>
</div>
I just tested this fiddle in both browsers firefox and chrome using a localhost environment and it worked within both. Here is the original js fiddle
And here is the html I tested
var canvas = document.getElementById("canvas1");
function draw_a() {
var context = canvas.getContext("2d");
// // LEVER
//plane
context.fillStyle = '#aaa';
context.fillRect(25, 90, 2500, 400);
}
$(document).ready(function() {
draw_a();
});
div.sizePage {
color: #333;
}
canvas {
border: 1px dotted;
}
.printOnly {
display: none;
}
#media print {
html,
body {
height: 100%;
background-color: yellow;
}
.myDivToPrint {
background-color: yellow;
/*
height: 100%;
width: 100%;
position: fixed;*/
top: 0;
left: 0;
margin: 0;
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
}
#media print and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
html,
body {
height: 100%;
background-color: yellow;
}
.myDivToPrint {
background-color: yellow;
/*
height: 100%;
width: 100%;
position: fixed;*/
top: 0;
left: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 18px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="window.print();" class="no-print">Print Canvas</button>
<div class="myDivToPrint">
<div class="Aligner-item">
<canvas height="2500px" width="4000px" id="canvas1"></canvas>
<div class="printOnly Aligner-item--bottom"> Print Only</div>
</div>
</div>
So I thinks it's safe to say that it is supported in both browsers now.
I am using the most recent update on both browsers.
It is impossible to handle this problem using plain CSS styles.
I recommend to clone element to print multiple times (in this case), put copies after each other and make them "print only" using CSS. Additionally, canvas can't be just cloned - it needs to be redrawn for each copy.
Number of copies depends on the element and page widths.
Default page width is 210mm, it can be converted to px (Pixel to Centimeter?) and compared to the element's width.
When we have page width in pixels, we can set negative left margin for each copy respectively. Having that, entire canvas will be "divided" into columns and printed from top to bottom.
In order to have each copy printed starting from the new page, simple use this CSS rule:
page-break-before: always;
There is a lot of hardcoded things, however I think that you could use it to build a generic solution for your problem.
var divide = function(selector, pageWidth) {
var elementToDivide = document.querySelector(selector);
var widthPx = elementToDivide.offsetWidth;
var pageWidthPx = pageWidth * 3.7795;
for (var i = 1; i <= parseInt(widthPx/pageWidthPx); i++) {
var clone = elementToDivide.cloneNode(true);
elementToDivide.parentNode.appendChild(clone);
draw_a(document.getElementsByTagName("canvas"))
clone.style.marginLeft = "-" + (pageWidthPx * i) + "px";
clone.className += " printOnly";
}
}
var standardPrint = window.print;
window.print = function() {
if (!window.pagesDivided) {
divide(".myDivToPrint", 210);
window.pagesDivided = true;
}
standardPrint();
};
function draw(canvas) {
var context = canvas.getContext("2d");
var grd = context.createLinearGradient(0, 0, 4000, 2500);
grd.addColorStop(0, "yellow");
grd.addColorStop(1, "red");
context.fillStyle = grd;
context.fillRect(25, 25, 4000, 2500);
}
function draw_a(elem) {
if (elem.length != null && elem.length > 1) {
for (var i = 0; i < elem.length; i++) {
draw(elem[i]);
}
} else {
draw(elem);
}
}
$(document).ready(function() {
draw_a(document.getElementById("canvas1"));
});
canvas {
border: 5px dashed;
}
.printOnly {
display: none;
}
.myDivToPrint {
float: left;
}
#media print {
#page {
size: 297mm 210mm;
margin: 0mm;
margin-right: 0mm;
}
html,
body {
height: 100%;
background-color: yellow;
}
.myDivToPrint {
page-break-before: always;
background-color: yellow;
margin: 0;
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
page-break-before: always;
}
}
#media print and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
html,
body {
height: 100%;
background-color: yellow;
}
.myDivToPrint {
background-color: yellow;
top: 0;
left: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 18px;
align-items: center;
justify-content: center;
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="window.print();" class="no-print">Print Canvas</button>
<div class="myDivToPrint">
<div class="Aligner-item">
<canvas height="2500px" width="4000px" id="canvas1"></canvas>
<div class="printOnly Aligner-item--bottom"> Print Only</div>
</div>
</div>
I have two ratio div containers and a splitter bar div among. Unfortunately the bottom container is not rendered by Opera or Safari. How to conjure up the bottom one by keeping the calc() concept?
function GetHeight() {
var element = document.getElementById("bottomContent");
if (element) {
if (element.getBoundingClientRect) {
var rect = element.getBoundingClientRect();
var absHeight = getAbsoluteHeight(element);
alert(" rectHeight: " + rect.height + "\n offset height: " + element.offsetHeight + "\n client height: " + element.clientHeight + "\n abs height: " + absHeight);
} else {
alert("Browser does not support!");
}
} else {
alert("No element!");
}
}
function getAbsoluteHeight(el) {
el = (typeof el === 'string') ? document.querySelector(el) : el;
var styles = window.getComputedStyle(el);
var margin = parseFloat(styles['marginTop']) +
parseFloat(styles['marginBottom']);
return Math.ceil(el.offsetHeight + margin);
}
html,
body {
height: 95%;
}
.content {
background: rgba(221, 221, 221, 0.41);
min-width: 5px;
width: 100%;
height: 100%;
}
.splitCntainerVertical {
width: 100%;
height: 100%;
min-width: 5px;
margin: auto;
overflow: hidden;
}
.splitCntainerTopContent {
width: 100%;
min-height: 5px;
margin: auto;
overflow: hidden;
}
.splitCntainerBottomContent {
width: 100%;
min-height: 5px;
margin: auto;
overflow: hidden;
}
.splitterVertical {
border-radius: 2px;
background: rgba(31, 37, 37, 0.41);
margin-top: 10px;
margin-bottom: 10px;
height: 5px;
width: 100%;
cursor: n-resize;
}
<button onclick="GetHeight()">Get bottom container height</button>
<div class="splitCntainerVertical">
<div class="splitCntainerTopContent" style="height:65%;">
<div class="content"></div>
</div>
<div id="splitter" class="splitterVertical"></div>
<div id="bottomContent" class="splitCntainerBottomContent" style="height: calc(35% - 25px);">
<div class="content"></div>
</div>
</div>
Any idea?