I have done this code with javascript to try out my first javascript animation, but when I open the page, it's showing me a blank page...
can anyone please tell me whats wrong with the code and why it's not showing anything?
thanks in advance...
<html>
<head>
<title>Trying js Animation</title>
</head>
<body>
<style>
#container{
width: 500px;
height: 500px;
color: green;
position: relative;
}
#box{
width: 50px;
height: 50px;
color: red;
position: absolute;
}
</style>
<div id="container">
<div id="box">
</div>
</div>
<script type="text/javascript">
var t = setInterval(move, 1);
var pos = 0;
var box = document.getElementById('box');
function move(){
pos += 1;
box.style.left = pos + "px";
}
</script>
</body>
</html>
The box is white. Change "color" to "background-color".
Related
I have a basic Graphics User Interface where if the user clicks "move"
then a div (yellow rectangle) moves across the screen.
However, I want there to be an event based on Where the rectangle is on the page. In example, If the div is at 400px (right) then alert "hey", else, move the div.
here is the moving div
<html>
<head>
<title>Move Div</title>
<script language ="javascript">
<!--
function MoveDiv()
{
div = document.getElementById("myDiv");
div.style.left = parseInt(div.style.left) + 100 + "px";
}
//-->
</script>
</head>
<body>
<input type="button" value="Move Div" onclick="MoveDiv()" />
<div id="myDiv" style="border: 10px solid black; background-color: Yellow; width: 100px; height: 30px; position: absolute; top: 1px; left: 100px;"></div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
here is the moving div
<html>
<head>
<title>Move Div</title>
<script language ="javascript">
<!--
function MoveDiv(){
if ($('#myDiv').css == marginTop: '-=15px' ) {
div = document.getElementById("myDiv");
div.style.left = parseInt(div.style.left) + 100 + "px";
}}
//-->
</script>
</head>
<body>
<input type="button" value="Move Div" onclick="MoveDiv()" />
<div id="myDiv" style="border: 10px solid black; background-color: Yellow; width: 100px; height: 30px; position: absolute; top: 1px; left: 100px;"></div>
</body>
</html>
errors mostly because im not sure on the syntax :(
hope its help you
You must use var (let, const) when create a new variable
I added CONSTANTS for easy configuration,
isDivCanMoveForward for your:
Where the rectangle is on the page. In example, If the div is at 400px (right) then alert "hey", else, move the div.
var MAX_POSITION_OF_DIV_NODE = 400;
var STEP_OF_DIV_NODE = 100;
var div = document.getElementById("myDiv");
var currentPositionOfDivNode = parseInt(div.style.left, 10);
function MoveDiv() {
currentPositionOfDivNode += STEP_OF_DIV_NODE; // increment
if (!isDivCanMoveForward()) {
return; // stop functinon when div have max position
}
div.style.left = currentPositionOfDivNode + "px";
}
function isDivCanMoveForward() {
if (currentPositionOfDivNode > MAX_POSITION_OF_DIV_NODE) {
currentPositionOfDivNode = MAX_POSITION_OF_DIV_NODE // set max of value
alert('hey')// user message
return false;
}
return true;
}
<html>
<head>
<title>Move Div</title>
</head>
<body>
<input type="button" value="Move Div" onclick="MoveDiv()" />
<div id="myDiv" style="border: 10px solid black; background-color: Yellow; width: 100px; height: 30px; position: absolute; top: 1px; left: 100px;"></div>
</body>
</html>
The following script is creating a grid of 16 divs. Per mouseover effect I would like to change the color of the divs permanently. Can somebody give me a pointer how what function changeColor could look like?
<script>
let gridcontainer = document.querySelector('#gridcontainer');
gridcontainer.setAttribute('style', 'width: 20px; display: grid; grid-template-columns: auto auto auto auto;')
var index = [];
var boxes;
var i;
var change;
function createGrid(){
for(i=0;i<16;i++){
//console.log(index);
boxes = document.createElement('div');
console.log(boxes);
boxes.classList.add('boxes');
boxes.setAttribute('style','width: 30px; height:30px; background-color:
blue; margin: 5px;');
boxes.setAttribute('onmouseover', changeColor());
gridcontainer.appendChild(boxes);
}}
function changeColor(){
change = document.querySelector('.boxes');
change.setAttribute('style','background-color: red');
}
</script>
Thank you all for your help.
I have used jquery function (toggleClass) to change the color div on hover
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.b1{
background:red;
width: 30px;
height: 40px;
margin: 10px;
}
.b{
background:blue;
width: 30px;
height: 40px;
margin: 10px;
}
</style>
</head>
<body>
<div class="b1"></div>
<div class="b1"></div>
<div class="b1"></div>
<div class="b1"></div>
<div class="b1"></div>
<script type="text/javascript">
$('div').hover(function () {
// body...
$("div").toggleClass("b");
});
</script>
</body>
</html>
I am making matching game that images in left and right are different, and users have to find(I put one more image in left side).
My problem is that I cannot call image on where I want. What should I have to fix? Thank you.
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
}
div {
position: absolute;
width: 500px;
height: 500px;
}
#leftside {
float: left;
}
#rightside {
float: right;
left: 500px;
border-left: 1px solid black
}
</style>
<script>
var numberOfFaces(5);
var theLeftSide = document.getElementById("leftSide");
function generateFaces() {
var createElement("img");
var position = Math.floor(Math.random() * 500);
img.src = 'http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png';
img.id = 'smileImage';
createElement.setAttribute("height", position);
createElement.setAttribute("width", position);
document.getElementById('leftSide').appendChild(img);
}
</script>
</head>
<body>
<h1>Matching Game</h1>
<p>Click on the extra smiling face on the left.</p>
<div id="leftside"></div>
<div id="rightside"></div>
</body>
</html>
You need to set something to the result of createElement('img'). For example, you can change that line to var img = createElement('img');
You never actually use theLeftSide.
createElement is actually document.createElement.
You never defined the variable createElement. Since we called it img earlier, do so now.
leftSide is not the ID of any element, but leftside is. Change it so that all usages are capitalized the same.
After that, you actually need to call generateFaces. Because the page is loaded top-to-bottom, JavaScript doesn't yet know about the div with the ID of leftSide. You have to wait until the page is finished loading to call the Javascript, and you can do that by adding window.onload = generateFaces to the end of your script.
Here's the final result:
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
}
div {
position: absolute;
width: 500px;
height: 500px;
}
#leftside {
float: left;
}
#rightside {
float: right;
left: 500px;
border-left: 1px solid black
}
</style>
<script>
function generateFaces() {
var img = document.createElement('img');
var position = Math.floor(Math.random() * 500);
img.src = 'http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png';
img.id = 'smileImage';
img.setAttribute('height', position);
img.setAttribute('width', position);
document.getElementById('leftSide').appendChild(img);
}
window.onload = generateFaces;
</script>
</head>
<body>
<h1>Matching Game</h1>
<p>Click on the extra smiling face on the left.</p>
<div id="leftSide"></div>
<div id="rightSide"></div>
</body>
</html>
I need to create simple link display like below image;
What I thought is add separate styles for all of these links. but its looks not the best way to do this.
have anyone tried something like this? can I do this with JavaScript or JQuery?
This allows you to randomly position the Text. Maybe you could edit it slightly for your needs?
<html>
<head>
<style type='text/css'>
body {
border: 1px solid #000;
height: 300px;
margin: 0;
padding: 0;
width: 300px;
}
.box {
height: 30px;
position: absolute;
width: auto;
}
#div1 { background:0;color:red; }
#div2 { background:0;color:blue; }
#div3 { background:0; color:green;}
</style>
<script type='text/javascript'>
function setDivPos() {
for (i=1; i<=3; i++) {
var x = Math.floor(Math.random()*250);
var y = Math.floor(Math.random()*250);
document.getElementById('div'+i).style.left = x + 'px';
document.getElementById('div'+i).style.top = y + 'px';
}
}
</script>
</head>
<body onload='setDivPos();'>
<div id='div1' class='box'>one word</div>
<div id='div2' class='box'>another word</div>
<div id='div3' class='box'>and so on</div>
</body>
</html>
Anyone have time to help?
Alternative
An alternative to this would be: this demo
Links:
There are several links here that you might be interested in
I am trying to achive a fixed position after a certain point of the page is passed using CSS JS and HTML.
Also I don't know the bet aproach in loading the function into the html doc, I was thinking on using the onload...
Here is what I have done until now:
<!DOCTYPE html>
<html>
<head>
<script>
var left1 = document.getElementById("left1");
var origOffsetY = left1.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? left1.style.position = "fixed":
left1.style.position="absolute";
}
document.addEventListener('scroll', onScroll);
</script language="JavaScript">
<style>
#main {
position: relative;
width: 620px;
margin: 0 auto;
height: 1800px;
}
#left1{
position: absolute;
font-family: sans-serif;
left: 0px;
top: 10px;
height: 200px;
width: 300px;
background-color: #F6D565;
}
#right1{
position:absolute;
font-family: sans-serif;
top: 10px;
right: 0px;
height: 300px;
width: 300px;
background-color: #DFFCC2;
}
#right2{
position:absolute;
top: 320px;
right: 0px;
font-family: sans-serif;
height:300px;
width: 300px;
background-color: #DFFCC2;
}
#right3{
position:absolute;
top: 630px;
right: 0px;
font-family: sans-serif;
height: 300px;
width: 300px;
background-color: #DFFCC2;
}
</style>
</head>
<body >
<div id="main">
<div id="left1">aaaaaaaaaaaaaaaaaaaa</div>
<div id="right1">bbb</div>
<div id="right2">cccccccccccccccccccccc</div>
<div id="right3">ddd</div>
</div>
</body>
</html>
DEMO
The DOM is not available when you are trying to access div with id left1.
So your first line var left1 = document.getElementById("left1"); will give error.
Instead Wrap your current code within window.onload
<script>
window.onload = function() {
var left1 = document.getElementById("left1");
var origOffsetY = left1.offsetTop;
function onScroll(e) {
console.log("calling scroll")
window.scrollY >= origOffsetY ? left1.style.position = "fixed":
left1.style.position="absolute";
}
document.addEventListener('scroll', onScroll);
}
</script>
Else place your javascript just above the </body> tag
Yes, you can use onload to call a function after the page is loaded like so:
<script type="text/javascript">
function onLoad(){
var left1 = document.getElementById("left1");
var origOffsetY = left1.offsetTop;
}
function onScroll(e) {
window.scrollY >= origOffsetY ? left1.style.position = "fixed":
left1.style.position="absolute";
}
document.addEventListener('scroll', onScroll);
</script>
and replace
<body>
with:
<body onload="onload()">
Note that you can still leave the script in the header of your page (between <head> and </head>).
You can use window.addEventListener() if you don't like <body onload="onload">, but IE won't support this. See "Hook a javascript event to page load" for details.
You have to load your script after the DOM is created. The time you are trying to parse var left1 =document.getElementById("left1"); DOM hasn't created yet so var left1 is null
TRY:
<!DOCTYPE html>
<html>
<head>
<style>
//YOUR CSS
</style>
</head>
<body >
<div id="main">
<div id="left1">aaaaaaaaaaaaaaaaaaaa</div>
<div id="right1">bbb</div>
<div id="right2">cccccccccccccccccccccc</div>
<div id="right3">ddd</div>
</div>
<script>
var left1 = document.getElementById("left1");
var origOffsetY = left1.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? left1.style.position = "fixed":
left1.style.position="absolute";
}
document.addEventListener('scroll', onScroll);
</script language="JavaScript">
</body>
</html>
EDIT:
By changing position you have to rearrange your item.
Try:
function onScroll(e) {
if (window.scrollY >= origOffsetY) {
left1.style.position = "fixed";
left1.style.left = "66px"
} else {
left1.style.position = "absolute";
left1.style.left = "0px";
}
}
DEMO