I am using a simple JavaScript slideshow but am having problems displaying the pictures. After like picture #13 I start getting the red X image place holder. Not sure why, because if I right click on the image and go to properties and check the image source it does exist. I have a total of about 126 pictures at about 1.7 MB average size for each photo. I notice that IE Memory usage can go up to 1 GB.
I have this slideshow on a SharePoint 2007 page.
<!-- Original Source http://www.scribd.com/doc/13618938/Add-a-Slide-Show-on-a-Share-Point-Site-Using-Javascript-HTML-and-Content-Editor-Web-Part -->
<script language="javascript" type="text/javascript">
var folderDir = "/images/my-images_2012/"
var slideShowSpeed = 3000
var crossFadeDuration = 3
// Specify the image files
var Pic = new Array()
var i=1
for (var k=1;k<=126;k++)
{
Pic[i] = folderDir + "ENC_2012_0" + k + ".JPG"
i++
}
var t
var j = 1
var p = Pic.length
var preLoad = new Array()
for (i = 1; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}
//------------------------------------------------------------------
// The function to do the "slide show"
//------------------------------------------------------------------
function runSlideShow()
{
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDu ration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j=j+1
if (j > (p-1)) j=1
t = setTimeout('runSlideShow()', slideShowSpeed)
}
// Add the following line to get the JS to run
_spBodyOnLoadFunctionNames.push("runSlideShow");
</script>
<DIV align=left>
<TABLE style="BACKGROUND-COLOR: #288118; BORDER-SPACING: 0px; WIDTH: 358px; BORDER-COLLAPSE: collapse; HEIGHT: 341px" cellSpacing=0 cellPadding=0 align=center>
<TBODY>
<TR>
<TD></TD></TR>
<TR>
<TD>
<TABLE border=0 cellSpacing=0 cellPadding=0 align=center>
<TBODY>
<TR>
<TD style="BACKGROUND-COLOR: #288118" height=300 width=300>
<P align=left><IMG name=SlideShow align=left src="/images/my-images_2012/ENC_2012_01.JPG" width=334 height=300></P> </TD></TR></TBODY></TABLE></TD>
<TR>
<TD></TD></TR>
<TR></TR></TBODY></TABLE></DIV>
You're loading 126 images at the same time. At about 1.7 MB each, that's about 214.2 MB you're trying to load at once.
Bad idea.
Try using thumbnails instead, or at least load the images sequentially:
var current = 0;
function imgLoaded() {
if(current > 0){ // Remove the previous event listener.
preLoad[current - 1].onload = null;
}
preLoad[current] = new Image();
preLoad[current].src = Pic[current];
current++;
if(current < p){
preLoad[current-1].onload = imgLoaded;
}
}
imgLoaded();
(Not tested, but this should work)
Related
I'm trying to show an output that gets its value from a collection.
Here is the code.
For 'schnapps' which shows twice, I manage to get the output I want.
But for 'potato' I am unable to show output.
<tr>
<td>Schnapps Distillery</td>
<td class='inputText schnapps'></td>
<td>600 Farmers & Workers</td>
</tr>
<tr>
<td colspan="3">
<div class='inline'>
<div class='inline potato'></div><img class='smallLogos'
src='../images/potato.png' /> -->
<div class='inline schnapps'></div><img class='smallLogos'
src='../images/schnapps.png' />
</div>
</td>
</tr>
schnappsElement = document.getElementsByClassName("schnapps");
potatoElement = document.getElementsByClassName("potato");
//schnapps
for (i = 0; schnappsElement[i] != null; i++) {
schnappsElement[i].innerHTML = Math.ceil((Number(farmInput.value) + Number(workInput.value)) / 600);
}
potatoElement.innerHTML = schnappsElement[0].value;
Both commands in JS are activated by a listener command I didn't include.
The command works because I get the right output for Schnapps.
What I want is for potatoElement to have (and show) the same value as schnappsElement.
The schnappsElement[0] doesnt not have .value(). Use .innerHTML instead.
And also, potatoElement is an array - you need to use it as potatoElement[0].
schnappsElement = document.getElementsByClassName("schnapps");
potatoElement = document.getElementsByClassName("potato");
//schnapps
for (i = 0; schnappsElement[i] != null; i++) {
schnappsElement[i].innerHTML = Math.ceil((Number(farmInput.value) + Number(workInput.value)) / 600);
}
potatoElement[0].innerHTML = schnappsElement[0].innerHTML;
Or you could simply include them both in the Loop:
schnappsElement = document.getElementsByClassName("schnapps");
potatoElement = document.getElementsByClassName("potato");
//schnapps
for (i = 0; schnappsElement[i] != null; i++) {
var value = Math.ceil((Number(farmInput.value) + Number(workInput.value)) / 600);
schnappsElement[i].innerHTML = value;
if (potatoElement[i]) { potatoElement[i].innerHTML = value }
};
Here is what I have so far but I'm stuck because I cannot get the input elements to change the amount when the number of the quantity is changed.
function calculateTotal(quantity, price) {
var total = quantity * price;
return total;
}
function makeRow() {
var i = 0;
for (i = 0; i < 3; i++) {
var total = calculateTotal(quantities[i], prices[i]);
outputCartRow(filenames[i], titles[i], quantities[i], prices[i], total);
}
}
function outputCartRow(file, title, quantity, price, total) {
var content = "<tr><td><img src='" + file + "' class='photo' /></td>";
content += "<td>" + title + "</td>";
content += "<td><input class='quant' type='number' value='1'
onchange = 'newAmount' / > < /td>";
content += "<td>" + price + "</td>";
content += "<td class='amount'>" + total + "</td></tr>";
var section = document.querySelector(".rows").innerHTML;
document.querySelector(".rows").innerHTML = section + content;
}
function newAmount() {
var quantity = document.getElementsByClassName("quant");
var quantity1 = quantity[0];
var quantity2 = quantity[1];
var quantity3 = quantity[2];
var amount1 = calculateTotal(quantity1, 80);
var amount2 = calculateTotal(quantity2, 125);
var amount3 = calculateTotal(quantity3, 75);
var items = document.getElementsByClassName("amount");
for (var i = 0; i < items.length; i++) {
items[i] = amount1;
}
}
$(document).ready(function() {
$("input").change(function() {
alert("The text has been changed.");
});
});
js data;
var filenames = ["images/106020.jpg", "images/116010.jpg", "images/120010.jpg"];
var titles = ["Girl with a Pearl Earring", "Artist Holding a Thistle", "Portrait of Eleanor of Toledo"];
var quantities = [1, 1, 1];
var prices = [80, 125, 75];
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0,maximum-
scale=1.0,width=device-width">
<title>Chapter 08 - Project 01</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="css/styles.css" rel="stylesheet" />
<script src="js/data.js" type="text/JavaScript"></script>
<script src="js/functions.js" type="text/JavaScript"></script>
</head>
<body onload="makeRow();">
<div class="title">
<h1>Shopping Cart</h1>
</div>
<table class="table-fill">
<thead>
<tr>
<th colspan="2">Product</th>
<th>#</th>
<th>Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody class="rows">
<tbody>
<tr class="totals">
<td colspan="4">Subtotal</td>
<td>$515.00</td>
</tr>
<tr class="totals">
<td colspan="4">Tax</td>
<td>$51.50</td>
</tr>
<tr class="totals">
<td colspan="4">Shipping</td>
<td>$40.00</td>
</tr>
<tr class="totals focus">
<td colspan="4">Grand Total</td>
<td>$606.50</td>
</tr>
</tbody>
</table>
</body>
</html>
<form> tag
IMO if using more than one form control✱ on a page, a <form> tag should be wrapped around everything. There are several advantages when you use a <form> tag:
HTMLFormControlsCollection and HTMLFormElement interface allows us to access form controls with a simple and terse syntax. Compare:
Common Procedure
// Reference <form> by #id
var main = document.getElementById('main');
// Collect radio buttons into a NodeList and convert it into an array
var radios = Array.from(document.querySelectorAll('[name=rad]'));
// Reference <button> by tagName
var button = document.querySelector('button');
HTMLForm | ControlsCollection | Element Interfaces
// Reference <form> by #id or [name]
var main = document.forms.main;
// Collect radio buttons into a HTMLCollection and convert it into an array
var radios = Array.from(main.elements.rad);
// Reference <button> by index
var button = main.elements[4];
Demo
Details commented in demo
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,maximum-
scale=1.0,width=device-width">
<title>Chapter 08 - Project 01</title>
<style>
html,
body {
font: 400 16px/1.4 Consolas;
}
caption {
font-weight: 700;
font-size: 1.2rem;
}
table {
table-layout: fixed;
border-spacing: 7px;
}
th {
border-bottom: 3px ridge grey;
}
tfoot tr:nth-child(3) td:nth-child(2),
tfoot tr:nth-child(3) td:nth-child(1) {
border-bottom: 4px ridge grey;
}
.totals tr td,
tbody tr td:nth-of-type(3),
tbody tr td:nth-of-type(4),
tbody tr td:last-of-type,
tfoot tr td {
text-align: right;
}
td.cap {
text-align: left;
}
output::before {
content: '$';
}
input {
display: block;
width: 6ch;
text-align: center;
font: inherit;
}
</style>
</head>
<body>
<form id='cart'>
<table>
<caption>Shopping Cart</caption>
<thead>
<tr>
<th colspan="2">Product</th>
<th>Qty</th>
<th width='10%'>Price</th>
<th width='20%'>Amount</th>
</tr>
</thead>
<tbody class="rows"></tbody>
<tfoot class="totals">
<tr>
<td colspan="4">Subtotal</td>
<td><output id='sub'></output></td>
</tr>
<tr>
<td colspan="4">Tax (8.25%)</td>
<td><output id='tax' data-tax='.0825'></output></td>
</tr>
<tr>
<td colspan="4">Shipping ($3.00)</td>
<td><output id='SH'></output></td>
</tr>
<tr>
<td colspan="4">Grand Total</td>
<td><output id='grand'></output></td>
</tr>
</tfoot>
</table>
</form>
<script>
// Reference the <form>
var form = document.forms.cart;
// Data arrays
var imgArr = ["https://i.ibb.co/ZHvWsKb/o1z7p.jpg", "https://i.ibb.co/ZHvWsKb/o1z7p.jpg", "https://i.ibb.co/ZHvWsKb/o1z7p.jpg"];
var capArr = ["Girl with a Pearl Earring", "Artist Holding a Thistle", "Portrait of Eleanor of Toledo"];
var qtyArr = [0, 0, 0];
var prcArr = [80.69, 124.99, 75.00];
/*
setRow() -- passes an index counter and 4 variables
- Creates a template literal of a <tr>
- Interpolates variables into TL
- Parses the TL as HTML
*/
function setRow(i, img, cap, qty, prc) {
var R = `<tr id='R${i}'>
<td><img class='img' src='${img}' width='50px'></td>
<td class='cap'>${cap}</td>
<td><input id='qty${i}' class='qty' type='number' min='0' max='99'></td>
<td><output id='prc${i}' class='prc'></output></td>
<td><output id='amt${i}' class='amt'></output></td>
</tr>`;
var rows = document.querySelector('.rows');
rows.insertAdjacentHTML('beforeend', R);
var rID = document.getElementById('R' + i);
rID.children[2].children[0].value = qty;
rID.children[3].children[0].value = prc.toFixed(2);
rID.children[4].children[0].value = (parseFloat(qty) * parseFloat(prc)).toFixed(2);
}
/*
overRide() -- passes a 3D array
- Iterates through the 3D array
- On each iteration it passes array elements to the
setRow() function
*/
function overRide(x3DArray) {
var img, cap, qty, prc;
for (let x = 0; x < x3DArray[0].length; x++) {
img = x3DArray[0][x];
cap = x3DArray[1][x];
qty = x3DArray[2][x];
prc = x3DArray[3][x];
var cart = setRow(x, img, cap, qty, prc);
}
}
/*
calcAmt() callback function -- passes the Event Object
- Reference the tag receiving the user data (input.qty)
- Reference the tag registered to event (form#cart)
- Collect all form controls into a HTMLCollection
*/
/*
- if the clicked tag is NOT the registered tag...
- if the clicked tag has the .qty class...
- Reference the <tr> the clicked tag is nested in...
...get the index of <tr>...
...get the values of qty and prc...
...set the amt by qty x prc
*/
/*
- Collects all .amt into a NodeList then converts into an array.
- map() the array and extract each .amt value
- reduce() the array values into a single sum
- Set the .totals column values to calculate totals when the user enters data.
*/
function calcAmt(event) {
var tgt = event.target;
var cur = event.currentTarget;
var UI = this.elements;
if (tgt !== cur) {
if (tgt.className === 'qty') {
var rID = tgt.closest('tr').id;
var idx = rID.split('').slice(1).join('');
var qty = tgt.value;
var prc = UI['prc' + idx].value;
UI['amt' + idx].value = (parseFloat(qty) * parseFloat(prc)).toFixed(2);
var amtArray = Array.from(document.querySelectorAll('.amt'));
var subVal = amtArray.map(function(sub) {
return parseFloat(sub.value);
});
var amtVal = subVal.reduce(function(acc, cur) {
return acc + cur;
}, 0);
UI.sub.value = amtVal.toFixed(2);
UI.tax.value = (parseFloat(UI.sub.value) * parseFloat(UI.tax.dataset.tax)).toFixed(2);
UI.SH.value = (3).toFixed(2);
UI.grand.value = (parseFloat(UI.sub.value) + parseFloat(UI.tax.value) + parseFloat(UI.SH.value)).toFixed(2);
}
}
}
/*
Register the input event to the <form>
When user enters data to input.qty the callback
function calcAmt() is called
*/
form.addEventListener('input', calcAmt);
/*
This is a 3D array of the data arrays which will be
passed to the function overRide()
*/
var table = [
[...imgArr],
[...capArr],
[...qtyArr],
[...prcArr]
];
// Call the overRide() function -- pass the table array
overRide(table);
</script>
</body>
</html>
What i want to do is to have each of the images that i m using link to a site when i click on them.The images keep changing with the setinterval() method and the function changeimage().I have some html and some javascript code:
HTML:
<!DOCTYPE html>
<html>
<head>
<link REL="STYLESHEET" TYPE="TEXT/CSS" HREF="STYLES.css">
<title>KURIA SELIDA</title>
<meta charset="utf-8">
</head>
<body>
<table class="tablearxikhs">
<tr>
<td></td>
<td class="tdarxikhs" STYLE="font-size:150%;"> ΚΑΤΑΧΩΡΗΣΕΙΣ </td>
<td class="tdarxikhs"><h1>ΤΑΞΙΔΙΩΤΙΚΟ ΓΡΑΦΕΙΟ </h1></td>
<td class="tdarxikhs" style="font-size:150%;">ΕΠΙΚΟΙΝΩΝΙΑ</td>
</tr>
</table>
<h2 style="text-align: center; ">Κορυφαίοι Προορισμοί Για το 2017-2018</h2>
<center><img id="myimages" src="kalabruta1.jpg" height="230" width="600"></center>
<br><br>
The JS part:
<br><br>
<script>
var image = document.getElementById("myimages");
var images = ["kalabruta1.jpg", "metewra1.jpg", "naxos11.gif", "metewra2.jpg", "kalabruta2.jpg", "naxos2.jpg"];
var i = 0;
function changeimage() {
if (++i >= images.length) i = 0;
image.src = images[i];
images[i].onclick = imglink;
}
setInterval(changeimage, 3000);
function imglink() {
window.location.href = 'https://www.google.gr/';
}
</script>
What i have tried in order to have the images link to a site doesnt work..Can somebody help?
I don't understand the logic of your code, however, this is my suggestion:
This line images[i].onclick = imglink; is using images[i] and that's incorrect because you're getting String objects, instead you need to replace that line with this: image.onclick = imglink; in order to apply the onclick event to the image.
<script>
var image = document.getElementById("myimages");
var images = ["kalabruta1.jpg", "metewra1.jpg", "naxos11.gif", "metewra2.jpg", "kalabruta2.jpg", "naxos2.jpg"];
var i = 0;
function changeimage() {
if (++i >= images.length) i = 0;
image.src = images[i];
image.onclick = imglink;
}
setInterval(changeimage, 3000);
function imglink() {
window.location.href = 'https://www.google.gr/';
}
</script>
I am creating a dice game. I am trying to make it so the user can re-click a button after the loop as gone through to reset the page to play again. My gut tells me an if statement is involved but after several attempts I cannot figure out how to set it up.
I was able to change the button value to show "play again" after pressed, I just need to get the page to reload after the user re-presses the button "play again." Any help would be appreciated thanks.
<script>
var rolls = new Array();
var maxMoney = 0;
var rollCountMoney = new Array();
var count = 0;
var startingBet = 0;
var betStarter = new Array();
var mostRoll = 0;
function rollDice() {
do {
count++;
var userInput = parseInt(document.getElementById("bet").value);
var wallet = userInput;
var d1 = Math.floor(Math.random() * 6) + 1;
var d2 = Math.floor(Math.random() * 6) + 1;
var diceTotal = d1 + d2;
rolls.push(diceTotal);
rollCountMoney.push(wallet);
if(wallet > maxMoney){
maxMoney = wallet;
mostRoll = count - 1;
}
if(userInput > startingBet){
betStarter.push(userInput);
}
if (diceTotal === 7) {
document.getElementById("bet").value = wallet += 4;
console.log("Round: " + count + " ,you rolled a " + diceTotal + "! You win $4 for a total of: " +wallet);
} else {
document.getElementById("bet").value = wallet -= 1;
console.log("Round: " + count + " ,you rolled a " + diceTotal + "! You lose $1 for a total of: " +wallet);
}
} while (wallet > 0) {}
var displayMsg = count;
var highest = maxMoney;
var highestRoll = mostRoll;
document.getElementById("display").innerHTML = displayMsg;
document.getElementById("starter").innerHTML = betStarter[0];
document.getElementById("highPot").innerHTML = highest;
document.getElementById("rollPot").innerHTML = highestRoll;
var elem = document.getElementById("playAgain");
if (elem.value=="Play Again"){
elem.value = "Play";
}else {elem.value = "Play Again";
}
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="page-head">
<h1 align="center">Lucky Sevens</h1>
</div>
</div>
<div class="container" align="center">
<table class="table-responsive">
<tr>
<th><h3 align="center"><b>Lucky Sevens</b></h3></th>
</tr>
<tr>
<td>
<form>
Starting Bet:
<input id="bet" type="text"/>
</form>
</td>
</tr>
<tr>
<td align="center">
<form>
<input type="button" id="playAgain" onclick="rollDice()" value="Play"></input>
</form>
</td>
</tr>
</table>
<div class="jumbotron" style="width:400px; position: relative; top: 40px">
<table class="dicey" border="1" style="border-color: white">
<caption ALIGN="top">
<h3 align="center" style="color: black"><b><u>Results</u></b></h3>
</caption>
<tr>
<th style= "background-color: grey"><b>Starting Bet</b></th>
<th style= "background-color: grey" id="starter"></th>
</tr>
<tr>
<td>Total rolls before going broke </td>
<td id="display"></td>
</tr>
<tr>
<td>Highest amount won </td>
<td id="highPot"></td>
</tr>
<tr>
<td>Roll count at highest amount won </td>
<td id="rollPot"></td>
</tr>
</table>
</div>
</div>
If I understood your code correctly, you can either reload the page:
function rollDice(){
if (document.getElementById("playAgain").value=="Play Again")
location.reload();
...
or reset it to the initial state:
function rollDice() {
var rolls = new Array();
var maxMoney = 0;
var rollCountMoney = new Array();
var count = 0;
var startingBet = 0;
var betStarter = new Array();
var mostRoll = 0;
document.getElementById("display").innerHTML = "";
document.getElementById("starter").innerHTML = "";
document.getElementById("highPot").innerHTML = "";
document.getElementById("rollPot").innerHTML = "";
...
The simplest way would be to add a second button for play again like
<button id="play-again-button" style="display:none" onclick="location.reload()">play again</button >
Then show it when you need to via
document.getElementById("play-again-button').style.display = "block";
If you want to actually refresh the page. Or tie that button's onclick to a js function that resets things.
I have been trying out different methods of how to load an image, I was trying to load the image from a web address but instead of loading the image its just loading the link to the address? I have updated the code which is below (just the sections for loading the cards) however it still only loads the link not the image? Can anyone see where i am going wrong?
card js (there are more cards than 2 but for this example I only added two)
GABIH20.cards = (function(){
var public_stuff = {};
var cards = [
{name: "Gabi H20", energy: 90, saving: 99, eco: 98, ease: 89, image: 'http://www.lessons4living.com/images/penclchk.gif'},
{name: "Sherlock H20lmes", energy: 30, saving: 70, eco: 35, ease: 60, image:'http://www.sherlock.com/images/penclchk.gif'},
];
var shuffle = function(v){
//This is just random code I plucked from the Internet. Seems to work for this purpose.
for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
return v;
}
public_stuff.get_cards = function() {return cards;}
public_stuff.deal_hands = function() {
var half_way_point = cards.length / 2;
var shuffled_deck = shuffle(cards);
return [cards.slice(0, half_way_point), cards.slice(half_way_point)];
}
return public_stuff;
}());
event js
GABIH20 = {};
GABIH20.game = (function(){
var num_rounds_played_in_this_game = 0;
var playing_game = false;
var player, opponent, player_name;
var public_stuff = {};
public_stuff.current_view = "#menu_view";
var populate_card_view = function(player) {
var card = player.get_current_card();
$("header .distro_name").html(card.name);
$(".attr_image .attr_imgvalue").html(card.image);
$(".attr_energy .attr_value").html(card.energy);
$(".attr_saving .attr_value").html(card.saving);
$(".attr_eco .attr_value").html(card.eco);
$(".attr_ease .attr_value").html(card.ease);
}
public_stuff.playing_game = function() {
return playing_game;
}
public_stuff.get_player_name = function() {
return player_name;
}
HTML
<div id="card_view" class="app_view">
<header>
<p>You drew the <span class="distro_name">Ubuntu</span> card</p>
</header>
<div class="distro_info">
<table class="distro_attributes">
<tr class="distro_attribute attr_image">
<td class="attr_imgvalue"><img src="" class="card_image" /></td>
</tr>
</table>
</div>
<p><strong>Now choose an attribute to battle with!</strong></p>
<table class="distro_attributes">
<tr class="distro_attribute attr_energy">
<td class="attr_name">Energy</td>
<td class="attr_value">100</td>
</tr>
<tr class="distro_attribute attr_saving">
<td class="attr_name">Saving</td>
<td class="attr_value">100</td>
</tr>
<tr class="distro_attribute attr_eco">
<td class="attr_name">Eco</td>
<td class="attr_value">100</td>
</tr>
<tr class="distro_attribute attr_ease">
<td class="attr_name">Ease</td>
<td class="attr_value">100</td>
</tr>
</table></div>
Change the line,
$(".attr_image .attr_imgvalue").html(card.image);
to
$(".attr_image .attr_imgvalue img").attr('src',card.image); // add link to img src