JavaScript - Javascript Random Script Chooser

Greetings

I'm using a script to display rotating youtube videos in the sidebar of my invision board. The problem is that the random thing causes the same video to be repeated twice in row at times. I need to add a cookie so that no video gets displayed to the same user until all other videos have been displayed. I also look for adding - if possible - a line to count the videos, so that I don't have to edit the number each time I add more videos..

Can someone please help me with that?
Here is the script I'm using:

Code:

<script type="text/javascript">

function rand ( n )
{
  return ( Math.floor ( Math.random ( ) * n + 1 ) );
}

// Store youtube [CHANGES NEEDED IN THE 3 URLS BELOW]
var vids = new Array ( );
vids[0] = "http://www.youtube.com/embed/aF4M0JtoIPk";
vids[1] = "http://www.youtube.com/embed/KMxWhovYfzc";
vids[2] = "http://www.youtube.com/embed/ffZUWZQE0EU";
vids[3] = "http://www.youtube.com/embed/povUgNcf4aI";
vids[4] = "http://www.youtube.com/embed/Zs9u7X0rrd0";
vids[5] = "http://www.youtube.com/embed/D4L0KpqNzkU";
vids[6] = "http://www.youtube.com/embed/Mfdnb0Q7IBM";
vids[7] = "http://www.youtube.com/embed/D-JJpPBjQwI";
vids[8] = "http://www.youtube.com/embed/kn5NSCJ2tiI";
vids[9] = "http://www.youtube.com/embed/BDxDMCWShds";

// Pick a random video from the list
function pick_vid ( )
{
  var numberOfImages = 10; //[CHANGE THE 3 TO THE TOTAL NUMBER OF VIDS YOU USE]
  var num = rand(numberOfImages)-1;
  
  document.getElementById("random_youtube_vid").src = vids[num];
}
</script>

<script type="text/javascript">window.onload=pick_vid;</script>
<p style="padding: 6px 0;text-align:center">
<iframe id="random_youtube_vid" width="250" height="200" frameborder="0" allowfullscreen></iframe>
</p>

I found another scripts that could be of help, as it uses div and cookies..
But its for general display of anything. It doesn't have the iframe for the video. I don't know how to merge both scripts. Or perhaps you have better ideas..

Code:

<div id="randomdiv1" style="display:none;">
[content for div 1]
</div>
<div id="randomdiv2" style="display:none;">
[content for div 2]
</div>
<div id="randomdiv3" style="display:none;">
[content for div 3]
</div>

<script type="text/javascript" language="JavaScript"><!--
/* Random Div Display
   Version 1.0
   March 9, 2009
   Will Bontrager
   http://www.willmaster.com/
   Copyright 2009 Bontrager Connection, LLC
For information about implementing this software, see the article at
http://www.willmaster.com/library/javascript/random-div-display.php
*/
// One place to customize:
//
// Type the number of div containers to randomly display.
NumberOfDivsToRandomDisplay = 3;
// No other customizations required.
////////////////////////////////////
var CookieName = 'DivRamdomValueCookie';
function DisplayRandomDiv() {
var r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay);
if(NumberOfDivsToRandomDisplay > 1) {
   var ck = 0;
   var cookiebegin = document.cookie.indexOf(CookieName + "=");
   if(cookiebegin > -1) {
          cookiebegin += 1 + CookieName.length;
          cookieend = document.cookie.indexOf(";",cookiebegin);
          if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
          ck = parseInt(document.cookie.substring(cookiebegin,cookieend));
          }
   while(r == ck) { r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay); }
   document.cookie = CookieName + "=" + r;
   }
for( var i=1; i<=NumberOfDivsToRandomDisplay; i++) {
   document.getElementById("randomdiv"+i).style.display="none";
   }
document.getElementById("randomdiv"+r).style.display="block";
}
DisplayRandomDiv();
//--></script>

Many thanks in advance.

Hi,
I am pretty much a noob when it comes to javascript. I am looking for a script that redirects random.html to 1 of 86 predefined pages, randomly. If someone could help me out, that would be great.

Thanks for your help

Hi

I am a complete novice with Javascript.

I posted a question on another site as I want to show a series of 9 images in a random order - ie all 9 images but changing their order every time the page loaded.

Someone responded with the following script:

onload= function(){
var n, pic,
A= [1, 2, 3, 4, 5, 6, 7, 8, 9];// replace integers with urls
var pa= document.getElementById('image_set'); // reference the container element
pa=mr('evalBlock')
while(A.length){
pic=document.createElement('img');
n= Math.floor(Math.random()*A.length);
pic.src= A.splice(n, 1);
pa.appendChild(pic);
}
}

