I've been working on a website and I added a custom HTML block with HTML, CSS, and JavaScript. However, when viewing the page, it seems to be hidden behind other content for some reason.
Here's where the custom HTML is located
This is how the custom HTML block looks inside Wordpress
body {
background-color: #eee;
}
#canvas1{
background-color: #fff;
border: 1px solid #ccc;
}
.slider {
width: 400px;
color: #ccc;
}
.wrapper {
position:relative;
}
.wrapper > canvas,
.wrapper > input {
position:absolute;
left:50px;
top:50px;
}
.wrapper > input {
left:150px !important; /* places the slider */
top:450px;
}
<div class="wrapper">
<canvas id='canvas1' style="margin:0 auto;display:block;" width="600" height="500"><p>Your browser does not support html5 canvas.</p></canvas>
<input id="volume" class="slider" type=range min=0 max=199 value=0 oninput='realTime(this)'>
</div>
//in this particular example, canvas1 represents an 800x800 canvas element
var context = document.getElementById('canvas1').getContext('2d');
context.font = '16px Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif';
context.fillStyle = "#4D5C6D";
// a + b = width
var width = 200;
var focal = 0;
var timer = setInterval(function() {
drawEllipse(300, 250)
}, 100);
function realTime(obj) {
clearInterval(timer);
focal = obj.value;
drawEllipse(300, 250);
context.fillStyle = "#BBB";
context.fillRect(18, 145, 160, 20);
context.fillStyle = "#FFF";
context.fillText("Click to restart", 25, 160);
context.fillStyle = "#4D5C6D";
}
function drawEllipse(centerX, centerY) {
context.clearRect(0, 0, 600, 500);
var height = Math.sqrt((width * width) - (focal * focal));
var eccen = ((focal) / (width));
context.fillText("Eccentricity = " + eccen.toFixed(2), 20, 40);
context.fillText("Focal Width = " + focal, 20, 70);
context.fillText("Major Axis = " + width, 20, 100);
context.fillText("Minor Axis = " + height.toFixed(2), 20, 130);
context.fillRect(centerX - (focal / 2.0), centerY, 2, 2);
context.fillRect(centerX + (focal / 2.0), centerY, 2, 2);
volume.value = focal;
var a = width / 2.0;
var b = height / 2.0;
for (var t = 0; t < 360; t++) {
var theta = t * Math.PI / 180;
context.fillRect(centerX + a * Math.cos(theta), centerY + b * Math.sin(theta), 2, 2);
}
focal++;
if (focal >= 200) {
clearInterval(timer);
context.fillStyle = "#BBB";
context.fillRect(18, 145, 145, 20);
context.fillStyle = "#FFF";
context.fillText("Click to repeat", 25, 160);
context.fillStyle = "#4D5C6D";
}
}
document.getElementById('canvas1').addEventListener('click', function() {
clearInterval(timer);
focal = 0;
timer = setInterval(function() {
drawEllipse(300, 250)
}, 50);
});
This piece of HTML code features a simulation showcasing the eccentricity of an ellipse.