Umm, yes. I think I see what you're getting at, but the problem is that we
don't want any auto-resizing to go on. I know it's probably difficult to
visualize, especially if you've never worked a lot with character-based
screen design, but resizing is the last thing we need.
Further, we are constrained by the tool we are using as an intermediary
between the 400 app and the Web app. To the 400, every screen is a table.
One table, with 24 rows and 80 columns, period. Therefore, to the
intermediary tool, every screen has just one table (although we manage to
work around that with some sleight-of-hand). In the markup language skeleton
that the 400 feeds its output into, what you define for a table row is true
for every table row. We are limited in what we can add to the skeleton,
since anything added to an element type applies to *all* elements of that
type. That's why we have to do so much post-rendering styling, because at
that point the DOM is available and we can manipulate elements without the
interference by or limitations of the generator.
It probably sounds confusing; I know it sure as hell did to me when I
started on this project phase a few months ago. Just to give you an idea how
weird it is, *all* table cell widths are specified using colspan, and *every
row's* colspans add up to 160. Why? Remember, 24 rows of 80 columns on a
text-based screen, meaning two bytes per position (one for the character,
the other for the screen attributes--color, brightness, underline, etc.).
When translating a given AS/400 cell's width to a value to use for the Web
screen, the only way the tool knows to do it is to take the character width
of the padded field value and double it. By doing this for every row, with
each row's colspans adding up to the same value, each row's width ends up
the same and the field's contents more or less align. Note, I said "more or
less." One other thing the 400 simply does not grok is proportional fonts.
Try to use anything other than Courier New and the shyte hits the
ventilator, alignment-wise.
Like I said, it's a real adventure. Fun and challenging, though. ;-)
Cheers,
Scott
----- Original Message -----
From: "Pau Garcia i Quiles" <[EMAIL PROTECTED]>
To: <[EMAIL PROTECTED]>
Sent: Monday, August 23, 2004 4:11 PM
Subject: [wdvltalk] RE: DIV doesn't auto-size
I think I didn't explain myself right.
I was not advising you to develop a liquid layout. I was advising you to
develop an auto-resize layout.
If you want absolute positioning, you can do it with 'em' and 'ex' units.
For an auto-resize layout to work without moving parts, you just need to
include lots of div's so that buttons don't move to another line.
For instance, instead of having a margin of 50 px, set a margin of 4.5em
(it's only an example), and have a middle "frame" (a div) which would
contain
the terminal screen (you can set its size in px). More or less like this:
--------------------------------------------------------
| ^ |
| | |
| 6em |
| | |
| / |
| ------------------------------- |
| | | |
| | | |
|<- 5em ->|<- 500px ->| |
| | | |
| | | |
| | | |
| ------------------------------- |
| |
| |
| |
--------------------------------------------------------
This way you have auto-resizing margins (the 'em' unit reshapes according
to screen resolution), but a fixed size for the 5250 terminal screen.
For button positioning, you set div's with similar positioning.
>-- Original Message --
>Reply-To: [EMAIL PROTECTED]
>From: "[EMAIL PROTECTED]" <[EMAIL PROTECTED]>
>To: [EMAIL PROTECTED]
>Subject: [wdvltalk] RE: DIV doesn't auto-size
>Date: Mon, 23 Aug 2004 15:54:30 -0400
>
>
>Thank you very much for your response, Pau, but that is not an option.
>
>Perhaps I should have emphasized my opening statement more strongly. This
>is
>a Web front end to an 11-year-old, IBM AS/400 GREEN SCREEN APP. That is
to
>say, it is designed to make available to Web access a basic 24 line X 80
>character, 5250 terminal-based application. It is not, nor can it
>successfully be made, a liquid layout, if we are to succeed in our purpose,
>which is to allow access to the application via the Web (versus the
>requirement of an active Global Services connection to our network), while
>not requiring the thousands of users globally who have learned to use the
>~1500-screen application to retrain.
>
>As such, fields must be where users are accustomed to finding them, labeled
>as they are accustomed to finding them, with keystroke responses
appropriate
>to the responses in the 5250 application. In this situation, and given
that
>the AS/400 has no clue whatsoever about the environment into which it is
>sending its labels and field values, being accustomed to working with a
24
>X
>80 character grid on a green screen 5250 terminal, absolute positioning
is
>a
>requirement, not an option. Em or Ex based positioning is completely out
>of
>the question in this application. The application *requires* IE 6+, at
1024
>X 768 minimum, and every screen will fit into the 730w X 487h px DIV
>provided for it.
>
>I should also note that the script has worked for *every* other one of
the
>55+ pages to which it has been applied thus far. The container DIV width
>is
>specified in px, the script line "var theWidth = theNode[0].clientWidth;"
>returns the width value in px by default, and the math, by definition,
>requires the same measurement units to be used throughout the formula for
>it
>to work. Furthermore, the problem is *not* that the DIV is mispositioned;
>in
>fact, it is positioned absolutely dead center, just as the script is
>designed to achieve. The problem is that the text wraps *within* the DIV,
>which has nothing whatsoever to do with the external measurement units
used
>in calculating the position of the DIV itself.
>
>Just so this doesn't seem to be an exercise in futility, I will point out
>that we are free to (and do) use color, font choice, row striping,
>backgrounds, borders, etc. to make the Web version much more attractive
than
>the 5250 green screen app. Also, where the 5250 app required one to know
>the
>multitudinous line option keystrokes (anybody remember Wordstar's control
>key combinations?), or which of the F1 to F24 keys to use for a given
>option, we provide popup Select menus for each option, and a dedicated
area
>(DIV) on the left of the main app area just for displaying the
>currently-applicable line options (for those keyboard jockeys who will
>prefer to use the keystrokes instead of using popup menus), as well as
a
>clickable list of all the F-key functions currently available for the
screen
>being displayed, again providing a choice between keystroke (F-key) and
>mouse operation. In other words, besides making the application available
>over the Web, we are making it easier for new users to learn and more
>flexible in use even for the "old hands."
>
>So, anybody got any idea why the text is wrapping in an absolutely
>positioned (therefore outside the page flow) DIV with no width or overflow
>attribute? ;-)
>
>Cheers,
>Scott
>----- Original Message -----
>From: "Pau Garcia i Quiles" <[EMAIL PROTECTED]>
>To: <[EMAIL PROTECTED]>
>Sent: Monday, August 23, 2004 2:50 PM
>Subject: [wdvltalk] RE: DIV doesn't auto-size
>
>
>
>Your Javascript code is placing the <div> using absolute values in pixels.
>Use 'em' or 'ex' units and you are done.
>
>>-- Original Message --
>>Reply-To: [EMAIL PROTECTED]
>>From: "[EMAIL PROTECTED]" <[EMAIL PROTECTED]>
>>To: [EMAIL PROTECTED]
>>Subject: [wdvltalk] DIV doesn't auto-size
>>Date: Mon, 23 Aug 2004 14:02:07 -0400
>>
>>
>>In our current app (a Web front end to an AS/400 "green screen" app) we
>have
>>a field representing the screen title for each screen, called, oddly
>enough,
>>screenTitle. It is contained in an absolutely positioned DIV with no width
>>attribute. Due to the nature of the AS/400 app providing the data, some
>>(many) items must be styled post-rendering using javascript. The CSS and
>>js
>>code I've been using has worked fine up until this one screen, which has
>>a
>>longer than usual title. On this screen the field is wrapping, which it
>>shouldn't do, as far as I know. Here's the CSS for the DIV:
>>
>>.screenTitle {
>> position:absolute;
>> margin-left: auto;
>> margin-right: auto;
>> font-family:Verdana, Arial, Helvetica, sans-serif;
>> font-weight:bold;
>> font-size:12px;
>> color:#000000;
>> text-align: center;
>> z-index: 10;
>> }
>>
>>Here's the HTML for the element:
>>
>><div id="screenTitle" class="screenTitle"><!-- -->Display Customer Item
>>Reference by UPC Code</div>
>>
>>And here's the javascript used (called in our initPage function) to center
>>the DIV on the screen:
>>
>>function setCompanyScreenCenter()
>>{
>>var theNode = getLikeElements("div", "id", "screenTitle");
>>// alert('This node\'s ID is ' + theNode[0].id);
>> if (theNode[0]) {
>> var theWidth = theNode[0].clientWidth;
>> if (theNode[0].firstChild.nextSibling) {
>> if (theNode[0].firstChild.nextSibling.nodeType == 3) { //text
>>node
>> var workString =
>>theNode[0].firstChild.nextSibling.nodeValue;
>> workString = trim(workString);
>> theNode[0].firstChild.nextSibling.nodeValue = workString;
>> theNode[0].style.left = 730/2 - (theWidth/2) + "px";
>>//container DIV width is 730px
>> theNode[0].style.width = theWidth;
>> } //if (theNode[0].first...
>> } //if (theNode[0].first...
>> } //if (theNode[0])
>>} //function
>>
>>Everything works fine on every other page. My experience has been that
>a
>>DIV
>>with no width or overflow attribute will automatically expand horizontally
>>to accommodate its contents, up to the width of its parent container.
I
>am
>>nonplussed as to why this one doesn't seem to be "following the script,"
>>so
>>to speak. Any ideas?
>>
>>Cheers,
>>Scott
>>
>>
>>____ ? The WDVL Discussion List from WDVL.COM ? ____
>>To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED]
>
>> Send Your Posts To: [EMAIL PROTECTED]
>>To set a personal password send an email to [EMAIL PROTECTED] with
the
>>words: "set WDVLTALK pw=yourpassword" in the body of the email.
>>To change subscription settings to the wdvltalk digest version:
>> http://wdvl.internet.com/WDVL/Forum/#sub
>>
>>________________ http://www.wdvl.com _______________________
>>
>>You are currently subscribed to wdvltalk as: [EMAIL PROTECTED]
>>To unsubscribe send a blank email to %%email.unsub%%
>>
>>To unsubscribe via postal mail, please contact us at:
>>Jupitermedia Corp.
>>Attn: Discussion List Management
>>475 Park Avenue South
>>New York, NY 10016
>>
>>Please include the email address which you have been contacted with.
>>
>
>--
>Pau Garcia i Quiles
>MSN Messenger: [EMAIL PROTECTED]
>http://www.elpauer.org
>
>
>____ ? The WDVL Discussion List from WDVL.COM ? ____
>To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED]
> Send Your Posts To: [EMAIL PROTECTED]
>To set a personal password send an email to [EMAIL PROTECTED] with the
>words: "set WDVLTALK pw=yourpassword" in the body of the email.
>To change subscription settings to the wdvltalk digest version:
> http://wdvl.internet.com/WDVL/Forum/#sub
>
>________________ http://www.wdvl.com _______________________
>
>You are currently subscribed to wdvltalk as: [EMAIL PROTECTED]
>To unsubscribe send a blank email to %%email.unsub%%
>
>To unsubscribe via postal mail, please contact us at:
>Jupitermedia Corp.
>Attn: Discussion List Management
>475 Park Avenue South
>New York, NY 10016
>
>Please include the email address which you have been contacted with.
>
>
>
>____ ? The WDVL Discussion List from WDVL.COM ? ____
>To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED]
> Send Your Posts To: [EMAIL PROTECTED]
>To set a personal password send an email to [EMAIL PROTECTED] with the
>words: "set WDVLTALK pw=yourpassword" in the body of the email.
>To change subscription settings to the wdvltalk digest version:
> http://wdvl.internet.com/WDVL/Forum/#sub
>
>________________ http://www.wdvl.com _______________________
>
>You are currently subscribed to wdvltalk as: [EMAIL PROTECTED]
>To unsubscribe send a blank email to %%email.unsub%%
>
>To unsubscribe via postal mail, please contact us at:
>Jupitermedia Corp.
>Attn: Discussion List Management
>475 Park Avenue South
>New York, NY 10016
>
>Please include the email address which you have been contacted with.
>
--
Pau Garcia i Quiles
MSN Messenger: [EMAIL PROTECTED]
http://www.elpauer.org
____ � The WDVL Discussion List from WDVL.COM � ____
To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED]
Send Your Posts To: [EMAIL PROTECTED]
To set a personal password send an email to [EMAIL PROTECTED] with the
words: "set WDVLTALK pw=yourpassword" in the body of the email.
To change subscription settings to the wdvltalk digest version:
http://wdvl.internet.com/WDVL/Forum/#sub
________________ http://www.wdvl.com _______________________
You are currently subscribed to wdvltalk as: [EMAIL PROTECTED]
To unsubscribe send a blank email to %%email.unsub%%
To unsubscribe via postal mail, please contact us at:
Jupitermedia Corp.
Attn: Discussion List Management
475 Park Avenue South
New York, NY 10016
Please include the email address which you have been contacted with.
____ � The WDVL Discussion List from WDVL.COM � ____
To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED]
Send Your Posts To: [EMAIL PROTECTED]
To set a personal password send an email to [EMAIL PROTECTED] with the words: "set
WDVLTALK pw=yourpassword" in the body of the email.
To change subscription settings to the wdvltalk digest version:
http://wdvl.internet.com/WDVL/Forum/#sub
________________ http://www.wdvl.com _______________________
You are currently subscribed to wdvltalk as: [EMAIL PROTECTED]
To unsubscribe send a blank email to [EMAIL PROTECTED]
To unsubscribe via postal mail, please contact us at:
Jupitermedia Corp.
Attn: Discussion List Management
475 Park Avenue South
New York, NY 10016
Please include the email address which you have been contacted with.
