Rotating content for table cells

Royal Denning

I am designing a table with 2 columns and 20 rows. I want to insert
small images (each with a link) and a text title in each cell of the
table.

On refresh of the page, I would like to have the contents of each cell
(picture/link and associated text) rotate randomly.

Note that the text titles must remain with their associated picture
and link (I don't want to scramble all the elements--just rotate the
entire contents of the table cell).

Is there a script that will accomplish this? Thanks.

Jul 23 '05 #1

Subscribe Post Reply

6918

McKirahan

"Royal Denning" <ro***********@hotmail.com> wrote in message
news:4e*************************@posting.google.co m...

I am designing a table with 2 columns and 20 rows. I want to insert
small images (each with a link) and a text title in each cell of the
table.

On refresh of the page, I would like to have the contents of each cell
(picture/link and associated text) rotate randomly.

Note that the text titles must remain with their associated picture
and link (I don't want to scramble all the elements--just rotate the
entire contents of the table cell).

Is there a script that will accomplish this? Thanks.

Perhaps this will give you some ideas.

Test "as is"; watch for word-wrap.

<html>
<head>
<title>rotate26.htm</title>
<script type="text/javascript">
function letters() {
var abc = "abcdefghijklmnopqrstuvwxyz";
var now = new Date();
var pos = now.getSeconds()%26;
var let = abc.substr(pos);
if (pos > 0) let += abc.substring(0,pos);
alert(pos + "\t" + let);
var url = "http://205.200.38.172/aagraphics/letters/letter?.jpg";
var src;
var txt = new Array();
var img = new Array();
for (var i=0; i<let.length; i++) {
src = "<a href='" + url + "' target='_blank'>"
src += "<img src='" + url + "'";
src += "border='0' width='109' height='83' alt='?'></a>";
img[i] = src.replace(/\?/g,let.charAt(i));
txt[i] = "<br>The Letter " + let.charAt(i).toUpperCase();
}
var j = 0;
var tab = new Array();
tab[j++] = "<table border='0' cellpadding='0' cellspacing='0'
width='218'>";
var mid = let.length/2;
for (var k=0; k<mid; k++) {
tab[j++] = "<tr height='100' valign='top'>";
tab[j++] = " <th width='109'>" + img[k] + txt[k] + "</th>";
tab[j++] = " <th width='109'>" + img[k+mid] + txt[k+mid] +
"</th>";
tab[j++] = "</tr>";
}
tab[j++] = "</table>";
document.write(tab.join(""));
}
letters();
</script>
</head>
<body>
</body>
</html>

Jul 23 '05 #2

Royal Denning

Thanks, McKirahan.

I'm still a bit of a newbie at Javascripting, so where do I enter the
values for the cells, images, text and urls?"

Jul 23 '05 #3

McKirahan

"Royal Denning" <ro***********@hotmail.com> wrote in message
news:4e**************************@posting.google.c om...

Thanks, McKirahan.

I'm still a bit of a newbie at Javascripting, so where do I enter the
values for the cells, images, text and urls?"

This should be a little clearer.

<html>
<head>
<title>rotate10.htm</title>
<script type="text/javascript">
function numbers() {
var url = "http://www.scri8e.com/TTF/alphas/redgelharts/";
var gif = new Array();
gif[0] = "0.gif|Zero";
gif[1] = "1.gif|One";
gif[2] = "2.gif|Two";
gif[3] = "3.gif|Three";
gif[4] = "4.gif|Four";
gif[5] = "5.gif|Five";
gif[6] = "6.gif|Six";
gif[7] = "7.gif|Seven";
gif[8] = "8.gif|Eight";
gif[9] = "9.gif|Nine";
for (var i=0; i<gif.length; i++) {
gif[i] = url + gif[i];
}
var hig = 82;
var wid = 46;
var wyd = wid*2;
var ten = "0123456789";
var mod = ten.length;
var now = new Date();
var pos = now.getSeconds()%mod;
var num = ten.substr(pos);
if (pos > 0) num += ten.substring(0,pos);
var col = new Array();
var src;
var sub;
var tmp;
for (var j=0; j<num.length; j++) {
sub = num.charAt(j);
tmp = gif[sub].split("|");
src = "<a href='" + tmp[0] + "' target='_blank'>"
src += "<img src='" + tmp[0] + "'";
src += "border='0' width='" + wid + "' height='" + hig + "'
alt=''></a>";
src += "<br>" + tmp[1];
col[j] = src;
}
var k = 0;
var tab = new Array();
tab[k++] = "<table border='0' cellpadding='0' cellspacing='0'
width='" + wyd + "'>";
var mid = num.length/2;
for (var l=0; l<mid; l++) {
tab[k++] = "<tr height='" + hig + "' valign='top'>";
tab[k++] = " <th width='" + wid + "'>" + col[l] + "</th>";
tab[k++] = " <th width='" + wid + "'>" + col[l+mid] + "</th>";
tab[k++] = "</tr>";
}
tab[k++] = "</table>";
document.write(tab.join(""));
}
numbers();
</script>
</head>
<body>
</body>
</html>

Modify the "gif" array to identify each image followed by a "|" followed by
the text for the image. Change "wid" and "hig" to the "width" and "height"
of the images. This will handle rotating ten images; I'll leave it toyou to
handle twenty.

Jul 23 '05 #4

Royal Denning

I tried the revised script on a test page and it doesn't seem to be
working. Here is the page in question:

http://www.topsearchspot.com/rotate10.htm

"Royal Denning" <ro***********@hotmail.com> wrote in message
news:4e**************************@posting.google.c om...
Thanks, McKirahan.

I'm still a bit of a newbie at Javascripting, so where do I enter the
values for the cells, images, text and urls?"

This should be a little clearer.

Jul 23 '05 #5

McKirahan

"Royal Denning" <ro***********@hotmail.com> wrote in message
news:4e**************************@posting.google.c om...

I tried the revised script on a test page and it doesn't seem to be
working. Here is the page in question:

http://www.topsearchspot.com/rotate10.htm

"Royal Denning" <ro***********@hotmail.com> wrote in message
news:4e**************************@posting.google.c om...
Thanks, McKirahan.

I'm still a bit of a newbie at Javascripting, so where do I enter the
values for the cells, images, text and urls?"

This should be a little clearer.

Why did you add this?

