DOM Window event before painting - javascript

Is it possible to catch an event from the window after HTML is loaded, but before the actual painting happens? Or to access DOM nodes prior to painting to the screen? I'd like to change the style of an element before painting to avoid a visual flicker.
This is the closest I've gotten, but if you refresh the page, you can see the box for a split second before the height change is applied.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#container {
width: 200px;
height: 200px;
border: solid;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
window.addEventListener("DOMContentLoaded", () => {
document.getElementById("container").style.height = 0;
});
</script>
</body>
</html>

If you didn't want to mess with the CSS you could create the element with Javascript and synchronously add it in.
window.addEventListener("DOMContentLoaded", () => {
let container = document.createElement("div");
container.id = "container";
container.style.height = 0;
document.body.appendChild(container);
});

Related

coverting hover jquery code into javascript

I need help converting a Jquery code into a javascript code where it changes the border radius of a div when hovering over it.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="SampleQ3.css" />
</head>
<body>
<div>
<h4>Pasta</h4>
</div>
<script src="SampleJavaScript.js"></script>
</body>
</html>
JS
$(document).ready(function () {
$("div").hover(function () {
$(this).css("border-radius", "0%");
}, function () {
$(this).css("border-radius", "200px 200px 200px 200px");
});
});
You can do all of that only using css, but I will provide both solution js and css.
javascript code:
let divs = document.getElementsByTagName("div");
for(div of divs) {
div.addEventListener("mouseenter", function( event ) {
event.target.style.borderRadius = 0%;
}, false);
div.addEventListener("mouseover", function( event ) {
event.target.style.borderRadius = '200px';
}, false);
}
To do the same with css you can add a class to make it easer to target.
// css
<style>
.div-round {
border-radius: 200px;
}
.div-round:hover {
border-radius: 0%;
}
</style>
//add class to div
<div class='div-round'>...</div>

Why are my generated images not setting their position based on my mouse cursor?

I am fairly new to web development and I wanted to practice the HTML, CSS, and Javascript that I learned over the weekend. I am having trouble positioning my images correctly based on my mouse cursor. I can see that my images are being appended in the "inspect" section of google chrome but their positioning is not matching up with how the style indicates. Is there a problem with my HTML, CSS, or Javascript or all three? I want it to work similarly to http://howlooongcanthisgoon.com/
1[]2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Jaws that Bite My Claws That Catch</title>
<style>
*{
padding: 0;
margin: 0;
}
#witchwood{
background: url("witchwood.jpg");
height: 100vh;
background-position: 75% 20%;
overflow: hidden;
}
.shudder{
position: absolute;
}
</style>
</head>
<body>
<div id="witchwood" onclick="wok(event)"></div>
</body>
<script type="text/javascript">
//document.getElementById('witchwood').addEventListener("click", wok);
var z = 0;
function wok(e){
//finds position of mouse
var x= e.clientX;
var y= e.clientY;
//creates the img element
var img = document.createElement("img");
img.src = "shudderwock.png";
img.class = "shudder";
img.style.top = y + "px";
img.style.left = x + "px";
//appends the img into the div class="witchwood"
document.getElementById('witchwood').appendChild(img);
}
</script>
</html>
Here is a link to the jsfiddle.
Your .shudder class is not being applied. The appropriate DOM property is called className. You don't set an HTMLElement attribute with img.class.
Change
img.class = "shudder";
To
img.className = "shudder";
Alternatively, you could use;
img.setAttribute('class', 'shudder');

How can I make my div appear with createElement

