Design Issue: External Windows (Kinda Long)

**skubik** · Apr 14th, 2003, 05:48 PM

I've been wrestling with my site design for several weeks now and am running out of solutions fast. Problem is, my site uses layers which span the width of the users screen, but the width of the layers are calculated in pixels based on the clientWidth and clientHeight of the browser. This works fine when the site it loaded into a browser window that is maximized, but when it loads in a window that isn't maximized, or has toolbars (like 'Favorites', or they use MSN Explorer) on the side of the browser, it looks distorted. So the easy solution was to calculate the size of the toolbars and borders by subtracting the clientWidth and clientHeight from the width and height of the window itself, then from there calculating what the clientWidth and clientHeight would be if the browser was maximized, then render to those values. Worked relatively well in Mozilla... IE won't let you have that information (window width and height).
So I moved on to trying percentages instead of pixels. Again, some of the layers span the entire browser window, so I literally set the width of a layer to 100%. This worked fine in Mozilla, but IE wanted to be a pain again and added margins to the right side of the browser... which no matter what I tried, I could not get rid of.

So now I'm left scratching my head again as to how to make my site appear the way it's supposed to without having to worry about user's browser settings. Then I thought of loading the site into a new external (pop-up if you want to call it that) window. That way I can set the size of the window and everything will render accordingly and will look generally the same on all systems, regardless of the browser being used. However, I'm wondering about the ethical issues associated with doing this. Obvously no-one likes pop-up windows to display advertisements, but to display the website that you request is kinda a different story is it not? I've been to some sites that do this, so it can't be completely taboo, but is it generally acceptable to do this?

I'm wrestling with this issue so I thought I'd post to try and get other peoples opinions. Any thoughts?

Thanks,

- skubik.

**Web Design Forums** · Apr 14th, 2003 05:48 PM

**filburt1** · Apr 14th, 2003, 05:51 PM

You should consider just completely trashing the core of the layout and redesigning it. When you have to rely on Javascript then there's a problem right away.

JR · Apr 14th, 2003, 05:51 PM

some people run pop-up killers and generally people like to see a website in the main browser, but it depends what site it is.

**splufdaddy** · Apr 14th, 2003, 07:08 PM

I agree w/ filbert and JR...further more, I am begining more and more to dislike sites that span my entire screen. I run a high res, so I expect to see sites that dont fill my screen. When I see a site that spans 100% of my screen, it looks fat and short. Now w/o seeing your site I can't say this about your site specifically, it sounds like it may be a little more advanced then just a few tables spanning my screen. However, an easier way to fix this would be to just make the page 750 pixels or so wide, design a bg to go behind it, and you'll have an idea of what it will look like on different resolutions.

Do you have a link to show us what you're talking about?

**filburt1** · Apr 14th, 2003, 07:09 PM

Originally posted by splufdaddy
I agree w/ filbert and JR...further more, I am begining more and more to dislike sites that span my entire screen. I run a high res, so I expect to see sites that dont fill my screen. When I see a site that spans 100% of my screen, it looks fat and short.

Are you saying that you prefer a static layout (a la WDF) as opposed to a liquid layout (width proportional to window size)?

**splufdaddy** · Apr 14th, 2003, 07:11 PM

Well if you wanna say it the correct and intelligent way...yes

**smoseley** · Apr 14th, 2003, 07:35 PM

A lot of comments... but no resolutions to his problem.

I've designed sites with similar functionality. The "margin" that you see on the right hand side of IE is 16 pixels reserved for the vertical scroll bar. Mozilla dynamically uses that space, but IE reserves it, and thus your problem.

If you don't need scrolling at all, you can try using

Code:

<body scroll="no"

This will eliminate the scrollbars altogether in IE.

I also attached a sample of a Mozilla and IE compliant scaling script. Here's the source:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title></title>
		<script>
		function getWindowWidth() {
			return (document.all) ? document.body.clientWidth : window.innerWidth;
		}

		function getWindowHeight() {
			return (document.all) ? document.body.clientHeight : window.innerHeight;
		}
		function redraw() {
			document.getElementById('left').style.position = 'absolute';
			document.getElementById('left').style.top = '0px';
			document.getElementById('left').style.left = '0px';
			document.getElementById('left').style.width = Math.floor(getWindowWidth()/3) + 'px';
			document.getElementById('left').style.height = getWindowHeight() - 100 + 'px';
			document.getElementById('right').style.position = 'absolute';
			document.getElementById('right').style.top = '0px';
			document.getElementById('right').style.left = Math.floor(getWindowWidth()/3) + 'px';
			document.getElementById('right').style.width = Math.ceil(getWindowWidth()*2/3) + 'px';
			document.getElementById('right').style.height = getWindowHeight() - 100 + 'px';
		}
		</script>
	</head>
	<body onload="redraw()" onresize="redraw()">
		<div id="left" style="background-color:#666666">
			<p style="color:#FFFFFF">This is the left side</p>
		</div>
		<div id="right" style="background-color:#CCCCCC">
			<p>This is the right side</p>
		</div>
	</body>
</html>

One thing you have to be careful of with Mozilla is scaling 100% width AND height with javascript, because it delays "onresize" events until the resize is complete, which results in math overflow, and you'll get scrollbars in both directions even though there's no need for them.

Here's the file:
.

**skrlin** · Apr 14th, 2003, 11:10 PM

This may or may not help, but I would try:

Code:

<body marginwidth=0 leftmargin=0 scroll="no">

**smoseley** · Apr 14th, 2003, 11:19 PM

I just said that ;-)

**skubik** · Apr 15th, 2003, 02:49 AM

Hmmmm. Unfortunately this makes things quite difficult. After the first two responses I seriously began to think that I should redesign the entire site. I began dabbling a little bit with a similar-but-different design which looks okay, but not as unique as the original design. Have to keep tweaking it and decide from there.

However, regarding the previous layer method and the scrollbar. I tried setting scrolling to 'no' as transio suggested, but I still get a small gap on the side of the page.
I've been fooling around with a test script to try and remedy the problem, this is what I have:

Code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript">

function configMargin()
{
  _TEMP_OUTP = document.createElement("div");
  _TEMP_OUTP.setAttribute("id","Layer01");
  _TEMP_OUTP.style.position = "absolute";
  _TEMP_OUTP.style.left = "0px";
  _TEMP_OUTP.style.top = "81px";
  _TEMP_OUTP.style.height = "25%";
  _TEMP_OUTP.style.backgroundColor = "#FF0000";
  
  _TEMP_OUTP.style.width = "100%";

  document.body.appendChild(_TEMP_OUTP);
}

</script>
</head>

<body bgcolor="#0000FF" text="#000000" RIGHTMARGIN="0" scroll="no" onLoad="configMargin()">
</body>
</html>

If you try running the code in IE, you'll still get a slight gap on the right-hand side. Any ideas how to remedy that? Am I missing something?

- skubik.

Thread: Design Issue: External Windows (Kinda Long)

LinkBack

Thread Tools

Current Rating

Rate This Site

Remove Ads

Posting Permissions

Thread: Design Issue: External Windows (Kinda Long)

LinkBack

Thread Tools

Current Rating

Rate This Site

Remove Ads

Posting Permissions

Sections

General Info