<table width="62" border="0" height="62">
<tr>
<td><img src="0.gif" width="62" height="62"></td>
<td><img src="1.gif" width="62" height="62"></td>
</tr>
<tr>
<td><img src="2.gif" width="62" height="62"></td>
<td><img src="3.gif" width="62" height="62"></td>
</tr>
<tr>
<td><img src="4.gif" width="62" height="62"></td>
<td><img src="5.gif" width="62" height="62"></td>
</tr>
<tr>
<td><img src="6.gif" width="62" height="62"></td>
<td><img src="7.gif" width="62" height="62"></td>
</tr>
<tr>
<td><img src="8.gif" width="62" height="62"></td>
<td><img src="9.gif" width="62" height="62"></td>
</tr>
</table>

The script generates the table.

Jul 23 '05 #6

McKirahan

"McKirahan" <Ne**@McKirahan.com> wrote in message
news:5Tvqd.682563$8_6.324108@attbi_s04...

"Royal Denning" <ro***********@hotmail.com> wrote in message
news:4e**************************@posting.google.c om...
I tried the revised script on a test page and it doesn't seem to be
working. Here is the page in question:

http://www.topsearchspot.com/rotate10.htm

"Royal Denning" <ro***********@hotmail.com> wrote in message
news:4e**************************@posting.google.c om...
> Thanks, McKirahan.
>
> I'm still a bit of a newbie at Javascripting, so where do I enter the > values for the cells, images, text and urls?"

This should be a little clearer.

Why did you add this?

<table width="62" border="0" height="62">
<tr>
<td><img src="0.gif" width="62" height="62"></td>
<td><img src="1.gif" width="62" height="62"></td>
</tr>
<tr>
<td><img src="2.gif" width="62" height="62"></td>
<td><img src="3.gif" width="62" height="62"></td>
</tr>
<tr>
<td><img src="4.gif" width="62" height="62"></td>
<td><img src="5.gif" width="62" height="62"></td>
</tr>
<tr>
<td><img src="6.gif" width="62" height="62"></td>
<td><img src="7.gif" width="62" height="62"></td>
</tr>
<tr>
<td><img src="8.gif" width="62" height="62"></td>
<td><img src="9.gif" width="62" height="62"></td>
</tr>
</table>

The script generates the table.

Your version of the script did not work because of the line:
src += "border='0' width='"62"' height='"62"' alt=''></a>";
which should be
src += "border='0' width='" + wid + "' height='" + hig + "'
alt=''></a>";

Also, you had two <title> tags.

Try this:

<html>
<head>
<title>rotate10.html</title>
<script type="text/javascript">
function numbers() {
var url = "http://www.topsearchspot.com/";
var gif = new Array(10);
gif[0] = "0.gif|Zero";
gif[1] = "1.gif|One";
gif[2] = "2.gif|Two";
gif[3] = "3.gif|Three";
gif[4] = "4.gif|Four";
gif[5] = "5.gif|Five";
gif[6] = "6.gif|Six";
gif[7] = "7.gif|Seven";
gif[8] = "8.gif|Eight";
gif[9] = "9.gif|Nine";
for (var i=0; i<gif.length; i++) {
gif[i] = url + gif[i];
}
var hig = 62;
var wid = 62;
var wyd = wid*2;
var ten = "0123456789";
var mod = ten.length;
var now = new Date();
var pos = now.getSeconds()%mod;
var num = ten.substr(pos);
if (pos > 0) num += ten.substring(0,pos);
var col = new Array();
var src;
var sub;
var tmp;
for (var j=0; j<num.length; j++) {
sub = num.charAt(j);
tmp = gif[sub].split("|");
src = "<a href='" + tmp[0] + "' target='_blank'>"
src += "<img src='" + tmp[0] + "'";
src += "border='0' width='" + wid + "' height='" + hig + "'
alt=''></a>";
src += "<br>" + tmp[1];
col[j] = src;
}
var k = 0;
var tab = new Array();
tab[k++] = "<table border='0' cellpadding='0' cellspacing='0'
width='" + wyd + "'>";
var mid = num.length/2;
for (var l=0; l<mid; l++) {
tab[k++] = "<tr height='" + 62 + "' valign='top'>";
tab[k++] = " <th width='" + 62 + "'>" + col[l] + "</th>";
tab[k++] = " <th width='" + 62 + "'>" + col[l+mid] + "</th>";
tab[k++] = "</tr>";
}
tab[k++] = "</table>";
document.write(tab.join(""));
}
numbers();
</script>
</head>
<body>
</body>
</html>

Jul 23 '05 #7

Royal Denning

McK: It worked! Thanks so much.

My only remaining questions:

How do I plug in the separate URLS (relative links, such at one.htm,
two.htm, etc.) to each image,