I am trying to make another div right under the existing div in the HTML
<html>
<head>
<title>
Media Player
</title>
<script src="script.js"></script>
</head>
<script>
makeOscarPlayer(document.getElementById("my-video"))
</script>
<body>
<div class="my-player">
Hello!
</div>
</body>
</html>
function makeOscarPlayer(){
var div = document.createElement("div");
div.innerHTML = `
hello
`
}
can someone explain to me what I am doing wrong? I am a self-taught developer sorry if my code is not perfectly organized still learning
You are calling the makeOscarPlayer() function before you are creating it.
You need to wrap the makeOscarPlayer() function declaration in a script tag.
You are passing in document.getElementById("my-video") as a parameter to makeOscarPlayer(), but there is no HTML element with an id of 'my-video'. You are giving the function a parameter of null, while the function declaration has no parameters.
You need to tell the script where to put the new element. To do that, you grab an existing element and use parentNode and insertBefore
Here is a barebones version that I got working for your reference:
<html>
<head>
<title>
Media Player
</title>
</head>
<script>
</script>
<body>
<div id="my-player">
Hello!
</div>
</body>
</html>
<script type="text/javascript">
function makeOscarPlayer(){
var div = document.createElement("div");
div.innerHTML = `hello`;
// This grabs the element that you want to create a new element by
var existingDiv = document.getElementById("my-player");
// This tells the script where to put the new element
existingDiv.parentNode.insertBefore( div, existingDiv.nextSibling);
}
// Must be called in the same script block or after the script holding the function declaration is loaded
makeOscarPlayer();
</script>
For more information on how parentNode and insertBefore work, see this Stack Overflow question
You need to append that new element to a specific parent, in your case to my-video.
The function appendChild appends the new element to a parent element.
function makeOscarPlayer(parent) {
var div = document.createElement("div");
div.innerHTML = 'Hello from Ele';
parent.appendChild(div);
}
makeOscarPlayer(document.getElementById("my-video"))
#my-player {
border: 1px dashed green;
padding: 5px;
margin: 5px;
width: 300px;
background-color: #f1f1f1
}
#my-video div {
border: 1px dashed green;
padding: 5px;
margin: 5px;
width: 200px;
font-weight: 700;
}
<div id="my-player">
Hello!
<div id="my-video">
</div>
</div>
It's a good start, but you're calling the function incorrectly and your function isn't adding anything to the page.
we use appendChild to add a node to the page.
In your function you create and add text to a div, but you don't return the node you made(and also you didn't close your line of code with a semi-colon so I added that too) but this should work:
<html>
<head>
<title>
Media Player
</title>
</head>
<body>
<div class="my-player">
Hello!
</div>
<script>
function makeOscarPlayer() {
var div = document.createElement("div");
div.innerHTML = `hello`;
return div;
}
document.getElementById("my-video").appendChild(makeOscarPlayer())
</script>
</body>
</html>
function makeOscarPlayer() {
var div = document.createElement("div");
div.innerHTML = `hello`;
return div;
}
document.getElementById("my-video").appendChild(makeOscarPlayer())
<html>
<head>
<title>
Media Player
</title>
</head>
<body>
<!-- added my-video div -->
<div id="my-video"></div>
<div class="my-player">
Hello!
</div>
</body>
</html>

stop viewport resizing when an element is part off the p5.js canvas

