<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Girl! Fly and eat the yogurt!</title>
<script src="js/easeljs-0.8.1.min.js"></script>
<script src="js/sketch.js"></script>
<script src="jquery-1.11.3.min"></script>
<link rel="stylesheet" href="css/particles.css">
<style type="text/css">
#frame {
position: relative;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div id = "frame">
<canvas class=" sketch" height="385" width="1440"></canvas>
</div>
<script src="js/particles.js"></script>
<script>
var canvas = $("#frame").get(0);
canvas.id = "gameView";
</script>
<script src="js/app.js"></script>
</body>
</html>
Would you please tell me how to get the canvas inside the div using either jQuery or vanilla JS in this specific case? And how to set an id for the captured canvas element?
var canvas = document.querySelector('canvas');
Related
I am trying to display the coordinates of my mouse inside a certain area that I have predetermined are using a div. I am able to see the coordinates dynamically changing as I move the mouse inside the div when look I look at the chrome console but not on my webpage.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Mouse Coordinates</title>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<div id="canvas" v-on:mousemove="XYcoordinates">
{{x}},{{y}}
<div>
</div>
<script src="app.js"></script>
</body>
</html>
//App.js file
// this is a Vue instance
new Vue({
el:'#vue-app',
// data object
data:{
x:0,
y:0
},
methods:{
XYcoordinates: function(event){
console.log(event);
this.x = event.offsetX;
this.y = event.offsetY;
}
}
});
#canvas{
width:600px;
padding: 200px 20px;
text-align: center;
border: 3px solid rgb(228, 0, 0);
}
The problem comes back to the unclosed div tag, you can see the link https://jsfiddle.net/smaha/bajdmyhn/26/ it works
<div id="vue-app">
<div id="canvas" v-on:mousemove="XYcoordinates">
{{x}},{{y}}
</div>
</div>
I want to make a javascript (a javascript animation) as a preloader for a website for my project.
Something along the lines of this:
http://soulwire.github.io/Plasmatic-Isosurface/
I want this to run first and until the elements of my page are downloaded and after that it should turn off and show the completely loaded page
Is this possible?
Thanks
Here's a sample HTML Code I want to test it on
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Javascript preloader</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="preloader"></div>
<canvas id='canvas'></canvas>
<script src="js/index.js"></script>
<img src="https://wallpaperscraft.com/image/stars_sky_shore_84534_1920x1080.jpg" alt="safe"></img>
</body>
</html>
**EDIT TO CODE APOLOGIES
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Preloader Testing</title>
<style>
.preloader{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1000;
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas class="preloader" id='canvas'></canvas>
<script src="js/index.js"></script>
<img src="https://wallpaperscraft.com/image/stars_sky_shore_84534_1920x1080.jpg" alt="safe"></img>
</body>
<script>
//after window is loaded completely
window.onload = function(){
//hide the preloader
document.querySelector(".preloader").style.display = "none";
}
</script>
</html>
You can show the preloader by default. And once the web page is completely loaded, you just hide it. Here is a code sample
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Javascript preloader</title>
<link rel="stylesheet" href="css/style.css">
<style>
/*Styling preloader*/
.preloader{
/*
Making the preloader floating over other elements.
The preloader is visible by default.
*/
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1000;
}
</style>
</head>
<body>
<div class="preloader"><span class="preloader-js"></span></div>
<canvas id='canvas'></canvas>
<script src="js/index.js"></script>
<img src="https://wallpaperscraft.com/image/stars_sky_shore_84534_1920x1080.jpg" alt="safe"></img>
</body>
<script>
//after window is loaded completely
window.onload = function(){
//hide the preloader
document.querySelector(".preloader").style.display = "none";
}
</script>
</html>
Thanks
Put everything you need for your animation in a div with an id and everything you need for your content in another. Give your content display: none in your stylesheet. Now you can use window.onload to change the styles document.getElementbyId().style.display = none/inline
I would like to close an iframe using a button that exists inside that iframe.
I have these two files, index.html and contents.html:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
a {
postion: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<iframe id="outerIframe" src="./contents.html" width="1000px" height="1000px"></iframe>
<div class="behind">
Mark Behind
</div>
</body>
</html>
contents.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.big-box {
height: 500px;
width: 500px;
background-color: #666;
}
</style>
</head>
<body>
<div class="big-box">
<button class="closer" type="button" name="button">Click to close</button>
</div>
<script type="text/javascript">
var button = document.querySelector('.closer');
button.addEventListener('click', function() {
document.getElementById('outerIframe').style.display = "none";
});
</script>
</body>
</html>
When I click the button, I get an error in the console that says "Cannot read property 'style' of null. I understand that means my attempt to get the iframe was not successful. How would I get the iframe this button resides in so that I can change the styles on it?
Need to traverse up to parent window. An iframe has it's own window
Try
button.addEventListener('click', function() {
window.parent.document.getElementById('outerIframe').style.display = "none";
});
DEMO
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>Prueba</title>
</head>
<body>
<div class="prueba"></div>
</body>
</html>
CSS:
.prueba {
height: 100px;
width: 100px;
background-color: green;
}
JS (Edited):
var main = function() {
$('.prueba').click(function() {
$(this).removeClass('.prueba');
});
};
$(document).ready(main);
It (still) doesn't work. Can someone help me?
To select class, you should preface class name with a dot:
$('.prueba')
JQuery docs you may want to review.
I'm studying Jquery, and I was trying to do a simple SlideShow, but nothing happens...
Here's my HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/Style.css">
<meta charset="UTF-8">
<title>SlideShow</title>
</head>
<body>
<div id="slides">
<img src="imgs/1.jpg">
<img src="imgs/2.jpg">
<img src="imgs/3.jpg">
</div>
<script type="text/javascript">
$(function(){
$("#slides").cycle({
fx: 'fade',
speed:2000,
timeout:4000,
});
})
</script>
<script type="text/javascript" src="js/Jquery.js"></script>
<script type="text/javascript" src="js/Cycle.js"></script>
</body>
</html>
My Css:
*{
margin: 0;
padding: 0;
}
#slides{
width: 1024px;
height: 768px;
margin: 0 auto;
overflow: hidden;
}
I also tried to change, this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
for this:
<script src="js/jquery-1.11.0.js"></script>
Nothing...
You need to include jQuery before your Cycle plugin, so reverse the order of your scripts here:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/Cycle.js"></script>
Also, it's better to include CSS before Javascript as well as putting your Javascript at the bottom of your page before closing </body> tag.