and can I use the same script twice on a page (using different array
values, such at 11-20?

I really appreciate your patience and guidance on this.

Jul 23 '05 #8

McKirahan

"Royal Denning" <ro***********@hotmail.com> wrote in message
news:4e**************************@posting.google.c om...

McK: It worked! Thanks so much.

My only remaining questions:

How do I plug in the separate URLS (relative links, such at one.htm,
two.htm, etc.) to each image,

and can I use the same script twice on a page (using different array
values, such at 11-20?

I really appreciate your patience and guidance on this.

Not the most elegant code ....

<html>
<head>
<title>rotate20.htm</title>
<script type="text/javascript">
function numbers() {
var url = "http://www.topsearchspot.com/";
var gif = new Array(10);
// gif[#] = image | text | page
gif[0] = "0.gif|Zero|www.Google.com?00";
gif[1] = "1.gif|One|www.Google.com?01";
gif[2] = "2.gif|Two|www.Google.com?02";
gif[3] = "3.gif|Three|www.Google.com?03";
gif[4] = "4.gif|Four|www.Google.com?04";
gif[5] = "5.gif|Five|www.Google.com?05";
gif[6] = "6.gif|Six|www.Google.com?06";
gif[7] = "7.gif|Seven|www.Google.com?07";
gif[8] = "8.gif|Eight|www.Google.com?08";
gif[9] = "9.gif|Nine|www.Google.com?09";
gif[10] = "0.gif|Ten|www.Google.com?10";
gif[11] = "1.gif|Eleven|www.Google.com?11";
gif[12] = "2.gif|Twelve|www.Google.com?12";
gif[13] = "3.gif|Thirteen|www.Google.com?13";
gif[14] = "4.gif|Fourteen|www.Google.com?14";
gif[15] = "5.gif|Fifteen|www.Google.com?15";
gif[16] = "6.gif|Sixteen|www.Google.com?16";
gif[17] = "7.gif|Seventeen|www.Google.com?17";
gif[18] = "8.gif|Eighteen|www.Google.com?18";
gif[19] = "9.gif|Nineteen|www.Google.com?19";
for (var i=0; i<gif.length; i++) {
gif[i] = url + gif[i];
}
var hig = 62;
var wid = 62;
// Change values above but not below.
var wyd = wid*2;
var xix = "0001020304050607080910111213141516171819";
var mod = xix.length/2;
var now = new Date();
var pos = now.getSeconds()%mod;
var num = xix.substr(pos*2-2);
if (pos > 0) num += xix.substring(0,pos*2-2);
var col = new Array();
var src;
var sub;
var tmp;
var k = 0;
for (var j=0; j<num.length; j++) {
sub = parseInt(num.substring(j,j+2),10);
tmp = gif[sub].split("|");
src = "<a href='http://" + tmp[2] + "' target='_blank'>"
src += "<img src='" + tmp[0] + "'";
src += "border='0' width='" + wid + "' height='" + hig + "'
alt=''></a>";
src += "<br>" + tmp[1];
col[k] = src;
j++;
k++;
}
var l = 0;
var tab = new Array();
tab[l++] = "<table border='0' cellpadding='0' cellspacing='0'
width='" + wyd + "'>";
var mid = num.length/4;
for (var m=0; m<mid; m++) {
tab[l++] = "<tr height='" + hig + "' valign='top'>";
tab[l++] = " <th width='" + wid + "'>" + col[m] + "</th>";
tab[l++] = " <th width='" + wid + "'>" + col[m+mid] + "</th>";
tab[l++] = "</tr>";
}
tab[l++] = "</table>";
document.write(tab.join(""));
}
numbers();
</script>
</head>
<body>
</body>
</html>

The twenty "gif" entries (0 - 19) contain three elements seperated by "|"
are the image name ("0.gif"), the text (e.g. "One"), and the page (e.g.
www.Google.com?01 -- the "http://" is prepended later). The page can be any
valid url; for example, "www.Google.com/index.html".

Change the "gif" array as well as "url", "wid", and "hig" to suit your
needs. This presumes that all images are in the same folder specified by
the "url" and that all images are the same width ("wid") and height ("hig").

Jul 23 '05 #9

Dr John Stockton

JRS: In article <Nzwqd.160663$HA.32847@attbi_s01>, dated Mon, 29 Nov
2004 03:20:18, seen in news:comp.lang.javascript, McKirahan
<Ne**@McKirahan.com> posted :

function numbers() {
var url = "http://www.topsearchspot.com/";
var gif = new Array(10);
gif[0] = "0.gif|Zero";
gif[1] = "1.gif|One";
gif[2] = "2.gif|Two";
gif[3] = "3.gif|Three";
gif[4] = "4.gif|Four";
gif[5] = "5.gif|Five";
gif[6] = "6.gif|Six";
gif[7] = "7.gif|Seven";
gif[8] = "8.gif|Eight";
gif[9] = "9.gif|Nine";
for (var i=0; i<gif.length; i++) {
gif[i] = url + gif[i];
}

Only a list of the names of the digits is needed; javascript can
assemble the rest when needed.

var Digits = ["Zero", ..., "Nine"] // is simpler.
--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

Jul 23 '05 #10

McKirahan

"Dr John Stockton" <sp**@merlyn.demon.co.uk> wrote in message
news:GL**************@merlyn.demon.co.uk...

JRS: In article <Nzwqd.160663$HA.32847@attbi_s01>, dated Mon, 29 Nov
2004 03:20:18, seen in news:comp.lang.javascript, McKirahan
<Ne**@McKirahan.com> posted :
function numbers() {
var url = "http://www.topsearchspot.com/";
var gif = new Array(10);
gif[0] = "0.gif|Zero";
gif[1] = "1.gif|One";
gif[2] = "2.gif|Two";
gif[3] = "3.gif|Three";
gif[4] = "4.gif|Four";
gif[5] = "5.gif|Five";
gif[6] = "6.gif|Six";
gif[7] = "7.gif|Seven";
gif[8] = "8.gif|Eight";
gif[9] = "9.gif|Nine";
for (var i=0; i<gif.length; i++) {
gif[i] = url + gif[i];
}

Only a list of the names of the digits is needed; javascript can
assemble the rest when needed.

var Digits = ["Zero", ..., "Nine"] // is simpler.

Simpler, yes -- but not applicable. If you had read the complete thread you
would see that my post was just an example of how to handle multiple images
and their corresponding text.

Jul 23 '05 #11

Royal Denning

I wasn't looking for terribly elegant code, as long as it works.

Many thanks!

"McKirahan" <Ne**@McKirahan.com> wrote in message news:<bzHqd.117307$5K2.72093@attbi_s03>...

"Royal Denning" <ro***********@hotmail.com> wrote in message
news:4e**************************@posting.google.c om...
McK: It worked! Thanks so much.

My only remaining questions:

How do I plug in the separate URLS (relative links, such at one.htm,
two.htm, etc.) to each image,

and can I use the same script twice on a page (using different array
values, such at 11-20?

I really appreciate your patience and guidance on this.

Not the most elegant code ....

Jul 23 '05 #12

RobB

"McKirahan" <Ne**@McKirahan.com> wrote in message news:<l7Kqd.118122$5K2.23354@attbi_s03>...

"Dr John Stockton" <sp**@merlyn.demon.co.uk> wrote in message
news:GL**************@merlyn.demon.co.uk...
JRS: In article <Nzwqd.160663$HA.32847@attbi_s01>, dated Mon, 29 Nov
2004 03:20:18, seen in news:comp.lang.javascript, McKirahan
<Ne**@McKirahan.com> posted :
function numbers() {
var url = "http://www.topsearchspot.com/";
var gif = new Array(10);
gif[0] = "0.gif|Zero";
gif[1] = "1.gif|One";
gif[2] = "2.gif|Two";
gif[3] = "3.gif|Three";
gif[4] = "4.gif|Four";
gif[5] = "5.gif|Five";
gif[6] = "6.gif|Six";
gif[7] = "7.gif|Seven";
gif[8] = "8.gif|Eight";
gif[9] = "9.gif|Nine";
for (var i=0; i<gif.length; i++) {
gif[i] = url + gif[i];
}

Only a list of the names of the digits is needed; javascript can
assemble the rest when needed.

var Digits = ["Zero", ..., "Nine"] // is simpler.

Simpler, yes -- but not applicable. If you had read the complete thread you
would see that my post was just an example of how to handle multiple images
and their corresponding text.

Hmm...what about those with JS disabled? Not much help...

<!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" xml:lang="en" lang="en">
<head>
<title>untitled</title>

<base href="http://i.office.microsoft.com/i/0000/MR/" />

<style type="text/css">

body {
font-size: 100%;
margin: 12px;
background: #000;
}
#container {
width: 458px;
margin: 10px auto;
}
#rotator1, #rotator2 {
float: left;
margin: 10px;
border-collapse: collapse;
border: 4px #fff;
border-style: groove ridge groove groove;
background: #000;
}
#rotator1 td, #rotator2 td {
text-align: center;
padding: 1px;
margin: 0;
}
td a:link, td a:visited {
font: normal 60% verdana, sans-serif;
color: #fff;
text-decoration: none;
}
td a:hover {
text-transform: uppercase;
}
td a img {
display: block;
border-width: 0;
}

</style>
<script type="text/javascript">
//<![CDATA[

var table_ids = [ 'rotator1' , 'rotator2' ];

function Rotator(table_id)
{
this.table = document.getElementById(table_id);
this.cells = this.table.getElementsByTagName('TD');
this.ncells = this.cells.length;
this.pix = [];
this.txt = [];
this.hrefs = [];
this.idx_array = new Array(this.ncells);

function read()
{
var cell, n = 0;
while (cell = this.cells.item(n++))
{
this.pix.push(cell.getElementsByTagName('IMG')[0].src);
this.txt.push(cell.getElementsByTagName('A')[0].lastChild.nodeValue);
this.hrefs.push(cell.getElementsByTagName('A')[0].href);
}
this.shuffle();
}
this.read = read;

function shuffle()
{
var idx, i, ind1, ind2, temp;
for (i = 0; i < this.ncells; ++i)
this.idx_array[i] = i;
for (i = 0; i < this.ncells; ++i)
{
ind1 = Math.floor(Math.random() * this.ncells);
ind2 = Math.floor(Math.random() * this.ncells);
temp = this.idx_array[ind1];
this.idx_array[ind1] = this.idx_array[ind2];
this.idx_array[ind2] = temp;
}
this.write();
}
this.shuffle = shuffle;

function write()
{
var cell, el, idx, n = 0;
while (cell = this.cells.item(n))
{
idx = this.idx_array[n++];
cell.getElementsByTagName('IMG')[0].src = this.pix[idx];
(el = cell.getElementsByTagName('A')[0]).lastChild.nodeValue =
this.txt[idx];
el.href = this.hrefs[idx];
}
this.table.style.visibility = 'visible';
}
this.write = write;

this.read();
}

onload = function()
{
if (document.getElementById && document.createElement)
for (var i = 0; i < table_ids.length; ++i)
new Rotator(table_ids[i]);
}

/* set initial visibility to hidden */
if (document.getElementById && document.createElement)
{
for (var s = '', i = 0; i < table_ids.length; ++i)
s += '#' + table_ids[i] + ',';

document.write(

'<style type="text/css">' ,
s.replace(/,$/, '') ,
'{visibility:hidden;}' ,
'</style>'

);
}

/* demo only */
function dummy(link)
{
alert(link.href);
return false;
}

//]]>
</script>
</head>
<body>
<div id="container">
<table id="rotator1">
<tbody>
<tr>
<td><a href="#displays" onclick="return dummy(this)"><img
src="j0399/j0399836.gif" />displays</a></td>
<td><a href="#diskette" onclick="return dummy(this)"><img
src="j0323/j0323552.gif" />diskette</a></td>
</tr>
<tr>
<td><a href="#floppies" onclick="return dummy(this)"><img
src="j0233/j0233109.gif" />floppies</a></td>
<td><a href="#monitor" onclick="return dummy(this)"><img
src="j0316/j0316344.gif" />monitor</a></td>
</tr>
<tr>
<td><a href="#mouse" onclick="return dummy(this)"><img
src="j0382/j0382582.gif" />mouse</a></td>
<td><a href="#dishes" onclick="return dummy(this)"><img
src="j0237/j0237779.gif" />dishes</a></td>
</tr>
<tr>
<td><a href="#cams" onclick="return dummy(this)"><img
src="j0396/j0396846.gif" />cams</a></td>
<td><a href="#pcs" onclick="return dummy(this)"><img
src="j0399/j0399981.gif" />pcs</a></td>
</tr>
<tr>
<td><a href="#birds" onclick="return dummy(this)"><img
src="j0198/j0198718.gif" />birds</a></td>
<td><a href="#recycle" onclick="return dummy(this)"><img
src="j0323/j0323582.gif" />recycle</a></td>
</tr>
</tbody>
</table>
<table id="rotator2">
<tbody>
<tr>
<td><a href="#kitty" onclick="return dummy(this)"><img
src="j0326/j0326434.gif" />kitty</a></td>
<td><a href="#kite" onclick="return dummy(this)"><img
src="j0231/j0231947.gif" />kite</a></td>
</tr>
<tr>
<td><a href="#telescope" onclick="return dummy(this)"><img
src="j0287/j0287221.gif" />telescope</a></td>
<td><a href="#keys" onclick="return dummy(this)"><img
src="j0287/j0287325.gif" />keys</a></td>
</tr>
<tr>
<td><a href="#earth" onclick="return dummy(this)"><img
src="j0400/j0400664.gif" />earth</a></td>
<td><a href="#choo-choo" onclick="return dummy(this)"><img
src="j0234/j0234231.gif" />choo-choo</a></td>
</tr>
<tr>
<td><a href="#bus" onclick="return dummy(this)"><img
src="j0395/j0395931.gif" />bus</a></td>
<td><a href="#chips" onclick="return dummy(this)"><img
src="j0318/j0318944.gif" />bull !</a></td>
</tr>
<tr>
<td><a href="#shot-put" onclick="return dummy(this)"><img
src="j0303/j0303464.gif" />shot-put</a></td>
<td><a href="#pointer" onclick="return dummy(this)"><img
src="j0281/j0281730.gif" />pointer</a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Jul 23 '05 #13

Richard Cornford

RobB wrote:
<snip>

<!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" xml:lang="en"
lang="en"> <snip> document.write(

'<style type="text/css">' ,
s.replace(/,$/, '') ,
'{visibility:hidden;}' ,
'</style>'

);

<snip>

Currently there are no XHTML DOM implementations that support
document.write.

Richard.

Jul 23 '05 #14

McKirahan

"RobB" <fe******@hotmail.com> wrote in message
news:ab**************************@posting.google.c om...

[snip]

Hmm...what about those with JS disabled? Not much help...

[snip]

Well, it was asked in a JS group which begs for a JS solution.

Jul 23 '05 #15

Michael Winter

On Tue, 30 Nov 2004 10:19:39 GMT, McKirahan <Ne**@McKirahan.com> wrote:

"RobB" <fe******@hotmail.com> wrote in message
news:ab**************************@posting.google.c om...

[snip]
Hmm...what about those with JS disabled? Not much help...

[snip]

Well, it was asked in a JS group which begs for a JS solution.

So? A document that uses Javascript should never fail just because that
*optional* technology is disabled. A controlled environment might give you
more freedom, but as far as the Web is concerned, client-side scripting
should be an enhancement only.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Jul 23 '05 #16

McKirahan

"Michael Winter" <M.******@blueyonder.co.invalid> wrote in message
news:opsh9x9z1mx13kvk@atlantis...

On Tue, 30 Nov 2004 10:19:39 GMT, McKirahan <Ne**@McKirahan.com> wrote:
"RobB" <fe******@hotmail.com> wrote in message
news:ab**************************@posting.google.c om...

[snip]
Hmm...what about those with JS disabled? Not much help...

[snip]

Well, it was asked in a JS group which begs for a JS solution.

So? A document that uses Javascript should never fail just because that
*optional* technology is disabled. A controlled environment might give you
more freedom, but as far as the Web is concerned, client-side scripting
should be an enhancement only.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Got it! I didn't reflect on my solution's total dependence on JS.

Jul 23 '05 #17

Royal Denning

Well, I customized the script with images and it's working well.

I have another question.

Is it possible to use the script again on the same page with another
ten images so that list one rotates its ten images, and the second
script rotates its ten imagea independently?

I've been experimenting with this with so-so results so far...

Jul 23 '05 #18

McKirahan

"Royal Denning" <ro***********@hotmail.com> wrote in message
news:4e**************************@posting.google.c om...

Well, I customized the script with images and it's working well.

I have another question.

Is it possible to use the script again on the same page with another
ten images so that list one rotates its ten images, and the second
script rotates its ten imagea independently?

I've been experimenting with this with so-so results so far...

Copy and rename the function then call it.

Jul 23 '05 #19

RobB

"Richard Cornford" <Ri*****@litotes.demon.co.uk> wrote in message news:<co*******************@news.demon.co.uk>...

RobB wrote:
<snip>
<!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" xml:lang="en"
lang="en">

<snip>
document.write(

'<style type="text/css">' ,
s.replace(/,$/, '') ,
'{visibility:hidden;}' ,
'</style>'

);

<snip>

Currently there are no XHTML DOM implementations that support
document.write.

Richard.

Oops, busted. Miss it already. Here's another stab at it....

<!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" xml:lang="en" lang="en">
<head>
<title>untitled</title>

<base href="http://i.office.microsoft.com/i/0000/MR/" />

<style type="text/css">

body {
font-size: 100%;
margin: 12px;
background: #456;
}
#container {
width: 468px;
margin: 10px auto;
}
#rotator1, #rotator2 {
float: left;
margin: 10px;
border-collapse: collapse;
border: 2px #fff dashed;
background: #fff;
}
#rotator1 td, #rotator2 td {
text-align: center;
padding: 3px;
margin: 0;
border: 1px #bbb dashed;
}
td a:link, td a:visited {
font: normal 60% "comic sans ms", sans-serif;
color: #000;
text-decoration: none;
}
td a:hover {
text-transform: uppercase;
}
td a img {
display: block;
padding: 0;
margin: 0;
border-width: 0;
}

