|
JavaScript - Random Seating Selection Using Javascript
Hello,
We are conducting a ceremony in an Auditorium where 336 People are gathered and afterwards we want to choose 20 of them randomly. We want to display the whole act of choosing them via projectors on the auditorium screen with a little animation. Basically the concept of the animation goes like this: http://summercampdubai.com , but we are stuck on the code as none of us knows programming that much: we want the chairs to be GRAY and the one that miss the opportunity (randomly) to turn RED (this much we have done) and the last chair (winner) to REMAIN GRAY (this is where we are stuck)r. PS. can anybody help us with this by tomorrow 10:00 AM GMT? Regards, Sara Similar TutorialsHey guys, I'm working on a javascript seating plan at university (i understand the rules but im not asking for you to do it for me, mearly to help me)... What i've got is a seating plan for a cinema auditorium where there are two types of seats; premium teared seating and regular seating. The premium seats are 10pounds and the regular seats are 5 pounds. I've written the javascript to my ability so far... What i've got just now is the ability to roll over the "available" seats which then does a JS Roll-Over that makes them "mine" seats, and then if you click "Confirm Choices" Button it displays the "mine" seats selected as "taken" seats. It also adds up the seats (10 pounds each). However I've only done the premium seats at the moment and i am unsure of how to do the 5 pound "regular" seats. Here's my javascript code... Code: onload=function(){
myAnchors=document.getElementsByTagName("a");
myImages=document.getElementById("tableA").getElementsByTagName("img");
for (var i=0;i<myAnchors.length;i++){
myAnchors[i].setAttribute('onmouseover','getMine('+i+')');
myAnchors[i].setAttribute('onmouseout','getAvailable('+i+')');
myAnchors[i].setAttribute('onclick','freezeMe('+i+')');
myAnchors[i].setAttribute('id','A'+i);
myImages[i].setAttribute('id',i);
totalprice =0;
}
}
function getMine(id){
myImages[id].setAttribute('src','images/mine.gif');
}
function getAvailable(id){
myImages[id].setAttribute('src','images/available.gif');
}
function freezeMe(id){
if(myAnchors[id].getAttribute('onmouseover')==''){
myAnchors[id].setAttribute('onmouseover','getMine('+id+')');
myAnchors[id].setAttribute('onmouseout','getAvailable('+id+')');
} else {
myAnchors[id].setAttribute('onmouseover','');
myAnchors[id].setAttribute('onmouseout','');
myImages[id].setAttribute('src','images/mine.gif');
totalprice += 10;
}
document.getElementById("totalprice").innerHTML = totalprice;
}
function confirmChoices(){
for (var i=0;i<myAnchors.length;i++){
if(myImages[i].getAttribute('src')=='images/mine.gif'){
myImages[i].setAttribute('src','images/taken.gif');
myAnchors[i].setAttribute('onclick','');
document.getElementById("checkout")
}
}
}
function resetAll(){
window.location="home.html";
}
and here's my HTML code (there is some styling you can ignore ) Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>
Welcome to Hub Tickets Online
</title>
<script type="text/javascript" src="scripts/cw1.js"></script>
<script type="text/javascript" src="scripts/cw1_2.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header"></div>
<div id="wrapper">
<div id="navigation">
<img src="images/logo.png">
</div>
<div id="myTickets">
<h1>My Tickets</h1>
<div id="myTicket">
<h3>Your Seat Selection:</h3>
</div>
<div id="myPrice">
<table>
<tr>
<td>Total Price: £</td>
<td><div id="totalprice"></div></td>
</tr></table>
</div>
<div id="key"><p><input type="button" id="checkout" value="Check Out" onclick="checkOut()" disabled="disabled" /></p>
<p> <img src="images/available_disabled.gif" alt="Available" /> = Available; <img src="images/mine_disabled.gif" alt="Mine" /> = Mine;
<img src="images/taken_disabled.gif" alt="Taken" /> = Taken</p>
</div></div>
<div id="seating"><h4>Raised Premium Seating</h4><h6></h6>
<table id="tableA">
<tr>
<td colspan="7">A</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td></td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td colspan="7"></td>
</tr>
<tr>
<td colspan="7">B</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td></td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td colspan="7"></td>
</tr>
<tr>
<td colspan="7">C</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td></td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td colspan="7"></td>
</tr>
</table>
<h6></h6>
<table id="cheap_seats"><h4>Regular Joe Seats</h4>
<tr>
<td>D</td><td></td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td></td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td></td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td></td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
</tr>
<tr>
<td>E</td><td></td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td></td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td></td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td></td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
<td>
<a href="#nogo">
<img src="images/available.gif" style="border:none" />
</a>
</td>
</tr>
</table>
<h5></h5>
<div style="clear:both">
</div>
<br />
<div id="theButtons">
<input type="button" value="Confirm Choices" id="confirm" onclick="confirmChoices()" />
<input type="reset" value="Reset" onclick="resetAll()" />
</div>
</div>
</div>
</body>
</html>
any help would be much appreciated! thanks! Very, VERY new to javascript, hopefully this question isn't too bad.. So I'm looking at an example of randomly changing a picture through a function, I want to understand *why*, not simply know how.. The confusing code for me is: Code: while (that.src.indexOf(myImages[newImgNumber]) != -1) The other code is irrelevant. My question is, why would testing a current image with a new image result in -1 if they are the same? To me, it seems like it should be !=0? I mean, if I tested if a number was the same as another number, I would expect a result of 0 by subtracting. Is it not subtracting index position to find out if they're the same? Does it simply just return -1 if they are the same, and I'm over thinking it? Thanks for any help. Ok, I am working on a webpage and on one page section I have 3 random facts. Now, having to change the three random facts to three different random facts every week will be a annoyance. So I need help in creating a code that will allow 3 random facts to chosen every Sunday(for example). Is it possible to do this? Also I can not do this in php. Hi there, I have this listbox that I want the user to select only one choice at a time. How do I disable the multiple selection feature in javascript? <select id="lstBxEmail" name="listBoxEmail" multiple="multiple" style="width: 580px;"> <option>Java</option> <option>PHP</option> <option>Perl</option> <option>Javascript</option> <option>C#</option> <option>Powershell</option> </select> <select id="lstBxEmail" name="listBoxEmail" multiple="multiple" style="width: 580px;"> <option>Java</option> <option>PHP</option> <option>Perl</option> <option>Javascript</option> <option>C#</option> <option>Powershell</option> </select> Hi all.This is part of my code which I am using to edit the record from database.Initially the input boxes show the values from database and if any one of the value is changed, I want to reflect the change according to the changes made in the fields.The code works fine but if I change values in qty,rate or amount, the other values are not changing.Can experts over here tell me why?Here is my code: Code:
<html>
<head>
<script type="text/javascript">
function tot() {
var d=document.getElementById("total").value;
var st=Number(d);
var e=document.getElementById("vat_amt").value;
var tx=Number(e);
var f=document.getElementById("cash_discount").value;
var ad=Number(f);
var g=document.getElementById("vat").value;
var vat=Number(g);
var h=(st+tx)-ad;
document.getElementById("amount").value = Math.ceil(h);
var z=vat+100;
var y=(st*100)/z;
var i=st-y;
var result=Math.round(i*100)/100; //returns 28.45
document.getElementById("vat_amt").value =result;
}
var total = 0;
function getValues() {
var qty = 0;
var rate = 0;
var obj = document.getElementsByTagName("input");
for(var i=0; i<obj.length; i++){
if(obj[i].name == "qty[]"){var qty = obj[i].value;}
if(obj[i].name == "rate[]"){var rate = obj[i].value;}
if(obj[i].name == "amt[]"){
if(qty > 0 && rate > 0){obj[i].value = qty*rate;total+=(obj[i].value*1);}
else{obj[i].value = 0;total+=(obj[i].value*1);}
}
}
document.getElementById("total").value = total*1;
total=0;
}
</script>
</head>
<body>
<table width="23%" cellpadding="0" cellspacing="0" class="normal-text" border="0" style="margin-top:0px; padding-top:0px; margin-bottom:0px; padding-bottom:0px;">
<tr>
<td>Qty</td>
<td>Rate</td>
<td>Amount</td>
</tr>
<tr>
<td class="forhead"><input type="text" name="qty[]" onkeyup="getValues()" style="width:120px;" value="<?PHP echo "$row3[qty]" ?>" class="text medium"></td>
<td class="forhead"><input type="text" name="rate[]" onKeyUp="getValues()" style="width:120px;" value="<?PHP echo "$row3[rate]" ?>" class="text medium"></td>
<td class="forhead"><input type="text" name="amt[]" style="width:120px;"
onKeyUp="getValues()" class="text medium" value="<?PHP echo "$row3[amt]" ?>"></td>
</tr>
<tr>
<td class="dt" colspan="2">Sub Total:</td>
<td class="forhead"><input type="text" id="total" name="total" style="width:120px;" value="<?PHP echo "$row[total]" ?>" class="text medium"></td>
</tr>
<tr>
<td class="dt" colspan="2">Vat:</td>
<td class="forhead"><?PHP
$query5=mysql_query("SELECT * FROM vat");
echo "<select name='vat' id='vat' style='width:120px; border: 1px solid #BFBFBF;' onChange='tot()'>";
echo "<option value='0'>
Select</option>";
while($row5=mysql_fetch_array($query5))
{?>
<option value= <?PHP echo $row5[vat]; ?> <?PHP echo($row5[vat]==$row[vat])?'selected':''?>> <?PHP echo $row5[vat]; ?> </option>
<?PHP }
echo "</select>";
?></td>
</tr>
<tr>
<td class="dt" colspan="2">Vat Amt :</td>
<td class="forhead"><input type="text" id="vat_amt" name="vat_amt" style="width:120px;" value="<?PHP echo "$row[vat_amt]" ?>" class="text medium" onKeyUp="tot()"></td>
</tr>
<tr>
<td class="dt" colspan="2">Cash Discount :</td>
<td class="forhead"><input type="text" id="cash_discount" name="cash_discount" style="width:120px;" value="<?PHP echo "$row[cash_discount]" ?>" class="text medium" onKeyUp="tot()"></td>
</tr>
<tr>
<td class="dt" colspan="2">Total :</td>
<td class="forhead"><input type="text" name="amount" id="amount" style="width:120px;" class="text medium" onKeyUp="tot()" value="<?PHP echo "$row[amount]" ?>"></td>
</tr>
</table>
</body>
</html>
Hello Folks, Here is my dropdown menu: Code: <select name="peeps"> <option value="Frank Tompson">Frank Tompson</option> <option value="Henry Wilson">Henry Wilson</option> <option value="Bill Kent">Bill Kent</option> <option value="Jessi McDonald"> Jessi McDonald</option> <option value="John Hays">John Hays</option> How can i make it so if i click on John Hays a JavaScript pop up will say Hello John Hays, and if i click on Bill Kent a popup will say hello Bill Kent and if i click on any other name nothing happens? Hello. The code below lets a user select a drop down option and a picture changes depending on the selection. I am trying to make it so when you select an option on the dropdown the picture shows up in the center of the screen and in the background behind the text. Here is the code. Code: <html>
<head>
<style type='text/css'>
#txt {background-repeat:no-repeat;width:200px;height:200px;}
</style>
<script type='text/javascript'>
function div_bg(team){
document.getElementById('txt').style.backgroundImage="url(images/" + team + ".jpg)";
}
</script>
</head>
<body>
<select name='team' onChange='div_bg(this.value);'>
<option name='arsenal' value='arsenal'>Arsenal</option>
<option name='liverpool' value='liverpool'>Liverpool</option>
</select>
<div id='txt'></div>
</body>
Thanks in advance!! Dear all, background information: I did code a timesheet management system for my company with PHP where the user has to submit time entries and has an online form with several start and end times. The start and end times are all simple HTML select option dropdowns. I want that the first End time selection will be the next start time selection. Basically a simple dependency of the dropdown. My approach was that I want to solve this with JavaScript. In my php code I am echoing the following (in this select the end times are the values): echo "<select class='normal' name='$field_id' onChange=set_time_hour(this.value,'$field_id_js')>"; When the user changes then the end time dropdown the next field (next start time entry) should be changed accordingly. The javascript looks like this function set_time_hour(hour_value,next_field){ alert (hour_value); alert (next_field); document.getElementById(next_field).value = hour_value; } The alert calls are giving me the right values. but the document.getElementById(next_field).value = hour_value; is not working. What is wrong there? Do you have an idea? How can I change the value of a select box with Javascript? The select box values are already popoluated with PHP so I just want to select the right value. ***I need to randomise the order of some questions that are in this format. Any ideas? Thank you!*** <CODE> <!---Question4---> <form name="form4" method="post" action=""> <h3><p>First One</p></h3> <p> <label><input type="radio" name="q4" id="w1" value="1" </label> <label><input type="radio" name="q4" id="w2" value="2" </label> <label><input type="radio" name="q4" id="w3" value="2" </label> </p> </form </CODE> i have a table with a couple random numbers, and i want to click a button that will dynamically regenerate the numbers each time the button is clicked without re-generating the entire table., im using DOM and innerhtml for these random numbers. heres the javascript and html code. so far, it just generates the random numbers when the page loads. i posted this problem a while back, and the answers were great, but they coded the xhtml inside the html file. i'm trying to get the numbers to generate in the table that is formed in the javascript file using innerhtml. i tried to incorporate the solutions without putting the html inside the html file to no avail. var random = Math.floor(Math.random()*40 + 1) //sets variables for random numbers to generate var random2 = Math.floor(Math.random()*40 + 1) var random3 = Math.floor(Math.random()*40 + 1) var random4 = Math.floor(Math.random()*40 + 1) var random5 = Math.floor(Math.random()*40 + 1) var random6 = Math.floor(Math.random()*40 + 1) //create table function makeTable(lotto) document.getElementById("tableSpan").innerHTML = '<table border="1" id="lotto">'; var caption=document.getElementById('lotto').createCaption(); caption.innerHTML="JavaScript Random Numbers"; var x=document.getElementById('lotto').insertRow(0); var cell1=x.insertCell(0); var cell2=x.insertCell(1); var cell3=x.insertCell(2); var cell4=x.insertCell(3); var cell5=x.insertCell(4); var cell6=x.insertCell(5); cell1.innerHTML='<td class = "normal">'+ random +'</td>'; cell2.innerHTML='<td class = "normal">'+ random2 +'</td>'; cell3.innerHTML='<td class = "normal">'+ random3 +'</td>'; cell4.innerHTML='<td class = "normal">'+ random4 +'</td>'; cell5.innerHTML='<td class = "normal">'+ random5 +'</td>'; cell6.innerHTML='<td class = "red">'+ random6 +'</td>'; } heres the HTML file: <body onload="makeTable('lotto');"> <div id="container"> <div id="header"> <h1>Welcome</h1> </div> <div id="content"> <span id="tableSpan"></span> <input type="button" value="Re-generate Numbers" onclick="makeTable('lotto');" /> </div> { Hi all, I having a problem. I am having 10 images, and I three places on a webpage where I want to show 3 out of those 10 images randomly. But when for example image 5 is shown on spot 1, it cannot be shown on spot 2 or 3 and the same for spot 2 and 3. Is this possible with Javascript? Greetz, Bob I have a form that used php to load a random image but now i would like to use javascript instead and am sure I nearly have it. I need to have a random number between 0 -5. Here is my code Code: <script type='text/javascript'>
var random = Math.floor( Math.rand() * 6);
document.write("<img src='images/'"+random+"'.jpg' alt='random image' /><input name='image' type='hidden' value='"+random+"' />")
</script>
Hello, I need help again :3 Heres what I need: I need some javascript to random a script. Simply like this: The script randoms a number Based on the number it runs some lines of PHP script. Random 1-10 If 1 Then run this PHP script *PHP script* *PHP script* *PHP script* *PHP script* If 2 Then run this PHP script *Different PHP script* *Different PHP script* *Different PHP script* *Different PHP script* If 3 Then run this PHP Script *some more different PHP Script* *some more different PHP Script* *some more different PHP Script* *some more different PHP Script* If 4 etc etc etc Each bit of PHP Will be similar, but be different in some ways. There may be more compressed ways of doing this. But if it at all possible, I would like it in the way I wrote it above. For instance I dont want: Random 1-3 If 1 Run function 1 If 2 Run function 2 If 3 Run function 3 Function 3 *PHP Script* *PHP Script* *PHP Script* Function 1 *PHP Script* *PHP Script* *PHP Script* Function 2 *PHP Script* *PHP Script* *PHP Script* I will thank the best answer! This website is awesome and has answered so many of my questions! Thanks in advance! Hi, I've got a game 99% finished, basically when the game start and the player clicks through to the game panel, there are 30 tiles (80x80px) each, and the object of the game is for the player to press the tile with the letter "X" on, the X can be on any 1 of 5 different coloured tiles at anyone time and of course there can be more than 1 tile having an X on it. The tiles currently are built via .css, and this works 100% perfectly. However now I want to use images, pulled in from my local website instead of tiles built via .css. A demo of what I'm kinda of after is here > Edit fiddle - JSFiddle - if you press "run" the images will keep changing their order. The code I currently have for the game is here.. //CODE// var TheColorArray = ['red', 'yellow', 'green', 'blue', 'orange'], TheScore = 0, TimerLength = 2500, GameTimer, ScoreMap = { 'red': 500, 'yellow': 50, 'green': 30, 'blue': 20, 'orange': 5 }; function DrawRow() { TheColorArray.sort(function () { return .5 - Math.random(); }); var TheHTML = '<div class="row">'; var MagicColumn = Math.floor(Math.random() * 6); for (var i = 0; i < 5; i++) { if (i === MagicColumn) { TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">x</div>'; } else { TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">' + String.fromCharCode(97 + Math.floor(Math.random() * 26)) + '</div>'; } } TheHTML = TheHTML + '</div>'; return TheHTML; } You'll also see that "TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">x</div>';" and "TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">' + String.fromCharCode(97 + Math.floor(Math.random() * 26)) + '</div>';" both state that if X is pressed the game basically carries on. I need this to use a chosen image from my server, i.e. URL/apple.png .... i have also managed to get to this point (with apples) but its just not working.. Edit fiddle - JSFiddle Any help would be great.. Many thanks in advance!!! Hi all.. I've been trying to get random numbers in JS. It works when I assign fixed values, but when I want those values to come from a form, I get all the problems.. any comments on my script? Thanks. M [CODE] <script type="text/javascript"> function random() { var x=document.getElementById("text1").value;// num ingresado por el usuario var y=document.getElementById("text2").value; //var x=1; //var y=6; num=Math.floor(x + Math.random() * y); var r=document.getElementById("demo") r.innerHTML=num; } </script> [CODE] can you explain someone step by this code?i didn't get it. <script language="Javascript"> <!-- function backcolor(form){ temp = "" for (var i = 0; i < 16; i++) { temp = form.color[i].value if (form.color[i].checked){ document.bgColor = temp } } } function randombackground(){ document.bgColor = getColor() } function getColor(){ currentdate = new Date() backgroundcolor = currentdate.getSeconds() if (backgroundcolor > 44) backgroundcolor = backgroundcolor - 45 else if (backgroundcolor > 29) backgroundcolor = backgroundcolor - 30 else if (backgroundcolor > 15) backgroundcolor = backgroundcolor - 16 if (backgroundcolor == 0 ) return "olive"; else if (backgroundcolor == 1 ) return "teal"; else if (backgroundcolor == 2 ) return "red"; else if (backgroundcolor == 3 ) return "blue"; else if (backgroundcolor == 4 ) return "maroon"; else if (backgroundcolor == 5 ) return "navy"; else if (backgroundcolor == 6 ) return "lime"; else if (backgroundcolor == 7 ) return "fuschia"; else if (backgroundcolor == 8 ) return "green"; else if (backgroundcolor == 9 ) return "purple"; else if (backgroundcolor == 10 ) return "gray"; else if (backgroundcolor == 11 ) return "yellow"; else if (backgroundcolor == 12 ) return "aqua"; else if (backgroundcolor == 13 ) return "black"; else if (backgroundcolor == 14 ) return "white"; else if (backgroundcolor == 15 ) return "silver"; } // --> </script> I am trying to make it so that when the page loads, it will random play a song from a list of songs. Also, when the first song finishes, another random song should play. I have this code: Code: <script type="text/javascript">
var numberOfSongs = 5
var sound = new Array(numberOfSongs+1)
sound[0]= "music/Rock/1.mp3"
sound[1]= "music/Rock/2.mp3"
sound[2]= "music/Rock/3.mp3"
sound[3]= "music/Rock/4.mp3"
sound[4]= "music/Rock/5.mp3"
sound[5]= "music/Rock/6.mp3"
function randomNumber()
{
var randomLooper = -1
while (randomLooper < 0 || randomLooper > numberOfSongs || isNaN(randomLooper)){ randomLooper = parseInt(Math.random()*(numberOfSongs+1))
}
return randomLooper
}
var soundFile = sound[randomNumber ()]
document.writeln ('<BGSOUND SRC="' + soundFile + '" loop=5>');
document.writeln ('<EMBED SRC= "' + soundFile + '" loop=5 PLAYCOUNT=3 hidden=true autostart=true><P>');
</script>
How would it be possible to play another random song after the song finishes? Hi All. I am new to all this and I am posting a problem up here that I think is quite rare or has not been looked into for a long time now. I am basically looking to create a background for my website and when you refresh the page the image changes to another picture for the background. I have asked one of my good friends to have a look at it and he gave me some code to work with and so I have changed bits here and there and it worked in firefox and safari but will not work in IE. When I asked him he had no clue what to do. So here I am now! I am hoping it is simple but I also know it wont be to an extent! Any help would be much appreciated here. I have attached the code here for you and also the html file. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
</head>
<style type="text/css">
<!--
#myFlash {
position:absolute;
width:100%;
height:100%;
margin:0;
padding:0;
left:0;
right:0;
z-index:20;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Experts Connect</title>
<meta name="keywords" content="Experts connect Preston, Experts connect Lancashire, Medical reports, Preston medical and legal agency, Lancashire medical and legal agency, specialist providers of independent medical evidence, diagnostic and rehabilitation services to the personal injury market, Medico Legal, personal injury claims, refferers." />
<meta name="description" content="Experts Connect are an established legal and medical agency providing reports for persobal injury claims. We work to get the best possible examination we can to ensure your claim goes through with no fuss. We are based nationally and work all over the United Kingdom." />
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="revisit-after" content="10 days" />
<link rel="stylesheet" type="text/css" href="/common/basic.css" />
<script type="text/javascript" src="crossfade.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myFlashContent", "9.0.0", "expressInstall.swf");
</script>
<style type="text/css">
body { width:auto; height:auto; background-color:#CCCCCC;}
#bgimage {
filter:alpha(opacity=40);
-moz-opacity:0.40;
-khtml-opacity:0.40;
opacity:0.40;
width:100%;
height:100%;
position:absolute;
margin:0;
padding:0;
left:0;
right:0;
}
</style>
<title>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript">
<SCRIPT/>
<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theImages[0] = 'back4.jpg'
theImages[1] = 'back2.jpg'
theImages[2] = 'back5.jpg'
theImages[3] = 'back6.jpg'
theImages[4] = 'back8.jpg'
// do not edit anything below this line
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img id="bgimage" src="'+theImages[whichImage]+'">');
// End -->
</script>
</head>
<div id="myFlash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="myFlashContent" name="expertsconnect" align="middle">
<param name="movie" value="experts-connectwebsite.swf" />
<param name="quality" value="high" />
<param name="scale" value="exactfit" />
<param name="wmode" value="transparent" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="experts-connectwebsite.swf" width="100%" height="100%" align="middle">
<param name="quality" value="high" />
<param name="scale" value="exactfit" />
<param name="wmode" value="transparent" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
showImage();
// End -->
</script>
<!-- Script Size: 1.49 KB -->
</body>
</html>
There is also a flash file embedded into this document! Any help would be great with this. Thank you, Mark Hi everyone, I'd really appreciate some help, I'm trying to make the menu of my website randomly change. I have 6 different image folders in which there are 7 pictures which all read the same things (menu, drawings, photo's etc) but in different writing. I want the website to (when refreshed, or when somebody clicks on one of the menu buttons) randomly pick a folder each time, and use the images of that folder. So the images are all the same name, just the folder needs changing. This is what I have so far (thanks to another forum aswell), which doesn't work. I'm very new to javascript... I can't really 'read' what is says, unlike html and/or css. I 'get' html and css. This really frustrates me. Help?!?! btw: I took everything out that doesn't concern this problem, for easier reading. Code: <html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="css/desktop.css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript">
function randomSort(a,b) {
return( parseInt( Math.random()*6 ) %2 );
}
var baseURL = 'http://www.SITE.nl/';
var mijnmenu = ['images/pl2/menubalpen','images/pl2/menugeo','images/pl2/menuinkt','images/pl2/menukleur','images/pl2/menupotlood','images/pl2/menusephia'];
function randomizeMenu() {
var rndMenu = mijnmenu.sort(randomSort);
var menuObj= document.getElementById('menu').getElementsByTagName('img');
for (var i=0; i<menuObj.length; i++) {
menuObj[i].src = baseURL+'/'+rndMenu[i]+'img';
}
}
</script>
</head>
<body onload="randomizeMenu()">
<div id="wrapper">
<div id="menu">
<a href="index.html"><img src="menu1.jpg" /></a>
<a href="drawings.html"><img src="menu2.jpg" /></a>
<a href="typo.html"><img src="menu3.jpg" /></a>
<a href="photo.html"><img src="menu4.jpg" /></a>
<a href="movies.html"><img src="menu5.jpg" /></a>
<a href="other.html"><img src="menu6.jpg" /></a>
<a href="contact.html"><img src="menu7.jpg" /></a>
</div>
<div id="largecolumn">
TEXT
</div>
</div>
</body>
</html>
Hi, I have a Javascript which I'm using to display one of four Flash SWF files randomly. These need to be actually displayed twice, so I'm basically calling the script twice. This works great aside from one thing- occasionally the same movie appears in both scripts, for example the first instance picks movie 3 of 4 and th second instance does the same. What I need is to somehow make sure that if the first instance of the script picks movie x then the second script will pick any movie EXCEPT movie x. This is the script as it stands: Code:
<script language="JavaScript">
// Generate a Random Number
var randomnumber = Math.round(Math.random()*3);
// Select a swf and execute the corresponding function
if (randomnumber == 1)
{movie1();}
else if (randomnumber == 2)
{movie2();}
else if (randomnumber == 3)
{movie3();}
else {movie4();}
//Functions to write out the correct flash movie resource.
function movie1(){
document.write("<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0\" width=\"120\" height=\"285\"><param name=movie value=\"assets/images/ads/hotels/1.swf\"><param name=quality value=high><embed src=\"assets/images/ads/hotels/1.swf\" quality=high pluginspage=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\" type=\"application/x-shockwave-flash\" width=\"120\" height=\"285\"></embed></object>")
}
function movie2(){
document.write("<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0\" width=\"120\" height=\"285\"><param name=movie value=\"assets/images/ads/hotels/2.swf\"><param name=quality value=high><embed src=\"assets/images/ads/hotels/2.swf\" quality=high pluginspage=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\" type=\"application/x-shockwave-flash\" width=\"120\" height=\"285\"></embed></object>")
}
function movie3(){
document.write("<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0\" width=\"120\" height=\"285\"><param name=movie value=\"assets/images/ads/hotels/3.swf\"><param name=quality value=high><embed src=\"assets/images/ads/hotels/3.swf\" quality=high pluginspage=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\" type=\"application/x-shockwave-flash\" width=\"120\" height=\"285\"></embed></object>")
}
function movie4(){
document.write("<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0\" width=\"120\" height=\"285\"><param name=movie value=\"assets/images/ads/hotels/4.swf\"><param name=quality value=high><embed src=\"assets/images/ads/hotels/4.swf\" quality=high pluginspage=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\" type=\"application/x-shockwave-flash\" width=\"120\" height=\"285\"></embed></object>")
}
</script>
|
|||||||