However - I don't know how to put it into my pages to get it to work and they have not replied to my further query.

I think I have to put something in the () after function, also, do the URLs have to be absolute and do they need enclosing in ' or ".
Also what code do I then have to put on the page to call the image?

Would anyone here be able to help?

Many thanks
Carol

I am stuck on some javascript homework I realize it is probably really easy but my stupid textbook is not clear on one point. I have to access code in an external javascript page (random.js) which I have done. But then i have to create a second script element to create the function showlmg() and within that I require statements to declare a variable named imgNumber equal to the value returned by the randomInteger() (which is from the external sheet found in data files from the textbook therefore I know they are right). I am supposed to use 9 as the value of the size parameter in the randomInteger() function. The second statement should be command that writes the following text to the document: <img src='imgNumber.jog' alt= ' '/>. So basically the coding I have done is :

Code:

<script type= "text/javascript" src= random.js"> </script>
<script type="text/javascript">
        function showlmg() {
		
		var imgNumber= randomInteger(9);// Return a random number from 0 to 9.
		document.write("<img src='imgNumber.jpg' alt=''/>");
		}
     </script>

all in the head of the document and then
Code:

function randomInteger(size) {
   return Math.floor((size+1)*Math.random());} from the external file.

and

Code:

<tr>
   <td colspan="2" class="center">
   <script type= "text/javascript">
   showlmg();
   showlmg();
   showlmg();
   showlmg();
   showlmg();
   </script>
   </td>
</tr>

to post in a table on the page... I believe the issue is in the declaring a variable the is equal to the result of the function random integer which the text book or anywhere that I can find online fails to explain how to do. Thank you.

Random non-repeating images script.

Hope this helps someone... you can see an example at http://www.empireelite.org/. Refresh and you'll see the PS3 boxarts on the top left will show randomly, with no repeats.

In your html page
in head tag
Code:

<style>
img.boxart{
margin:0;
border: none;
display:block;
float:left}</style>
<script type="text/javascript" src="ps3boxart.js"></script>

in body tag (place whereever in the body you want the pictures to show)
Code:

<script type="text/javascript"> 
randomorder(ps3ba, '') 
</script>

In a seperate .js file in the same folder (this one I have as ps3boxart.js)
Code:

var ps3ba=new Array()
ps3ba[0]='<a href="http://www.amazon.com/God-War-III-Playstation-3/dp/B000ZK9QCS/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261056951&sr=8-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/gow3.jpg" class="boxart" title="God of War III"></a>'
ps3ba[1]='<a href="http://www.amazon.com/Heavy-Rain-Playstation-3/dp/B002CZ38KA/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059415&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/hr.jpg" class="boxart" title="Heavy Rain"></a>'
ps3ba[2]='<a href="http://www.amazon.com/Killzone-2-Playstation-3/dp/B000FQBF1M/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059510&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/kz2.jpg" class="boxart" title="Killzone 2"></a>'
ps3ba[3]='<a href="http://www.amazon.com/LittleBigPlanet-Game-Year-Playstation-3/dp/B002ELCUUG/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059556&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/lbp.jpg" class="boxart" title="LittleBigPlanet"></a>'
ps3ba[4]='<a href="http://www.amazon.com/Metal-Gear-Solid-Patriots-Playstation-3/dp/B000FQ2D5E/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059605&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/mgs4.jpg" class="boxart" title="Metal Gear Solid 4"></a>'
ps3ba[5]='<a href="http://www.amazon.com/Ratchet-Clank-Future-Crack-Playstation-3/dp/B00275A7LI/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059662&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/rcfacit.jpg" class="boxart" title="Ratchet & Clank Futu  A Crack In Time"></a>'
ps3ba[6]='<a href="http://www.amazon.com/Resistance-Fall-Man-playstation-3/dp/B000JLIXIG/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059703&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/rfom.jpg" class="boxart" title="Resistance: Fall of Man"></a>'
ps3ba[7]='<a href="http://www.amazon.com/Uncharted-Drakes-Fortune-Playstation-3/dp/B000UW21A0/ref=sr_1_2?ie=UTF8&s=videogames&qid=1261059750&sr=1-2"><img src="http://www.empireelite.org/images/boxart/ps3/mini/uc.jpg" class="boxart" title="Uncharted: Drakes Fortune"></a>'
ps3ba[8]='<a href="http://www.amazon.com/Uncharted-2-Among-Thieves-Playstation-3/dp/B001JKTC9A/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059750&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/uc2.jpg" class="boxart" title="Uncharted 2: Among Thieves"></a>'

