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]

Re: Resize elements onload

Doug Gunnoe <douggunnoe@gma il.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 - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Joost Diepenmaat]

Re: Resize elements onload

Lasse Reichstein Nielsen <lrn@hotpop.com writes:

Doug Gunnoe <douggunnoe@gma il.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]

Re: Resize elements onload

"Lasse Reichstein Nielsen" <lrn@hotpop.com writes:

>

>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="resiz ePage()"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.innerWid th!="undefined" )
{
winWidth = window.innerWid th
winHeight = window.innerHei ght
}
else
{ if (d.documentElem ent &&
typeof d.documentEleme nt.clientWidth! ="undefined" &&
d.documentEleme nt.clientWidth! ==0)
{
winWidth = d.documentEleme nt.clientWidth
winHeight = d.documentEleme nt.clientHeight
}
else
if (d.body && typeof d.body.clientWi dth!="undefined ")
{
winWidth = d.body.clientWi dth
winHeight = d.body.clientHe ight
}
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]

Re: Resize elements onload

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]

Re: Resize elements onload

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, <f806at$ail$1$8 300dec7@news.de mon.co.uk>