I am writing code for image slide Show using Java Script and HTML 5. I am using SetInterval() method to call ImageSlider Function repeatedly. Problem is Imageslider function is called only once.
Here is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Online Booking</title>
</head>
<style>
iframe
{
display:block;
float:middle;
margin: 0 auto;
text-align: center
}
</style>
<body onload="init()">
<script>
function init()
{
setInterval(imageSlider(),5000);
}
function staticVar()
{
if (staticVar.counter == undefined)
{
staticVar.counter = 1
}
else
{
staticVar.counter++
}
return staticVar.counter;
}
function imageSlider()
{
alert("sl");
var j= staticVar();
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = '91.jpg';
imgArray[1] = new Image();
imgArray[1].src = 'myBro.jpg';
imgArray[2] = new Image();
imgArray[2].src = 'me.jpg';
document.getElementById("imageSlide").src = imgArray[j].src;
}
</script>
<iframe height="580" width="25%" src="91.jpg" id="imageSlide"> </iframe>
</body >
</html>
You need to use
setInterval(imageSlider,5000);
instead of
setInterval(imageSlider(),5000);
Documentation on setInterval().
Related
Currently, based on JavaScript, I have embedded one tableau dashboard in a website, code is shown below. Now, I want to embed 2 dashboard in a same website (this second dashboard is from another tableau publish web link like the one I am using), how could I do it? Meanwhile, I need to create something like 'switch' button to allow me switch to different dashboard contents on click. Can anyone please help me with this?
Current code:
<!DOCTYPE html>
<html>
<head>
<title>Basic Embed</title>
<script type="text/javascript"
src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
<script type="text/javascript">
function initViz() {
var containerDiv = document.getElementById("vizContainer"),
url = "https://us-east-1.online.tableau.com/t/zuar/views/Regional/GlobalTemperatures",
options = {
hideTabs: true,
onFirstInteractive: function () {
console.log("Run this code when the viz has finished loading.");
}
};
var viz = new tableau.Viz(containerDiv, url, options);
// Create a viz object and embed it in the container div.
}
</script>
</head>
<body onload="initViz();">
<div id="vizContainer" style="width:800px; height:700px;"></div>
</body>
</html>
You could use a simple js-toggle func and toggle between the dashboards or whatever content you want to have. Just replace the text-content of the respective divs with the viz-containers of your dashboards..
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript"
src="https://public.tableau.com/javascripts/api/tableau-2.min.js">
</script>
<script>
function toggle() {
var x1 = document.getElementById("dashboard1");
var x2 = document.getElementById("dashboard2");
var bl = document.getElementById("button1");
if (x1.style.display === "none") {
x1.style.display = "block";
x2.style.display = "none";
bl.firstChild.data = "To Data B";
} else {
x1.style.display = "none";
x2.style.display = "block";
bl.firstChild.data = "To Data A";
}
}
function initialize() {
var containerDiv1 = document.getElementById("dashboard1"),
url1 = "https://public.tableau.com/views/liveintegration1/Dashboard1",
options1 = {
hideTabs: true,
onFirstInteractive: function () {
console.log("Run this code when the viz has finished loading.");
}
};
var viz1 = new tableau.Viz(containerDiv1, url1, options1);
// Create a viz object and embed it in the container div.
var containerDiv2 = document.getElementById("dashboard2"),
url2 ="https://public.tableau.com/views/LearnEmbeddedAnalytics/SalesOverviewDashboard",
options2 = {
hideTabs: true,
onFirstInteractive: function () {
console.log("Run this code when the viz has finished loading.");
}
};
var viz2 = new tableau.Viz(containerDiv2, url2, options2);
}
</script>
<style>
#dashboard1 {
border: 1px solid green;
width:800px;
height:700px;
width: 100%;
margin-top: 20px;
}
#dashboard2 {
border: 1px solid blue;
width:800px;
height:700px;
width: 100%;
margin-top: 20px;
}
</style>
</head>
<body onload="initialize()">
<button id="button1" onclick="toggle()">To Data B</button>
<div id="dashboard1" style="width:800px; height:700px;"></div>
<div id="dashboard2" style="width:800px; height:700px;"></div>
</body>
</html>
When inspecting the page you can now see the iframe being imported to the empty div:
Disclaimer upfront: I'm still very new to JavaScript. (And to programming in general, for that matter.)
So, I'm trying to create an interface that would display an image in multiple aspect ratios, when cropped by object-fit: cover. I'd like to see several aspect ratios side-by-side and be able to test different images as well.
I'm using JavaScript's File API to avoid uploading/downloading. It's also worth noting that I'm doing everything on Google Apps Script so it can be an easily accessible web app.
Right now, I have the <img> in a <div> so I can use replaceChild. That's the only way I've been able to get it to work. You can see it here on CodePen. This is the function I've been using:
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
var placehold = document.getElementById('userImg');
document.getElementById('userImageDiv').replaceChild(img, placeHold);
}
img.id = "userImg";
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
What I've tried:
I tried getting the img.onload function to append img twice:
var placeholdTwo = document.getElementById('imgTwo');
document.getElementById('imageTwoDiv').replaceChild(img, placeholdTwo);
But it only displayed in imgTwo - I'm guessing because the function only creates one FileReader.
I also tried reading the image in one location, then copying it's src to additional locations, but no luck there:
function repeatImg(){
var repeatImage = document.getElementById('userImg').src;
document.getElementById('imageOne').src = repeatImage;
document.getElementById('imageTwo').src = repeatImage;
}
Then, I tried making multiples of the whole handleImage function and calling them all with an event listener, but that didn't work either.
Is there any way to accomplish this?
Simply wrap the original file object, which is a blob, and set that as source. This way you avoid adding up memory usage and base64 encoding/decoding overheads as with a Data-URL - there's no need to create an intermediate image element either - just update the src on the existing ones:
document.querySelector("input").onchange = handleImage;
function handleImage() {
var url = URL.createObjectURL(this.files[0]);
document.getElementById('userImg').src =
document.getElementById('imageOne').src =
document.getElementById('imageTwo').src = url;
}
<label>Select an image: <input type=file></label>
<img id=userImg>
<img id=imageOne>
<img id=imageTwo>
Looking at the linked pen, repeatImg does not get called by the userImgDiv change event listener.
Calling repeatImg() at the end of img.onload works for me.
img.onload = function(){
var placeHold = document.getElementById('userImg');
document.getElementById('userImageDiv').replaceChild(img, placeHold);
repeatImg();
}
CodePen.
I think perhaps I'm missing something, but why not just set the image sources in your img.onload method?
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
var placehold = document.getElementById('userImg');
document.getElementById('userImageDiv').replaceChild(img, placeHold);
document.getElementById('imageOne').src = img.src;
document.getElementById('imageTwo').src = img.src;
}
img.id = "userImg";
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
You're only using one Image. I would do something like this instead:
/* external.js */
//<![CDATA[
var doc, bod, M, I, Q, S, old = onload; // for use on other loads
onload = function(){
if(old)old(); // change old var name if using technique on other pages
doc = document; bod = doc.body;
M = function(tag){
return doc.createElement(tag);
}
I = function(id){
return doc.getElementById(id);
}
Q = function(selector, withinElement){
var w = withinElement || doc;
return w.querySelectorAll(selector);
}
S = function(selector, withinElement){
var w = withinElement || doc;
return w.querySelector(selector);
}
I('form').onsubmit = function(){
return false;
}
// you can put the below code on another page onload if you want
var up = I('upload'), out = I('out'), reader = new FileReader;
up.onchange = function(){
reader.onload = function(){
var img0 = M('img'), img1 = M('img');
img0.src = img1.src = this.result; out.innerHTML = '';
out.appendChild(img0); out.appendChild(img1);
}
reader.readAsDataURL(this.files[0]);
}
}
//]]>
/* external.css */
html,body{
padding:0; margin:0;
}
body{
background:#000; overflow-y:scroll;
}
.main{
width:940px; background:#ccc; padding:20px; margin:0 auto;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='viewport' content='width=device-width' />
<title>Test Template</title>
<link type='text/css' rel='stylesheet' href='external.css' />
<script type='text/javascript' src='external.js'></script>
</head>
<body>
<div class='main'>
<form id='form' name='form'>
<input id='upload' name='upload' type='file' />
</form>
<div id='out'></div>
</div>
</body>
</html>
I am working on developing a game. However, I cannot seem to get the context of the canvas as I have before. My HTML file contains the code:
<html>
<head>
<meta charset="utf-8">
<title>Nostalgia</title>
<link rel="stylesheet" href="gameStyles.css"></link>
</head>
<body>
<canavs id="gameCanvas"></canvas>
</body>
<script src="gameScript.js"></script>
</html>
The javascript file is:
context = document.getElementById("gameCanvas").getContext("2d");
const level = [0,0,0,0,0];
var xToDraw = 0;
var yToDraw = 0;
var img0 = new Image();
img0.src = "./images/tiles/grass.png";
var img1 = new Image();
img1.src = "./images/tiles/dirt.png";
var img2 = new Image();
img2.src = "./images/tiles/sand.png";
function drawLevel(){
// solution
level.map((item1) => {
yToDraw-=16
item1.map((item2) => {
if(item2==0){
context.drawImage(img0, xToDraw, yToDraw);
}
xToDraw+=16;
});
});
}
drawLevel();
Note: This is being run using electron, the page is loading to the window.
The error that was being thrown was: TypeError: document.getElementById(...).getContext is not a function
I would appreciate any help in resolving this error.
This is because you have misspelt your canvas tag:
<canavs id="gameCanvas"></canvas>
Should be:
<canvas id="gameCanvas"></canvas>
This is my htmlcode:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="Doge.js"></script>
</head>
<body bgcolor="#C7C7C7" onload="Start();">
<canvas id="DogeCanvas" width="480" height="320"></canvas>
</body>
</html>
And this is my Doge.js code:
function Start() {
var stage = new createjs.Stage("DogeCanvas");
var doge = new Image();
doge.src = "images/doge.jpg"
var bitmap = new createjs.Bitmap(doge);
stage.addChild(bitmap);
stage.update();
}
Why it doesn't show anything on the screen?
What is wrong?
The image is not loaded when the stage is updated. I posted an answer here:
ยป easeljs not showing bitmap
You can add a Ticker to the stage to constantly update it (which most applications do, since there is other things changing over time)
Listen for the onload of the image, and update the stage again
Preload the image with something like PreloadJS before you draw it to the stage.
As stated above you cannot draw your image until you have loaded it. Try this:
<!DOCTYPE HTML>
<html>
<title>Easel Test</title>
<head>
<script src="https://code.createjs.com/easeljs-0.8.0.min.js"></script>
<script>
var stage;
function init() {
stage = new createjs.Stage("myCanvas");
var image = new Image();
image.src = "path/image";
image.onload = handleImageLoad;
}
function handleImageLoad(event) {
var image = event.target;
var bitmap = new createjs.Bitmap(image);
stage.addChild(bitmap);
stage.update();
}
</script>
</head>
<body onload="init();">
<canvas id="myCanvas" width="960" height="580"></canvas>
</body>
</html>
I'm new to JavaScript, and I don't get how am I supposed to change among 5 different gif images. The assignment is the following:
Your Projects folder for Chapter 11 contains five advertising images for a concert series, concert1.gif through concert5.gif. Create a script that cycles through the images and displays each one for five seconds. Save the document as ConcertAds.html.
Here's the code I have so far:
<!DOCTYPE HTML>
<html>
<head>
<title>Concert Ads</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
/* <![CDATA[ */
var concertads = new Array(5);
concertads[0] = new Image();
concertads[1] = new Image();
concertads[2] = new Image();
concertads[3] = new Image();
concertads[4] = new Image();
concertads[0].src = "concert1.gif";
concertads[1].src = "concert2.gif";
concertads[2].src = "concert3.gif";
concertads[3].src = "concert4.gif";
concertads[4].src = "concert5.gif";
var completeAds;
var currImgIndex = 0;
var maxImgIndex = concertads.length-1;
function concertAd() {
if (completeAds) {
completeAds.src = concertads[0].src;
++currImgIndex;
if (currImgIndex > maxImgIndex) {
currImgIndex = 0;
}
}
}
function initImgCycle(adsID) {
completeAds = document.getElementByID(adsID)
if (completeAds) {
setInterval("cycle()", 5000);
}
}
/* ]]> */
</script>
</head>
<body onload="initImgCycle('adBanner');">
<img src="concert1.gif" id="adBanner" alt="Concert Ads" />
</body>
</html>
I'd appreciate any help, I'm really confused. Thank you for your time!
imgCounter=0;
function cycle(){
if(imgCounter<5){
imgCounter++;
document.getElementById("imgX").src="concert" + imgCounter + ".gif";
setTimeout("cycle();", 5000);
}
}
cycle();
be sure to have a
<img id="imgX" src="" alt="img"/>
or something similar in the html
It's not clear whether you want them to each be shown simultaneously for 5 seconds, or for them to be show one after the other for 5 seconds. I went with the first one.
(function() {
var images = [
new Image(), new Image(), new Image(), new Image(), new Image()
];
images[0].src = 'http://bit.ly/sbK2Ub';
images[1].src = 'http://bit.ly/lMMo0n';
images[2].src = 'http://bit.ly/LFtGyc';
images[3].src = 'http://bit.ly/MY3skL';
images[4].src = 'http://bit.ly/M8iQk3';
function show( elem ) {
document.body.appendChild( elem );
}
function remove( elem ) {
document.body.removeChild( elem );
}
window.onload = function() {
images.forEach(function(a, b) {
show( images[b] );
});
window.setTimeout(function() {
images.forEach(function(a, b) {
remove( images[b] );
});
}, 5000);
};
})();
Here is a demo using different images (Click 'Render' to run the code): http://jsbin.com/akoqek/2/edit
So it would be something like below:
`<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
</style>
<title>Goselin Greeting cards</title>
<script type="text/javascript">
/* <![CDATA[ */
imgCounter=0;
function cycle(){
if(imgCounter<5){
imgCounter++;
document.getElementById("imgX").src="concert" + imgCounter + ".gif";
setTimeout("cycle();", 5000);
}
}
/* ]]> */
</script>
</head>
<body onload="initImgCycle('adBanner');">
<h1>Consert Series</h1>
<img id="imgX" src="" alt="img"/>
</body>
</html>
I am trying to figure out the same thing.