</style>
<script type="text/javascript">
//<![CDATA[

/**********************************************/
var table_ids = [ 'rotator1' , 'rotator2' ];
/**********************************************/

var alldivs = document.getElementsByTagName('DIV');

function Rotator(table_id)
{
this.table = document.getElementById(table_id);
this.cells = this.table.getElementsByTagName('TD');
this.ncells = this.cells.length;
this.pix = [];
this.txt = [];
this.hrefs = [];
this.idx_array = new Array(this.ncells);

function read()
{
var cell, n = 0;
while (cell = this.cells.item(n++))
{
this.pix.push(cell.getElementsByTagName('IMG')[0].src);
this.txt.push(cell.getElementsByTagName('A')[0].lastChild.nodeValue);
this.hrefs.push(cell.getElementsByTagName('A')[0].href);
} this.shuffle();
}
this.read = read;

function shuffle()
{
var idx, i, ind1, ind2, temp;
for (i = 0; i < this.ncells; ++i)
this.idx_array[i] = i;
for (i = 0; i < this.ncells; ++i)
{
ind1 = Math.floor(Math.random() * this.ncells);
ind2 = Math.floor(Math.random() * this.ncells);
temp = this.idx_array[ind1];
this.idx_array[ind1] = this.idx_array[ind2];
this.idx_array[ind2] = temp;
} this.write();
}
this.shuffle = shuffle;

function write()
{
var cell, el, idx, n = 0;
while (cell = this.cells.item(n))
{
idx = this.idx_array[n++];
cell.getElementsByTagName('IMG')[0].src = this.pix[idx];
(el = cell.getElementsByTagName('A')[0]).lastChild.nodeValue =
this.txt[idx];
el.href = this.hrefs[idx];
} alldivs.item(0).style.visibility = 'visible';
}
this.write = write;

this.read();
}

