Connecting Tech Pros Worldwide Help | Site Map

nowrap inline validation msgs in tbl

invinfo@rcn.com
Guest
 
Posts: n/a
#1: Jul 23 '05
I'm trying to make the most of my validation routine, and print out
user friendly messages. I've got a nice writeToDiv function and I'm
trying to make the messages look good (not wrap around).

Typically any dynamic use of writeToDiv, has given me an extra line and
I'd like it to appear directly to the right of the I.fld

I've tried to specify enough width for the <td> and even have a
separate column for the <div>, but neither turned out ideal.

Seems like this should be easy, but if I need to I'll design something
that works with absolute positioning and ?zorder?
Need a little Help !

Randy Webb
Guest
 
Posts: n/a
#2: Jul 23 '05

re: nowrap inline validation msgs in tbl


invinfo@rcn.com said the following on 7/22/2005 3:19 PM:
[color=blue]
> I'm trying to make the most of my validation routine, and print out
> user friendly messages. I've got a nice writeToDiv function and I'm
> trying to make the messages look good (not wrap around).
>
> Typically any dynamic use of writeToDiv, has given me an extra line and
> I'd like it to appear directly to the right of the I.fld
>
> I've tried to specify enough width for the <td> and even have a
> separate column for the <div>, but neither turned out ideal.
>
> Seems like this should be easy, but if I need to I'll design something
> that works with absolute positioning and ?zorder?
> Need a little Help !
>[/color]

Excuse me while I hunt my mind-reading cap. I need it in order to see
the function writeToDiv. But why roll your own when DynWrite is in this
groups FAQ and doesn't add line breaks?

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
invinfo@rcn.com
Guest
 
Posts: n/a
#3: Jul 23 '05

re: nowrap inline validation msgs in tbl


I thinks its a table issue, not something inherent in the javascript
code, but here goes:


function writeToDiv(div, str)
{
if(document.all) {
document.all(div).innerHTML=str;
} // IE4 NS5
else if(document.getElementById) {
document.getElementById(div).innerHTML=str;} // IE5 NS6
else if(document.layers) {
with (document.div.document)
{ open();
write(str); // NN4
close();
}
}

Table Row example (one option)
<tr>
<td width="30%">Name:</td>
<td width="70%"><input type="text" name="name" size="10" maxlength="10"[color=blue]
>[/color]
<div d="ename">&nbsp</div></td>
</tr>

RobG
Guest
 
Posts: n/a
#4: Jul 23 '05

re: nowrap inline validation msgs in tbl


invinfo@rcn.com wrote:[color=blue]
> I thinks its a table issue, not something inherent in the javascript
> code, but here goes:
>[/color]

Please quote what you are replying to. Your problem has nothing to do
with JavaScript, however improvement is always possible. :-)
[color=blue]
>
> function writeToDiv(div, str)
> {
> if(document.all) {
> document.all(div).innerHTML=str;
> } // IE4 NS5
> else if(document.getElementById) {
> document.getElementById(div).innerHTML=str;} // IE5 NS6
> else if(document.layers) {
> with (document.div.document)
> { open();
> write(str); // NN4
> close();
> }
> }[/color]

You should test for getElementById first, it is likely more widely
supported that document.all (or soon will be) so test for it first:

if(document.getElementById)
{
document.getElementById(div).innerHTML=str;
}
else if(document.all)
{
document.all(div).innerHTML=str;
}
else if(document.layers)
{
/...

Have a look at the group FAQ for a variety of ways to implement the above.
[color=blue]
>
> Table Row example (one option)
> <tr>
> <td width="30%">Name:</td>
> <td width="70%"><input type="text" name="name" size="10" maxlength="10"
>
> <div d="ename">&nbsp</div></td>[/color]

A div is a block level element and so will appear on a line by itself
unless you make it do something else. Use an inline element (say a
span) and you get the result you are after if you heed the following.

Your attempt at TD sizing fails (comp.infosystems.www.authoring.html
will help there) so your new text is forced to wrap - percentages are
always messy. Fixed-size columns are bad, so use CSS and em or ex or
similar that will scale with the font size and you are happy again.

I think there was a brace missing from your script, and you have a
typo - there is no 'd' attribute for a div, I think you meant 'id'. ;-p

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Show random matrix</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">


<style type="text/css">
..nameCol { width: 6em; }
..entryCol { width: 20em; }
</style>

<script type="text/javascript">
function writeToDiv( div, str) {

if ( document.getElementById ) {
document.getElementById( div ).innerHTML=str;
} else if( document.all ) {
document.all[ div ].innerHTML=str;
} else if( document.layers ) {
with ( document.div.document ) {
open();
write(str); // NN4
close();
}
}
}

</script>
</head>
<body>


Table Row example (one option)

<table border="1">
<tr>
<td class="nameCol">Name:</td>
<td class="entryCol"><input type="text" name="input1"
size="10" maxlength="10" onchange="
writeToDiv( 'ename', this.value );
"><span id="ename">&nbsp</span></td>
</tr>
</table>

</body></html>




--
Rob
Christopher J. Hahn
Guest
 
Posts: n/a
#5: Jul 23 '05

re: nowrap inline validation msgs in tbl


invinfo@rcn.com wrote:[color=blue]
> I'm trying to make the most of my validation routine, and print out
> user friendly messages. I've got a nice writeToDiv function and I'm
> trying to make the messages look good (not wrap around).
>
> Typically any dynamic use of writeToDiv, has given me an extra line and
> I'd like it to appear directly to the right of the I.fld
>
> I've tried to specify enough width for the <td> and even have a
> separate column for the <div>, but neither turned out ideal.
>
> Seems like this should be easy, but if I need to I'll design something
> that works with absolute positioning and ?zorder?
> Need a little Help ![/color]

Try using a <span> instead of a <div>.

<div> is a block-level element, so wants to be on its own line.
You can fix this with CSS display: inline;, or just use a <span>. I
recommend <span>.

Closed Thread