473,804 Members | 4,128 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Rotating content for table cells

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
31 7050
JRS: In article <l7Kqd.118122$5 K2.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.de mon.co.uk> wrote in message
news:GL******* *******@merlyn. demon.co.uk...
JRS: In article <Nzwqd.160663$H A.32847@attbi_s 01>, 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.topsearchsp ot.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|Thre e";
> gif[4] = "4.gif|Four ";
> gif[5] = "5.gif|Five ";
> gif[6] = "6.gif|Six" ;
> gif[7] = "7.gif|Seve n";
> gif[8] = "8.gif|Eigh t";
> 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 programmaticall y.

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.c om/faq/> JL/RC: FAQ of news:comp.lang. javascript
<URL:http://www.merlyn.demo n.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 23 '05 #21
RobB wrote:
<snip>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head> <snip> var alldivs = document.getEle mentsByTagName( '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
JRS: In article <opsh9x9z1mx13k vk@atlantis>, dated Tue, 30 Nov 2004
10:59:52, seen in news:comp.lang. javascript, Michael Winter <M.Winter@bl
ueyonder.co.inv alid> 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.demo n.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.demo n.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
On Tue, 30 Nov 2004 20:42:39 +0000, Dr John Stockton
<sp**@merlyn.de mon.co.uk> wrote:
JRS: In article <opsh9x9z1mx13k vk@atlantis>, dated Tue, 30 Nov 2004
10:59:52, seen in news:comp.lang. javascript, Michael Winter
<M.******@bluey onder.co.invali d> 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.demo n.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
Dr John Stockton wrote:
JRS: In article <opsh9x9z1mx13k vk@atlantis>, dated Tue, 30 Nov 2004
10:59:52, seen in news:comp.lang. javascript, Michael Winter <M.Winter@bl
ueyonder.co.inv alid> 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.demo n.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 "transactio n". 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*****@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq

Jul 23 '05 #25
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.topsearchsp ot.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|Thre e";
gif[4] = "4.gif|Four ";
gif[5] = "5.gif|Five ";
gif[6] = "6.gif|Six" ;
gif[7] = "7.gif|Seve n";
gif[8] = "8.gif|Eigh t";
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
JRS: In article <4e************ *************@p osting.google.c om>, 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.c om/faq/> JL/RC: FAQ of news:comp.lang. javascript
<URL:http://www.merlyn.demo n.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 23 '05 #27
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.de mon.co.uk> wrote in message news:<LP******* *******@merlyn. demon.co.uk>...
JRS: In article <4e************ *************@p osting.google.c om>, 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
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
Apologies, Rob. I must have clicked past your script by accident. I
will give it a try.

Thanks.

fe******@hotmai l.com (RobB) wrote in message news:<ab******* *************** ****@posting.go ogle.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

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
7737
by: Finn Newick | last post by:
By defining a style as follows: @media aural, handheld {td.layout {display:block;}} I'm hoping to linearise layout tables when viewed by screenreaders and handheld devices (it is also be in some selectable user preferences). This works as intended in Netscape 7 - all the cells stack vertically above each other nicely, but not in Internet Explorer 6 where the only display property that td will respond to seems to be 'none'.
8
4420
by: Jukka K. Korpela | last post by:
I just noticed that most browsers render <table border="1"><tr><td><p>foo</p></td></tr></table> the same way as <table border="1"><tr><td>foo</td></tr></table> That is, they ignore the p markup in the sense that they don't apply the normal default top and bottom margins. This is rather odd, especially
1
2646
by: Mark Carroll | last post by:
I can't get my table cells to not have a gap between them in IE. For example, with IE6SP1 I get a gap between the two red squares on http://www.chiark.greenend.org.uk/~markc/test/test.html instead of just seeing one red rectangle. The CSS in that case had width: 1px; margin: 0; padding: 0; border-width: 0; border-spacing: 0 What can I do to get the red squares nestled together in the table with no space in between? -- Mark
4
26211
by: N. Demos | last post by:
The following code renders as intended in IE (A TABLE, with cells of fixed width and height, inside of a DIV with fixed width and height and overflow set to hidden.) In Firefox, the table cells assume a narrower with than specified. If I comment out the width for the DIV, then the cells render with the correct width and height. Why is this happening? Thanks. Regards, N. Demos
0
1689
by: N. Demos | last post by:
I have a single row table with fixed dimensioned cells nested inside a fixed dimensioned div, which has overflow: hidden. The div's dimensions are such that It should only display the first two table cells. This all renders correctly in MSIE 6.x, but doesn't in Firefox. In Firefox, the cell widths are reduced so that all the cells are displayed within the div frame. I've played around with this: commenting out css properties to see if...
3
5915
by: N. Demos | last post by:
I have a single row table with fixed dimensioned cells nested inside a fixed dimensioned div, which has overflow: hidden. The div's dimensions are such that It should only display the first two table cells. This all renders correctly in MSIE 6.x, but doesn't in Firefox. In Firefox, the cell widths are reduced so that all the cells are displayed within the div frame. I've played around with this: commenting out css properties to see if...
5
36881
by: Richard Dixson | last post by:
I created a new C# web application. Basically all I am trying to do is create a table that consists of a few rows with two columns in each. And then to set those columns to text values from my code behind. However I am not able to do this at all, I am going about this wrong, I think and need guideance. If this was just straight HTML I would do this: <table> <tr><td>field 1</td><td>value 1 set by code behind</td></tr>
1
2927
by: RobG | last post by:
I'm trying to get table cells to clip content rather than wrapping. It has been suggested to use: td.clipped { width: 5em; overflow: hidden; white-space: nowrap; }
0
1327
by: JM | last post by:
I'm using VS2005 SP1. It seems to me, when I used VS2003, the IDE would only insert height and width attributes in table cells if you dragged to resize a cell. Now, with VS2005, I get the style attributes whenever I drop a control into a cell or add content, and it's ANNOYING. Does anybody know of a way to get designer to stop slapping style attributes in table cells?
2
3039
by: markszlazak | last post by:
I'm a relatively slow response of table cells changing their background color with mouseover/our in IE6 (Win 2K) but the response is fine (fast) in Firefox. Why? The code is below. Sorry about the length. <html> <head> <title>Rapid Blocking Interface</title> <style> .calendar {
0
10577
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10332
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10320
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9150
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
6853
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5521
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5651
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4299
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2991
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.