onload = function()
{
if (document.getElementById && document.createElement)
for (var i = 0; i < table_ids.length; ++i)
new Rotator(table_ids[i]);
}

/* demo only */
function dummy(link)
{
alert(link.href.toUpperCase().match(/[^#]*$/));
return false;
}

//]]>
</script>
</head>
<body>
<div id="container">
<script type="text/javascript">
//<![CDATA[
alldivs.item(0).style.visibility = 'hidden';
//]]>
</script>
<table id="rotator1">
<tbody>
<tr>
<td><a href="#displays" onclick="return dummy(this)">
<img src="j0399/j0399836.gif" />displays</a></td>
<td><a href="#diskette" onclick="return dummy(this)">
<img src="j0323/j0323552.gif" />diskette</a></td>
</tr><tr>
<td><a href="#floppies" onclick="return dummy(this)">
<img src="j0233/j0233109.gif" />floppies</a></td>
<td><a href="#monitor" onclick="return dummy(this)">
<img src="j0316/j0316344.gif" />monitor</a></td>
</tr><tr>
<td><a href="#mouse" onclick="return dummy(this)">
<img src="j0382/j0382582.gif" />mouse</a></td>
<td><a href="#dishes" onclick="return dummy(this)">
<img src="j0237/j0237779.gif" />dishes</a></td>
</tr><tr>
<td><a href="#cams" onclick="return dummy(this)">
<img src="j0396/j0396846.gif" />cams</a></td>
<td><a href="#pcs" onclick="return dummy(this)">
<img src="j0399/j0399981.gif" />pcs</a></td>
</tr><tr>
<td><a href="#birds" onclick="return dummy(this)">
<img src="j0198/j0198718.gif" />birds</a></td>
<td><a href="#recycle" onclick="return dummy(this)">
<img src="j0323/j0323582.gif" />recycle</a></td>
</tr>
</tbody>
</table>

<table id="rotator2">
<tbody>
<tr>
<td><a href="#kitty" onclick="return dummy(this)">
<img src="j0326/j0326434.gif" />kitty</a></td>
<td><a href="#kite" onclick="return dummy(this)">
<img src="j0231/j0231947.gif" />kite</a></td>
</tr><tr>
<td><a href="#telescope" onclick="return dummy(this)">
<img src="j0287/j0287221.gif" />telescope</a></td>
<td><a href="#keys" onclick="return dummy(this)">
<img src="j0287/j0287325.gif" />keys</a></td>
</tr><tr>
<td><a href="#earth" onclick="return dummy(this)">
<img src="j0400/j0400664.gif" />earth</a></td>
<td><a href="#choo-choo" onclick="return dummy(this)">
<img src="j0234/j0234231.gif" />choo-choo</a></td>
</tr><tr>
<td><a href="#bus" onclick="return dummy(this)">
<img src="j0395/j0395931.gif" />bus</a></td>
<td><a href="#bull" onclick="return dummy(this)">
<img src="j0318/j0318944.gif" />bull !</a></td>
</tr><tr>
<td><a href="#shot-put" onclick="return dummy(this)">
<img src="j0303/j0303464.gif" />shot-put</a></td>
<td><a href="#pointer" onclick="return dummy(this)">
<img src="j0281/j0281730.gif" />pointer</a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Jul 23 '05 #20

Dr John Stockton

JRS: In article <l7Kqd.118122$5K2.23354@attbi_s03>, dated Mon, 29 Nov
2004 18:45:37, seen in news:comp.lang.javascript, McKirahan
<Ne**@McKirahan.com> posted :

"Dr John Stockton" <sp**@merlyn.demon.co.uk> wrote in message
news:GL**************@merlyn.demon.co.uk...
JRS: In article <Nzwqd.160663$HA.32847@attbi_s01>, dated Mon, 29 Nov
2004 03:20:18, seen in news:comp.lang.javascript, McKirahan
<Ne**@McKirahan.com> posted :
>function numbers() {
> var url = "http://www.topsearchspot.com/";
> var gif = new Array(10);
> gif[0] = "0.gif|Zero";
> gif[1] = "1.gif|One";
> gif[2] = "2.gif|Two";
> gif[3] = "3.gif|Three";
> gif[4] = "4.gif|Four";
> gif[5] = "5.gif|Five";
> gif[6] = "6.gif|Six";
> gif[7] = "7.gif|Seven";
> gif[8] = "8.gif|Eight";
> gif[9] = "9.gif|Nine";
> for (var i=0; i<gif.length; i++) {
> gif[i] = url + gif[i];
> }

Only a list of the names of the digits is needed; javascript can
assemble the rest when needed.

var Digits = ["Zero", ..., "Nine"] // is simpler.

Simpler, yes -- but not applicable. If you had read the complete thread you
would see that my post was just an example of how to handle multiple images
and their corresponding text.

It is always simpler to load a (non-sparse) array using that notation,
rather than element by element.

It is rarely beneficial to repeat material (ten of .gif|) which can
readily be inserted programmatically.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

Jul 23 '05 #21

Richard Cornford

RobB wrote:
<snip>

<!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" xml:lang="en"
lang="en">
<head> <snip> var alldivs = document.getElementsByTagName('DIV');

<snip>

XHTML DOMs are case sensitive (like XHTML mark-up) and because the tag
and attribute names are all lowercase in the mark-up they are expected
to also be all lowercase when being referred to with scripts.

Additionally, the namespace qualified ('NS' prefixed) methods (when
available) produce more reliable results in XHTML DOMs.

Richard.

Jul 23 '05 #22

Dr John Stockton

JRS: In article <opsh9x9z1mx13kvk@atlantis>, dated Tue, 30 Nov 2004
10:59:52, seen in news:comp.lang.javascript, Michael Winter <M.Winter@bl
ueyonder.co.invalid> posted :

So? A document that uses Javascript should never fail just because that
*optional* technology is disabled. A controlled environment might give you
more freedom, but as far as the Web is concerned, client-side scripting
should be an enhancement only.

Really?
How about <URL:http://www.merlyn.demon.co.uk/astro.htm#Calc>, for
example? Or some of my other pages?

It's a mistake to assume that all javascript on the Web is for
transactions, or that all hosts offer programmable servers.

My pages are designed so that any CPU power used other than for sending
the page is supplied by the fetcher of the page.

One could say that disabling javascript should never prevent some form
of display, and that that display should be designed and not merely
fortuitous. And that disabling javascript should not prevent
transactions.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME. ©
Web <URL:http://www.merlyn.demon.co.uk/> - FAQqish topics, acronyms & links;
some Astro stuff via astro.htm, gravity0.htm; quotes.htm; pascal.htm; &c, &c.
No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.

Jul 23 '05 #23

Michael Winter

On Tue, 30 Nov 2004 20:42:39 +0000, Dr John Stockton
<sp**@merlyn.demon.co.uk> wrote:

JRS: In article <opsh9x9z1mx13kvk@atlantis>, dated Tue, 30 Nov 2004
10:59:52, seen in news:comp.lang.javascript, Michael Winter
<M.******@blueyonder.co.invalid> posted :
So? A document that uses Javascript should never fail just because that
*optional* technology is disabled. A controlled environment might give
you more freedom, but as far as the Web is concerned, client-side
scripting should be an enhancement only.
Really?

Yes. If you want a document to be useful to the widest audience, you don't
make it rely upon scripting. Javascript *is* an optional technology and
too many people fail to realise that.
How about <URL:http://www.merlyn.demon.co.uk/astro.htm#Calc>, for
example? Or some of my other pages?
To me at least, your pages demonstrate method rather than provide means.
Furthermore, your pages have a fairly restricted scientific audience. If
you provided utilities to the general public, it would be a mistake (in my
opinion).
It's a mistake to assume that all javascript on the Web is for
transactions, or that all hosts offer programmable servers.

I haven't made that mistake, but in any case, to make the *entire* content
- which was the situation I was commenting on - dependent upon scripting
is stupid.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Jul 23 '05 #24

Grant Wagner

Dr John Stockton wrote:

JRS: In article <opsh9x9z1mx13kvk@atlantis>, dated Tue, 30 Nov 2004
10:59:52, seen in news:comp.lang.javascript, Michael Winter <M.Winter@bl
ueyonder.co.invalid> posted :
So? A document that uses Javascript should never fail just because that
*optional* technology is disabled. A controlled environment might give you
more freedom, but as far as the Web is concerned, client-side scripting
should be an enhancement only.
Really?
How about <URL:http://www.merlyn.demon.co.uk/astro.htm#Calc>, for
example? Or some of my other pages?

Those pages are badly designed because if client-side JavaScript is disabled, they
provide no functionality at all. If you really want people using your calculators,
and client-side JavaScript is disabled, then you should round-trip to the server to
do the calculation.
My pages are designed so that any CPU power used other than for sending
the page is supplied by the fetcher of the page.
And if the optional technology of client-side scripting is unavailable, then you
can not utilize the CPU power of the fetcher of the page, so you should supply your
own.
One could say that disabling javascript should never prevent some form
of display, and that that display should be designed and not merely
fortuitous. And that disabling javascript should not prevent
transactions.

I would consider a client-side scripted calculator a "transaction". If the
calculation can not be performed on the client, it should be sent to the server for
calculation and to display the result.
The original statement still stands, if you disagree with it, then perhaps your Web
site fits into the "controlled environment". A "controlled environment" which
includes the group of users who have client-side JavaScript enabled at all times,
and that client-side JavaScript supports all functionality required to carry out
the tasks you need performed.

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

Jul 23 '05 #25

royal_denning

McK, I really appreciate your help thus far, and I am learning (albeit
a bit slower than I would like) from your examples and suggestions.

I have a few more questions.

1. Going back to the rotate10 script (see below) you wrote, how would I
modify it to create a table with 1 column and 10 rows (instead of 2
columns with 5 rows). I would still want the cell contents to rotate
randomly.

2. I created a folder on the topsearchspot site called newpage folder,
and in that folder is a page called newpage.htm. On both versions of
the rotate10 script (1 and 2 columns) how would I add a RELATIVE link
so that the image is linked to /newpage folder/newpage.htm instead of
www.topsearchspot/newpage folder/newpage.htm?

Here is the script:

<html>
<head>
<title>rotate10.html</title>
<script type="text/javascript">
function numbers() {
var url = "http://www.topsearchspot.com/";
var gif = new Array(10);
gif[0] = "0.gif|Zero";
gif[1] = "1.gif|One";
gif[2] = "2.gif|Two";
gif[3] = "3.gif|Three";
gif[4] = "4.gif|Four";
gif[5] = "5.gif|Five";
gif[6] = "6.gif|Six";
gif[7] = "7.gif|Seven";
gif[8] = "8.gif|Eight";
gif[9] = "9.gif|Nine";
for (var i=0; i<gif.length; i++) {
gif[i] = url + gif[i];
}
var hig = 62;
var wid = 62;
var wyd = wid*2;
var ten = "0123456789";
var mod = ten.length;
var now = new Date();
var pos = now.getSeconds()%mod;
var num = ten.substr(pos);
if (pos > 0) num += ten.substring(0,pos);
var col = new Array();
var src;
var sub;
var tmp;
for (var j=0; j<num.length; j++) {
sub = num.charAt(j);
tmp = gif[sub].split("|");
src = "<a href='" + tmp[0] + "' target='_blank'>"
src += "<img src='" + tmp[0] + "'";
src += "border='0' width='" + wid + "' height='" + hig + "'
alt=''></a>";
src += "<br>" + tmp[1];
col[j] = src;
}
var k = 0;
var tab = new Array();
tab[k++] = "<table border='0' cellpadding='0' cellspacing='0'
width='" + wyd + "'>";
var mid = num.length/2;
for (var l=0; l<mid; l++) {
tab[k++] = "<tr height='" + 62 + "' valign='top'>";
tab[k++] = " <th width='" + 62 + "'>" + col[l] + "</th>";
tab[k++] = " <th width='" + 62 + "'>" + col[l+mid] + "</th>";
tab[k++] = "</tr>";
}
tab[k++] = "</table>";
document.write(tab.join(""));
}
numbers();
</script>
</head>
<body>
</body>
</html>

Thanks!

Jul 23 '05 #26

Dr John Stockton

JRS: In article <4e*************************@posting.google.com> , dated
Sat, 27 Nov 2004 13:25:51, seen in news:comp.lang.javascript, Royal
Denning <ro***********@hotmail.com> posted :

I am designing a table with 2 columns and 20 rows. I want to insert
small images (each with a link) and a text title in each cell of the
table.

On refresh of the page, I would like to have the contents of each cell
(picture/link and associated text) rotate randomly.
It's not clear what you mean by "rotate randomly" - by what sort of
angle? True text cannot be rotated, and images can only be replaces by
ones of different orientation. And is the rotation by a random amount,
or after a random interval?

If your native tongue is one of the better-known ones from the western
parts of the Continent (i.e. mainland Europe), then it might help if you
were to post both in that and in English.
Note that the text titles must remain with their associated picture
and link (I don't want to scramble all the elements--just rotate the
entire contents of the table cell).

Or do the contents of cells seem to move from one cell to another? Do
they occur in, and maintain, a natural sequence, following each other
round; or do they move from cell to cell randomly, similarly to a deck
of cards being shuffled?

The more effort that you put into explain9ing your wants with absolute
clarity, the more likely it is that you will be shown efficient and
relevant code.

The code in your article dated 2 Dec 2004 09:48:33 -0800 is badly laid
out - code should be indented to show its intended structure - and
unnecessarily complex. As a minor example,

src = "<a href='" + tmp[0] + "' target='_blank'>"
src += "<img src='" + tmp[0] + "'";
src += "border='0' width='" + wid + "' height='" + hig + "'

can be written as

src = "<a href='" + tmp[0] + "' target='_blank'>" +
"<img src='" + tmp[0] + "'" +
"border='0' width='" + wid + "' height='" + hig + "' ;

which uses fewer characters and is IMHO easier to read and slightly
faster.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

Jul 23 '05 #27

Royal Denning

Hello, John. I am not only a native speaker of English, I've been paid
to write it professionally for most of my adult life.

If I was brief and informal it was because I didn't think anyone on
the newsgroup wanted to read a long, detailed message about what I
wanted (perhaps I was wrong in that, but that was my instinct). In any
case, McKirahan figured out what I was asking for easily enough, so I
don't think it was that unclear.

But I wouldn't mind reiterating what I was looking for originally.
What I was hoping for was a Javascript that would populate the cells
of an HTML table with images and text (and relative hyperlinks to
other pages on the site) from a folder on the website I'm working on.
Upon refreshing the page, the contents of the cells would shuffle
randomly. For a visual example of the shuffling process, see
http://www.topsearchspot.com/rotate10.htm.

McKirahan helpfully supplied a Javascript that built the table and
shuffled the cell contents accordingly, but given my limited knowledge
of Javascript, maybe it would be better to ask for a script that
populates the cells of a pre-built html table. Whichever would be
easier for someone with limited Jscript knowledge to customize.

Anyway, after some testing with McKirahan's scripts I've decided I
need a table with 2 columns and 5 rows (as seen on the link above) and
a table with 1 column and ten rows. I've decided to include the text
as part of the images now, so the script would just populate the cells
of the table with images and relative hyperlinks, and the contents of
the cells would randomly shuffle whenever the page reloads. I would
also like to be able to add rows to the tables and still have them
shuffle correctly as more images become available. (For example, I'd
like to have the flexibility to add an eleventh row to the ten-row
table when the time comes).

As noted before, I'm open to other scripts that will accomplish this
(although I really appreciate McKirahan's efforts on my behalf so
far).

If I was briedDr John Stockton <sp**@merlyn.demon.co.uk> wrote in message news:<LP**************@merlyn.demon.co.uk>...

JRS: In article <4e*************************@posting.google.com> , dated
Sat, 27 Nov 2004 13:25:51, seen in news:comp.lang.javascript, Royal
Denning <ro***********@hotmail.com> posted :
I am designing a table with 2 columns and 20 rows. I want to insert
small images (each with a link) and a text title in each cell of the
table.

On refresh of the page, I would like to have the contents of each cell
(picture/link and associated text) rotate randomly.

It's not clear what you mean by "rotate randomly" - by what sort of
angle? True text cannot be rotated, and images can only be replaces by
ones of different orientation. And is the rotation by a random amount,
or after a random interval?

If your native tongue is one of the better-known ones from the western
parts of the Continent (i.e. mainland Europe), then it might help if you
were to post both in that and in English.
Note that the text titles must remain with their associated picture
and link (I don't want to scramble all the elements--just rotate the
entire contents of the table cell).

Or do the contents of cells seem to move from one cell to another? Do
they occur in, and maintain, a natural sequence, following each other
round; or do they move from cell to cell randomly, similarly to a deck
of cards being shuffled?

The more effort that you put into explain9ing your wants with absolute
clarity, the more likely it is that you will be shown efficient and
relevant code.

The code in your article dated 2 Dec 2004 09:48:33 -0800 is badly laid
out - code should be indented to show its intended structure - and
unnecessarily complex. As a minor example,

src = "<a href='" + tmp[0] + "' target='_blank'>"
src += "<img src='" + tmp[0] + "'";
src += "border='0' width='" + wid + "' height='" + hig + "'

can be written as

src = "<a href='" + tmp[0] + "' target='_blank'>" +
"<img src='" + tmp[0] + "'" +
"border='0' width='" + wid + "' height='" + hig + "' ;

which uses fewer characters and is IMHO easier to read and slightly
faster.

Jul 23 '05 #28

RobB

Royal Denning wrote:

[snip]

As noted before, I'm open to other scripts that will accomplish this...

[snip]

Apparently not enough to bother reading them when they're offered... :(

Jul 23 '05 #29

Royal Denning

Apologies, Rob. I must have clicked past your script by accident. I
will give it a try.

Thanks.

fe******@hotmail.com (RobB) wrote in message news:<ab**************************@posting.google. com>...

Royal Denning wrote:

[snip]
As noted before, I'm open to other scripts that will accomplish this...

[snip]

Apparently not enough to bother reading them when they're offered... :(

Jul 23 '05 #30

Dr John Stockton

JRS: In article <4e**************************@posting.google.com >,
dated Fri, 3 Dec 2004 00:44:05, seen in news:comp.lang.javascript, Royal
Denning <ro***********@hotmail.com> posted :

I am not only a native speaker of English, I've been paid
to write it professionally for most of my adult life.
;-( So have most of those who write for the public media. The second
part of that paragraph proves nothing.

But I wouldn't mind reiterating what I was looking for originally.
What I was hoping for was a Javascript that would populate the cells
of an HTML table with images and text (and relative hyperlinks to
other pages on the site) from a folder on the website I'm working on.
Upon refreshing the page, the contents of the cells would shuffle
randomly. For a visual example of the shuffling process, see
http://www.topsearchspot.com/rotate10.htm.
Shuffling randomly is not rotating. Those of us who use off-line
newsreaders generally do not want to access the on-line Web to
understand a question that could have been fully explained in News.

... given my limited knowledge
of Javascript, maybe it would be better to ask for a script that
populates the cells of a pre-built html table.
That's not difficult; but it seems not worthwhile unless the table is to
be changed whilst it is being displayed.
If I was briedDr John Stockton <sp**@merlyn.demon.co.uk> wrote in message
news:<LP**************@merlyn.demon.co.uk>...
JRS: In article <4e*************************@posting.google.com> , dated
Sat, 27 Nov 2004 13:25:51, seen in news:comp.lang.javascript, Royal
Denning <ro***********@hotmail.com> posted :

Read the newsgroup FAQ - responses should go after trimmed quotes,
interleaved if addressing more than one point. That is the standard
Usenet recommendation.
You will also find in the FAQ an entry on Dealing and Shuffling

Aside: <FAQENTRY> That is not found by a search for "Shuffle" - I
suggest changing to "How to Deal and Shuffle" </FAQENTRY>

linking to http://www.merlyn.demon.co.uk/js-randm.htm - what you need is
a Deal of the numbers which refer to what goes in the cells.

The following will write such a Table; you will need to enhance the
function Put that generates the full content of a cell from its number,
q.

Note the use of a "standard" function for each "standard" task - Randum
& Deal - and for detail which is best moved out of its surroundings
(Put, Tabel) for clarity.

Note the use of function parameters, e.g. in Tabel.
function Randum(N) { return (N*(Math.random()%1))|0 }

function Deal(N) { var J, K, Q = new Array(N)
for (J=0; J<N; J++) { K = Randum(J+1) ; Q[J] = Q[K] ; Q[K] = J }
return Q }

function Put(q) { return "Thing<br>Number<br>" + q }

function Tabel(Rows, Cols) { var A = Deal(Rows*Cols), K=0, C, R
document.writeln("<table border=1>")
for (R=0;R<Rows;R++) { document.writeln("<tr>")
for (C=0;C<Cols;C++) document.writeln("<td>", Put(A[K++]), "<\/td>")
document.writeln("<\/tr>") }
document.writeln("<\/table>") }

Tabel(3, 5)
Tested in <URL:http://www.merlyn.demon.co.uk/js-quick.htm>.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

Jul 23 '05 #31

RomanRusso

Hello,
Thank you very much for the script
Would you be able to read my question here, I think you can answer my question within a minute, I personally cannot find an answer
http://www.thescripts.com/forum/thread493388.html

May 21 '06 #32

Rotating content for table cells

Similar topics