Minimum page size

ChrisRChamberlain · Nov 16, 2004

Hi all

Search is currently down and would like to know if there is any means of preventing a webpage from being resized below a minimum height/width?

TIA

FAQ184-2483 - answering getting answered.

Chris

PDFcommander^tm.com
PDFcommander^tm.co.uk

Vragabond · Nov 16, 2004

For standards-compliant new browsers, yes:

Code:

body {
  min-width: 400px;
  min-height: 300px;
}

For IEs however, you will need to use expressions and bloat your code to this point:

Code:

body {
  width: 100%;
  min-width: 400px;
  min-height: 300px;
  width: expression(document.body.clientWidth < 400? "400px": "100%" );
}

Code is untested but logic says it should work.

ChrisRChamberlain · Nov 16, 2004

Vragabond

Thanks for your response - pasted your code(s) in the relevant .css file and tested in IE6 offline.

Neither version worked unfortunately.

FAQ184-2483 - answering getting answered.

Chris

PDFcommander^tm.com
PDFcommander^tm.co.uk

Vragabond · Nov 16, 2004

Hmm, I guess it does not work on the body. Try with a wrapper div. Also, that solution does not provide min-height for IE, you can do this by just specifying the height for IE separately:

Code:

#wrapper {
  width: 100%; /* total width for other browsers */
  min-width: 400px; /* minimal width for other browsers */
  min-height: 300px; /* minimal height for other browsers */
  width: expression(document.body.clientWidth < 400? "400px": "100%" ); /* total and minimal width for IE, others will ignore */
}

* html body #wrapper {
  height: 300px; /* min-height for IE, others will ignore */
}

This does work for me.

ChrisRChamberlain · Nov 16, 2004

Vragabond

Pasted #wrapper... in the .css and <div id="wrapper"> immediately after <body ...> in the HTML page.

I appreciate that may not be correct - when IE is dragged to its minimum, IE locks up requiring CTRL+ALT+DEL.

FAQ184-2483 - answering getting answered.

Chris

PDFcommander^tm.com
PDFcommander^tm.co.uk

Vragabond · Nov 16, 2004

Hmmm, might be the stuff you have in your page. How does your page look like. I did it with a test page and it worked, I could resize IE as much as I wanted and it worked like a charm.

chessbot · Nov 16, 2004

You could use javascript:

Code:

<script type="text/javascript">
<!--
var minwidth = 400, minheight = 400;
function limitSize()
{
  var w = screen.width;
  var h = screen.height;
  if (w < minwidth || h < minheight)
    resizeTo(minwidth,minheight);
}
window.onresize = limitSize;
// -->
</script>

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series

cLFlaVA · Nov 16, 2004

chess-

one minor change and one minor addition I'd make:[ul][li]screen.width and screen.height give you the screen's resolution, not the size of the window[/li][li]in addition to window.onresize, I'd also call it on window.onload, in case the user's window opens less than 400 by 300[/li][/ul]

Code to find browser width (from here)

Code:

if (parseInt(navigator.appVersion)>3) {
 if (navigator.appName=="Netscape") {
  winW = window.innerWidth;
  winH = window.innerHeight;
 }
 if (navigator.appName.indexOf("Microsoft")!=-1) {
  winW = document.body.offsetWidth;
  winH = document.body.offsetHeight;
 }
}

Other than that, you have my blessing.

*cLFlaVA
----------------------------
"Holy crip he's a crapple!

chessbot · Nov 16, 2004

Yeah... thanks...

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series

ChrisRChamberlain · Nov 16, 2004

Vragabond

The reason for wanting to impose a minimum page size is that the page is basically structured in three columns as discussed in thread215-951588.

Where there is say a form in the middle column, once the page is reduced to a certain width, the entire content of the middle column is 'squeezed out' and then sits below the left and right columns.

Presumably it's the presence of the form that causes the page to lock up?

chessbot and cLFlaVA

Thanks for your responses - not certain of how the two pieces of code are joined and location of the code.

FAQ184-2483 - answering getting answered.

Chris

PDFcommander^tm.com
PDFcommander^tm.co.uk

Vragabond · Nov 17, 2004

Bare in mind that Chris is looking for minimum page sizes, not minimum browser window. I as a user would hate it if there was a page out there which will not let me shrink my browser as much as I wanted. The solution I gave worked for me and should work with most codes as well. Here's a chance with the code you've been given -- works as expected in my IE6.

Code:

<html>
<head>
<style type="text/css">
#col_left {
	float: left;
	width: 150px;
	background: #99ff99;
}

#col_right {
	float: right;
	width: 150px;
	background: #ff9999;
}

#col_centre {
	float: left;
	width: auto;
	background: #bbbbbb;
}

#ctr_block {
	width: 100%; /* total width for other browsers */
	min-width: 400px; /* minimal width for other browsers */
	min-height: 300px; /* minimal height for other browsers */
	width: expression(document.body.clientWidth < 400? "400px": "100%" ); /* total and minimal width for IE, others will ignore */
	background: #9999ff;
}

* html body #ctr_block {
  height: 300px; /* min-height for IE, others will ignore */
}

#clearer {
	height: 5px;
	clear: both;
}

</style>
</head>
<body>
<div id="ctr_block">
  <div id="col_right">Right Hand column</div>
  <div id="col_left">Left Hand column</div>
  <div id="col_centre">Lots of text here</div>
  <div id="clearer"></div>
</div>
</body>
</html>

cLFlaVA · Nov 17, 2004

I agree, Vragabond, but reading the question lead me to understand otherwise:

Search is currently down and would like to know if there is any means of preventing a webpage from being resized below a minimum height/width

*cLFlaVA
----------------------------
"Holy crip he's a crapple!

ChrisRChamberlain · Nov 17, 2004

Vragabond

Created a new .html file from the code you posted and viewed it in IE - infortunately you can reduce the page below either minimum value.

Patched the code into a page with a form, and the page 'freezes' when a minimum value is hit.

FAQ184-2483 - answering getting answered.

Chris

PDFcommander^tm.com
PDFcommander^tm.co.uk

Vragabond · Nov 18, 2004

I would still ask you to give me a link to your page so I can test it myself. What IE & OS are you using anyway?

ChrisRChamberlain · Nov 18, 2004

Vragabond

Owing to a domain name change, the site is not going to be available for up to 48hrs.

As soon as it's up and running I will post address of page with your code - thanks for your help and patience.

FAQ184-2483 - answering getting answered.

Chris

PDFcommander^tm.com
PDFcommander^tm.co.uk

ChrisRChamberlain · Nov 18, 2004

Vragabond

Site is back up.

http://www.pdfcommander.net/comments.html

illustrates the central column displacement problem.

http://www.pdfcommander.net/removefromlist2.html

illustrates the 'freeze' problem.

FAQ184-2483 - answering getting answered.

Chris

PDFcommander^tm.com
PDFcommander^tm.co.uk

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Minimum page size

ChrisRChamberlain

Programmer

Vragabond

Programmer

ChrisRChamberlain

Programmer

Vragabond

Programmer

ChrisRChamberlain

Programmer

Vragabond

Programmer

chessbot

Programmer

cLFlaVA

Programmer

chessbot

Programmer

ChrisRChamberlain

Programmer

Vragabond

Programmer

cLFlaVA

Programmer

ChrisRChamberlain

Programmer

Vragabond

Programmer

ChrisRChamberlain

Programmer

ChrisRChamberlain

Programmer

Similar threads

Part and Inventory Search

Sponsor