473,386 Members | 1,621 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,386 software developers and data experts.

Resize elements onload

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.
Jun 27 '08 #1
5 2714
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.'
Jun 27 '08 #2
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/
Jun 27 '08 #3
"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
Jun 27 '08 #4
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.

Jun 27 '08 #5
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>
Jun 27 '08 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Lars Forslin | last post by:
Hi, I am configurating this guestbook that shows text way too big. I have tried with style sheets and font tags, but they are ignored (not the font, but the size). I figure a javascript could do...
0
by: solosnake | last post by:
Hello, and merry Christmas! When trying to compile some code that had specific alignment requirements, I found that the Visual Studio .NET compiler gave me compile time errors. It forbids...
9
by: Don | last post by:
Does anyone know where I can find a client-side function I can reference from within an HTML/JavaScript web page? I'm currently using a core PHP function to do this, but I'd rather do it on the...
3
by: John | last post by:
Hi, This is my first experiment with C#, I'm trying to handle the resize event. According to the documentation I should handle the Layout event for this. My question is: how do I register this...
2
by: wolfing1 | last post by:
Maybe this doesn't make any sense, but is it possible to dynamically resize an iframe to the height of its contained page? Something that works in Opera/Firefox/IE. I can resize it with a...
3
by: Jim Langston | last post by:
I really am not sure if this question belongs in this newsgroup, but not sure where else to ask it. There is someone working on a game that I tested, and it was taking >30 seconds to load. He...
14
by: Tarun | last post by:
Hello, I am facing problem sometimes while I am trying to do push_back on a vector. Currently I am doing resize of the vector increasing the size by one and then push_back and seems like the...
18
by: n.torrey.pines | last post by:
I wonder if resize() is required to check whether a container is already of the desired size.
3
by: Jills | last post by:
Hi All, Does anyone have any idea about how can we resize an IFRAME dynamically according to its content from another domain? I want to increase the height according to the page that is...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.