JavaScript setInterval animation creates gibberish without error in the console - javascript

I'm trying to create a simple animation with setInterval, and I'm testing it on a Python SimpleHTTPServer because I had some cross-origin issues earlier. There is no error in the console when I load the page, and I can see the loading overlay properly, and then the page just becomes gibberish (see images below) although the console shows it is loading image properly. I'm wondering what is wrong. Thanks!
(The gibberish is really long, so this screenshot is just part of it.)
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fish</title>
<link rel="stylesheet" type="text/css" href="./assets/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="overlay">
<img src="http://i.imgur.com/KUJoe.gif">
</div>
<div id="fish" style="width:100px; height:100px;"></div>
<script type="text/javascript">
$(window).on("load", function(){
$("#overlay").fadeOut();
var r = 1;
setInterval(function(){
if (r < 5) {
$("#fish").load("./assets/images/fish" + r + ".jpeg");
r++;
} else {
r = 1;
}
console.log(r);
console.log("./assets/images/fish" + r + ".jpeg");
}, 100);
});
</script>
</body>
</html>

When you say this:
$("#fish").load("./assets/images/fish" + r + ".jpeg");
...you are loading the data in the jpeg file as text within the #fish element - that is, you are doing the equivalent of trying to open a jpeg file in Notepad.
What you probably want to do is have an <img> element and set its src to that jpeg file - either change the <div> to be an <img> or add an <img> within the <div>:
<div style="width:100px; height:100px;"><img id="fish"></div>
// and then
$("#fish").prop("src", "./assets/images/fish" + r + ".jpeg");
Note that for smooth animation you probably want to "preload" all of the images, then use setInterval() after that to switch between them.

Related

Random Image selector from folder

I'm a student working on an art project in which I select one of 500 created images to show up on a webpage. I'm very new to coding and only really understand html and css, with very small amount of knowledge in JavaScript. I'm stuck in getting the images to show up, when I inspect it gives me an error saying: Failed to load resource: net::ERR_FILE_NOT_FOUND $selected_image}< I'm not really sure what to do with this, I hope someone would like to help me with this.
Thankyou :)
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" media="screen" href="css/main.css">
<!-- <link rel="JavaScript" href="script.js"> -->
<meta charset='utf-8'>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<title>Mother</title>
<body>
<div id="container">
<div id="inner_container">
<img id="image_shower"/>
</div>
<div id="button_container">
<button onclick="get_random_image()"></button>
</div>
</div>
<script>
image_array = [
'Lilith10.png',
'Lilith11.png',
'Lilith12.png',
'Lilith13.png',
'Lilith14.png']
function get_random_image(){
random_index = Math.floor(Math.random() * image_array.lenght);
selected_image = image_array[random_index]
document.getElementById('image_shower').src = './images/$selected_image}'}
</script>
</body>
</html>
Javascript template strings are written with oblique quotes, and variables inside it must have brackets around them (you only had the closing one):
document.getElementById('image_shower').src = `./images/${selected_image}`;
EDIT
Even if in the present case this won't stop your code from working (unless you activate "strict mode"), I also recommend that you use the appropriate keywords to declare your variables.
const image_array = [
'Lilith10.png',
'Lilith11.png',
'Lilith12.png',
'Lilith13.png',
'Lilith14.png'
];
function get_random_image() {
const random_index = Math.floor(Math.random() * image_array.length);
const selected_image = image_array[random_index];
document.getElementById('image_shower').src = `./images/${selected_image}`;
}

Why won't the images appear in the browser?

In this code, the images won't appear once I run it in the browser. I have tried different browsers and different ways to sort the image. Could you tell me why this is happening and how I will be able to fix this because I have been trying for days now. Thank you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Traffic Light Sequence</title>
<body>
<h2>Manuel Traffic Light Sequence</h2>
<img id="light" src="C:\Users\Mrs Afolabi\Documents\Computing\lights\red.gif">
<button type="button" onClick="changeLights()">Change Lights</button>
<script>
var list = [
"C:\Users\Mrs Afolabi\Documents\Computing\lights\green.gif",
"C:\Users\Mrs Afolabi\Documents\Computing\lights\amber.gif",
"C:\Users\Mrs Afolabi\Documents\Computing\lights\red.gif"
];
var index = 0;
function changeLights()
{
index = index + 1;
if (index == list.length) index = 0;
var image = document.getElementById('light');
image.src=list[index];
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Traffic Light Sequence</title>
</head>
<body>
<h2>Manuel Traffic Light Sequence</h2>
<img id="light" src="red.gif">
<button type="button" onClick="changeLights()">Change Lights</button>
<script>
var list = [
"red.gif",
"green.gif",
"amber.gif"
];
var index = 0;
function changeLights() {
index = index + 1;
if (index == list.length) index = 0;
var image = document.getElementById('light');
image.src = list[index];
}
</script>
</body>
</html>
I've cleaned up the code a little. Note that the full path has been removed from the images.
Where ever the HTML file is located if the images are located directly next to the HTML file then they do not need an absolute path (c:/...). Instead relative paths should be used. So assuming the HTML file is found at C:\Users\Mrs Afolabi\Documents\Computing\lights\index.html then the following code below should work as it can easily find the .gif files.
Natively there's no permission to access this kind of URL (from user's computer) that starts of file://, C://, etc... (in any web browser)
If your file is located at some directory in computer, then you can input the files you'll use that are in the same directory, like:
src/styles.css, file.png, etc

Calling .jSignature() on div doesn't update the div

I got this code from the GitHub:
<script src="path/to/jSignature.min.js"></script>
<script>
$(document).ready(function() {
$("#signature").jSignature()
})
</script>
<div id="signature"></div>
But it doesn't pull anything up on the actual webpage. I would think there is more code required but I don't know where to start.
Here is a minimal working example
<!DOCTYPE html>
<html lang="en">
<head>
<lang>
<title>Minimal working jSignature Example</title>
<meta charset="UTF-8">
<!-- Files from the origin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://willowsystems.github.io/jSignature/js/libs/jSignature.min.js"></script>
<head>
<script>
$(document).ready(function() {
// Initialize jSignature
$("#signature").jSignature();
})
// ripped from the description at their the Github page
function getBase64Sig(){
// get the element where the signature have been put
var $sigdiv = $("#signature");
// get a base64 URL for a SVG picture
var data = $sigdiv.jSignature("getData", "svgbase64");
// build the image...
var i = new Image();
i.src = "data:" + data[0] + "," + data[1];
// and put it somewhere where the sun shines brightly upon it.
$(i).appendTo($("#output"));
}
</script>
<body>
Put your signature here:
<div id="signature"></div>
<button onclick="getBase64Sig()">Get Base64</button>
<div id="output"></div>
</body>
</html>
I hope you can go on from here.
It is really as simple as they describe it to be, only their description of the actual example is a bit lacking for beginners.

Combining html5 progress bar with javascript and CGI script and C backend

I'm pretty new to everything concerning webbased programming. I have the following progress bar.
<!doctype html>
<html>
<head>
<title>HTML5 Progress Bar</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/modernizr.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
if(!Modernizr.meter){
alert('Sorry your brower does not support HTML5 progress bar');
} else {
var progressbar = $('#progressbar'),
max = progressbar.attr('max'),
time = (1000/max)*5,
value = progressbar.val();
var loading = function() {
value += 1;
addValue = progressbar.val(value);
$('.progress-value').html(value + '%');
if (value == max) {
clearInterval(animate);
}
};
var animate = setInterval(function() {
loading();
}, time);
};
});
</script>
</head>
<body>
<div class="demo-wrapper html5-progress-bar">
<div class="progress-bar-wrapper">
<progress id="progressbar" value="0" max="100"></progress>
<span class="progress-value">0%</span>
</div>
</div>
</body>
</html>
This works pretty well based on a timer. I now want to fill that progress bar with the help of data from a c program. The Scenario is
the "value" must be updated with progress data from the c program i need to call.
if i understand right i need to call a CGI script which then opens up a pipe to my c program to catch the stdout of that c program.
that stdout data from my c program will then be redirected through the cgi back to the html5 document and update the progress bar.
Problem with that: Is that the right way to do it? Or am i understanding that wrong?
An alternative would be to open a websocket in html5 and adding a socket communcation thread to my c program and then they could both communicate. Is that possible with updating the progress bar in realtime in mind?

Web-browser is not showing the output

I'm new to JavaScript and already encountered a problem. When I run the code and the browser pops up, it[browser] does not show anything. What I have is the testMethod.js file with one method:
function testMethod(num1, num2){
var value = num1 + num2;
return value;
}
and an HTML file from where I'm trying to run:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> My JavaScript</title>
<script language = "javascript" src = testMethod.js"></script>
</head>
<body>
<script language = "javascript" type = "text/javascript">
// var getValue = testMethod(2,3);
document.write("The result is " + testMethod(5,3));
</script>
<noscript>
<h3> This site requires JavaScript</h3>
</noscript>
</body>
</html>
The code is not implementing the result at all. It shows only a blank page browser.
It seems you have a quote missing in the html, it should say src="testMethod.js" where you are including the script in the first place.

Categories

Resources