I'm trying to work on a website currently that displays pictures with the help of java-script. The way that I have this website set up at the moment, an image is displayed above numbered photo links. Instead of having numbers listed below the pictures, I'd like to have the numbers be thumbnails of the pictures. Is it possible to replace them with images? Any help is appreciated.
This is what I have so far:
var photos = new Array();
var photoindex = 0;
photos[0] = "images/piano.jpg";
photos[1] = "images/guitar.jpg";
photos[2] = "images/studio.jpg";
photos[3] = "images/sheetmusic.jpg";
function backward() {
if (photoindex > 0) {
document.images.p.src = photos[--photoindex];
}
}
function forward() {
if (photoindex < photos.length - 1) {
document.images.p.src = photos[++photoindex];
}
}
for (i = 0; i < photos.length; i++) {
document.write("" + i + " ");
}
function goto(n) {
if (n < photos.length && n >= 0) {
photoindex = n;
document.images.p.src = photos[photoindex];
}
}
<br>
<div style="text-align:center;left:5px;">
<table width="250" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" align="center" valign="top">
<img src="images/weloveweb.png" name="p" width="250" height="188" id="p" />
</td>
</tr>
<tr>
<td valign="top"><<
</td>
<td valign="top" style="text-align: center">
</td>
<td valign="top" style="text-align: right">>>
</td>
</tr>
</table>
</div>
Since your thumbnail urls are stored in the photos array, what you need to do to display a thumbnail instead of its index is to create an img tag with a src attribute containing each thumbnail's url (i.e. photos[i]).
Change:
for (i = 0; i < photos.length; i++) {
document.write("" + i + " ");
// ------------------------------------------------------------^ change this `i`
}
Into:
for (i = 0; i < photos.length; i++) {
document.write("" + "<img src=" + photos[i] + "/> ");
}
Related
i am currently trying to create unique ids in html.
However, i am not sure if this below codes is creating unqiue ids and being assigned to the element itself in the html or just creating unqiue ids only.
Please help me out. If this is not assigned them in html, how am i supposed to do them?
var abcElements = document.querySelectorAll('.like');
for (var i = 0; i < abcElements.length; i++){
abcElements[i].id = 'like_' + i;
alert(abcElements[i].id);
}
Updates:
I have include all the related codes in
<td><a onclick="return confirm(this)"><input class="switch" data-toggle="toggle" data-on="like" data-off="unlike" data-onstyle="danger" data-width="90" data-height="30" type="checkbox"></a></td>
<td style="display:none;"><div class="like">${like}</div></td>
Javascript
var abcElements = document.querySelectorAll('.switch');
var status = document.querySelectorAll('.like');
alert(status.length);
for (var i = 0; i < abcElements.length; i++)
{
abcElements[i].id = 'switch_' + i;
alert(abcElements[i].id);
for (var j = 0; j < status.length; j++)
{
status[j].id = 'like_' + j;
var statusText = $('#'+status[j].id+'').html();
alert(statusText);
if(statusText == 'true' )
{
$('#'+abcElements[i].id+'').bootstrapToggle('on');
}
}
}
Based on your code I assume this is what you want?
$("table tr").each(function(row) {
var $row = $(this);
var statusText = $row.find(".like").html();
console.log("status: " + statusText);
if (statusText == "true") {
// $row.find("input.switch").bootstrapToggle('on');
$row.find("input.switch").prop("checked", ($row.find(".like").html() === "true"));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<span><input class="switch" type="checkbox">switch 1</span>
</td>
<td style="display:none;">
<div class="like">false</div>
</td>
</tr>
<tr>
<td>
<span><input class="switch" type="checkbox">switch 2</span>
</td>
<td style="display:none;">
<div class="like">true</div>
</td>
</tr>
</table>
I realized i am assigning the ids for individual divs. I just need to move one of the loops outside that's all.
I am working on a multibox as a part of my codeigniter based project, here I am trying to move the values across the boxes using custom js code shared below
The values shown in first box are fetched from db when page loads and used to move the required values to second box using javascript. My goal it that the values already moved to second box should not be visible in the first box after saving the data and at the same time source data for the first box should not be altered.
Right now I am able to select the values to second box and save successfully but when I load the page again after saving I am seeing the moved values in the fist box and this is visually creating duplication of values and would confuse the user. On the other hand if I try to move back the values to the first box which is creating a conflict while saving the data.
Is there any way I could change my code so that moved values will not be available in the first box again
HTML version of multibox
<fieldset class="emp_contact">
<legend>Area Allocation</legend>
<div class="form-group input-group">
<table width="100%" border="0" cellpadding="10" cellspacing="10" style="border:1px solid #ccc">
<tr>
<td width="40%">
<p>Available Areas</p>
</td>
<td width="12%"> </td>
<td width="40%">
<p>Selected Areas</p>
</td>
</tr>
<tr>
<td valign="top" id="myarea_list">
<?php echo $aval_area_list ?>
</td>
<select name="aval_id_temp" id="aval_id_temp" multiple style="display:none"></select>
<td>
<table width="100%" border="0">
<tr>
<td align="center">
<input type="Button" value=">>" onClick="SelectMoveRows_all(document.form.avail_area, document.form.selec_area)">
<br>
<br />
<input type="Button" value=">" onClick="SelectMoveRows(document.form.avail_area, document.form.selec_area)">
<br>
<br>
<input type="Button" value="<<" onClick="SelectMoveRows_all(document.form.selec_area, document.form.avail_area)">
<br>
<br>
<input type="Button" value="<" onClick="SelectMoveRows(document.form.selec_area, document.form.avail_area)">
</td>
</tr>
<tr>
<td align="center"> </td>
</tr>
</table>
</td>
<td valign="top">
<?php echo $sel_area_list ?>
<select name="sel_id_temp" id="sel_id_temp" multiple style="display:none"></select>
</td>
</tr>
</table>
</div>
</fieldset>
Javascript functions used
function SelectMoveRows_all(SS1, SS2) {
var SelID = '';
var SelText = '';
// Move rows from SS1 to SS2 from bottom to top
for (i = SS1.options.length - 1; i >= 0; i--) {
//if (SS1.options[i].selected == true)
{
SelID = SS1.options[i].value;
SelText = SS1.options[i].text;
var newRow = new Option(SelText, SelID);
SS2.options[SS2.length] = newRow;
SS1.options[i] = null;
for (j = SS2.options.length - 1; j >= 0; j--) {
SS2.options[j].selected = true;
}
}
}
SelectSort(SS2);
}
function SelectMoveRows(SS1, SS2) {
var SelID = '';
var SelText = '';
// Move rows from SS1 to SS2 from bottom to top
for (i = SS1.options.length - 1; i >= 0; i--) {
if (SS1.options[i].selected == true) {
SelID = SS1.options[i].value;
SelText = SS1.options[i].text;
var newRow = new Option(SelText, SelID);
SS2.options[SS2.length] = newRow;
SS1.options[i] = null;
for (j = SS2.options.length - 1; j >= 0; j--) {
SS2.options[j].selected = true;
}
}
}
SelectSort(SS2);
}
function SelectSort(SelList) {
var ID = '';
var Text = '';
for (x = 0; x < SelList.length - 1; x++) {
for (y = x + 1; y < SelList.length; y++) {
if (SelList[x].text > SelList[y].text) {
// Swap rows
ID = SelList[x].value;
Text = SelList[x].text;
SelList[x].value = SelList[y].value;
SelList[x].text = SelList[y].text;
SelList[y].value = ID;
SelList[y].text = Text;
}
}
}
}
I want to implement the code to create a bingo appliacation where it takes the letters from array on a button click.
How can i assign the array element like array(a,b,c) to those 3X3 table cells randomly on run button click. when i got sequence like abc in a row or diagonal i want increment the count value.
I started but i am unable to implement the code. Can i get any suggestion please.
Here is my code
<html>
<head>
<script>
function run(){
var grid = document.getElementById("grid");
for (var i = 0, row; row = grid.rows[i]; i++){
row.cells[0].textContent = rand();
row.cells[1].textContent = rand();
row.cells[2].textContent = rand();
}
score()
}
function rand(){
var text = new Array();
var possible = "MCS*";
return possible.charAt(Math.floor(Math.random() * possible.length));
}
function score(){
var Row = document.getElementById("grid");
var Cells = Row.getElementsByTagName("td");
alert(Cells[0].innerText);
alert(Cells[1].innerText);
alert(Cells[2].innerText);
alert(Cells[3].innerText);
alert(Cells[5].innerText);
alert(Cells[6].innerText);
alert(Cells[7].innerText);
alert(Cells[8].innerText);
}
</script>
</head>
<body>
<form metdod="post">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100"v id="grid">
<tr>
<td id="1-1" height="19" width="20%"> </td>
<td id="1-2" height="19" width="20%"> </td>
<td id="1-3" height="19" width="20%"> </td>
</tr>
<tr>
<td id="2-1" height="16" width="20%"> </td>
<td id="2-2" height="16" width="20%"> </td>
<td id="2-3" height="16" width="20%"> </td>
</tr>
<tr>
<td id="3-1" height="19" width="20%"> </td>
<td id="3-2" height="19" width="20%"> </td>
<td id="3-3" height="19" width="20%"> </td>
</tr>
</table>
<br><br>
<input type="button" onClick="return run();" value="run">
</form>
</body>
</html>
Thanks in advance..
<html>
<head>
<script>
var arr_num = ["1","2","3"];
var match =["123","234","345","567","678","111","222","333","444","555","666"];
function run(){
var counter =0;
var grid = document.getElementById("grid");
for (var i = 0, row; row = grid.rows[i]; i++){
row.cells[0].textContent = arr_num[getRandom()];
row.cells[1].textContent = arr_num[getRandom()];
row.cells[2].textContent = arr_num[getRandom()];
}
var a = getMatch();
for(var i=0;i<getMatch().length; i++){
if(match.indexOf(a[i]) > -1)
counter++;
}
document.getElementById("count").innerHTML = counter++;
}
function getMatch(){
var grid = document.getElementById("grid");
var match1 = [[]];
var match_dia =[];
var temp_dia1 = 0;
var temp_dia2 = 2;
var temp_dia3 = 0;
var temp_dia4 = 2;
var match_col = [];
for (var i = 0, row; row = grid.rows[i]; i++){
match1[match1.length++] = row.cells[0].textContent+row.cells[1].textContent+row.cells[2].textContent;
match1[match1.length++] = row.cells[2].textContent+row.cells[1].textContent+row.cells[0].textContent;
if(match_col.length != 0){
match_col[0] = match_col[0]+row.cells[0].textContent;
match_col[1] = match_col[1]+row.cells[1].textContent;
match_col[2] = match_col[2]+row.cells[2].textContent;
match_col[3] = row.cells[0].textContent+match_col[3];
match_col[4] = row.cells[1].textContent+match_col[4];
match_col[5] = row.cells[2].textContent+match_col[5];
}else{
match_col[0] = row.cells[0].textContent;
match_col[1] = row.cells[1].textContent;
match_col[2] = row.cells[2].textContent;
match_col[3] = row.cells[0].textContent;
match_col[4] = row.cells[1].textContent;
match_col[5] = row.cells[2].textContent;
}
if(match_dia.length != 0){
match_dia[0] = match_dia[0]+row.cells[temp_dia1++].textContent;
match_dia[1] = match_dia[1]+row.cells[temp_dia2--].textContent;
match_dia[2] = row.cells[temp_dia3++].textContent+match_dia[2];
match_dia[3] = row.cells[temp_dia4--].textContent+match_dia[3];
}else{
match_dia[0] = row.cells[temp_dia1++].textContent;
match_dia[1] = row.cells[temp_dia2--].textContent;
match_dia[2] = row.cells[temp_dia3++].textContent;
match_dia[3] = row.cells[temp_dia4--].textContent;
}
}
for(var i=0;i<match_col.length;i++){
match1[match1.length++] = match_col[i];
}
match1[match1.length++] = match_dia[0];
match1[match1.length++] = match_dia[1];
return match1;
}
function getRandom(){
return Math.floor(Math.random() * arr_num.length) + 0 ;
}
</script>
</head>
<body>
<form metdod="post">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100"v id="grid">
<tr>
<td id="1-1" height="19" width="20%"> </td>
<td id="1-2" height="19" width="20%"> </td>
<td id="1-3" height="19" width="20%"> </td>
</tr>
<tr>
<td id="2-1" height="16" width="20%"> </td>
<td id="2-2" height="16" width="20%"> </td>
<td id="2-3" height="16" width="20%"> </td>
</tr>
<tr>
<td id="3-1" height="19" width="20%"> </td>
<td id="3-2" height="19" width="20%"> </td>
<td id="3-3" height="19" width="20%"> </td>
</tr>
</table>
<br><br>
<div id="count" name="count"></div>
<br><br>
<input type="button" onClick="return run();" value="run">
</form>
</body>
</html>
This is how you would assign a value to each cell:
for(var row = 1; row <= 3; row++) {
for(var col = 1; col <= 3; col++ {
var id = '#'+ row + "-" + col;
$(id).html(/* put some content here */);
}
}
To assign a random number see Math.random(). If you multiply that value with 10 and round it down, you will get an integer between 0 and 9. Use that value to pick an element from your array.
Edit
So if you have an array like letters = [ "A", "B", "CD", "asum", 12, "whatsoever" ]and a random number n then letters[n] will give you the array element with index n. For n == 2: letters[n] == "CD"
Well this is NOT bingo but your "assign random letter a,b,c to a space in a grid" can be satisfied by:
var bingocol = ["a", "b", "c"];
/**
* Returns a random integer between min (inclusive) and max (inclusive)
* Using Math.round() will give you a non-uniform distribution!
*/
function getRandomIntInclusive(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
$('#runbingo').on("click", function() {
var nextcolindex = getRandomIntInclusive(0, 2);
var nextletterindex = getRandomIntInclusive(0, 2);
var nextrow = getRandomIntInclusive(0, 2);
$('#grid').find('tr').eq(nextrow).find('td').eq(nextcolindex).html(bingocol[nextletterindex]);
});
NOW if you really want to emulate BINGO where the column varies and the NUMBERS in the column vary by a given sequence that is a different problem; note that you would then need to have one algorithm to assign the player cards and another to pick random values from a list for the "game" card both of which would need to consider the range and previously filled values to exclude duplicates - doable but an entirely different problem.
Here is the code above in action: https://jsfiddle.net/MarkSchultheiss/tjd7j3oh/
The code works for the most part.
Whenever the interval is set to refresh the game card, the onclick functions no longer work and the variable no longer increments.
What am I missing here?
You Can comment out the line with the setInterval() to see the desired outcome. It should refresh every second keeping the variable score and incrementing whenever someone clicks on the images. Thanks!
// var btn = document.getElementById('btn');
//btn.addEventListener('click', UpdateTable);
// Set the max length and Width
var maxWidth = 4;
var maxLength = 6;
// Returns a random number
function CreateRandom() {
return Math.floor(Math.random() * 2 + 1);
}
//function to create an image
function CreateGopher() {
var randomNumber = CreateRandom();
var image = "Sup";
if (randomNumber == 1) {
image = "<img src='gopher.jpg' class='gopher' height='100' width='100'>";
} else if (randomNumber == 2) {
image = "<img src='lettuce.jpg' class='lettuce' height='100' width='100'>";
}
return image;
}
//create table
function UpdateTable() {
// Iterate over each cell and set a random number
for (var i = 0; i < maxLength; i++) {
for (var j = 0; j < maxWidth; j++) {
tmp = 'cell' + i + j;
document.getElementById(tmp).innerHTML = CreateGopher();
}
}
}
function newTable() {
// Iterate over each cell and set a random number
for (var i = 0; i < maxLength; i++) {
for (var j = 0; j < maxWidth; j++) {
tmp = 'cell' + i + j;
document.getElementById(tmp).innerHTML = CreateGopher();
}
}
}
//Use The function update table
UpdateTable();
setTimeout(function() {
alert("Your Score is " + score)
}, 15000);
setInterval(UpdateTable, 1000);
var score = 0;
$(".lettuce").click(function() {
//alert( "You Clicked on the lettuce" );
score -= 5;
document.getElementById("scoreOut").innerHTML = score;
});
$(".gopher").click(function() {
//alert( "You Clicked on the lettuce" );
score += 5;
document.getElementById("scoreOut").innerHTML = score;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<center>
<div id="container">
<div id="header">
<h1>Welcome</h1>
<div id="scoreOut"></div>
</div>
<div id="content">
<table id="gameCard">
<tbody>
<tr>
<td id="cell00"> </td>
<td id="cell01"> </td>
<td id="cell02"> </td>
<td id="cell03"> </td>
</tr>
<tr>
<td id="cell10"> </td>
<td id="cell11"> </td>
<td id="cell12"> </td>
<td id="cell13"> </td>
</tr>
<tr>
<td id="cell20"> </td>
<td id="cell21"> </td>
<td id="cell22"> </td>
<td id="cell23"> </td>
</tr>
<tr>
<td id="cell30"> </td>
<td id="cell31"> </td>
<td id="cell32"> </td>
<td id="cell33"> </td>
</tr>
<tr>
<td id="cell40"> </td>
<td id="cell41"> </td>
<td id="cell42"> </td>
<td id="cell43"> </td>
</tr>
<tr>
<td id="cell50"> </td>
<td id="cell51"> </td>
<td id="cell52"> </td>
<td id="cell53"> </td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
//<input id="btn" type="button" value="Play The Game!!" />
</center>
Figured it out!
Needed to put my JQUERY on.click goodies in the actual main function, which I did not have in the first place, in with the other functions nested in it.
<!--
To change this template use Tools | Templates.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Gopher Broke</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
#gameCard td{
padding:0; margin:0;
}
#gameCard {
border-collapse: collapse;
cursor:url(finger2.png), pointer;
}
</style>
</head>
<body>
<center>
<div id="container">
<div id="header">
<h1>GOPHER BROKE</h1>
<center>You have 15 seconds to stop as many gophers as possible!</center>
<div id="scoreOut">Score:</div>
<FORM>
<INPUT TYPE="button" onClick="history.go(0)" VALUE="Refresh">
</FORM>
</div>
<div id="content">
<table id="gameCard">
<tbody>
<tr>
<td id="cell00"> </td>
<td id="cell01"> </td>
<td id="cell02"> </td>
<td id="cell03"> </td>
</tr>
<tr>
<td id="cell10"> </td>
<td id="cell11"> </td>
<td id="cell12"> </td>
<td id="cell13"> </td>
</tr>
<tr>
<td id="cell20"> </td>
<td id="cell21"> </td>
<td id="cell22"> </td>
<td id="cell23"> </td>
</tr>
<tr>
<td id="cell30"> </td>
<td id="cell31"> </td>
<td id="cell32"> </td>
<td id="cell33"> </td>
</tr>
<tr>
<td id="cell40"> </td>
<td id="cell41"> </td>
<td id="cell42"> </td>
<td id="cell43"> </td>
</tr>
<tr>
<td id="cell50"> </td>
<td id="cell51"> </td>
<td id="cell52"> </td>
<td id="cell53"> </td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<!--<input id="btn" type="button" value="Play The Game!!" />-->
</center>
<script>
var score = 0;
function game(){
// var btn = document.getElementById('btn');
//btn.addEventListener('click', UpdateTable);
// Set the max length and Width
var maxWidth = 4;
var maxLength = 6;
// Returns a random number
function CreateRandom() {
return Math.floor(Math.random() * 4 + 1);
}
//function to create an image
function CreateGopher() {
var randomNumber = CreateRandom();
var image = "Sup";
if(randomNumber == 1){
image = "<img src='gopher.jpg' class='gopher' height='50' width='50'>";
}
else if(randomNumber == 2){
image = "<img src='lettuce.jpg' class='lettuce' height='50' width='50'>";
}
else if(randomNumber == 3){
image = "<img src='lettuce.jpg' class='lettuce' height='50' width='50'>";
}
else if(randomNumber == 4){
image = "<img src='lettuce.jpg' class='lettuce' height='50' width='50'>";
}
return image;
}
//create table
function UpdateTable() {
// Iterate over each cell and set a random number
for (var i = 0; i < maxLength; i++) {
for (var j = 0; j < maxWidth; j++) {
tmp = 'cell' + i + j;
document.getElementById(tmp).innerHTML = CreateGopher();
}
}
}
function newTable() {
// Iterate over each cell and set a random number
for (var i = 0; i < maxLength; i++) {
for (var j = 0; j < maxWidth; j++) {
tmp = 'cell' + i + j;
document.getElementById(tmp).innerHTML = CreateGopher();
}
}
}
//Use The function update table
UpdateTable();
$( ".lettuce" ).click(function() {
//alert( "You Clicked on the lettuce" );
score -= 5;
document.getElementById("scoreOut").innerHTML = "<h1>Score :" + score;
});
$( ".gopher" ).click(function() {
//alert( "You Clicked on the lettuce" );
score += 5;
document.getElementById("scoreOut").innerHTML = "<h1>Score :" + score;
});
}
game();
setInterval(game, 1000);
setTimeout(function ()
{alert("Your Score is " + score)
window.location.href = "startGame.html";
}, 16000);
</script>
</body>
</html>
I have a html page of 9 images which must change their order when page is reloaded
I have placed image as 3 rows and 3 columns which on reload should change the order of the image .
Here is my HTML Code
<html>
<head>
<script type="text/javascript">
var len = document.images.length;
var images = document.images;
var img = function (){
for(var j, x, i = images.length; i; j = parseInt(Math.random() * i), x = images[--i], images[i] = images[j], images[j] = x);
}
window.onload = function(){
for(var i = 0 ; i < len ; i++)
{
images[i].src = img[i].src;
}
}
</script>
</head>
<body>
<table>
<tr>
<td id="cell1"><button value="1"><img src="1.jpg" width="42" height="42"/></button></td>
<td id="cell2"><button value="2"><img src="2.jpg" width="42" height="42"/></button></td>
<td id="cell3"><button value="3"><img src="3.jpg" width="42" height="42"/></button></td>
</tr>
<tr>
<td id="cell4"><button value="4"><img src="4.jpg" width="42" height="42"/></button></td>
<td id="cell5"><button value="5"><img src="5.jpg" width="42" height="42"/></button></td>
<td id="cell6"><button value="6"><img src="6.jpg" width="42" height="42"/></button></td>
</tr>
<tr>
<td id="cell7"><button value="7"><img src="7.jpg" width="42" height="42"/></button></td>
<td id="cell8"><button value="8"><img src="8.jpg" width="42" height="42"/></button></td>
<td id="cell9"><button value="9"><img src="9.jpg" width="42" height="42"/></button></td>
</tr>
</table>
<!-- forms's action sends the data to a specified php page -->
<form action="pictures.php" method="post">
<input id="pswd" type="hidden" value="" name="pass">
</form>
</body>
</html>
I Cant randomize the image . Any Suggestion on what i am doing wrong :)
You should "randomize" your array:
<script type="text/javascript">
var len = document.images.length;
var images = document.images;
var img = function (){
for(var j, x, i = images.length; i; j = parseInt(Math.random() * i), x = images[--i], images[i] = images[j], images[j] = x);
}
img = shuffle(img);//this "randomizes" the 'img' array using the function bellow
window.onload = function(){
for(var i = 0 ; i < len ; i++)
{
images[i].src = img[i].src;
}
</script>
And paste this function in your code: https://stackoverflow.com/a/2450976/3132718