Similar to how i want a div to take 100% height, 100% width, or both. i want a Canvas to take 100% width and 100% height:
(Link to JsFiddle for your perusal)
Markup:
<div id="canvasContainer">
<canvas id="myCanvas"></canvas>
</div>
CSS:
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
}
#canvasContainer {
width: 100%;
height: 100%;
background-color: green;
}
#myCanvas {
width: 100%;
height: 100%;
}
Javascript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(canvas.width, canvas.height);
ctx.stroke();
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(canvas.width, 0);
ctx.lineTo(0, canvas.height);
ctx.stroke();
Which results in something not taking 100% of browser window:
It works fine if you delete the Canvas:
Downside of that is then i don't have a Canvas.
Sizing a canvas element
If you stretch the canvas using CSS you will stretch the poor canvas which has a default size of 300x150 pixels to the whole screen - imagine you had an image of that size and which you did the same to - will look pretty bad.
Canvas content can not be stretched using CSS (it acts as an image that way). You need to explicitly set the pixel size of the canvas.
This means you will need to get the size of the parent container and set it as a pixel value on the canvas:
First off, to get rid of scroll bars etc.adjust the CSS you have:
body, html {
width: 100%;
height: 100%;
margin: 0;
padding:0;
overflow:hidden;
}
Now modify this rule:
#myCanvas {
background-color: green;
position:fixed;
left:0;
top:0;
}
Now reduce your markup to this only (if you want the canvas covering the whole sceeen you don't need a container other than the window):
<canvas id="myCanvas"></canvas>
Now we can calculate size:
var canvas;
window.onload = window.onresize = function() {
canvas = document.getElementById('myCanvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
And that's it.
Working demo (resize the window to see).
you can position absolute with 0 everywere:
canvas {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Then just look in which element it is positionned, add position: relative to handle the block it covers. In your case probably: #canvasContainer, but maybe body if it's just for a single full screen.
I have had a similar issue in the past. My solution for it was setting overflow: hidden on the html
Fiddle Here
It gets rid of that little bit at the bottom, which if you inspect the pages is just a little bit extra, and not actually the height of the body. If anyone has some insight into what that is I am all ears.
Modified some of the examples here to get mine to work.
JSFiddle: http://jsfiddle.net/FT3pP/1/
JS:
$( document ).ready( function () {
SizeBackground();
} );
function SizeBackground(){
var canvas = $( "canvas#background" )[0];
fitToContainer( canvas );
}
function fitToContainer( canvas ) {
canvas.width = canvas.parentElement.clientWidth;
canvas.height = canvas.parentElement.clientHeight;
}
CSS:
body, html {
margin: 0;
width: 100%;
height: 100%;
padding: 0; }
div .container {
width: 100%;
height: 100%; }
div#pallette {
position: absolute;
top: 1px;
bottom: 1px;
left: 1px;
right: 1px; }
canvas#background {
position: fixed;
left: 0;
top: 0;
background: black; }
HTML:
<body>
<div id="pallette">
<div class="container">
<canvas id="background"></canvas>
<canvas id="middleground"></canvas>
<canvas id="foreground"></canvas>
</div>
<div id="stats"></div>
<div id="chat"></div>
</div>
</body>
Only includes i had:
<!-- Styles Sheets -->
<link href="Scripts/App.min.css" rel="stylesheet" />
<!-- Javascript -->
<script src="Scripts/jquery-2.1.0.min.js"></script>
<script src="Scripts/jquery-ui-1.10.4.min.js"></script>
<script src="Scripts/app.js"></script>
Related
This question already has an answer here:
Eliminate ghost margin below HTML5 canvas element?
(1 answer)
Closed 8 months ago.
I'm using this answer https://stackoverflow.com/a/36233727/1350146 to scroll a canvas in a div. I'm also hiding the scrollbar. The problem is it appears to scroll too far, in this case if you scroll down you can see the red of the div the canvas is in.
I've tried messing with padding & margins and different sizes but no luck.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = '#00aa00'
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = '#fff'
ctx.font='12pt A'
ctx.fillText("scroll here to see red from screen div", 30, 50);
.screen {
background: red;
height: 100px;
width: 300px;
overflow: auto;
border-radius: 20px;
}
::-webkit-scrollbar {
width: 0px;
height: 0px;
}
<div class="screen">
<canvas id="myCanvas" width="300" height="120">
</canvas>
</div>
How can I make it scroll just to the end of the canvas and not show any of the container div underneath?
Thanks!
Make the canvas a block element or use vertical-align:top. By default, canvas is an inline element and it will behave similary to an img; thus you will have the whitespace issue due to vertical alignement (Image inside div has extra space below the image)
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = '#00aa00'
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = '#fff'
ctx.font='12pt A'
ctx.fillText("scroll here to see red from screen div", 30, 50);
.screen {
background: red;
height: 100px;
width: 300px;
overflow: auto;
border-radius: 20px;
}
canvas {
display:block;
}
::-webkit-scrollbar {
width: 0px;
height: 0px;
}
<div class="screen">
<canvas id="myCanvas" width="300" height="120">
</canvas>
</div>
Use a negative margin-bottom value for your canvas element. Anything between margin-bottom: -5px; and margin-bottom: -105px; will work for this example.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = '#00aa00'
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = '#fff'
ctx.font='12pt A'
ctx.fillText("scroll here to see red from screen div", 30, 50);
.screen {
background: red;
height: 100px;
width: 300px;
overflow: auto;
border-radius: 20px;
}
::-webkit-scrollbar {
width: 0px;
height: 0px;
}
canvas {
margin-bottom: -5px;
}
<div class="screen">
<canvas id="myCanvas" width="300" height="120">
</canvas>
</div>
I have a div that sits at 15% width of the screen. On click, that width increases to 100%. It's basically a pop-out content area.
In order to center the icons inside of the original 15% width parent in a nice, responsive manner, they are set as such:
.parent
position: relative;
width: 15%;
.icons;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
This basically creates an aside on the left with an icon toggle. The icons are centered inside of parent. But, when the icon is clicked I resize the parent to slide out and become width: 100%;. All of a sudden, those nice percentage values change relative to the parent and move into the center of the screen. I want to freeze them so they don't move! In other words, I would like them to stay in the position they were in when the parent div was 15%.
Fiddle: https://jsfiddle.net/ra6qa9jf/
The easiest solution would be to remove the icon div from the red box and give it a new parent. Then style the new parent to always have a width of 15% and to have position absolute so that it appears as a layer over the red box. So your new HTML might be:
<div class="parent"></div> //This is the red box, same styling as before
<div class="parent-2"> //This is the new parent container for the icons
<div class="icons">
<i class="fa fa-plus"></i>
</div> //This is the icon, same as before
</div>
And the corresponding new CSS:
.parent-2 {
position: absolute;
width: 15%;
height: 100%;
top: 0px;
left: 0px;
}
Lastly you'd just need to update your javascript so that the onClick listener changed the correct div width:
(function () {
var parent = document.getElementsByClassName('parent')[0];
var icons = document.getElementsByClassName('icons')[0],
toggle = false;
icons.addEventListener('click', function(event) {
toggle = +!toggle;
if (toggle) {
parent.style.width = "100%";
} else {
parent.style.width = "15%";
}
});
}());
Refer code:
(function() {
var parent = document.getElementsByClassName('parent')[0];
var icons = document.getElementsByClassName('icons')[0],
toggle = false;
icons.addEventListener('click', function(event) {
toggle = +!toggle;
if (toggle) {
parent.style.width = "100%";
} else {
parent.style.width = "15%";
}
});
}());
.parent {
position: relative;
width: 15%;
height: 100%;
background-color: red;
transition: width 400ms ease-in-out;
}
.parent-2 {
position: absolute;
width: 15%;
height: 100%;
top: 0px;
left: 0px;
}
.icons {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 60px;
}
.icons:hover {
cursor: pointer;
}
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="parent"></div>
<div class="parent-2">
<div class="icons">
<i class="fa fa-plus"></i>
</div>
</div>
I need to make a div square. The height of the div is dynamically changing and I want the width to be equal to the height. I have seen a lot of solutions to set the height to be equal to the width (with padding-bottom on pseudo-elements), but I need it the other way arround. Is this possible with pure CSS?
No .... well, there is this trick, where one use a hidden image
div {
display: inline-block;
height: 170px;
background: red;
}
div img {
visibility: hidden;
height: 100%;
}
<div>
<img src="http://placehold.it/50">
</div>
Updated
And here is a script version, that also keep it within the width
Stack snippet
(function (d,t) {
window.addEventListener("resize", throttler, false);
window.addEventListener("load", throttler(), false); /* run once on load to init */
function throttler() {
if ( !t ) {
t = setTimeout(function() {
t = null;
keepSquared(d.querySelector('.container'),
d.querySelector('.squared'));
}, 66);
}
}
function keepSquared(co,el) {
var s = window.getComputedStyle(co, null);
var m = Math.min(
parseFloat(s.getPropertyValue("width")),
parseFloat(s.getPropertyValue("height")));
el.style.cssText =
'width: ' + m + 'px; height: ' + m + 'px;';
}
})(document,null);
html, body {
height: 100%;
margin: 0;
}
.container {
position: relative;
width: 50%;
height: 50%;
top: 50px;
left: 50px;
border: 1px solid black;
box-sizing: border-box;
}
.squared {
background-color: red;
}
<div class="container">
<div class="squared">
</div>
</div>
Note: Since resize events can fire at a high rate, the throttler is used to reduced the rate so the handler doesn't execute expensive operations such as DOM modifications too often.
I am trying to rotate a container div in html so that all of it's child elements rotate with it.
document.addEventListener('DOMContentLoaded', function() {
var img = document.createElement('img');
var ctx = document.getElementById('canvas').getContext('2d');
var n = 73; // -58
var elContainer = document.getElementById('container');
var elDegrees = document.getElementById('degrees');
var setAngle = function(n) {
elContainer.style.transform = ''.concat('rotate(', n, 'deg)');
elDegrees.innerHTML = n;
}; // /setAngle()
document.getElementById('btnUp').addEventListener('mousedown', function() {
n++;
setAngle(n);
});
document.getElementById('btnDown').addEventListener('mousedown', function() {
n--;
setAngle(n);
});
img.onload = function() {
ctx.drawImage(img, 0, 0, 640, 360);
};
img.src = 'https://blog.codepen.io/wp-content/uploads/2012/06/Made-For-Codepen.png';
setAngle(n);
});
* {
box-sizing: border-box;
overflow: hidden;
}
#root {
position: relative;
width: 250px;
height: 150px;
}
#container {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 250px;
height: 150px;
transform-origin: center center 0px;
transform: rotate(90deg);
transform-style: preserve-3d;
background-color: #000000;
}
#child {
background-color: #00ff00;
position: absolute;
box-sizing: border-box;
overflow: hidden;
top: 60px;
left: 60px;
padding: 10px;
z-index: 2;
}
#canvas {
display: block;
width: 250px;
height: 150px;
position: absolute;
box-sizing: border-box;
overflow: hidden;
top: 0;
left: 0;
z-index: 1;
}
<div id="root">
<div id="container">
<div id="child">
TEXT ELEMENT
</div>
<canvas id="canvas" style="" width="640" height="360"></canvas>
</div>
</div>
<button id="btnDown">-1 degree</button>
<button id="btnUp">+1 degree</button>
<span id="degrees"></span> degrees
<p>
In Chrome or Safari, if the container is rotated greater than 73 degrees or less than -58 degrees, to absolute positioned child div with text disappears. Why?
</p>
For some reason when the container div is rotated past 73 degrees or -58 degrees in Chrome or Safari, the child div element disappears behind the canvas element. This happens with both canvas elements and video elements. This problem does not happen in Firefox.
Have you tried putting the same webkit rotation on the child too? And possibly floating the child might help. Not 100% sure. Or, you may need to specify which browsers you are using within the webkit.
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/