|
JavaScript - Please Help Me To Randomize An Image Array - Onclick
hi,
i currently have an array of 20 images. on load a random selection of 15 are taken, then they ordered randomly on the page and doubled (to play a match the pairs memory game) clicking restart will reorder the images randomly, but will use the same 15 chosen on page load. i need the restart button to choose another random 15 images from the 20 in the array. here is the site: http://www.thebigappwall.com/test.htm and here is the code: Code: // Concentration Memory Game with Images - Head Script
// copyright Stephen Chapman, 28th February 2006, 24th December 2009
// you may copy this script provided that you retain the copyright notice
function randomOrd(){return (Math.round(Math.random())-0.5); }
var back = '/images/back.png';
var tile = ['/images/lij.png','/images/myh_appwall.png','/images/Tap-Forms-icon-40.png','/images/urban-rivals-app-40.png','/images/warshipicon.png','/images/www2pdf-40.png',
'/images/pandora.png','/images/preschoolicon.png','/images/my_virtual_girlfriend_40x40_01.jpg','/images/my_virtual_girlfriend_40x40_02.jpg','/images/my_virtual_girlfriend_40x40_03.jpg','/images/my_virtual_girlfriend_40x40_04.jpg','/images/www2pdf-40.png','/images/preschoolicon.png','/images/pandora.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png'];
tile.sort( randomOrd );
function randOrd(a, b){return (Math.round(Math.random())-0.5);} var im = []; for (var i = 0; i < 15; i++) {im[i] = new Image(); im[i].src = tile[i]; tile[i] = '<img src="'+tile[i]+'" width="40" height="40" alt="tile" \/>'; tile[i+15] = tile[i];} function displayBack(i) {document.getElementById('t'+i).innerHTML = '<div onclick="disp('+i+');return false;"><img src="'+back+'" width="40" height="40" onclick="addClick();" alt="back" \/><\/div>';} var ch1, ch2, tmr, tno, tid, cid, cnt; window.onload=start; function start() {for (var i = 0; i <= 29 ;i++) displayBack(i);clearInterval(tid);tmr = tno = cnt = 0;tile.sort( randOrd );cntr(); tid = setInterval('cntr()', 1000);} function cntr() {var min = Math.floor(tmr/60);var sec = tmr%60;document.getElementById('c-timer').innerHTML = min+':'+ (sec<10 ? '0' : '') + sec;tmr++;} function disp(sel) {if (tno>1) {clearTimeout(cid); conceal();}document.getElementById('t'+sel).innerHTML = tile[sel];if (tno==0) ch1 = sel;else {ch2 = sel; cid = setTimeout('conceal()', 900);}tno++;} function conceal() {tno = 0; if (tile[ch1] != tile[ch2]) {displayBack(ch1);displayBack(ch2);} else cnt++; if (cnt >= 15) clearInterval(tid); }
Thanks Similar TutorialsHello guys, I am a js noobie really, and am looking for something specific. I have googled for quite some time now looking for a script to randomize a list of images on refresh. For example, If I have 8 images in a line in this order 12345678, when I refresh, I would like them to go into a new random order - 84567321, or anything. What I have found are scripts to allow random new images to appear in place of a single image, which is as close as I have gotten. Does anyone know of a script that can do this, or know how to make one? I have looked everywhere, and can't seem to locate one. Any help is greatly appreciated. Hello, I am trying to use the onclick function to allow a user to change the color of a photo. Everything works but I need a more practical way than using a bunch of IF statements. Here is what I have so far. This is just the function part I can include it all if needed. Code: function changeImage(c_img) {
if(c_img == "cameo") {
document.images("changingImage").src = "content/Image/Cameo.jpg";
} else {
document.images("changingImage").src = "content/Image/GreenChili.jpg";
}
Now I need to add 12 more imgs to this. It works if I throw 12 more if(c_img...)but there must be a better way. I am kinda a newbie when it comes to Java.. Thanks for any advice. Hey Everybody, It has been a few years since I have dealt with coding in JavaScript. I will admit up-front that this is for a part of homework that I have been stuck on for about 2 weeks. I will apologize in advance for the length of this. The first portion is showing what I'm going for. The second portion is what I'm currently wanting help with. Here is what is happening: I'm in a Human Computer Interaction class and my group is developing a "Group Randomizer" web page. I figured using an ArrayList would be easiest rather than coding a database. My group is using Weebly.com to do our site. Things that the site will do (trying to keep this aspect to a single web page): 1) Add/Remove names to/from an ArrayList that is hidden in the background 2) Click a button to generate a randomized order of the ArrayList 3) Be able to split the list with line-breaks based on a number for "group size". Example: (adding names) name[0]=student1 name[1]=student2 name[2]=student3 ... ... ... Number of Groups: [User Input] ----> 3 (press generate button) (resulting random output) Group1: student2 student5 Group2: student1 student4 Group3: student3 student6 Then being able to remove the names as needed too. Now, I AM NOT looking for somebody to do all of this for me. What I am wanting at this time is help figuring out how to produce a randomized order output from an ArrayList such as follows: (temporary ArrayList) student[0]=student1 student[1]=student2 student[2]=student3 ... ... ... (generate output) student4 student2 student7 student1 student5 ... ... ... Any help with that portion would be helpful. Hi, I got following script + HTML: Code: <script type="text/javascript">
function tjek() {
if ((document.forms[0].spil.value=='HIDDENWORD')) {
alert('Correct message');
window.location.reload( true );
}
else if ((document.forms[0].spil)) {
alert('Wrong message');
}
}
function tastkontrol() {
document.forms[0].spil.value = document.forms[0].spil.value.toUpperCase();
}
</script>
<form method="post" onsubmit="tjek();return false;">
<input type="text" name="spil" onkeyup="tastkontrol();return false;">
<input type="submit" value="Send">
</form>
It's a game, were the person has to guess the hidden word. I know want to add this to the script, so the HIDDENWORD changes into either APPLE or HOUSE when refreshing page: Code: <script type="text/javascript">
code=new Array;
code[1]="APPLE";
code[2]="HOUSE";
function Show() {
num = Math.random();
num = 1 + ( num * ((code.length - 1)-1));
num = Math.round(num);
document.write("" + code[num] + "");
}
Show();
</script>
I've tried some stuff, but I don't got a clue, how to merge these to scripts into eachother. Thanks in Advance. So here's my problem. I have a long list of buttons that I want to declare their onclick with values from an array. It looks something like this. It seems simple but obviously there's something that I'm not seeing that isn't allowing this to run.Here's what the code looks like Code: <html>
<body>
<form name="form1">
<input type="button" name="one">
<input type="button" name="two">
<input type="button" name="three">
</form>
<script>
function hello()
{
....
....
}
goodbye = ["one","two","three"]
for(i=0;i< 3; i++)
{
document.form1.goodbye[i].onclick=hello;
}
If anybody could help me out with this I would greatly appreciate it. Hi.. I should warn, i know almost nothing about javascript. . i've been trying read sample scripts and examples on how to modify this script; but I just don't know enough. I have a script that pulls data from an array, and copies it directly to the clipboard when a user clicks on it. The problem is this only works in IE, because Firefox doesn't by default allow that to happen. I'm trying to change it so that when it is clicked, instead, it takes what was going to be copied to the clipboard, and puts it in a Prompt box for the user to copy and paste. I had other scripts that do that, but I can't for the life of me figure out how to learn from it! This is the function in the current script Code: <script language="javascript" type="text/javascript">
<!--
function selectThis(src) {
document.selection.clear;
txt = eval(src +".innerText");
theObj = document.all(txt);
txtRange = document.body.createTextRange();
txtRange.moveToElementText(eval(src));
txtRange.select();
txtRange.execCommand("RemoveFormat");
txtRange.execCommand("Copy");
alert(txt + " '.$caption[ 'paste' ].'");
}
-->
</script>
';
}
and this is the onclick code Code: ';
foreach ( $ausgabe as $key => $data) {
if ( $key == '' )
continue;
if ( ( $_GET[ 'group' ] != '*' )
&& ( $this->info[ $key ][ 'xx_data' ] != $_GET[ 'group' ] ) )
continue;
$tpack = $this->info[ $key ][ 'pack' ];
$tname = $this->info[ $key ][ 'xx_desc' ];
$jsid= $nick2.'_'.$tpack;
if ( isset( $this->info[ $key ][ 'xx_lock' ] ) ) {
if ( $this->hide_locked > 0 )
continue;
$tname .= ' (gesperrt)';
}
$tname = htmlspecialchars( $tname);
if ( $javascript > 0 ) {
$tname = '<span class="selectable" onclick="javascript:selectThis(\''.
$jsid.'\');">'.
$tname."</span>\n".
'<span id="'.$jsid.'" class="hidden">'.
'/msg '.$this->nick.' xdcc send '.$tpack."</span>\n";
}
if ( isset( $this->info[ $key ][ 'xx_note' ] ) )
$tname .= '<br>'.$this->info[ $key ][ 'xx_note' ];
$label = "Download mit:\n/msg ".$this->nick.' xdcc send '.$tpack."\n";
if ( isset( $this->info[ $key ][ 'xx_md5' ] ) )
$label .= " \nmd5: ".$this->info[ $key ][ 'xx_md5' ];
if ( isset( $this->info[ $key ][ 'xx_crc' ] ) )
$label .= " \ncrc32: ".$this->info[ $key ][ 'xx_crc' ];
echo '
<tr>
<td class="right">#'.$tpack.'</td>
<td class="right">'.$this->info[ $key ][ 'xx_gets' ].'</td>
<td class="right">'.makesize($this->info[ $key ][ 'size' ]).'</td>
<td class="content" title="'.$label.'">'.$tname.'</td>
</tr>
';
I've spent days at trying to customize it.. but.. i'm not a programmer I was able to get it to open a prompt box, and had it populate with ("copy this code", $variable), but cannot figure out how to have it display the proper values that was clicked on. I have no idea though what is considered efficient either in the code. I hope this isn't considered asking for TOO much help.... Hi, I was hoping someone might have a solution to randomizing a URL in javascript... in this case for an embedded Simpleviewer link? At the moment the link is http://timperceval.com/guiran/intro1/ but I would like to have the site randomly choose from four URLs. The embedded code is as follows: <!--START SIMPLEVIEWER EMBED.--> <script type="text/javascript" src="http://timperceval.com/guiran/intro1/svcore/js/simpleviewer.js"></script> <script type="text/javascript"> var flashvars = {}; flashvars.baseURL = "http://timperceval.com/guiran/intro1/"; simpleviewer.ready(function () { simpleviewer.load("sv-container", "100%", "100%", "000000", true, flashvars); }); </script> <div id="sv-container"></div> <!-- END SIMPLEVIEWER EMBED -- Any ideas would really help! Thanks, Tim I've been banging my head for two days now trying to figure out how i can swap td cells. There are a lot of examples of how to order rows, but i can seem to find any on how to swap td cells. Has anyone a good referal for this.
I am bringing in twitter feed and appending it via a for loop to div( .container ) and assigning each "tweet" with a separate div(.content). I also have divs(.content) that I am manually placing in. All of these are being displayed through http://masonry.desandro.com/. The divs are being segregated (manually placed divs) and (for loop, appended divs). I would like to randomize all of the divs so they are not seperated and show in random orders on load. But it is only randomizing the "manually placed divs". Can and how do I go about fixing this? I am new(er) at jQuery so keep that in mind. I would paste code but it's very long. Any and all help is appreciated! Hey all, I have a simple form that looks something like this: Code: <div id="responses"> <input class="checkbox" type="checkbox" name="group1" value="1" id="option1"/><label class="label" for="option1">Option one text</label> <input class="checkbox" type="checkbox" name="group1" value="0" id="option2"/><label class="label" for="option2">Option two text</label> <input class="checkbox" type="checkbox" name="group1" value="1" id="option3"/><label class="label" for="option3">Option three text</label> </div> I am trying to figure out a way to use javascript to take these and randomize the order of them. For example, if you were looking at it and clicked a randomize button it would shuffle around the options. I am fairly new to javascript and don't really know where to start with something like this. I would greatly appreciate it if someone could get me started or point me in the right direction. Thanks! Here is my code for two tab images. Code: <a href="#page-2"><img src="/images/but02.png" style="margin-top:8px; float:left;"></a>
<a href="#page-1"><img src="/images/but01.png" style="margin-top:8px; float:left;"></a>
I need to have it so when tab '#page-2' is clicked it will change the image to '/images/but03.png' and when tab '#page-1' is clicked it will change the image to '/images/but04.png' ? Its basically to show which tab is active, one image is lighter then the other. Can anyone help ? Hello. I need some help with refreshing an image(cgi chart) onclick. This is because the chart changes every minute(due to database update) and i want whenever you click on it to refresh. My code so far is: HTML: Code:
<label for="choseChart">Change chart!</label>
<select id="choseChart" onchange="changeChart('choseChart');">
<option value="0" selected="selected">Chart of Months(column)</option>
<option value="1">Chart of Branches(column)</option>
<option value="2">Chart of Months(pie)</option>
<option value="3">Chart of Branches(pie)</option>
</select><br/>
<img id="chartType" style="cursor: pointer; cursor: hand" onclick="" alt="Chart" src="1.cgi"/>
Javascript: Code: function changeChart(chartid)
{
var chart = document.getElementById(chartid).selectedIndex;
document.getElementById("chartType").src=changeImage[chart];
}
I know theres a lot of codes out there online for this but I cannot seem to get any of them to work for me. I am trying to make my layout for an item page for an online store. I'd like one big image, with one or 2 thumbnails under it which when clicked will switch the big image. Clicked, not mouseover. Lets say my big images would be REG1.jpg and REG2.jpg, the first being the image on the page that will switch. THUMB1.jpg and THUMB2.jpg being the thumbnails. Is there a simple way to do this or is the code a complete mess like I've been seeing on so many pages? I'd say I have an intermediate understanding of HTML and I've just started teaching myself javascript but I'm starting to fall off the wagon, I can't decipher the stuff coming up in these example codes. Any help would be thoroughly appreciated!! Hi guys.. Im looking to basically have an image which is a button with a value, and when i click the image, it gets replaced by another image with a different value. when clicked again it would return to the original image and value.. Is this possible? and if so, please help cos im terrible at javascript! Many thanks hello friends I'm a newbie.. I need a little help. Im using big images in my website. I want a javascript to toggle the image size from "Original size to fit with resolution of screen" and vice versa. It should be onclick function like this <img id="blahblah" src="myimage.jpg" onClick="resize();" /> I am trying to add a border around the base they select and then when they select another one, I want the previous one to go away and then high light that one. This is my PHP code that outputs the bases: Code: $gender = $_GET['gender'];
// SQL Injection here?
$sql = "SELECT * FROM habases WHERE gender='".$gender."'";
$result = mysqli_query($cxn, $sql) or die(mysqli_error($cxn));
$baseCount = 0;
while ($row = mysqli_fetch_assoc($result))
{
$baseimage = $row['image'];
$basesOutput .= "<input type=\"image\" id=\"".$baseCount."\" src=\"http://www.elvonica.com/".$baseimage."\" onclick=\"baseBorder(".$baseCount.");return false;\" value=\"".$baseimage."\" name=\"base\">";
$baseCount++;
}
I have a baseCount so each image ID is unique. The baseBorder() is the function that will change the border. Here is the baseBorder() function: Code: var prevId;
function baseBorder(count)
{
if (prevId)
{
$("#prevId").style.border="none";
}
else
{
$("#count").style.border="2px solid #E8272C";
prevId = count;
}
}
Can anyone help me out since it's not working? Hi all, I can't seem to add an onclick event to an image. I'm sure I am doing something wrong as I am very new to Javascript. This is a part of my javascript code that is in the head and body of my HTML file: Code: <head>
<script language="JavaScript">
.....
.....
var redLocation0 = redArray[0]+".jpg";
....
....
function redClick( buttonLocation ) {
window.location = "http://www.yahoo.com/"
}
....
....
</script>
</head>
<body>
<table>
<tr>
<td>
<script language="javascript">document.write('<IMG SRC="'+ redLocation0 +'">'); onclick="redClick('0')";</script>
</td>
</tr>
</table>
</body>
The image that is displayed is not clickable, and therefore the function redClick cannot be called. Can someone please help me and tell me where I am going wrong here. I am kinda new to JavaScript. Thanks! Hi guys, I'm new to javascript but cannot figure out a way to do something or even if its possible. On the site there is an image with some descriptive text to the side, here is the work in progess link to the site for an idea www.igrey.co.uk/nbe I want to be able to click the arrows and the text and images change so you can scroll through a couple of different projects Any help or advice would be greatly appreciated All the best, Ian I just started my javascript class two weeks ago and am having troubles already and my book is no help. My first assignment is having a list of country names and when you click the radio button next to the name the country flag pops up in a designated area for the image. I have tried a few different things but nothing is working. I have the list of countrys and the radio buttons but when i click the radio button the image doesn't pop up. Also, when i click another radio button they all stay selected. |
|||||||