Forum Moderators: open

Message Too Old, No Replies

How can I control size of browser window on main page?

Need HTML browser window control help.

         

jlmetzger

7:44 pm on Apr 14, 2004 (gmt 0)

10+ Year Member



I need to open a web page to a certain sized browser window, 700 px height and 350 px width, and in the top right corner of the screen. I know how to do this in Dreamweaver by placing a javascript on the link, but how do I do this in html to control the first page they would visit (the home page)?

Is this possible?

choster

8:06 pm on Apr 14, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to WebmasterWorld, jlmetzger!

I would strongly advise you against resizing and repositioning the main browser window. I, and I think most other people, would find that irritating and a little presumptuous.

What you might consider doing if this type of presentation is essential is open a popup window upon loading the main page set to the size and position you need, and providing a "launch" link for users who may be using popup blockers. That way the users retain control over their browsers but you have control over your presentation. You may have seen all-Flash sites which use this method.

Additionally, some browsers allow the user to deactivate resizing/repositioning in the first place, and as you do not generally know what the user's screen size is (a 1.8" cell phone or 36" LCD) we're almost always better off designing "pixel-independent" so to speak.

But if you absolutely absolutely must,

<body onLoad="window.resizeTo(w,h);window.moveTo(x,y)">

where width, height, x position and y position are expressed in pixels.

TheDoctor

8:11 pm on Apr 14, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You do it by the use of JavaScript.

The user overrides it if they want either by not running Javascript or by manua changing the size of the window once it's open.

[added]Written at the same time as choster's much better and more complete message - oh and a welcome to Webmaster World from me too][/added]

jlmetzger

12:48 am on Apr 15, 2004 (gmt 0)

10+ Year Member



Thanks to both of you. I appreciate the concern, but this is for a work project, not a normal web site. I am trying to help someone have a instructional page popup on the right hand side of the page, but they have no control over the call. They only have the page itself. Thats why I can't just put some javascript on the link that calls the page. I know it sounds bad, but thus is the corporate world.....crazy and unorganized and all I have to pay my bills right now. ;o) Thanks for your help.

jlmetzger

12:56 am on Apr 15, 2004 (gmt 0)

10+ Year Member



That worked great! Can you offer a suggestion to make it appear in the upper right corner automatically, without having to name the x and y coordinates? I am worried about those with 800 x 600 and others with 1024 x 768. Thanks again for your help.

choster

5:13 am on Apr 15, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



All of us face those project requirements at one time or another.

Unfortunately, the destination position of a Javascript moveTo is defined from the top left and no other way. But you can add JS to retrieve the screen size, and then calculate what the margin would be from the top left instead of the top right.

There are several related JS variables about whose vintage I do not venture a guess:

screen.width and screen.height-- simply the width and height of the screen in pixels
screen.availWidth and screen.availHeight-- width/height of the screen in pixels minus "fixtures" like the Windows or MS Office taskbars

Borrowing then from rtfm.atrax.co.uk/infinitemonkeys/articles/javascript/967.asp (I'm actually rather far from a JS expert-- we try not to use it)


<script type="text/javascript">
function start() {

// retrieve user's available screen resolution
w = window.screen.availWidth;
h = window.screen.availHeight;

// resize window according to space available, up to 750x350 if possible

resizedW = (w >= 750)? 750 : w;
resizedH = (h >= 350)? 350 : h;

window.resizeTo(resizedW,resizedH);

// to align the window to the right, subtract its
// width from the available space to find the x value of
// the left margin; set y to zero for top

var x = (w - resizedW);
var y = 0;
window.moveTo(x,y);
}
</script>
<body onLoad="start();">