PDA

View Full Version : Writing [temporarily] to a cell in a table

Taydron
08-14-2002, 01:46 AM
Hi,
I need help.

I would like to have a word written to a cell in a table when a link is clicked.

Basically, there is an iframe in one cell and when a link is clicked, the page is targetted to the iframe, and then I want the other cell to display information about the page.

I tried something like onClick="docement.tablename.cellname.value='desiredValue';" but it [unsurprisingly] didn't work.

Is it possible to write a temporary value to a cell?

Thx, Taydron.
glenngv
08-14-2002, 02:00 AM
for IE5 & up, NS6 & up:
document.getElementById("IDofTD").innerText='desiredValue'

for all IE (IE4 & up):
document.all["IDofTD"].innerText='desiredValue'
Taydron
08-14-2002, 02:12 AM
Hi,
thank you for your reply, however I can't quite get it to work...

[Before I was getting 'done but with error' errors, which I'm not now... so something must have improved :D]

Here is the line of code that I am stuck with:

<a href="news.htm" target="if0" onClick=document.getElementById("content0").innerText='News'>

OR

<a href="news.htm" target="if0" onClick="document.getElementById(content0).innerText='News'">

OR

<a href="news.htm" target="if0" onClick=document.getElementById(content0).innerText='News'>

[i.e., with different combinations of speech marks]

They all link Ok, but they fail to display the value 'News' in the "content0" TD.

Have I made an error in the way it is written?
Thanks again,
Taydron.
adios
08-14-2002, 02:13 AM
<html>
<head>
<title>untitled</title>
<style type="text/css">

#infocell {
font: 200 16px helvetica,verdana,sans-serif;
color: ivory;
text-align: center;
}

</style>
<script type="text/javascript" language="javascript">

var info = Object;
info['codingforums'] = '<strong>The</strong> premier site on the web for all browser-related effects.';

function showinfo(which) {
var infocell = document.getElementById ? document.getElementById('infocell') :
document.all ? document.all('infocell') : null;
if (infocell) infocell.innerHTML = info[which];
}

</script>
</head>
<body>
<div align="center">
<table width="600" cellspacing="0" cellpadding="0" border="1" bgcolor="black">
<tr>
<td><iframe name="cellframe" width="100%" height="360"></iframe></td>
</tr><tr>
<td id="infocell" width="50%" height="50"></td>
</tr>
</table>
<a href="http://www.codingforums.com" target="cellframe"
onclick="showinfo('codingforums')">site</a>
</div>
</body>
</html>
Taydron
08-14-2002, 02:34 AM
:thumbsup:

Hey, thanks a lot.
I tried it and it worked :D


I have one last request. Is it possible to make the writing appear one letter after another... like a 'typewriter effect'?

Thankyou again,
Taydron.
glenngv
08-14-2002, 02:37 AM
try:

<a href="news.htm" target="if0" onClick="document.getElementById('content0').innerText='News'">
Taydron
08-14-2002, 02:41 AM
:thumbsup:

Yep, that works too :D

Thanks a lot guys :)
adios
08-14-2002, 02:45 AM
This is $2.89 extra:

<html>
<head>
<title>untitled</title>
<style type="text/css">

#infocell {
font: 200 16px helvetica,verdana,sans-serif;
color: ivory;
text-align: center;
}

</style>
<script type="text/javascript" language="javascript">

var info = Object;
info['codingforums'] = 'The premier site on the web for all browser-related effects.';

function showinfo(which, speed) {
showinfo.infocell = document.getElementById ? document.getElementById('infocell') :
document.all ? document.all('infocell') : null;
var chr, i = 0, currInfo = info[which];
while (chr = currInfo.charAt(i++))
setTimeout('showinfo.infocell.innerHTML+="'+chr+'"', speed * i);
}

</script>
</head>
<body>
<div align="center">
<table width="600" cellspacing="0" cellpadding="0" border="1" bgcolor="black">
<tr>
<td><iframe name="cellframe" width="100%" height="360"></iframe></td>
</tr><tr>
<td id="infocell" width="50%" height="50"></td>
</tr>
</table>
<a href="http://www.codingforums.com" target="cellframe"
onclick="showinfo('codingforums',10)">site</a>
</div>
</body>
</html>
adios
08-14-2002, 02:51 AM
OK, typewriter....remove:

#infocell {
font: 200 16px helvetica,verdana,sans-serif;
color: ivory;
text-align: center;
}

replace:

function showinfo(which, speed, leftPad) {
showinfo.infocell = document.getElementById ? document.getElementById('infocell') :
document.all ? document.all('infocell') : null;
showinfo.infocell.style.paddingLeft = leftPad + 'px';
var chr, i = 0, currInfo = info[which];
while (chr = currInfo.charAt(i++))
setTimeout('showinfo.infocell.innerHTML+="'+chr+'"', speed * i);
}

...and:

<a href="http://www.codingforums.com" target="cellframe"
onclick="showinfo('codingforums',10,100)">site</a>
Taydron
08-14-2002, 03:04 AM
:cool:

Thanks everyone, it now works perfectly :D

Very gratefully,
Taydron.
Taydron
08-14-2002, 03:57 AM
:eek:

I have added several more values to the info['x'] in the script, but I find that each time the function is activated, the text is continued, rather than restarting.

In other words, I need a way of clearing the text that is laready visible each time the function is activated :/

Please could somebody help me?

Thanks,
Taydron.
adios
08-14-2002, 04:28 AM
It's always something...


<html>
<head>
<title>untitled</title>
<style type="text/css">

/* CSS for text display box */
#infocell {
font: 200 16px helvetica,verdana,sans-serif;
color: ivory;
border: 3px #eeeeff double;
}

body {
background: silver;
}

</style>
<script type="text/javascript" language="javascript">

//text here, indexed by word/phrase (escape them apostophes!)
var info = Object;
info['codingforums'] = 'The premier site on the web for all browser-related effects.';
info['theonion'] = 'America\\'s Finest News Source.';

var infoTIMER = null;

//args: text index, animation speed (higher=slower), left-side text pad (centers it)
function showinfo(which, speed, leftPad) {
if (infoTIMER) {
clearInterval(infoTIMER);
infoTIMER = null;
}
showinfo.infocell = document.getElementById ? document.getElementById('infocell') :
document.all ? document.all('infocell') : null;
if (showinfo.infocell) {
showinfo.infocell.innerHTML = '';
showinfo.infocell.style.paddingLeft = leftPad + 'px';
showinfo.content = info[which];
showinfo.chars = showinfo.content.length;
showinfo.pos = 0;
infoTIMER = setInterval('writeInfo()', speed);
}
}

function writeInfo() {
showinfo.infocell.innerHTML += showinfo.content.charAt(showinfo.pos++);
if (showinfo.pos == showinfo.chars) {
clearInterval(infoTIMER);
infoTIMER = null;
}
}

</script>
</head>
<body>
<div align="center">
<table width="700" cellspacing="0" cellpadding="0" border="1" bgcolor="#000000">
<tr>
<td><iframe name="cellframe" width="100%" height="400"></iframe></td>
</tr><tr>
<td id="infocell" width="100%" height="50"></td>
</tr>
</table>
<a href="http://www.codingforums.com" target="cellframe"
onclick="showinfo('codingforums',20,150)">educational</a><br>
<a href="http://www.theonion.com" target="cellframe"
onclick="showinfo('theonion',50,240)">funny</a>
</div>
</body>
</html>
Taydron
08-14-2002, 01:55 PM
:thumbsup:

Again, thankyou.
It worked brilliantly :D

Taydron.
BrainJar
08-14-2002, 03:28 PM
This will clear the current contents of a cell (or any element for that matter):


var cellEl = document.getElementById('infocell');
while (cellEl.lastChild != null)
cellEl.removeChild(cellE.lastChild);


Also, instead of using innerHTML or innerText you could use standard DOM methods to add content:


var txtNode = document.createTextNode("my text");
cellEl.appendChild(txtNode);


or


var boldEl = document.createElement("B");
var txtNode = document.createTextNode("my text");
boldEl.appendChild(txtNode);
el.appendChild(boldEl);


for bold text.
Taydron
08-14-2002, 06:32 PM
Cool thx :D
adios
08-15-2002, 12:09 AM
Taydron -

OK, *fixed it*. :thumbsup:

Re-posted above; enjoy....