I'm building a visual interaction using p5.js (p5js.org), including p5.dom.js so that I can do some html stuff within it.
I'm having trouble stopping an html image element increasing the size of the viewport when it moves off of the p5.js canvas (which is also an element.
I have tried adapting a solution suggested here CSS- hide element off the right of the screen involving placing an element within another element which has styling set to overflow:hidden and position:relative to no avail –the image just disappears.
Although commenting/uncommenting the pictureContainer.style("position", "relative"); in the code below does actually hide/show the image, which makes me wonder if it's some kind of conflict between p5js and html styling?!
I have alternatively tried setting up the parent container in the index.html and doing var x = select("parent div #id in index.html"); picture.parent(x); in my p5 script but I get the same result as above.
FYI, I am using createImg() from p5.dom.js and then using .style to position the image etc. as the project is running in a phonegap shell and I have had issues with the p5.js method loadImage() on iOS.
Here's my problem code:
//time keeping
var timeKeeper;
//picture container
var pictureContainer;
//picture
var pictureLoaded;
var picture;
//display picture bool
var pictureDisplay;
//p5 canvas
var canvas;
function setup() {
//create the p5 canvas element
canvas = createCanvas(windowWidth, windowHeight);
// canvas.style("zIndex", "-1") //changing this doesn't seem to help
//container to hold picture and supposedly prevent it affecting the viewport
pictureContainer = createDiv("test");
pictureContainer.style("overflow", "hidden");
pictureContainer.style("position", "relative");
// pictureContainer.position(0,0); //this doesn't do anything differently to the line above except move the container to top left of window
pictureContainer.style("width", "0");
pictureContainer.style("zIndex", "999");
//create image
picture = createImg("http://images.clipartpanda.com/foam-clipart-1334260620683400173foam_finger.svg", "fingerTransparent")
//make picture the child of pictureContainer
picture.parent(pictureContainer); //comment this and you'll see the picture appear, resizing the viewport every time it does.
//position(x,y) sets the image position styling to position:absolute, left:x, top:y -- as such:http://p5js.org/reference/#/p5.Element/position
picture.position(windowWidth/2,windowHeight/2);
//for displaying/hiding the picture
pictureDisplay = false;
timeKeeper = 0;
}
function draw() {
canvas.background(100, 100, 100);
//display/show picture
if(millis()>timeKeeper+1000){
timeKeeper=millis();
if(pictureDisplay){
picture.style("display","initial");
pictureDisplay=false;
}
else{
picture.style("display","none");
pictureDisplay=true;
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/addons/p5.dom.js"></script>
<script language="javascript" type="text/javascript" src="exampleCode.js" ></script>
</head>
<body>
</body>
</html>
You can use a div as a container for your canvas and the picture element.
Set the styles for this container to style="position: relative; overflow: hidden;"
In the setup function parent the canvas and the created image to this container.
Example:
//time keeping
var timeKeeper;
//picture container
var pictureContainer;
//picture
var pictureLoaded;
var picture;
//display picture bool
var pictureDisplay;
//p5 canvas
var canvas;
function setup() {
//create the p5 canvas element
canvas = createCanvas(windowWidth, windowHeight);
//parent the canvas to the div container defined in the html
canvas.parent("sketch-holder");
//create image
picture = createImg("http://images.clipartpanda.com/foam-clipart-1334260620683400173foam_finger.svg", "fingerTransparent")
//parent the picture to the same container
picture.parent("sketch-holder");
//position(x,y) sets the image position styling to position:absolute, left:x, top:y -- as such:http://p5js.org/reference/#/p5.Element/position
picture.position(windowWidth/2,windowHeight/2);
//for displaying/hiding the picture
pictureDisplay = false;
timeKeeper = 0;
}
function draw() {
canvas.background(100, 100, 100);
//display/show picture
if(millis()>timeKeeper+1000){
timeKeeper=millis();
if(pictureDisplay){
picture.style("display","initial");
pictureDisplay=false;
}
else{
picture.style("display","none");
pictureDisplay=true;
}
}
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Tester</title>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/addons/p5.dom.js"></script>
<script src="sketch.js" type="text/javascript"></script>
<style>
body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<div id="sketch-holder" style="position: relative; overflow: hidden;"></div>
</body>
</html>

mouse events, whats wrong in my code

In the html part I don't want to include the events related code, events related code should be in inside the script tag
<!doctype html>
<head>
<style>
div{
width:200px;
background-color:grey;
}
</style>
<body>
<p>use the below area for events</p>
<div> point here </div>
<a id="event_output"></a>
<script>
var output=document.getElementById("event_output").innerHTML;
var div=document.getElementsByTagName("div");
div[0].onmouseover=function(){output="mouse over"}
div[0].onmouseout=function(){output="mouse out"}
</script>
</body>
You are just updating the output variable which is a string. Instead store the object reference and set its innerHTML property.
<style>
div {
width: 200px;
background-color: grey;
}
</style>
<p>use the below area for events</p>
<div>point here</div>
<a id="event_output"></a>
<script>
var output = document.getElementById("event_output");
var div = document.getElementsByTagName("div");
div[0].onmouseover = function() {
output.innerHTML = "mouse over"
}
div[0].onmouseout = function() {
output.innerHTML = "mouse out"
}
</script>

Categories