function randomorder(targetarray) {
  var randomorder=new Array()
  var the_one
  var z=0
  for (i=0;i<targetarray.length;i++)
  randomorder[i]=i

  while (z<targetarray.length) {
    the_one=Math.floor(Math.random()*targetarray.length)
    if (targetarray[the_one]!="_selected!"){
      document.write(targetarray[the_one])
      targetarray[the_one]="_selected!"
      z++
    }
  }
}

Then obviously, you would use this as a baseline and change your .js file name to whatever your pictures are for, like ads.js or whichever. Change the links in ahref to whereever you want each page to link. Change the image locations in img src to whereever your images are saved. Remember, where it says var z=0... this is where you hide extra random images. For example, my 200px cell only fits 9 22px wide images (they equal 198px). I only have 9 in my ps3 boxart image folder. If I want 50 in there... I would upload the pics to the folder with the other ones, add them to the list in the .js file. Such as ps3ba[9]=, ps3ba[10]=, etc. up to [49] (49 + 1 for [0] = 50). Then since I can only fit 9 in my cell, I would have to change the variable to var z=41 (to hide 41 of them and only show 9).

Hope this helps somebody. Good luck.

I have to create a website as a project for my university course. Said course has nothing at all to do with computers really so it's really throwing us into the deep end as the majority of us have/had no interest in this particular field.

Regardless, I am creating a website that uses the Random Quote Generator Javascript that I copied from the Hotscripts website. The code details are below and my question is: is there any way I could change the formatting for each quote? For example, change quote 1 to be, say, yellow or bold and change quote 3 to be aligned right and blue? I mainly want to change the colour for each quote but having any other info on how to format it would be really helpful.

Code:

var quotes=new Array();
quotes[0] = "This is quote 1.";
quotes[1] = "This is quote 2.";
quotes[2] = "This is quote 3.";

var q = quotes.length;
var whichquote=Math.round(Math.random()*(q-1));
function showquote(){document.write(quotes[whichquote]);}
showquote();

Also if you could put it into total idiot-speak for me I'd be oh so grateful.

hi I'm just new to java and I'm trying to write a script that will shuffle the information in a array with no gaps and no repeats. below is that code that i have so far. thanks ben
[CODE]
//constants
SWAPS_TO_BE_MADE = 30;
//variables
var myArray = new Array('Ace',2,3,4,5,6,7,8,9,10,'Jack','Queen','King'); // the array that entities will be shuffled from
var temp = 0;
var outPutArray = new Array (12);
var arrayLength = myArray.length;
var index = 0;
var swapIndex = 0;
var self_swaps = 0;
var counter = 0;

temp=myArray[swapIndex]

document.write('<h1>Array shuffling</h1>');
document.write('<p>Before shuffle: '+myArray+'</p>');

//loop
while(counter < SWAPS_TO_BE_MADE) {
index =Math.floor(Math.random()*arrayLength);
swapIndex =Math.floor(Math.random()*arrayLength);
var index_value = index;
var range = 1;
myArray.splice(index_value,range,'spilced');
outPutArray[swapIndex] = index;


if(index == swapIndex) {
self_swaps++;
}
counter++;
index = (index + 1 % arrayLength);
swapIndex= (swapIndex + 1 % arrayLength);
}

document.write('<p>After shuffle: '+outPutArray+'</p>');
document.write('<p>After shuffle: '+myArray+'</p>');
[ICODE]

This script isnt working. Im not sure what im doing wrong. forgive me i havent programmed in javascript before.


titles.js
Code:

<script type="text/javascript" language="javascript">   
    <!--//  
 function random_Title(){
 if (parseInt(navigator.appVersion) >= 4) {  
        var num = 3;  
        var rantitle = new Array(num+1);  
        rantitle[1] = "Random Title1";  
        rantitle[2] = "Random Title1";  
        rantitle[3] = "Random Title1";  
        ranNumber = parseInt(num * Math.random() + 1);  
        document.title = rantitle[ranNumber];  
    }  
    //-->   
 }
</script>

html page
Code:

<html>
<head>

<script type='text/javascript' src='http://www.flashmajic.com/Google/titles.js'></script>
<script>
  document.title =   random_Title() ;  
</script>
</head

Hi,

I wonder if someone can help me. I'm building a site which has a random image generated on the page each time it loads. It does work at the moment, but I'd like it to be xhtml compliant.

Currently the page loads the javascript from an external .js file, but it needs a line in the body of the page to make it work fully. This line is currently causing 15 errors when I try and validate it.

The line is as follows:

<script type="text/javascript">document.writeln('<td'+'><img src="'+xoxo[choice]+'"height=26 width=970 border=0 ><'+'/TD>');</script>

Does anyone have any suggestions about how to make this line compliant?

I'm a bit of a beginner, so any help would be greatly appreciated!

***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>

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 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 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

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 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>