Jump to content

Recommended Posts

A button in my window opens a new, narrow window centered on the screen.

  window.open("/myWindow.html", "_blank", width="400", height=screen.height, top=0, left=(screen.width / 2 - 200));

My naive assumption was that, on a large screen (laptop or larger), this would create a window 400px wide. On my 13" macbook, according to the information in the Safari web inspector, it creates a window only 347.826px wide.

The CSS of the new window sets a background, then creates a <div class="shell">, 300px wide. The setting of margin:0 auto is meant to center the "shell" in the new window.

body {
	background-color:#C03;
	background-image:url(../images/Curtain%20narrow.jpg); 
	overflow-x:hidden;	
}
div.shell {
	background-color:transparent;
	color:white;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16.5px;	
	font-weight:600;
	height:auto;
	margin:0 auto;
	min-height:90vh;
	overflow:hidden;
	text-align:center;
}

What happens is that the 300px shell is drawn tight against the right edge of the narrower-than-specified window, and can be pulled back and forth.

If I manually resize the window to 400px it looks and works as intended. Should I focus on getting the window to draw the right size? Attempt to resize it on open? Or is there some different setting that would give me what I want?

On my iPhone 6s, The window fits the screen width and the shell div is centered. What am I missing to get the same results on the larger screen?

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...