Javascript, AJAX, and JSON

skubik · April 2 '03, 07:37 PM (#1)

I've decided to fix my previous problem by changing the dimensions of my layers from pixels, to percentages. So far things seem to be pretty good, except that the margins in IE are giving me some trouble. Specifically, even though the layer width is set to 100%, it doesn't go all the way to the other end of the window.

Under Mozilla, I don't have any problems... the layer goes right to the end as it's supposed to, and I don't have to worry about it. In IE, however, it's a different story.

I've fooled around with margin and padding settings in both a test script, as well as the site I'm building. In the test script, listed below, I am able to get the layer to actually get all the way across. But in my production site, no such luck:

code:
<HTML><HEAD><TITLE>Test Script</TITLE>

<SCRIPT LANGUAGE="javascript">

function createLayer(layerName,layerXPos,layerYPos,layerWidth,layerHeight,layerColor)
{
_TEMP_NEWLAYER = document.createElement("div");

_TEMP_NEWLAYER.setAttribute("id",layerName);

_TEMP_NEWLAYER.style.position = "absolute";
_TEMP_NEWLAYER.style.left = layerXPos + "%";
_TEMP_NEWLAYER.style.top = layerYPos + "%";
_TEMP_NEWLAYER.style.width = layerWidth + "%";
_TEMP_NEWLAYER.style.height = layerHeight + "%";
_TEMP_NEWLAYER.style.backgroundColor = layerColor;

document.body.appendChild(_TEMP_NEWLAYER);
}

function initPage()
{
document.body.bgColor = "#0000FF";

document.body.style.marginLeft = "0";
document.body.style.marginTop = "0";
document.body.style.marginRight = "0";
document.body.style.marginBottom = "0";

createLayer("layer01",0,50,100,20,"#FF0000");
}

</SCRIPT>
</HEAD>

<BODY onLoad="initPage()">
</BODY>
</HTML>

I'm defining the margins in initPage to simulate how my production site is generated. Basically I generate the page into a frame, using Javascript calls from another frame. Obviously the test script doesn't use frames... but it seems to work fine. Something else the test script doesn't do is load an external style sheet. My production site does. But would this make a difference? I even tried defining margin settings for the 'body' tag in my CSS file, but it didn't work at all.

So I presume that the reason this might not be working is either because of the stylesheet, or because of the frames. But how do I go about solving this problem?

Anyone have any ideas or insights?

Thanks,

-skubik.

smoseley · April 3 '03, 01:21 AM (#2)

Nice DOM work! I actually don't see why it's not working for you. I put this script into an HTML page and it came up fine... a red band across the center from edge to edge:

Code:

<html>
	<head>
		<title>Test Script</title>
		<script language="javascript">
			function createLayer(layerName,layerXPos,layerYPos,
				layerWidth,layerHeight,layerColor) {
				newLayer = document.createElement("div");
				newLayer.setAttribute("id",layerName);
				newLayer.style.position = "absolute";
				newLayer.style.left = layerXPos + "%";
				newLayer.style.top = layerYPos + "%";
				newLayer.style.width = layerWidth + "%";
				newLayer.style.height = layerHeight + "%";
				newLayer.style.backgroundColor = layerColor;
				document.body.appendChild(newLayer);
			}
			function initPage() {
				document.body.bgColor = "#0000FF";
				document.body.style.marginLeft = "0";
				document.body.style.marginTop = "0";
				document.body.style.marginRight = "0";
				document.body.style.marginBottom = "0";
				createLayer("layer01",0,50,100,20,"#FF0000");
			}
		</script>
	</head>
	<body onload="initPage()">
	</body>
</html>

skubik · April 3 '03, 02:08 AM (#3)

Well, eventually I was able to get the test script to work as well... except that the code for my production site is very similar to the test script. HOWEVER, my production site utilizes frames. The Javascript DOM code runs from one frame, and renders layers into another frame. The one frame is hidden, and the frame that is rendered into takes the entire browser window area... so to the user it looks like there aren't ANY frames.

Here's the code I'm using on my production site:

Code:

  _DOC = parent.DISPFRAME.document;
  
  _DOC.open();
  _DOC.clear();
  _DOC.close();
  
  if (_DOC.createStyleSheet)
    _DOC.createStyleSheet("ffae.css");
  else
  {
    _TEMP_OUTP = _DOC.createElement("LINK");
    _TEMP_OUTP.setAttribute("REL","stylesheet");
    _TEMP_OUTP.setAttribute("TYPE","text/css");
    _TEMP_OUTP.setAttribute("HREF","ffae.css");
    _DOC.getElementsByTagName("HEAD").item(0).appendChild(_TEMP_OUTP);
  }
  
  _DOC.title = "mysite.com";
  _DOC.body.bgColor = getBGColor();
  _DOC.body.text = "#FFFFFF";
  _DOC.body.link = "#FFFFFF";
  _DOC.body.vLink = "#FFFFFF";
  _DOC.body.aLink = "#0000FF";

//  _DOC.body.style.marginLeft = "0";
//  _DOC.body.style.marginTop = "0";
//  _DOC.body.style.marginRight = "0";
//  _DOC.body.style.marginBottom = "0";

  _DOC.body.leftmargin = 0;
  _DOC.body.topmargin = 0;
  _DOC.body.rightmargin = 0;
  _DOC.body.bottommargin = 0;

//  _DOC.body.marginwidth = 0;
//  _DOC.body.marginheight = 0;
  
  // Render the layers on-screen
createLayer("bgLayer",0,0,58,100,"LEFT","TOP",1,getBGColor());

As you can see, I've tried a bunch of different ways to get rid of the margins. Just doesn't let me.

Now, the big difference between this code and my test code is that here, I'm calling an external CSS style sheet into use. But I don't see why that would matter. Furthermore, I even tried putting margin style values into my CSS file itself, and it STILL didn't do anything.

So now I'm thinking it has something to do with the frames.

Any thoughts or insights?

- skubik.

Javascript, AJAX, and JSON

Margin Problems in IE