Resize elements onload

[Doug Gunnoe]

I'm considering resizing a div onload to better match the screen width
of the user.

Easy enough, however it seems that I have read in this group that
there are potential problems with this, differences amongst the
browsers, inconsistence in determining screen size, and debate about
which property to use - and by this I believe there is screen size
something like available screen size.

Any thoughts or guidance on this subject is appreciated.

[Lasse Reichstein Nielsen]

Doug Gunnoe <do********@gmail.comwrites:

I'm considering resizing a div onload to better match the screen width
of the user.

Easy enough, however it seems that I have read in this group that
there are potential problems with this, differences amongst the
browsers, inconsistence in determining screen size, and debate about
which property to use - and by this I believe there is screen size
something like available screen size.

Any thoughts or guidance on this subject is appreciated.

First of all, ignore screen size. All you have available is the
browser viewport size. If the user resizes the browser window,
and thereby the viewport, your page should adapt to that, no matter
what screen size the browser lives in.

You might try to resize the browser, but expect to fail. My browser
displays pages in maximized windows inside the browser application. No
page controlled resizing can change the viewport size.

Second, if you resize to a size based on viewport size, you don't need
scripts, since you can already do that with CSS.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

[Joost Diepenmaat]

Lasse Reichstein Nielsen <lr*@hotpop.comwrites:

Doug Gunnoe <do********@gmail.comwrites:

>I'm considering resizing a div onload to better match the screen width
of the user.

Easy enough, however it seems that I have read in this group that
there are potential problems with this, differences amongst the
browsers, inconsistence in determining screen size, and debate about
which property to use - and by this I believe there is screen size
something like available screen size.

Any thoughts or guidance on this subject is appreciated.

First of all, ignore screen size. All you have available is the
browser viewport size. If the user resizes the browser window,
and thereby the viewport, your page should adapt to that, no matter
what screen size the browser lives in.

Agreed.

You might try to resize the browser, but expect to fail. My browser
displays pages in maximized windows inside the browser application. No
page controlled resizing can change the viewport size.

Yes. My window manager does not allow the browser to resize its window
at all. Which is not a problem to be worked around, if it can be worked
around at all - I don't *want* some crappy website to resize the window
(and the X number of tabs in that window), and mess up my view of other
applications too. It also does not allow any new window to specify its
size. All new browser windows will open up (if they open up at all) at
the same size of the original window.

Second, if you resize to a size based on viewport size, you don't need
scripts, since you can already do that with CSS.

Again, agreed. FWIW, my view is the *less* sizing you do, the
better. It's probably a good thing to set em-based (IOW font-size based)
minimum and maximum widths, and you may want specific headers / footers
and side-bars but in general it's best to let the user's preferred
window and font size determine everything else.

--
Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/

[Tom de Neef]

"Lasse Reichstein Nielsen" <lr*@hotpop.comwrites:

>

>I'm considering resizing a div onload to better match the screen width
of the user.

I guess you mean the browser window's width. So you would be resizing when
the user resizes the browser.
If you can , rely on HTML and CSS. Put your div in a table and specify table
dimensions.
This will be hard when you use absolute positioning. In that case handle it
in <body onresize="resizePage()"but beware that onresize is non-standard.
To get the dimensions winWidth and winHeight from various browsers, start
resizePage() with:
var winWidth, winHeight, d=document
if (typeof window.innerWidth!="undefined")
{
winWidth = window.innerWidth
winHeight = window.innerHeight
}
else
{ if (d.documentElement &&
typeof d.documentElement.clientWidth!="undefined" &&
d.documentElement.clientWidth!==0)
{
winWidth = d.documentElement.clientWidth
winHeight = d.documentElement.clientHeight
}
else
if (d.body && typeof d.body.clientWidth!="undefined")
{
winWidth = d.body.clientWidth
winHeight = d.body.clientHeight
}
else { winWidth = 0; winHeight = 0; return }
}

To check if above code works in your browser, laod
http://www.qolor.nl/spelling/ww.htm and resize.
Tom

[Doug Gunnoe]

And I tend to agree that resizing is not such a good idea.

In this case, I don't have complete control over this particular
element because I'm inserting from an off site script.

Of course, I guess I do have complete control, because I don't have to
put it on the page at all if I don't want to.

But thanks to everyone for the advice, very helpful. And thanks to Tom
for the code snip.

[Thomas 'PointedEars' Lahn]

Doug Gunnoe wrote:

I'm considering resizing a div onload to better match the screen width
of the user.

The CSS `width' and `max-width' properties do not suffice?
PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>