Resize elements onload

Doug Gunnoe · Apr 13, 2008

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 · Apr 13, 2008

Doug Gunnoe said:
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

Joost Diepenmaat · Apr 13, 2008

Lasse Reichstein Nielsen said:
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.

Tom de Neef · Apr 13, 2008

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 · Apr 13, 2008

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 · Apr 14, 2008

Doug said:
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

Flip-Cards with Local Images	1	Mar 27, 2023
Help with my responsive home page	2	Dec 14, 2022
How to properly insert a landing page within same container beneath an image element?	1	Oct 7, 2024
Seeking co-founders for my company.	3	Sep 8, 2024
Help with code	0	Jun 12, 2022
Adding Dinamically some HTML onload	0	Sep 27, 2006
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 25, 2022
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022

Resize elements onload

Doug Gunnoe

Lasse Reichstein Nielsen

Joost Diepenmaat

Tom de Neef

Doug Gunnoe

Thomas 'PointedEars' Lahn

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads