How do I center or resize a Browser Window?

A

anonieko

You can try this code:<!--- filename: mypage.html ---->
<html>
....blah blah blah
<script language=JavaScript src=/Javascript/center.js></script>
</html>



/*******************************
filename: center.js
********************************/


var xMax = screen.width, yMax = self.screen.availHeight;

if (document.body.clientWidth)
{
lnBodyClientWidth=document.body.clientWidth
lnBodyClientHeight=document.body.clientHeight
}
else
{
lnBodyClientWidth=window.innerWidth
lnBodyClientHeight=window.innerHeight
}

xOffset = (xMax - lnBodyClientWidth)/2, yOffset = (yMax -
lnBodyClientHeight)/2;
self.moveTo(xOffset,yOffset)







<!-- javascript size resize browser client width window offset move -->
 
R

Richard Cornford

You can try this code:
<script language=JavaScript src=/Javascript/center.js></script>
<snip>

In valid HTML 4 the TYPE attribute is required in an opening script tag.
The LANGUAGE attribute is deprecated, and redundant when the required
TYPE attribute is present.
var xMax = screen.width, yMax = self.screen.availHeight;

Using a mixture of - screen.width - and screen.availHeight - seems to
pre-suppose that the (a) taskbar is present on the system, that there
are no other similar desktop features (office bar) and/or that it is
(they are) located only at the top and/or bottom of the user's screen.

That is a lot of assumptions, which will be wrong in some contexts (as
desktop furniture can be user positioned).

Not to mention the assumption that - availWidth/Height - are implemented
in the environment in question and that their values are meaningful.
There is also a disregard for the nature of these values on
multi-monitor systems, where screen dimensions may be either one of the
dimensions of the smallest rectangle that can encompass all of the
monitors in use, or the dimensions of only the 'primary' monitor. in the
first case positioning in a guessed 'centre' may result in the browser
being placed over the boundary between two (or more) monitors, and/or in
(or partly in) an area of the overall desktop that is not displayable.

In the latter case the 'primary' monitor does not have to be the one on
which the user is viewing the browser, leaving any 'centring' code
possibly moving the entire browser out of immediate sight.
if (document.body.clientWidth)

It would make sense to verify that - document.body - exists before
accessing its properties, as it did not exist on older browsers so
without the test the code will error out and fail uncontrollably.

On IE, whether the - clientWidth - property reflects the width of the
viewport depends on which mode the browser is in. In 'CSS1Compat' mode
the viewport dimensions should be read from the -
document.documentElement - property. For other DOM browsers that switch
modes, the object from which the viewport dimensions should be read
might be either one of - documentElement - or - body -, and the object
in question may or may not switch when different modes are used.

Also, type-converting test on DOM properties that are of primitive type
(like numbers) result in false for certain values of those properties,
even when the property is defined on the system. Testing with - typeof -
is invariable more useful when properties may have primitive values when
implemented.
{
lnBodyClientWidth=document.body.clientWidth
lnBodyClientHeight=document.body.clientHeight
}
else

In circumstances where - document.body.clientWidth - is undefined or
zero there is no certainty that the system will support
innerWidth/Height, so an additional test is indicated before this branch
is taken.
{
lnBodyClientWidth=window.innerWidth
lnBodyClientHeight=window.innerHeight
}

xOffset = (xMax - lnBodyClientWidth)/2, yOffset = (yMax -
lnBodyClientHeight)/2;

The viewport dimensions are being used here without regard for the
actual dimensions of the window. No account is being taken of the
variable, and user configurable, window chrome. Having failed to take
chrome into account, these positions will tend to overshoot the centre.
There is also no account being taken for the possibility that the window
dimensions already exceed the available screen dimensions, where the
resulting negative offset may be very inconvenient to the user (if the
browser acted upon them). And no account has been taken for taskbars and
other desktop furniture being at the top or left of the screen(s), as
that would suggest an offset for the positioning.

However, as preceding code may have failed to assign a numeric value to
either of - lnBodyClientWidth - or - lnBodyClientHeight - verification
of an acceptable range for those values should be extended to verify
that they are meaningful numbers to start with.
self.moveTo(xOffset,yOffset)

The window's - moveTo - method has been subject to considerable abuse
over the years so these days it is usually capable of being disabled by
users, or disabled by default.
<!-- javascript size [ ... ] offset move -->

In javascript these sequences are syntax errors, they should never
appear in an javascript file.

There a lots of things wrong with this code, and circumstances where it
will fail (to some degree or another), but you have failed to state you
question, or give any details of the problems you are actually
experiencing with the code.

Richard.
 
R

Richard Cornford

Wow Thats a lot of pounding there!
But where is your solution?

Solution to what? You are still to state the problem and its context.
You might try reading the group's FAQ, and related resources, on the
subject of asking questions (among other things).

Richard.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,995
Messages
2,570,230
Members
46,816
Latest member
SapanaCarpetStudio

Latest Threads

Top