screen.width v screen.availwidth

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
The following HTML, sorry for the wrapping

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
em             { font-style:normal; }
em.ispfturq    { color:aqua;    }
em.ispfblue    { color:#7890f0; }
em.ispfred     { color:red;     }
em.ispfwhite   { color:white;   }
em.ispfyellow  { color:yellow;  }
em.ispffuchsia { color:fuchsia; }
em.ispflime    { color:lime;    }
body { background-color:black; }
div.spf {
          margin:0; padding:0 0 1em 1em;
          color:lime; background:black;

<!-- set the font size to a 52nd of the screen size -->
<script type="text/javascript">
sWidth = screen.width;
/* sWidth = screen.availwidth; */
fSize = parseInt(sWidth/52);
document.write('<style type="text/css">');
document.write('body { font-size:'+fSize+'px; }');
document.write('<' + '/style>');
<title>EDIT       U96891.RAHP.EXEC($WIP) - 01.00</title>
<div class="spf">
<em class="ispfturq"> EDIT       U96891.RAHP.EXEC($WIP) - 01.00  
  </em>Columns <em class="ispfturq">00001 00072</em>
  Command ===&gt; <em class="ispfturq"><u>  
           </u> </em>Scroll ===&gt; <em class="ispfturq"><u>CSR&nbsp;</u></em>
<em class="ispfred"> ****** </em><em  
class="ispfblue">***************************** Top of Data  
<em class="ispflime"> 000100 </em><em class="ispfturq">/* REXX work-in-progress  
temporary member                             */</em>
<em class="ispfred"> ****** </em><em  
class="ispfblue">**************************** Bottom of Data  

is supposed to fill the screen. However, when the Bookmarks sidebar is open, and  
I open the file, it stretches off the screen. So doing a bit of Googling, I got to

but with or without the bookmarks sidebar open, the results are exactly the same,

Your Screen:

Total width/height: 1760*990

Available width/height: 1760*953

Color depth: 24

Color resolution: 24

How do I get the "real" available screen width? (and, but that's not really very  
required, is there a way of auto-refreshing the page when this avaiable screen  
width changes?


Robert AH Prins
No programming or html @

Re: screen.width v screen.availwidth

Robert AH Prins wrote:

Quoted text here. Click to load it

… is junk.  <

Quoted text here. Click to load it

In ignoring you will come a long way doing things properly.

Quoted text here. Click to load it

You are asking the wrong question.

With plain CSS you can get the real *viewport* width, which actually is all  
that matters (the window does not need to fill the screen, and, as you have  
realized by now, the viewport does not need to fill the window).

Either on the containing box,

  padding: 0;

and on the target element

  margin: 0;
  width: 100%;

or on the target element

  position: absolute;
  left: 0;
  right: 0;

with optional “top”, ”bottom”, or ”height”, ”min-height”, and “max-height”  
declarations.  (Whether you position the containing box as well is up to  

Quoted text here. Click to load it

The CSS renderer does that automagically.

See the Web (except and  
<news:comp.infosystems.authoring.stylesheets> for more.

var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
)  // Plone, register_function.js:16

Re: screen.width v screen.availwidth

Thomas 'PointedEars' Lahn wrote:

Quoted text here. Click to load it


Quoted text here. Click to load it
Not with javascript. Nonsense propagates like wildfire in this field.
  -- Richard Cornford, comp.lang.javascript, 2011-11-14

Re: screen.width v screen.availwidth

On 2015-04-22 10:54, Thomas 'PointedEars' Lahn wrote:
Quoted text here. Click to load it

It's generated by REXX on IBM's z/OS (I'm a mainframe person) and I know it's  
not standards compliant, the REXX code is almost a decade old, not written by  
me, and I'm only looking, in my "spare" time at this particular problem as it's  
the most visible, I'm sure there are probably other issues, but the person who  
originally wrote the REXX exec has long gone and next to that it was originally  
a tool for us in IT that sadly(?) escaped into the business.

Quoted text here. Click to load it

Does that mean it's as simple as to enclose the data to be "expanded" into a  
<DIV> with CSS padding:0?

Quoted text here. Click to load it

the individual lines?

Quoted text here. Click to load it

OK, I'll give it a try...

Robert AH Prins

Re: screen.width v screen.availwidth

Robert AH Prins wrote:

Quoted text here. Click to load it

What matters most here is that this markup triggers the so-called  
Quirks/Compatibility Mode because it is not even recognizable as any  
particular version/variant of HTML.  So you have no hope of achieving a  
remotely consistent result among browsers or browser versions, with or  
without additional client-side scripting.  You need to clean up that
markup; the least you need to do is to provide a DOCTYPE (declaration).

Quoted text here. Click to load it

I do not know your use-case, so I do not know what you mean by “data”.

The containing box may be contained in another box.  If your content should  
stretch across the viewport, neither containing box must have a margin or a  
padding in that direction.  (It is probably a good idea to have one box have  
a margin or a padding, your content would be immediately next to the  
viewport’s boundaries.)

See: box model.

F'up2 <news:comp.infosystems.www.authoring.stylesheet>

Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.

Site Timeline