I'm new to JavaScript and am trying to get this animation to move across the screen though to little avail , can someone help me out with my code? Added more code, im trying to get the image to move diagonally down my screen, trying to call the slowmovingmeteor() function.
Java Script
var meteoranim = new Array(6);
var curmeteor = 0;
var leftposition = 0;
var topposition = 0;
for(var t = 0; t<6; ++t){
meteoranim[t] = new Image();
meteoranim[t].src = "images/meteor" + t + ".png";
}
function meteoranimation(){
if(curmeteor == 5)
curmeteor = 0;
else
++curmeteor;
document.getElementById('meteor').src = meteoranim[curmeteor].src;
}
function slowmovingmeteor(){
var slowmeteor = document.getElementById("meteor");
slowmeteor.style.left = leftposition + "px";
slowmeteor.style.top = topposition + "px";
slowmeteor.style.visibility = "visible";
topposition += 6;
leftposition += 4;
if (topposition <= -20){
topposition = -10;
leftposition = -10;
}
if (curmeteor == 5)
curmeteor =0;
if (leftposition > 1000){
topposition = -10;
leftposition = -10;
}
else
document.getElementById('meteor').src = meteoranim[curmeteor].src;
++curmeteor
}
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Primordial Casino Casino</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link media="screen" href="styles/casinostyles.css" rel="stylesheet" type="text/css">
<script src="casinoAnimation.js" type="text/javascript">
</script>
</head>
<body id="wrapper" onLoad="
setInterval('caveboyanimation()', 150);
setInterval('slowmovingmeteor()', 80);
setInterval('campfireanimation()', 100);">
<header ><h1 class="casinotitle">Primordial Casino</h1>
</header>
<div>
<img class="caveboy" src="images/caveboy0.png" id="caveboy" alt="Image of a cave boy"/>
<img src="images/campfire0.png" id="firepit" alt="Image of a fire pit"/>
<img src="images/meteor0.png" id="meteor" alt="Image of a meteor"/>
<canvas width="650" height="450">
</canvas>
</div>
<div id="footer">
<p>© Primordial Casino</p>
<p>Thanks to ipicturee.com for the background image</p>
</div>
</body>
</html>
Related
I want to move an image to the left and right when clicking on a button. The problem is that the image is not moving to the left although the style of the image is changing. I hope someone can help me.
var imgObj;
var currentWidth = 1;
var speed = 50;
var direction;
function init() {
"use strict";
imgObj = document.getElementById('myImage');
imgObj.style.position = 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
"use strict";
direction = 1;
currentWidth += (speed * direction);
imgObj.style.left = currentWidth + 'px';
}
function moveLeft() {
"use strict";
direction = -1;
currentWidth += (speed * direction);
imgObj.style.right = currentWidth + 'px';
}
window.onload = init;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Walking image</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form>
<img id="myImage" src="https://placeimg.com/900/600/animals?t=1515065784396g" />
<input type="button" value="Rechts" onclick="document.getElementById('myImage').src='https://placeimg.com/900/600/animals?t=1515065867693';moveRight()" />
<input type="button" value="Links" onclick="document.getElementById('myImage').src='https://placeimg.com/900/600/animals?t=1515065784397';moveLeft()" />
</form>
</body>
</html>
Don't adjust both left and right. Just use one of them.
Here both buttons adjust the left value. One increases the value and the other decreases.
var imgObj;
var currentWidth = 1;
var speed = 50;
var direction;
function init() {
"use strict";
imgObj = document.getElementById('myImage');
imgObj.style.position = 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
"use strict";
direction = 1;
currentWidth += (speed * direction);
imgObj.style.left = currentWidth + 'px';
}
function moveLeft() {
"use strict";
direction = -1;
currentWidth += (speed * direction);
imgObj.style.left = currentWidth + 'px';
}
window.onload = init;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Walking image</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form>
<img id="myImage" src="https://placeimg.com/900/600/animals?t=1515065784396g" />
<input type="button" value="Rechts" onclick="document.getElementById('myImage').src='https://placeimg.com/900/600/animals?t=1515065867693';moveRight()" />
<input type="button" value="Links" onclick="document.getElementById('myImage').src='https://placeimg.com/900/600/animals?t=1515065784397';moveLeft()" />
</form>
</body>
</html>
The image doesn't move to the left because you have to change imgObj.style.left, not imgObj.style.rigth:
var imgObj;
var currentWidth = 1;
var speed = 50;
var direction;
function init() {
"use strict";
imgObj = document.getElementById('myImage');
imgObj.style.position = 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
"use strict";
direction = 1;
currentWidth += (speed * direction);
imgObj.style.left = currentWidth + 'px';
}
function moveLeft() {
"use strict";
direction = -1;
currentWidth += (speed * direction);
imgObj.style.left = currentWidth + 'px';
}
window.onload = init;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Walking image</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form>
<img id="myImage" src="https://placeimg.com/900/600/animals?t=1515065784396g" />
<input type="button" value="Rechts" onclick="document.getElementById('myImage').src='https://placeimg.com/900/600/animals?t=1515065867693';moveRight()" />
<input type="button" value="Links" onclick="document.getElementById('myImage').src='https://placeimg.com/900/600/animals?t=1515065784397';moveLeft()" />
</form>
</body>
</html>
$(document).ready(function(){
console.log(document.getElementById("aDiv").offsetTop);
var e = document.getElementById("aDiv");
var s = 1;
setInterval(function(){
var eLeftPos = e.offsetTop;
// console.log(eLeftPos);
e.style.top = (eLeftPos - s) + 'px';
}, 200);
// Animation
(function makeDiv(){
var divsize = 30;
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
$newdiv = $('<div/>',{
"class": "bubble theRestBubbles",
"id": "bDiv"
}).css({
'width':divsize+'px',
'height':divsize+'px',
'background-color': color,
'border-radius' : 50 + "%",
// 'class' : 'bubble',
});
var posx = (Math.random() * ($(document.getElementById("mainBlock")).width())).toFixed();
$newdiv.css({
'position':'absolute',
'left':posx+'px',
'top':370+'px',
'display':'none'
}).appendTo( '#mainBlock' ).fadeIn(1000).delay(00, function(){
// $(this).remove();
makeDiv();
});
})();
});
$(document).ready(function(){
$(".bubble").click(function(){
// $("input").append(" <b>Appended text</b>");
var x = document.getElementById("input").value;
var y = (parseInt(x, 10) || 0) + 1;
x = y;
console.log(x);
$('#input').val(x);
var currentPosition = this.offsetTop;
console.log(currentPosition);
this.style.top = "370px";
});
$(".btn-danger").click(function(){
$('#input').val("");
});
});
.bg{
height: 400px;
/*width: 400px;*/
background-color: #FFF1F1;
/*display: inline-block;*/
position: relative;
}
.bubble{
height: 30px;
width: 30px;
border-radius: 50%;
background-color: #24E93E;
cursor: pointer;
position: absolute;
bottom: 0;
left: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Game</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="row text-center">
<div class="col-xs-3 btnDiv">
<button type="button" class="btn btn-danger">RESET</button>
<button type="button" class="btn btn-success">PLAY</button>
</div>
<div class="col-xs-6 bg main-block" id="mainBlock">
<div class="bubble testBubble" id="aDiv"></div>
</div>
<div class="col-xs-3 score-place">
<input id="input" type="text" name="" placeholder="">
</div>
</div>
</div>
</body>
</html>
Hi All.
Here I have a div, and by Math.Random a little dives are appearing. Now I need them to go up like the one I have at the beginning of the page.
Also When I click on the first and only the second div, there is a input, and the value +1. But the trick is that after first 2 divs, on clicking the rest ones, the value of input stays the same.
Will be glad if you will tell me how to solve this problem
first of all - you're question is very unclear - so I hope I understood you.
a. you want all the divs to bubble up - so why did you use getElementById ?
this will always return only one element + you do it before the interval so it's always the same one. try:
setInterval(function(){
$('.bubble').each(function(){
var e = this;
var eLeftPos = e.offsetTop;
e.style.top = (eLeftPos - s) + 'px';
})
}, 200);
b. only clicks on the original div are counted - that is because you set the click only on load where there is only one div available. try:
$(document).ready(function(){
$('.container').on('click',".bubble",function(){ // this is the only line I changed
// $("input").append(" <b>Appended text</b>");
var x = document.getElementById("input").value;
var y = (parseInt(x, 10) || 0) + 1;
x = y;
console.log(x);
$('#input').val(x);
var currentPosition = this.offsetTop;
console.log(currentPosition);
this.style.top = "370px";
});
$(".btn-danger").click(function(){
$('#input').val("");
});
});
my file:
index.html
client
css
style.css
js
javascript.js
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>blablabla</title>
<link rel="stylesheet" type="text/css" href="client/css/style.css">
<script type="text/javascript" src="client/js/javascript.js"></script>
</head>
<body>
<div id="container">
<div id="guy"></div>
</div>
</body>
</html>
javascript.js
var guy=document.getElementById('guy');
var container=document.getElementById('container');
var guyLeft=0;
function anim(e){
if(e.keyCode==39){
guyLeft +=2;
guy.style.left = guyLeft + 'px';
}
if(e.keyCode==37){
guyLeft -=2;
guy.style.left = guyLeft + 'px';
}
}
document.onkeydown =anim;
style.css
#container{
height:400px;
width:600px;
outline:1px solid black;
position: relative;
}
#guy{
position: absolute;
height:50px;
width:50px;
outline:1px solid black;
background-color:red;
left:0;
}
1)So guys pls help.. I just want to move object left and right .. when i put that code between in index.html it works but in seperate javascript.js class doesn't work. Thx for help.
1) You have to load the JavaScript at the bottom of the page.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>blablabla</title>
<link rel="stylesheet" type="text/css" href="client/css/style.css">
</head>
<body>
<div id="container">
<div id="guy"></div>
</div>
<script type="text/javascript" src="client/js/javascript.js"></script>
</body>
</html>
2) Move up and down:
var guy = document.getElementById('guy');
var container = document.getElementById('container');
var guyLeft = 0;
var guyTop = 0;
function anim(e){
if(e.keyCode==39){
guyLeft +=2;
guy.style.left = guyLeft + 'px';
}
if(e.keyCode==37){
guyLeft -=2;
guy.style.left = guyLeft + 'px';
}
// UP
if(e.keyCode==38) {
guyTop -=2;
guy.style.top = guyTop + 'px';
}
// DOWN
if(e.keyCode==40) {
guyTop +=2;
guy.style.top = guyTop + 'px';
}
}
document.onkeydown = anim;
You should use the console if you want to catch bugs and errors in JavaScript.
I am trying to create advertisement box which simply changes picture after given time. I used each() loop to hide and display images one after another but all i get is same time effect on all pictures. Any clue how to fix that ?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<link rel="stylesheet" type="text/css" href="advert.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
.advert{
position: relative;
}
.advert img{
position: absolute;
/*visibility: hidden;*/
}
</style>
</head>
<body>
<div class="advert">
<img src="img/img1.jpg" alt="Smiley face" height="" width="">
<img src="img/img2.jpg" alt="Smiley face" height="" width="">
<img src="img/img3.jpg" alt="Smiley face" height="" width="">
</div>
</body>
<script>
$(function(){
function simpleAdvert(){
var section = $('.advert');
var images = section.find('img');
images.each(function(){
$( this ).fadeToggle(5000).fadeToggle(5000).delay(10000);
console.log($( this ));
});
}
simpleAdvert();
});
</script>
</html>
.each(function) calls the function for each item in the array immediately, which is why the time effect is applied to all items rather than doing what you expect. To get the pictures to show/hide in a loop you need something like a setInterval which calls a function repeatedly. This should work:
$(function(){
var timeToShow = 750;
var timeToFade = 250;
var timeTotal = timeToShow + timeToFade;
function simpleAdvert(){
var section = $('.advert');
var images = section.find('img');
var index = 0;
images.hide();
$(images[0]).show();
setInterval(function() {
var next = (index + 1) % images.length;
$(images[index]).fadeToggle(timeToFade);
$(images[next]).fadeToggle(timeToFade);
index = next;
}, timeTotal);
}
simpleAdvert();
});
Essentially this hides all images except the first, then fades out the shown picture and fades in the next picture on an interval.
You should call the delay before the fadeToggle method and if you want to show the images one by one you can use the index of the element in the set:
// using fadeIn() method
images.each(function(index) {
// since the indices are zero-based
// the first element is shown without delay
// you can add 1 to the index: 10000 * ++index
$(this).hide().delay(10000 * index).fadeIn(5000);
A suggestion:
function simpleAdvert() {
var section = $('.advert');
var images = section.find('img').hide();
images.each(function(index) {
$(this).delay(10000 * index).fadeIn(5000);
});
}
It's a small extension to working script by concrete_d (Accepted answer).
+ custom time delay with no animation
+ and random slide on the script start
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<link rel="stylesheet" type="text/css" href="advert.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
.advert{
position: relative;
}
.advert img{
position: absolute;
}
</style>
</head>
<body>
<div class="advert">
<img src="img/img1.jpg" alt="Smiley face" height="" width="">
<img src="img/img2.jpg" alt="Smiley face" height="" width="">
<img src="img/img3.jpg" alt="Smiley face" height="" width="">
</div>
</body>
<script>
$(function(){
var timeToShow = 500;
var timeDelay = 5000;
var timeToFade = 500;
var timeTotal = timeToShow + timeToFade + timeDelay;
var minimum = 0;
var maximum = $('.advert').find('img').length - 1;
var randomnumber = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
console.log(randomnumber);
function simpleAdvert(){
var section = $('.advert');
var images = section.find('img');
var index = randomnumber;
images.hide();
$(images[randomnumber]).show().delay(timeDelay);
setInterval(function() {
var next = (index + 1) % images.length;
$(images[index]).fadeToggle(timeToFade);
$(images[next]).fadeToggle(timeToFade);
index = next;
}, timeTotal);
}
simpleAdvert();
});
</script>
</html>
Anyone know why when I click the #stopbar the #player doesn't disapear? I can click the .thumb and get the #player to show up, but getting it to go away doesn't work.
Here's a link to it in action: http://neroedge.shiftarch.com/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>NeroEdge</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var ids = new Array("U61s9-SzrtQ","Volvo","BMW");
var photoNum = 0;
var maxPhotos = 4;
var maxDisplay = 4; //must be able to /2
function getTempVar(i){
var temp = i;
if(temp < 0) temp += maxPhotos;
if(temp >= maxPhotos) temp -= maxPhotos;
return temp;
}
function getGallery(){
$("#gallery").empty();
var temp = photoNum - (maxDisplay/2);
for(var i = 0; i < maxDisplay; i += 1){
temp += 1;
var v = getTempVar(temp);
$("#gallery").append("<img class=\"thumb\" src=\"/images/gallery/thumb/"+v+".png\" alt=\""+ids[v]+"\" />");
}
}
getGallery();
$("#leftbutton").click(function(){
photoNum -= 1;
if(photoNum < 0) photoNum = maxPhotos - 1;
getGallery();
});
$("#rightbutton").click(function(){
photoNum += 1;
if(photoNum >= maxPhotos) photoNum = 0;
getGallery();
});
$(".thumb").click(function(){
$("#player").css("display","block");
$("#player").css("position","absolute");
$("#player").css("top", (($(window).height()/2) - 240) + $(window).scrollTop() + "px");
$("#player").css("left", (($(window).width()/2) - 360) + $(window).scrollLeft() + "px");
$("#player").html("<div id=\"stopbar\">Press this to close video</div><iframe width=\"640\" height=\"480\" src=\"http://www.youtube.com/embed/"+$(this).attr("alt")+"\" frameborder=\"0\" allowfullscreen></iframe>");
});
$("#stopbar").click(function(){
$("#player").css("display","none");
$("#player").css("position","absolute");
$("#player").css("top", "0px");
$("#player").css("left", "0px");
$("#player").html("<div id=\"stopbar\">Press this to close video</div>");
});
});
</script>
</head>
<body>
<div id="player">
<div id="stopbar">Press this to close video</div>
</div>
<div id="wrap">
<div id="banner">
<img src="images/banner.png" alt="NeroEdge" />
</div>
<div id="main">
<div id="navibar">
<div id="title">NeroEdge - By William Starkovich</div>
<div id="tester">Become a Tester</div>
</div>
<br />
<div id="bigcolumn">
<div id="gallerywrap">
<img id="lbutton" src="/images/gallery/left.png" alt="Left Button" />
<div id="gallery">Gallery not loaded.</div>
<img id="rbutton" src="/images/gallery/right.png" alt="Right Button" />
</div>
<br />
<br />
<br />
<br />
<hr style="width: 80%; color: #00ffff;"/>
You can use .live() instead of .click() on the #stopbar. You add the html for the #stopbar after the page has rendered, which is why it won't work.
You are writing the #stopbar into the page dynamically, but are only binding to it at runtime, once.
Check out delegate() (or on() in jQuery 1.7+) to find out how to do this for ALL #stopbars, even ones you create dynamically.
Info: http://api.jquery.com/on/
Example:
$('body').on('click', '#stopbar', function() { ... });
$(".thumb").click(function(){
$("#player").css("display","block");
$("#player").css("position","absolute");
$("#player").css("top", (($(window).height()/2) - 240) + $(window).scrollTop() + "px");
$("#player").css("left", (($(window).width()/2) - 360) + $(window).scrollLeft() + "px");
$("#player").html("<div id=\"stopbar\">Press this to close video</div><iframe width=\"640\" height=\"480\" src=\"http://www.youtube.com/embed/"+$(this).attr("alt")+"\" frameborder=\"0\" allowfullscreen></iframe>");
});