I've been chasing around this problem for hours, here's the code:
<!DOCTYPE html>
<html>
<head>
<style>
html, body{
height: 100%;
max-height: 100%;
overflow:hidden;
}
.controls{
display: table;
height: 10%;
margin-top: 1%;
width: 100%;
}
#w1 {
width:25%;
}
#can
float: left;
padding: 0;
margin: 0;
top: 0;
}
#canTwo{
float: left;
padding: 0;
margin: 0;
top: 0;
}
textarea {
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
font-size: 1.25vw;
height: 100%;
width: 100%;
}
#w2{
width:50%;
}
#w3{
width:25%;
}
.controlbuttons {
display: table-cell;
height: 100%;
}
</style>
</head>
<body>
<div class="controls">
<div class="controlbuttons" id="w1"><canvas id = "can" width = "0" height = "0"></div>
<div class="controlbuttons" id="w2"><textarea rows="3" cols="50"></textarea></div>
<div class="controlbuttons" id="w3"><canvas id = "canTwo" width = "0" height = "0"></div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
fitToContainer();
});
var canvas = document.getElementById("can"),
ctx = canvas.getContext('2d'),
canvasTwo = document.getElementById("canTwo"),
ctxTwo = canvasTwo.getContext('2d');
function fitToContainer(){
var control = document.getElementsByClassName("controlbuttons")[0];
var h = control.clientHeight;
var w = control.clientWidth;
canvas.height = h;
canvas.width = w;
canvasTwo.height = h;
canvasTwo.width = w;
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 5000, 5000);
ctxTwo.fillStyle = "green";
ctxTwo.fillRect(0, 0, 5000, 5000);
}
</script>
</body>
</html>
jsfiddle:
https://jsfiddle.net/ca3uw837/
Basically I have one textarea and it's width takes 50% of the page and it is exactly in the middle, there are two
canvases to it's side which take 25% width.
I am trying to get them to align perfectly(same height, exactly one next to the other) but here is how it looks on my pc:
What am I supposed to do? use flexbox? I am not sure I know how to achieve it as canvases are very tricky with their sizing technique. Thank you so much for your time.
Apply flexbox to .controls to align the child elements. Also apply box-sizing: border-box to textbox as the default padding adds with the 100% height of the textbox. border-box will make the padding inclusive of height.
document.addEventListener("DOMContentLoaded", function(event) {
fitToContainer();
});
var canvas = document.getElementById("can"),
ctx = canvas.getContext('2d'),
canvasTwo = document.getElementById("canTwo"),
ctxTwo = canvasTwo.getContext('2d');
function fitToContainer() {
var control = document.getElementsByClassName("controlbuttons")[0];
var h = control.clientHeight;
var w = control.clientWidth;
canvas.height = h;
canvas.width = w;
canvasTwo.height = h;
canvasTwo.width = w;
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 5000, 5000);
ctxTwo.fillStyle = "green";
ctxTwo.fillRect(0, 0, 5000, 5000);
}
html,
body {
height: 100%;
max-height: 100%;
overflow: hidden;
}
.controls {
display: flex;
height: 10%;
margin-top: 1%;
width: 100%;
}
#w1 {
width: 25%;
}
#can float: left;
padding: 0;
margin: 0;
top: 0;
}
#canTwo {
float: left;
padding: 0;
margin: 0;
top: 0;
}
textarea {
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
font-size: 1.25vw;
height: 100%;
width: 100%;
box-sizing: border-box;
}
#w2 {
width: 50%;
}
#w3 {
width: 25%;
}
.controlbuttons {
height: 100%;
}
<div class="controls">
<div class="controlbuttons" id="w1"><canvas id="can" width="0" height="0"></div>
<div class="controlbuttons" id="w2"><textarea rows="3" cols="50"></textarea></div>
<div class="controlbuttons" id="w3"><canvas id = "canTwo" width = "0" height = "0"></div>
</div>
To align table-cell items to the top you should use: vertical-align: top. Both canvas are missing height and width property, set them to 100%. Add box-sizing: border-box to the textarea:
box-sizing: border-box
The width and height properties (and min/max properties) includes
content, padding and border, but not the margin
So:
textarea {
/** ... rest of styles ...*/
margin: 0;
box-sizing: border-box;
float: left;
}
.controlbuttons { vertical-align: top; } /* Align items to the top */
.controlbuttons canvas { height: 100%; width: 100%; }
Demo: (Tested in firefox 53.0.2 & Chrome 56.0.2924.87)
document.addEventListener("DOMContentLoaded", function(event) {
fitToContainer();
});
var canvas = document.getElementById("can"),
ctx = canvas.getContext('2d'),
canvasTwo = document.getElementById("canTwo"),
ctxTwo = canvasTwo.getContext('2d');
function fitToContainer() {
var control = document.getElementsByClassName("controlbuttons")[0];
var h = control.clientHeight;
var w = control.clientWidth;
canvas.height = h;
canvas.width = w;
canvasTwo.height = h;
canvasTwo.width = w;
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 5000, 5000);
ctxTwo.fillStyle = "green";
ctxTwo.fillRect(0, 0, 5000, 5000);
}
html,
body {
height: 100%;
max-height: 100%;
overflow: hidden;
}
.controls {
display: table;
height: 10%;
margin-top: 1%;
width: 100%;
}
#w1 {
width: 25%;
}
textarea {
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
font-size: 1.25vw;
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
float: left;
}
#w2 {
width: 50%;
}
#w3 {
width: 25%;
}
.controlbuttons {
display: table-cell;
height: 100%;
vertical-align: top;
}
.controlbuttons canvas {
float: left;
padding: 0;
margin: 0;
top: 0;
height: 100%;
width: 100%;
}
<!DOCTYPE html>
<html>
<body>
<div class="controls">
<div class="controlbuttons" id="w1">
<canvas id="can" width="0" height="0"></canvas>
</div>
<div class="controlbuttons" id="w2">
<textarea rows="3" cols="50"></textarea>
</div>
<div class="controlbuttons" id="w3">
<canvas id = "canTwo" width = "0" height = "0"></canvas>
</div>
</div>
</body>
</html>
Related
I would only want to render/create <p>Hello</p><iframe id="syndicationPanelModalIFrame" src="http://sample.com" width="100%" height="100%" style="border: none"> on page load.
I don't want to declare them already but I want to trigger JS and create them once page loads.
Pls see "Expected Output" below
EXPECTED OUTPUT
<style>
.newSyndicationModalContainer {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 9999; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.newSyndicationModalContent {
background-color: transparent;
margin: auto;
width: 100%;
height: 100%;
}
</style>
<div class="newSyndicationModalContainer">
<div class="newSyndicationModalContent">
<p>Hello</p><iframe id="syndicationPanelModalIFrame" src="http://sample.com" width="100%" height="100%" style="border: none"></iframe>
</div>
</div>
Current Code
<script>
const newSyndicationModalContainer = document.querySelector(".newSyndicationModalContainer")
const newSyndicationModalContent = document.querySelector(".newSyndicationModalContent")
if (newSyndicationModalContainer) {
var modal = document.createElement(`<p>Hello</p><iframe id="syndicationPanelModalIFrame" src="http://sample.com" width="100%" height="100%" style="border: none"></iframe>`);
newSyndicationModalContainer.appendChild(modal);
newSyndicationModalContainer.style.display = 'block';
}
</script>
Okay, I got it;
Use this code:
const newSyndicationModalContainer = document.querySelector(".newSyndicationModalContainer")
const newSyndicationModalContent = document.querySelector(".newSyndicationModalContent")
if (newSyndicationModalContainer != undefined) {
var p = document.createElement('p');
p.innerText = "Hello!";
var iframe = document.createElement('iframe');
iframe.id = "syndicationPanelModalIFrame";
iframe.src = "http://sample.com";
iframe.width = "100%";
iframe.height = "100%";
iframe.style.border = "none";
newSyndicationModalContent.append(p, iframe);
newSyndicationModalContainer.style.display = 'block';
}
.newSyndicationModalContainer {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.newSyndicationModalContent {
background-color: transparent;
margin: auto;
width: 100%;
height: 100%;
}
<div class="newSyndicationModalContainer">
<div class="newSyndicationModalContent">
</div>
</div>
Another way of doing it with innerHTML
Although it's not a good way to do it, I'll do it for you as you asked:
const newSyndicationModalContainer = document.querySelector(".newSyndicationModalContainer")
const newSyndicationModalContent = document.querySelector(".newSyndicationModalContent")
if (newSyndicationModalContainer != undefined) {
newSyndicationModalContent.innerHTML = `<p>Hello</p><iframe src="https://sample.com" id="syndicationPanelModalIFrame" width="100%" height="100% style="border: none;"`;
newSyndicationModalContainer.style.display = 'block';
}
.newSyndicationModalContainer {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.newSyndicationModalContent {
background-color: transparent;
margin: auto;
width: 100%;
height: 100%;
}
<div class="newSyndicationModalContainer">
<div class="newSyndicationModalContent">
</div>
</div>
Regarding the question in the comments
let's say its not always iframe inside there is always. So I don't want to declare iframe src = ... Can we do it like innerHtml? –
You can always create an element and edit its outerHTML/innerHTML/innerText/etc.
For instance:
let div = document.createElement("div");
div.innerHTML = `<span class="innerSpan" style="border: 5px ridge red" data-blablablah="I-don't-say-bla-bla-blah">Bla Bla Bla Blah</span>`;
div.style = "dispaly: grid";
I was looking to trigger different sections with a variable font based on my mouse movement.
For the first section, everything looks great, but when I tried to trigger the second section, it does not work as I expected since is connected to the first one I guess.
I would need to make the section working independently and in the correct way (to have an idea see section one how react in debug mode)
I was wondering what I have to modify in my Javascript code to make my snippet work with all the sections I want, working independently with their respective variable font interaction. Any ideas?
$('.square').on('mousemove', function(e) {
var x = e.pageX - $(this).offset().left;
var y = e.pageY;
var $tlSquare = $('.division--top.division--left');
var $trSquare = $('.division--top.division--right');
var $blSquare = $('.division--bottom.division--left');
var $brSquare = $('.division--bottom.division--right');
var squareWidth = $(this).width(),
squareHeight = $(this).height();
$tlSquare.width(x).height(y);
$trSquare.width(squareWidth - x).height(y);
$blSquare.width(x).height(squareHeight - y);
$brSquare.width(squareWidth - x).height(squareHeight - y);
stretchLetter(false);
});
stretchLetter(false);
$('.square').on('mouseleave', function() {
$('.division').width('50%').height('50%');
$('.letter').css('transform', '');
stretchLetter(false);
});
function stretchLetter(animation) {
$('.letter').each(function() {
var parentWidth = $(this).parent().width();
var parentHeight = $(this).parent().height();
var thisWidth = $(this).width();
var thisHeight = $(this).height();
var widthPercent = parentWidth / thisWidth;
var heightPercent = parentHeight / thisHeight;
var timing = animation == true ? .5 : 0;
TweenMax.to($(this), timing, {
scaleX: widthPercent,
scaleY: heightPercent
})
//$(this).css('transform', 'scalex('+ widthPercent +') scaley('+ heightPercent +')');
});
}
body,
html {
margin: 0;
padding: 0;
font-weight: bold;
font-family: helvetica;
}
section {
height: 200px;
background: blue;
color: white;
font-size: 28px;
}
.wrapper {
display: flex;
justify-content: center;
/*justify-content: flex-end;*/
width: 100%;
height: 100vh;
//background-color: blue;
overflow: hidden;
}
.square {
display: flex;
flex-wrap: wrap;
width: 100vh;
height: 100vh;
background-color: black;
}
.square-2 {
display: flex;
flex-wrap: wrap;
width: 100vh;
height: 100vh;
background-color: yellow;
}
.division {
//display: flex;
//align-items: center;
//justify-content: center;
width: 50%;
height: 50%;
//background-color: red;
//border: 1px solid white;
box-sizing: border-box;
}
.letter {
cursor: -webkit-grab;
cursor: grab;
}
.letter {
display: inline-block;
font-size: 50vh;
margin: 0;
padding: 0;
line-height: .8;
transform-origin: top left;
color: white;
}
/* .division:nth-child(1){
background-color: blue;
}
.division:nth-child(2){
background-color: red;
}
.division:nth-child(3){
background-color: green;
}
.division:nth-child(4){
background-color: orange;
} */
.circle {
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid white;
background-color: blue;
box-sizing: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>SECTION-01</section>
<main>
<div class="wrapper">
<div class="square">
<div class="division division--top division--left">
<div class="letter">L</div>
</div>
<div class="division division--top division--right">
<div class="letter">A</div>
</div>
<div class="division division--bottom division--left">
<div class="letter">S</div>
</div>
<div class="division division--bottom division--right">
<div class="letter">T</div>
</div>
</div>
</main>
<section>SECTION-02</section>
<div class="wrapper">
<div class="square">
<div class="division division--top division--left">
<div class="letter">F</div>
</div>
<div class="division division--top division--right">
<div class="letter">A</div>
</div>
<div class="division division--bottom division--left">
<div class="letter">S</div>
</div>
<div class="division division--bottom division--right">
<div class="letter">T</div>
</div>
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
https://jsfiddle.net/CAT999/ohaf61qp/5/
See working FIDDLE
You had to change the y variable because you were calculating with the offset top of the mouse position inn the document. This is always bigger than the element, so you have to extract the offset top of the element you were scrolling on, to get the right value.
var y = e.pageY - $(this).offset().top;
I want to append a big canvas (width=2000) into dom, and scale it down so it fits the viewport. But then the page size get's unnecessarily big. How can I avoid the page size getting big while having a big canvas scaled down.
function addCanvas(element) {
const canvas = document.createElement('canvas');
canvas.width = 2000;
canvas.height = 2000;
canvas.style.transform = 'scale(0.2)';
element.append(canvas);
}
addCanvas(document.getElementById('app'));
#app {
width: 100%;
height: 100%;
background: #ccc;
}
#app canvas {
transform-origin: 0px 0px;
background: red;
}
<div id="app">
</div>
I am not sure, but I think the Code below is excactly what you wanted, I just added
max-width: 100vw;
max-height: 100vh;
and removed your scaling, and added the conventional resets.
function addCanvas(element) {
const canvas = document.createElement('canvas');
canvas.width = 2000;
canvas.height = 2000;
element.append(canvas);
}
addCanvas(document.getElementById('app'));
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#app {
background: #ccc;
/* Solution for additional Comment */
overflow: hidden;
max-width: 100vw;
max-height: 100vh;
display: flex;
justify-content: center;
}
#app canvas {
background: red;
/* Solution */
max-width: 100vw;
max-height: 100vh;
}
<div id="app">
</div>
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 3 years ago.
I implemented my own split-pane with HTML/JS/CSS Flexbox.
I'm having trouble with the splitter in the following case- one of the panels has a fixed size (in px), and the other one is set to grow (flex-grow: 1).
In case the other panel has children with size, it won't scroll to the end. It gets stuck at the size of the children.
Can this be fixed with CSS on the split-pane panels but not on the children?
It's very important for me to use flex as I want to maintain responsiveness of my application, and want to avoid fixed sizes wherever I can.
This is a JSFiddle sample
of my question.
Code snippet given below. Thanks!
function startDrag() {
glass.style = 'display: block;';
glass.addEventListener('mousemove', drag, false);
}
function endDrag() {
glass.removeEventListener('mousemove', drag, false);
glass.style = '';
}
function drag(event) {
var splitter = getSplitter();
var panel = document.getElementById('c2');
var currentWidth = panel.offsetWidth;
var currentLeft = panel.offsetLeft;
panel.style.width = (currentWidth - (event.clientX - currentLeft)) + "px";
}
function getSplitter() {
return document.getElementById('splitter');
}
var con = document.getElementById('container');
var splitter = document.createElement('div');
var glass = document.getElementById('glass');
splitter.className = 'splitter';
splitter.id = 'splitter';
con.insertBefore(splitter, con.lastElementChild);
splitter.addEventListener('mousedown', startDrag, false);
glass.addEventListener('mouseup', endDrag, false);
.container {
display: flex;
border: 1px solid;
width: 500px;
height: 300px;
position: absolute;
}
.c1 {
background-color: blue;
flex: 1;
height: 100%;
}
.c2 {
background-color: green;
width: 150px;
}
.splitter {
width: 20px;
cursor: col-resize;
}
.glass {
height: 100%;
width: 100%;
cursor: col-resize;
display: none;
position: absolute;
}
.grandchild {
background-color: red;
width: 50px;
height: 50px;
}
<div id="container" class="container">
<div id="glass" class="glass"></div>
<div class="c1">
<div class="grandchild"></div>
</div>
<div id="c2" class="c2"></div>
</div>
In case the other panel has children with size, it won't scroll to the end. It gets stuck at the size of the children.
This is because an initial setting of a flex container is min-width: auto on the flex items. This means that a flex item, by default, cannot be smaller than the size of its content.
Can this be fixed with CSS on the split-pane panels but not on the children?
Yes. Override the default with min-width: 0 or with any overflow other than visible:
.c1 {
background-color: blue;
flex: 1;
height: 100%;
overflow: hidden; /* or min-width: 0 */
}
revised fiddle
function startDrag() {
glass.style = 'display: block;';
glass.addEventListener('mousemove', drag, false);
}
function endDrag() {
glass.removeEventListener('mousemove', drag, false);
glass.style = '';
}
function drag(event) {
var splitter = getSplitter();
var panel = document.getElementById('c2');
var currentWidth = panel.offsetWidth;
var currentLeft = panel.offsetLeft;
panel.style.width = (currentWidth - (event.clientX - currentLeft)) + "px";
}
function getSplitter() {
return document.getElementById('splitter');
}
var con = document.getElementById('container');
var splitter = document.createElement('div');
var glass = document.getElementById('glass');
splitter.className = 'splitter';
splitter.id = 'splitter';
con.insertBefore(splitter, con.lastElementChild);
splitter.addEventListener('mousedown', startDrag, false);
glass.addEventListener('mouseup', endDrag, false);
.container {
display: flex;
border: 1px solid;
width: 500px;
height: 300px;
position: absolute;
}
.c1 {
background-color: blue;
flex: 1;
height: 100%;
overflow: hidden;
}
.c2 {
background-color: green;
width: 150px;
}
.splitter {
width: 20px;
cursor: col-resize;
}
.glass {
height: 100%;
width: 100%;
cursor: col-resize;
display: none;
position: absolute;
}
.grandchild {
background-color: red;
width: 50px;
height: 50px;
}
<div id="container" class="container">
<div id="glass" class="glass"></div>
<div class="c1">
<div class="grandchild"></div>
</div>
<div id="c2" class="c2"></div>
</div>
It gets stuck at the size of the children
This is expected behavior when using a flexbox. I guess if you want to scroll to the end then you can use position: absolute for the grandchild relative to c1:
.grandchild {
background-color: red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
}
Give overflow: hidden to c1 too:
.c1 {
background-color: blue;
flex: 1;
height: 100%;
position: relative;
overflow: hidden;
}
Cheers!
function startDrag() {
glass.style = 'display: block;';
glass.addEventListener('mousemove', drag, false);
}
function endDrag() {
glass.removeEventListener('mousemove', drag, false);
glass.style = '';
}
function drag(event) {
var splitter = getSplitter();
var panel = document.getElementById('c2');
var currentWidth = panel.offsetWidth;
var currentLeft = panel.offsetLeft;
panel.style.width = (currentWidth - (event.clientX - currentLeft)) + "px";
}
function getSplitter() {
return document.getElementById('splitter');
}
var con = document.getElementById('container');
var splitter = document.createElement('div');
var glass = document.getElementById('glass');
splitter.className = 'splitter';
splitter.id = 'splitter';
con.insertBefore(splitter, con.lastElementChild);
splitter.addEventListener('mousedown', startDrag, false);
glass.addEventListener('mouseup', endDrag, false);
.container {
display: flex;
border: 1px solid;
width: 500px;
height: 300px;
position: absolute;
}
.c1 {
background-color: blue;
flex: 1;
height: 100%;
position: relative;
overflow: hidden;
}
.c2 {
background-color: green;
width: 150px;
}
.splitter {
width: 20px;
cursor: col-resize;
}
.glass {
height: 100%;
width: 100%;
cursor: col-resize;
display: none;
position: absolute;
}
.grandchild {
background-color: red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
}
<div id="container" class="container">
<div id="glass" class="glass"></div>
<div class="c1">
<div class="grandchild"></div>
</div>
<div id="c2" class="c2"></div>
</div>
Solution:
So I guess your strategy should be to use an absolute grandchild that fills the whole side-panel, and then put the content inside like:
<div class="grandchild">
<div class="content"></div>
</div>
and change these styles:
.grandchild {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.grandchild .content{
background-color: red;
width: 50px;
height: 50px;
}
Example below:
function startDrag() {
glass.style = 'display: block;';
glass.addEventListener('mousemove', drag, false);
}
function endDrag() {
glass.removeEventListener('mousemove', drag, false);
glass.style = '';
}
function drag(event) {
var splitter = getSplitter();
var panel = document.getElementById('c2');
var currentWidth = panel.offsetWidth;
var currentLeft = panel.offsetLeft;
panel.style.width = (currentWidth - (event.clientX - currentLeft)) + "px";
}
function getSplitter() {
return document.getElementById('splitter');
}
var con = document.getElementById('container');
var splitter = document.createElement('div');
var glass = document.getElementById('glass');
splitter.className = 'splitter';
splitter.id = 'splitter';
con.insertBefore(splitter, con.lastElementChild);
splitter.addEventListener('mousedown', startDrag, false);
glass.addEventListener('mouseup', endDrag, false);
.container {
display: flex;
border: 1px solid;
width: 500px;
height: 300px;
position: absolute;
}
.c1 {
background-color: blue;
flex: 1;
height: 100%;
position: relative;
overflow: hidden;
}
.c2 {
background-color: green;
width: 150px;
}
.splitter {
width: 20px;
cursor: col-resize;
}
.glass {
height: 100%;
width: 100%;
cursor: col-resize;
display: none;
position: absolute;
}
.grandchild {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.grandchild .content{
background-color: red;
width: 50px;
height: 50px;
}
<div id="container" class="container">
<div id="glass" class="glass"></div>
<div class="c1">
<div class="grandchild">
<div class="content"></div>
</div>
</div>
<div id="c2" class="c2"></div>
</div>
I created a simple website as follows:
When I enter any text in the prompt and click okay, then a ball will be dropped into 1st box, i.e., into Past Thoughts box. Here is the code:
HTML
<h1>
Welcome to zen module
</h1>
<p id="demo">
</p>
<div id="divn">
<canvas id="myCanvas" width="100" height="300" style="transform: inherit; margin: 30px;">
</canvas>
</div>
<div class="fixed-size-square" onclick="popup();">
<span>
Past Thoughts
</span>
</div>
<div class="size-square" onclick="popup();">
<span>
Present Thoughts
</span>
</div>
<div class="square" onclick="popup();">
<span>
Future Thoughts
</span>
</div>
<button>
I've no thoughts
</button>
JavaScript
var context;
var dx = 4;
var dy = 4;
var y = 25;
var x = 10;
var counter = 0;
function draw() {
context = myCanvas.getContext('2d');
context.clearRect(0, 0, 400, 400);
context.beginPath();
context.fillStyle = "red";
context.arc(x, y, 10, 0, Math.PI * 2, true);
context.closePath();
context.fill();
if (x < 0 || x > 100) dx = -dx;
if (y < 0 || y > 200) dy = 0;
//x+=dx;
y += dy;
}
function popup() {
var thought = prompt("Please enter your thought");
if (thought !== null) {
setInterval(draw, 10);
} else window.alert("You should enter a thought");
}
CSS
.fixed-size-square {
display: table;
background: green;
}
.fixed-size-square span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white
}
.size-square {
display: table;
background: green;
}
.size-square span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white
}
.square {
display: table;
background: green;
}
.square span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white
}
.fixed-size-square, .size-square, .square {
float: left;
margin: 20px;
zoom: 1;
position: relative;
top: -291px;
width: 150px;
height: 150px;
/*box-shadow: 10px 10px 5px #888888;*/
/*position: absolute;*/
/*margin: auto;*/
}
button {
position: relative;
margin: 0px auto;
}
/*.myCanvas {
z-index: 0px;
}*/
#divn {
margin: 0px auto;
}
The problem is: The ball stays behind the box when it falls. It isn't visible in the box. How can it be fixed?
Fiddle
You could use opacity: 0.5; on .fixed-size-square, .size-square, .square
DEMO
Edit: here's a DEMO with optimized CSS.
position:relative;z-index:10000px; would do the trick but would mess with the layout you have now. I'd suggest something like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function popup (n) {
var context;
var dx= 4;
var dy=4;
var y=25;
var elWidth=150;
var ballWidth=10;
var x=(elWidth+ballWidth)/2;
var counter = 0;
var myCanvas=document.getElementById('myCanvas'+n);
function draw(){
context= myCanvas.getContext('2d');
context.clearRect(0,0,200,235);
context.beginPath();
context.fillStyle="red";
context.arc(x,y,10,0,Math.PI*2,true);
context.closePath();
context.fill();
if(y>200){clearInterval(interval);}
if( y<0 || y>200)dy=0;
y+=dy;
myCanvas.className='active';
}
var interval=setInterval(draw,10);
}
</script>
<style>
html,body{margin:0;}
div.time {
display: table;
background: green;
float: left;
margin: 20px;
zoom: 1;
position: relative;
top: 75px;
left:35px;
width: 150px;
height: 150px;
}
span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
canvas{
z-index:10000;
transform: inherit;
float: left;
margin: 20px;
zoom: 1;
position: relative;
top: -200px;
left:35px;
margin:20px;
}
#myCanvas1{clear:left;}
</style>
</head>
<body>
<div class="time"><span>Past Thoughts</span></div>
<div class="time"><span>Present Thoughts</span></div>
<div class="time"><span>Future Thoughts</span></div>
<canvas id="myCanvas1" width="150" height="235" onclick="popup(1)"></canvas>
<canvas id="myCanvas2" width="150" height="235" onclick="popup(2)"></canvas>
<canvas id="myCanvas3" width="150" height="235" onclick="popup(3)"></canvas>
</body>
</html>
http://fiddle.jshell.net/uvrkgrqs/show/
there's an z-index property on html to set which layer things are.