Including semicolons in document.write statement; any workaround?

[Prowler]

In the application we are currently building, we need to write positioning
code on-the-fly, based upon the screen offset of the element in the AS/400
application which drives the Web app. The 400, like DOS, uses memory-mapped
display, two bytes per character (one char byte and one attribute byte). We
can get the screen offset allright, and I've written a javascript which does
the math to convert the offset into row/col (i.e. left, top) values for the
element's Style declaration. The problem is, when I go to document.write the
HTML, the write stops at the first semicolon delimiter in the Style
declaration, regardless of the fact that it is enclosed in a string. Here is
the HTML source for this element:

<td height="020" width="27px" onfocus="tC(this)" onblur="tC(this)"
style="text-align:left;">
<span id="spanID0162" class="redUBL">
<script>setPos("0162");</script>
<script>pS("Bad","left");</script>
<script>endPos();</script>
</span>
</td>

setPos() and endPos() call the functions which calculate and document.write
the opening <div> tag, with the positioning Style declaration, and the end
</div> tag. The objective is something like this:

<td height="020" width="27px" onfocus="tC(this)" onblur="tC(this)"
style="text-align:left;">
<span id="spanID0162" class="redUBL">
<div style="position:absolute; left:10px; top:41px;">
<script>pS("Bad","left");</script>
</div>
</span>
</td>

What we get instead for the <div> declaration is
<div style="position:absolute">
where the document.write is clearly stopping at the first semicolon.

I have tried using character entities, UTF hex values, Unicode, with and
without quotes, enclosing in CDATA (it's an XHTML doctype), escapes, you
name it (see script, below, which shows some but not all of the variations
attempted), with no success. So, my question is, can what we want to do be
done? If so, how? If not, is there another approach which anyone can suggest
that we might take which would offer a greater chance of success, given that
the positioning must be done on the fly? Thanks.

function setPos(offset)
{
var rowPos = Math.floor(offset/80);
var topVal = (rowPos * 20) + 1 // Row 3 (rowPos = 2) top pixel is at pixel
41 and goes to pixel 60
var colPos = (offset % 80);
var leftVal = ((colPos -1) * 9) + 1; // Column 2 begins at pixel 10 and goes
to pixel 18
//document.write("<div style='position:absolute" + "U+003B" + " left:" +
leftVal + "U+003B" + " top:" + topVal + "U+003B" + "'>");
//document.write("<div style='position:absolute" + ";" + " left:" +
leftVal + ";" + " top:" + topVal + ";" + "'>");
//document.write("<div style='position:absolute" + "0x3B" + " left:" +
leftVal + "0x3B" + " top:" + topVal + "0x3B" + "'>");
//document.write("<div style='position:absolute" + "\;" + " left:" + leftVal
+ "\;" + " top:" + topVal + "\;" + "'>");
//document.write("<div style='position:absolute" + 0x3B + " left:" + leftVal
+ 0x3B + " top:" + topVal + 0x3B + "'>");
//document.write("<div style='position:absolute'>");
//<![CDATA[
document.write('<div style="position:absolute; left:' + leftVal + '; top:' +
topVal + ';">');
//]]>
} // function setPos

Cheers,
Scott

[Richard Cornford]

Prowler wrote:
<snip>

... . The problem is, when I go to document.write the
HTML, the write stops at the first semicolon delimiter
in the Style declaration, regardless of the fact that it is
enclosed in a string.
There are no issues arising from the inclusion of semicolons in
javascript strings and then document.writing them into HTML.
Here is the HTML source for this element:
But not enough to determine what your are doing wrong, or even what you
are actually doing. Try making a complete, but cut-down, test case page
that demonstrates this phenomenon in isolation.

<snip> I have tried using character entities, UTF hex values,#
Unicode, with and without quotes, enclosing in CDATA
(it's an XHTML doctype), escapes, you name it ...

<snip>

The semicolon is not the real issue so escaping it will make no
difference, but if you are escaping the contents of a javascript string
you should use only javascript style escape sequences, and HTML entities
if you are writing out HTML, but only in contexts where they would be
used in raw HTML source code (which does not include the semicolons in
CSS).

But why write XHTML when IE (which I observer from elsewhere is your
only target browser) does not understand XHTML?

Richard.

[Prowler]

(I thought that I had sent this out earlier, but it did not show up in the
newsgroup and I couldn't find it in Sent Items, either. Apologies if this is
a duplicate post; it is not intended to be.)

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

Prowler wrote:
<snip>

... . The problem is, when I go to document.write the
HTML, the write stops at the first semicolon delimiter
in the Style declaration, regardless of the fact that it is
enclosed in a string. <snip>

The semicolon is not the real issue so escaping it will make no
difference, but if you are escaping the contents of a javascript string
you should use only javascript style escape sequences, and HTML entities
if you are writing out HTML, but only in contexts where they would be
used in raw HTML source code (which does not include the semicolons in
CSS).

<<::snip::>>
Richard.

Hi, Richard. Well, I thought that I had demonstrated to myself that the
issue was with WebOpts. Turns out that it is not. I created some local test
files, a simple HTML page that calls an equally simple script. I'm hoping
that you may be able to spot something in my syntax which is causing this
problem (misplaced or improperly nested quotes, etc.).

This is the HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Document.write test page</title>
<script type="text/javascript" src="testExternal.js"></script>
</head>
<body><h2>This page tests document.write from external
script</h2><P>&nbsp;</P><P>Following content written by script.</P>
<script type="text/javascript">
writeContent()
</script>
</body>
</html>

Pretty straightforward; it just writes some text so I have a reference point
to see if the positioning works. Here's the script:

function writeContent()
{
document.write("<div id='test' style='color:blue; font-family:Arial,
Helvetica, Sans Serif; position:absolute; left:100px; right:100px'>");
document.write("This is some content.<br>");
document.write("And this is some more.");
document.write("</div>");
var offset = 0162;
var rowPos = Math.floor(offset/80);
alert('rowPos = ' + rowPos);
var topVal = (rowPos * 20) + 1 // Row 3 (rowPos = 2) top pixel is at pixel
41 and goes to pixel 60
alert('topVal = ' + topVal);
var colPos = (offset % 80);
alert('colPos = ' + colPos);
var leftVal = ((colPos -1) * 9) + 1; // Column 2 begins at pixel 10 and
goes to pixel 18
alert('leftVal = ' + leftVal);
var str = "<div id='test' style='position:absolute; ";
str = str + "left:" + leftVal;
str = str + "; top:" + topVal;
str = str + ";'>"
alert(str);
document.write(str);
document.write("Here's some more content, with any luck positioned by the
CRP code that doesn't work in WebOpts.");
document.write("</div>");
}

Again, pretty straightforward. The first document.write is from the test I
did before sending my last message. As before, it was written completely to
the HTML stream, semicolons included, and the next two statements were
appropriately positioned and colored by the styling applied in the first
line. The offset variable in the next line is what would normally be passed
in by the call to the script from the HTML; it's just there so the following
lines will confirm to me that the math is correct.

At the suggestion of a colleague, I built the line I wished to test using a
string variable, str, and then wrote that out. (The leftVal and topVal vars
are the calculated position obtained from the screen offset of the original
5250 field.) After building the string, and before attempting to write it
out, I alerted it to the screen. Then I used document.write to write it to
the HTML stream, followed by the div content and the closing div tag.

That's where it gets weird. Upon execution, the first document.write styles
and positions the div's content, as expected. Then all the mathematically
derived positioning information is alerted to the screen, then the actual
value of str is alerted, and is *correct*, then the div string, content, and
closing tag are written. Even though the alert showed that the str contained
the expected value, the rendered HTML (shown below) still shows the string
being cut off at the first semicolon!!

Here's the View Rendered Source output:

<HTML><HEAD><TITLE>Document.write test page</TITLE>
<SCRIPT src="testExternal.js" type=text/javascript></SCRIPT>
</HEAD>
<BODY>
<H2>This page tests document.write from external script</H2>
<P>&nbsp;</P>
<P>Following content written by script.</P>
<SCRIPT type=text/javascript>
writeContent()
</SCRIPT>

<DIV id=test style="RIGHT: 100px; LEFT: 100px; COLOR: blue; FONT-FAMILY:
Arial, Helvetica, Sans Serif; POSITION: absolute">This is some
content.<BR>And this is some more.</DIV>
<DIV id=test style="POSITION: absolute">Here's some more content, positioned
by the CRP code that doesn't work in WebOpts.</DIV></BODY></HTML>

Note that the first, directly written, div is written exactly as expected to
the HTML stream, except (and this is a tad weird, too, unless it's an
artifact of View Rendered Source) the POSITION rule has been moved to the
END of the statement(??). Also note that the second, containing replacement
variables, is not written as expected, but is truncated. Since the alert
seems to aver that the string is being built as expected, I am nonplussed as
to why it is being truncated in the following document.write.

Will you please take a look at what I've got here and see if you can see any
reason for this behavior? I would be most appreciative; this thing is
beating me about the head and shoulders. Have I improperly nested
single/double quotes? Something else? I can't see why this isn't working and
why "alert(str)" displays the expected complete string. Anything you could
suggest would be welcome. Note that since the HTML and script code is
generic and does not require WebOptions variables, you can load the code
into your HTML editor, place the script in the same folder, and run it on
your local machine. Thanks for any help you can offer.

Cheers,
Scott

Posted Via Usenet.com Premium Usenet Newsgroup Services
----------------------------------------------------------
** SPEED ** RETENTION ** COMPLETION ** ANONYMITY **
----------------------------------------------------------
http://www.usenet.com

[Richard Cornford]

Prowler wrote:
<snip>

var str = "<div id='test' style='position:absolute; ";
str = str + "left:" + leftVal;
str = str + "; top:" + topVal;
str = str + ";'>"

Nothing to do with javascript, the problem is the result of a disregard
for CSS. Non-zero length values in CSS are required to specify the units
for the value. And The CSS spec says that 'incorrect' values are to be
ignored.

It makes a change for IE not to be being it usual over-tolerant self,
and actually be behaving as if it is following a W3C recommendation, but
it certainly cannot be faulted for doing so.

With CSS units (I assumed px values) appended to the top and left
property values your test code appears to behave as expected (the
element's position is offset as instructed), and the mark-up recovered
from the innerHTML property includes all of the specified CSS
properties.

Richard.

[Prowler]

Richard,

Thank you very much! I was hoping that other, more knowledgeable and more
experienced eyes might spot some relatively simple error in my construction.
You are absolutely correct, of course. I had been so zoned on thinking this
was a javascript issue that I completely missed the CSS requirement for
value units. I had included the units in my first attempts at this, but
dropped them somewhere along the line. Thank you again for spotting my error
and pointing it out to me.

Scott
(experiencing slap-forehead, "Doh!" moment)
"Richard Cornford" <Ri*****@litotes.demon.co.uk> wrote in message
news:d5*******************@news.demon.co.uk...

Prowler wrote:
<snip>

var str = "<div id='test' style='position:absolute; ";
str = str + "left:" + leftVal;
str = str + "; top:" + topVal;
str = str + ";'>"

Nothing to do with javascript, the problem is the result of a disregard
for CSS. Non-zero length values in CSS are required to specify the units
for the value. And The CSS spec says that 'incorrect' values are to be
ignored.

It makes a change for IE not to be being it usual over-tolerant self,
and actually be behaving as if it is following a W3C recommendation, but
it certainly cannot be faulted for doing so.

With CSS units (I assumed px values) appended to the top and left
property values your test code appears to behave as expected (the
element's position is offset as instructed), and the mark-up recovered
from the innerHTML property includes all of the specified CSS
properties.

Richard.