I programmed an img element to "fall" down the window with parseInt(its.style.top) triggered by a setInterval(fall,1000) function in the body.
An error occurs after the Moves() function is triggered, and the fall() function stops being called. Is there an if-statement for Moves() function to call the setInterval(fall,1000) again after the img s.style.left >= r.style.width??
Thanks! :-)
<html>
<body onload="setInterval(fall,1000)" onkeydown="Moves()">
<img id="square" style="position:absolute; left:10px; top:0px;
width:50px; height:50px; background-color:red;" />
<img id="rectangle" style="position:absolute; left:10px; top:130px;
width:150px; height:10px; background-color:blue;" />
<script>
function fall(){
var s = document.getElementById("square");
s.style.top = parseInt(s.style.top) + 25 + 'px';
var r = document.getElementById("rectangle");
r.style.top=130 + 'px';
if(s.style.top>=r.style.top){s.style.top=r.style.top;}
}
function Moves(){
var s = document.getElementById("square");
if (event.keyCode==39) {
s.style.left = parseInt(s.style.left)+10+'px';}
var r = document.getElementById("rectangle");
r.style.width=150 + 'px';
if(s.style.left>=r.style.width){setInterval(fall,1000);}
}
</script>
</body> </html>
I believe this is what you were trying to do:
<html>
<body onload="setTimeout(fall,1000)" onkeydown="Moves()">
<img id="square" style="position:absolute; left:10px; top:0px;
width:50px; height:50px; background-color:red;" />
<img id="rectangle" style="position:absolute; left:10px; top:130px;
width:150px; height:10px; background-color:blue;" />
<script>
var over_edge = false;
var can_fall = true;
function fall(){
var s = document.getElementById("square");
s.style.top = parseInt(s.style.top) + 25 + 'px';
var r = document.getElementById("rectangle");
//r.style.top=130 + 'px';
if(!over_edge) {
if(parseInt(s.style.top) >= parseInt(r.style.top) - parseInt(s.style.height)) {
s.style.top = parseInt(r.style.top) - parseInt(s.style.height);
can_fall = false;
}
}
if(can_fall || over_edge)
setTimeout(fall, 1000);
}
function Moves(){
var s = document.getElementById("square");
if (event.keyCode==39) {
s.style.left = parseInt(s.style.left)+10+'px';}
var r = document.getElementById("rectangle");
//r.style.width=150 + 'px';
if(parseInt(s.style.left) >= parseInt(r.style.left) + parseInt(r.style.width)) {
if(!over_edge) {
over_edge = true;
fall(); // trigger falling over the edge but only once
}
}
}
</script>
</body>
</html>
Related
I've made this code to make a game that counts the number of clicks on the moving image .. but i can't make the Countdown or the counter .. i want when the user press start the game an countdown begins .. and every click on the image the number in (the counter) increased by one .. Thnx
var x_position = 0 ;
var theSpace = document.getElementById("gamespace");
var textt=document.getElementById("text");
var theMission = document.createTextNode(" - Press the tree as fast as you can ");
var theTree = document.createElement("img");
var moving;
function movingf() {
theSpace.appendChild(theTree);
theTree.style.left=Math.floor(Math.random() * 401) + "px";
theTree.style.right=Math.floor(Math.random() * 401) + "px";
theTree.style.top=Math.floor(Math.random() * 401) + "px";
theTree.style.bottom=Math.floor(Math.random() * 401) + "px";
moving=setTimeout(movingf,500);
theTree.addEventListener("click",theCounter);
}
function theGame() {
textt.style.clear="both";
theTree.setAttribute("src","http://franklinccc.org/wp-content/uploads/2014/03/ccc-tree-logo.jpg");
theTree.style.position="absolute";
theSpace.appendChild(theTree);
textt.appendChild(theMission);
moving=setTimeout(movingf,50);
theTree.onclick = theCounter();
}
function theCounter() {
var time = 0;
time = time + 1 ;
var theCount = document.getElementById("times").innerHTML=time;
}
#gamespace{
border:2px solid black ;
width:500px;
height:500px;
top:215px;}
p{position:absolute;
border:1px solid black;}
button{position:absolute;
top:60px;}
#here{position:absolute;
top:45px;
}
<h1> PICTURE GAME .. </h1>
<button id="start" onclick="theGame()"> Press here to start the game</button>
<div id="here">
<form action="/action_page.php" id="here">
The countdown :
<input type="text" name="firstname" value="0" >
The counter :
<input type="text" name="lastname" value="0">
</form>
</div>
<p id="text" style="top:170px"></p>
<div id="gamespace" style="position:absolute"> </div>
You have an error in your javascript :
"message": "Uncaught TypeError: Cannot set property 'innerHTML' of null",
here :
var theCount = document.getElementById("times").innerHTML=time;
You have no element with the id = "times", so if you want the <p> element to contain the count, change the line to :
var theCount = document.getElementById("text").innerHTML=time;
Also, theCounter() function should be like this :
function theCounter() {
time = time + 1 ;
document.getElementById("text").innerHTML=time;
}
var x_position = 0 ;
var theSpace = document.getElementById("gamespace");
var textt=document.getElementById("text");
var theMission = document.createTextNode(" - Press the tree as fast as you can ");
var theTree = document.createElement("img");
var moving ;
var time = 0;
function movingf() {
theSpace.appendChild(theTree);
theTree.style.left=Math.floor(Math.random() * 401) + "px";
theTree.style.right=Math.floor(Math.random() * 401) + "px";
theTree.style.top=Math.floor(Math.random() * 401) + "px";
theTree.style.bottom=Math.floor(Math.random() * 401) + "px";
moving=setTimeout(movingf,500);
theTree.addEventListener("click",theCounter);
}
function theGame() {
textt.style.clear="both";
theTree.setAttribute("src","http://franklinccc.org/wp-content/uploads/2014/03/ccc-tree-logo.jpg");
theTree.style.position="absolute";
theSpace.appendChild(theTree);
textt.appendChild(theMission);
moving=setTimeout(movingf,50);
theTree.onclick = theCounter();
}
function theCounter() {
time = time + 1 ;
document.getElementById("text").innerHTML=time;
}
#gamespace {
border: 2px solid black ;
width: 500px;
height: 500px;
top: 215px;
}
p {
position: absolute;
border: 1px solid black;
}
button {
position: absolute;
top: 60px;
}
#here {
position: absolute;
top: 45px;
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<h1> PICTURE GAME .. </h1>
<button id="start" onclick="theGame()"> Press here to start the game</button>
<div id="here">
<form action="/action_page.php" id="here">
The countdown :
<input type="text" name="firstname" value="0" >
The counter :
<input type="text" name="lastname" value="0">
</form>
</div>
<p id="text" style="top:170px"></p>
<div id="gamespace" style="position:absolute"> </div>
</body>
You were trying to reset your counter inside the theCounter function each time it was called, also tried to set innerHTML of element with id that was not in your markup. After fixing this this you can use setInterval to implement timer countdown:
var x_position = 0 ;
var theSpace = document.getElementById("gamespace");
var textt=document.getElementById("text");
var theMission = document.createTextNode(" - Press the tree as fast as you can ");
var theTree = document.createElement("img");
var moving;
function movingf() {
theTree.style.left=Math.floor(Math.random() * 401) + "px";
theTree.style.right=Math.floor(Math.random() * 401) + "px";
theTree.style.top=Math.floor(Math.random() * 401) + "px";
theTree.style.bottom=Math.floor(Math.random() * 401) + "px";
}
var clicks = 0, gameTimer, movingfTimer, timeleft;
theSpace.appendChild(theTree);
function theGame() {
clicks = 0;
timeleft = 30;
document.getElementById("times").value = clicks;
document.getElementById("countdown").value = timeleft;
textt.style.clear="both";
theTree.setAttribute("src","http://franklinccc.org/wp-content/uploads/2014/03/ccc-tree-logo.jpg");
theTree.style.position="absolute";
theSpace.appendChild(theTree);
textt.appendChild(theMission);
theTree.addEventListener("click", theCounter);
movingf();
clearInterval(movingfTimer);
clearInterval(gameTimer);
movingfTimer = setInterval(movingf, 500);
gameTimer = setInterval(function(){
timeleft--;
document.getElementById("countdown").value = timeleft;
if(timeleft <= 0){
clearInterval(gameTimer);
clearInterval(movingfTimer);
theTree.removeEventListener("click", theCounter);
}
}, 1000);
}
function theCounter() {
clicks++;
document.getElementById("times").value = clicks;
}
#gamespace {
border:2px solid black ;
width:500px;
height:500px;
top:215px;
}
p {
position:absolute;
border:1px solid black;
}
button {
position:absolute;
top:60px;
}
#here {
position:absolute;
top:45px;
}
<h1> PICTURE GAME .. </h1>
<button id="start" onclick="theGame()"> Press here to start the game</button>
<div id="here">
<form action="/action_page.php" id="here">
The countdown :
<input type="text" name="countdown" id="countdown" />
The counter :
<input type="text" name="times" id="times" value="0" />
</form>
</div>
<p id="text" style="top:170px"></p>
<div id="gamespace" style="position:absolute"> </div>
I am trying to race two cars when a button is pushed. I want them to move at different speeds.
I am using startRaceButton.onClick to run my two start race functions which set intervals for my images to move. I also have it set to clear the interval after it reaches the finish line.
The problem I am having is, when the button is clicked nothing happens.
<script type="text/javascript">
window.onload = function() {
var redSpeed = 1*(Math.floor((Math.random() * 10) + 1));
var blueSpeed = 1*(Math.floor((Math.random() * 10) + 1));
var blueLeft = 81;
var redLeft = 81;
var redInterval = 10;
var blueInterval = 10;
var redTimer;
var blueTimer;
var startRaceButton = document.getElementById("imgStartButton");
var redCar = document.getElementById("imgRedCar");
var blueCar = document.getElementById("imgBlueCar");
var goRed = function() {
redCar.style.left = redLeft + "px";
redLeft += redSpeed;
if (redLeft > 899) {
clearInterval(redTimer);
}
}
var goBlue = function() {
blueCar.style.left = blueLeft + "px";
blueLeft += blueSpeed;
if (blueLeft > 899) {
clearInterval(blueTimer);
}
}
var startRed = function() {
redTimer = setInterval(goRed, redInterval);
}
var startBlue = function() {
blueTimer = setInterval(goBlue, blueInterval);
}
startRaceButton.onclick = function() {
startRed();
startBlue();
}
</script>
</head>
<body>
<div style= "display:block; margin:0; padding:0; width:1005px; height:400px;" id="container">
<div id="left" style= "float:left; display:block; margin:0; padding:0; width:80px; height:400px">
<img id="imgStartButton" src="http://ondemandweb.pbworld.net/pbucontent/images/GOButton.jpg" width="60" height="60" >
</div>
<div id="box" style="float:left; display:block; margin:0; padding:0; width:920px; height:400px;">
<img id="imgBlueCar" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTxJr8SKga0S-nM4JgzlIXk6XrmgN8fwdDbvA6tKGWV65fmeaYWDA" style="position:absolute; left:81px; top:100px" width="100" height="60" alt="blue">
<img id="imgRedCar" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR8nsZ52wkuxrlT3aiqFicu_YYOVJ1hSKCI2-0MY6G4QKSGHIj4tw" style="position:absolute; left:81px; top:250px" width="100" height="60" alt="red">
</div>
<div id="right" style="float:left; display:block; margin:0; padding:0; width:5px; height:400px; background-color:black; ">
</div>
</div>
</body>
your script is running before your DOM loads. Therefore your bindings don't have meaning.
try including the script after the body of your html.
At first laod, image and the escape button do not appear in the designated place.
Go on and close the divs by clicking the escape button and then execute the function again.
Surprisingly, at the second execution, it works perfectly.
Does anyone know why results are different at the first load?
(FireFox)
< html>
< head>
< style type="text/css">
#wievbackground {
position: fixed;
top: 0;
left: 0;
height:100%;
width:100%;
background-color:red;
}
#escapebutton {
position:fixed;
background-color:white;
height:40px;
width:40px;
}
< /style>
< /head>
<body>
<div id="wievwrap"> </div>
<script type="text/javascript">
function itemview(itemurl) {
document.getElementById("wievwrap").innerHTML = ' <div id="wievbackground"> </div> ';
document.getElementById("wievbackground").innerHTML = ' <img id="theitem" style="position:fixed" src="' + itemurl + '"> ';
document.getElementById("wievbackground").innerHTML += '<div onclick="document.getElementById(\'wievwrap\').innerHTML=\'\';" id="escapebutton"></div>';
document.getElementById("theitem").style.left = document.getElementById("theitem").parentElement.offsetWidth / 2 - document.getElementById("theitem").offsetWidth / 2 + "px";
document.getElementById("theitem").style.top = document.getElementById("theitem").parentElement.offsetHeight / 2 - document.getElementById("theitem").offsetHeight / 2 + "px";
var x = parseInt(document.getElementById("theitem").style.left) + parseInt(document.getElementById("theitem").offsetWidth - document.getElementById("escapebutton").offsetWidth / 2);
document.getElementById("escapebutton").style.left = x + "px";
document.getElementById("escapebutton").style.top = parseInt(document.getElementById("theitem").style.top) - document.getElementById("escapebutton").offsetHeight / 2 + "px";
}
</script>
<div></div>
<div onclick="itemview('smt.png')">function</div>
</body>
</html>
I am using the following coding
<html>
<head>
<style>
#thediv {
margin:0 auto;
height:400px;
width:400px;
overflow:hidden;
}
img {
position: relative;
left: 50%;
top: 50%;
}
</style>
</head>
<body>
<input type="button" value ="-" onclick="zoom(0.9)"/>
<input type="button" value ="+" onclick="zoom(1.1)"/>
<div id="thediv">
<img id="pic" src="http://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg"/>
</div>
<script>
window.onload = function(){
zoom(1)
}
function zoom(zm) {
img=document.getElementById("pic")
wid=img.width
ht=img.height
img.style.width=(wid*zm)+"px"
img.style.height=(ht*zm)+"px"
img.style.marginLeft = -(img.width/2) + "px";
img.style.marginTop = -(img.height/2) + "px";
}
</script>
</body>
</html>
For making a simple zoom in and zoom out function.
I this i have a difficulty of the image is zooming indefinitely. i want to fix a position to zoom in and zoom out. The image must not exceed that position while zooming in and zooming out.
I am adding a fiddle to this link
Here you go:
var zoomLevel = 100;
var maxZoomLevel = 105;
var minZoomLevel = 95;
function zoom(zm) {
var img=document.getElementById("pic");
if(zm > 1){
if(zoomLevel < maxZoomLevel){
zoomLevel++;
}else{
return;
}
}else if(zm < 1){
if(zoomLevel > minZoomLevel){
zoomLevel--;
}else{
return;
}
}
wid = img.width;
ht = img.height;
img.style.width = (wid*zm)+"px";
img.style.height = (ht*zm)+"px";
img.style.marginLeft = -(img.width/2) + "px";
img.style.marginTop = -(img.height/2) + "px";
}
You can modify the zoom levels to whatever you want.
I modified the fiddle a bit, since you only need to add javascript to the bottom-left area.
I am having a problem getting onprogress event for the audio tag working on chrome. it seems to work on fire fox.
http://www.scottandrew.com/pub/html5audioplayer/ works on chrome but there is no progress bar update. When I copy the code and change the src to a .wav file and run it on fire fox it works perfectly.
<style type="text/css">
#content
{
clear:both;
width:60%;
}
.player_control
{
float:left;
margin-right:5px;
height: 20px;
}
#player
{
height:22px;
}
#duration
{
width:400px;
height:15px;
border: 2px solid #50b;
}
#duration_background
{
width:400px;
height:15px;
background-color:#ddd;
}
#duration_bar
{
width:0px;
height:13px;
background-color:#bbd;
}
#loader
{
width:0px;
height:2px;
}
.style1
{
height: 35px;
}
</style>
<script type="text/javascript">
var audio_duration;
var audio_player;
function pageLoaded() {
audio_player = $("#aplayer").get(0);
//get the duration
audio_duration = audio_player.duration;
$('#totalTime').text(formatTimeSeconds(audio_player.duration));
//set the volume
}
function update(){
//get the duration of the player
dur = audio_player.duration;
time = audio_player.currentTime;
fraction = time/dur;
percent = (fraction*100);
wrapper = document.getElementById("duration_background");
new_width = wrapper.offsetWidth*fraction;
document.getElementById("duration_bar").style.width = new_width + "px";
$('#currentTime').text(formatTimeSeconds(audio_player.currentTime));
$('#totalTime').text(formatTimeSeconds(audio_player.duration));
}
function formatTimeSeconds(time) {
var minutes = Math.floor(time / 60);
var seconds = "0" + (Math.floor(time) - (minutes * 60)).toString();
if (isNaN(minutes) || isNaN(seconds))
{
return "0:00";
}
var Strseconds = seconds.substr(seconds.length - 2);
return minutes + ":" + Strseconds;
}
function playClicked(element){
//get the state of the player
if(audio_player.paused)
{
audio_player.play();
newdisplay = "||";
}else{
audio_player.pause();
newdisplay = ">";
}
$('#totalTime').text(formatTimeSeconds(audio_player.duration));
element.value = newdisplay;
}
function trackEnded(){
//reset the playControl to 'play'
document.getElementById("playControl").value=">";
}
function durationClicked(event){
//get the position of the event
clientX = event.clientX;
left = event.currentTarget.offsetLeft;
clickoffset = clientX - left;
percent = clickoffset/event.currentTarget.offsetWidth;
duration_seek = percent*audio_duration;
document.getElementById("aplayer").currentTime=duration_seek;
}
function Progress(evt){
$('#progress').val(Math.round(evt.loaded / evt.total * 100));
var width = $('#duration_background').css('width')
$('#loader').css('width', evt.loaded / evt.total * width.replace("px",""));
}
function getPosition(name) {
var obj = document.getElementById(name);
var topValue = 0, leftValue = 0;
while (obj) {
leftValue += obj.offsetLeft;
obj = obj.offsetParent;
}
finalvalue = leftValue;
return finalvalue;
}
function SetValues() {
var xPos = xMousePos;
var divPos = getPosition("duration_background");
var divWidth = xPos - divPos;
var Totalwidth = $('#duration_background').css('width').replace("px","")
audio_player.currentTime = divWidth / Totalwidth * audio_duration;
$('#duration_bar').css('width', divWidth);
}
</script>
</head>
<script type="text/javascript" src="js/MousePosition.js" ></script>
<body onLoad="pageLoaded();">
<table>
<tr>
<td valign="bottom"><input id="playButton" type="button" onClick="playClicked(this);" value=">"/></td>
<td colspan="2" class="style1" valign="bottom">
<div id='player'>
<div id="duration" class='player_control' >
<div id="duration_background" onClick="SetValues();">
<div id="loader" style="background-color: #00FF00; width: 0px;"></div>
<div id="duration_bar" class="duration_bar"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
<td>
<span id="currentTime">0:00</span>
</td>
<td align="right" >
<span id="totalTime">0:00</span>
</td>
</tr>
</table>
<audio id='aplayer' src='<%=getDownloadLink() %>' type="audio/ogg; codecs=vorbis" onProgress="Progress(event);" onTimeUpdate="update();" onEnded="trackEnded();" >
<b>Your browser does not support the <code>audio</code> element. </b>
</audio>
</body>
Chrome doesn't fire the progress event when it has the media in cache, that might be your problem.
The progress event doesn't fire in Chrome for WAV files but it does for MP3.
There is a known timeupdate bug: http://code.google.com/p/chromium/issues/detail?id=25185.