Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Random Text presentation 1

Status
Not open for further replies.
tkontn

tkontn

Technical User
May 10, 2006
1
US
Hello...I've been trying to find a way to randomly rotate 10 text links into 10 available positions. One any given page load there would only be 10 slots to be filled with 10 possible text entries. All done at random on any given pageload. Any help would be greatly appreciated.

The code for the template looks like this thus far.

<html>
<head>
<title>Preview</title>
<LINK rel='stylesheet' href='/css/dcStyle.css' type='text/css'></LINK>
<script language='JavaScript'>
function myclose() { document.close = myclose;} function myrefresh(){ if(window.name.indexOf('refreshed') < 0){ window.location.reload(); window.name += 'refreshed'}}
</script>
</head>
<body onLoad="myrefresh()" leftmargin='0' topmargin='0'>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>MGM Sponsorship</title>
<STYLE TYPE="text/css">
a
{
color: #0033CC;
text-decoration: underline;
}

a:hover
{
color: #666666;
text-decoration: underline;
}

table.mgm
{
background-color:#E8D8C8;
border:1px solid #666666;
text-align: left;
}

.head
{
font-family: Tahoma, Arial;
font-size: 11px;
font-weight : bold;
color: #333333;
text-align: left;
padding-top: 5px;
padding-bottom: 3px;
margin: 0 auto;
}

.offer
{
font-family: Tahoma, Arial;
font-size: 11px;
font-weight : bold;
color: #131313;
text-align: left;
padding-bottom: 5px;
margin: 0 auto;
}
IMG.thumbnail {
border: 0pt;
padding: 0;
}
</STYLE>
</head>

<body>
<table class="mgm" width="160" cellpadding="6" cellspacing="0">
<tr>
<td>
<div class="offer">link 1</div>
<div class="offer">link 2</div>
<div class="offer">link 3</div>
<div class="offer">link 4</div>
<div class="offer">link 5</div>
<div class="offer">link 6</div>
<div class="offer">link 7</div>
<div class="offer">link 8</div>
<div class="offer">link 9</div>
<div class="offer">link 10</div>

</td>
</tr>
</table>


</body>
</html>
</body>
</html>
 
Sort by date Sort by votes
This is not ideal but it works on IE
Place it just after the DIV's.

It incorporates a script contribnuted to the javascript FAQ area ...

Future agility: The sample table has link text in tblrowselected[0] - it is set up to allow a link with a href in tblrowselected[1] and a title in tblrowselected[2]

<script language="javascript">

function getRandUpTo(tarr, n) {

// returns an array of n unique integer values
// closen randomly from 0 to n-1

var usedup = '' ;
var loopcntl = 0 ;

for (var i = 0; i < n; i++)
{
loopcntl++; if(loopcntl>500){alert('?'); return;}
var gnval = Math.floor(Math.random()*n+1) - 1 ;
var usedornot = '$' + gnval + '$' ;
if (usedup.indexOf(usedornot)>-1)
{ i = i-1 ; continue }

usedup += usedornot ;
tarr[tarr.length] = gnval ;

}

return 0 ;


}

// .. getElementsByClassName FROM TECHTIPS FAQ faq216-6104
// Thanks to BillyRayPreachersSon

function getElementsByClassName(classToFind, baseElement) {
if (arguments.length == 1) baseElement = document;
var tempElements = baseElement.getElementsByTagName('*');

// getElementsByTagName('*') doesn't work in IE 5.0 or IE 5.5 (Win)... so use this as a backup
if (!tempElements.length) if (document.body) if (document.body.all) tempElements = document.body.all;

var matchingElements = [];
for (var loop=0; loop<tempElements.length; loop++) {
if ((' ' + tempElements[loop].className + ' ').indexOf(' ' + classToFind + ' ') != -1) {
matchingElements[matchingElements.length] = tempElements[loop];
}
}
return(matchingElements);
}





var vlinkArr = new Array();
var vitem = -1 ;

vitem++; vlinkArr[vitem]=new Array("Google"," The Web with Google") ;
vitem++; vlinkArr[vitem]=new Array("link1","href1","title1") ;
vitem++; vlinkArr[vitem]=new Array("link2","href2","title2") ;
vitem++; vlinkArr[vitem]=new Array("link3","href3","title3") ;
vitem++; vlinkArr[vitem]=new Array("link4","href4","title4") ;
vitem++; vlinkArr[vitem]=new Array("link5","href5","title5") ;
vitem++; vlinkArr[vitem]=new Array("link6","href6","title6") ;
vitem++; vlinkArr[vitem]=new Array("link7","href7","title9") ;
vitem++; vlinkArr[vitem]=new Array("link8","href8","title8") ;
vitem++; vlinkArr[vitem]=new Array("link9","href9","title9") ;


var rsequence = new Array();
var tnum = getRandUpTo(rsequence, 10) ;
var getoffers = getElementsByClassName("offer") ;

for (var t=0 ; t<getoffers.length; t++)
{
var selectrandomly = rsequence[t] ;
var tblrowselected = vlinkArr[selectrandomly] ;
var txtselected = tblrowselected[0] ;
getoffers[t].innerText = txtselected ;

}


</script>
 
Upvote 0 Downvote
Heya friendlyposter... good reply. Here's a trick that will save you some hassle when populating arrays:
Code: 
var vlinkArr = new Array();
vlinkArr[vlinkArr.length] = 'stuff - 1';
vlinkArr[vlinkArr.length] = 'stuff - 2';
vlinkArr[vlinkArr.length] = 'stuff - 3';
It just saves you having to fiddle with using a variable - it's no more or less correct (imho)... just easier to implement.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
I recognise that code. Good to see someone reads my FAQs :)

tkontn,

You should fix some of the major errors with your template. You have multiple html, head, and body tags, and your DOCTYPE is in the wrong place (IE at least needs this to be the very first line in your HTML file, otherwise it will be in "quirks" mode).

You should fix these, or else you can't really expect your code to look good in any browser. See my post here thread215-1228657 for information about validating your code.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

keisha1
  • Locked
  • Question
How can I append/insert multiple text files into one .dbf file using java script /html command
Replies
1
Views
169
Samthyr
Samthyr
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
1K
ggriffit
ggriffit
waubain
  • Locked
  • Question
Send array data to text file on click of button 1
Replies
2
Views
143
waubain
waubain
waubain
  • Locked
  • Question
Find max value of element in array located in text file 1
Replies
2
Views
134
waubain
waubain
Pudsters
  • Locked
  • Question
Populate text box based on other textbox 1
Replies
2
Views
211
Pudsters
Pudsters

Part and Inventory Search

Sponsor

Back
Top