getElementById problems in Mozilla (Long) [Archive]

View Full Version : getElementById problems in Mozilla (Long)

coredumped

10-10-2002, 11:22 PM

I'm quickly going nuts over this problem... so I hope someone here might be able to help me out, or at least explain why I'm having this problem.

My problem lies specifically with Mozilla (so far). My site is split into two frames, one is hidden (CONTROLFRAME) and one takes up the entire browser window (DISPFRAME). I have a collection of Javascript functions that I call from the CONTROLFRAME that are used to render HTML code into the DISPFRAME, specifically, layers.

Everything works fine (in Mozilla) until I get to a point where I need to retrieve some value from one of the layers that has just been created. I use getElementById() and the Javascript console responds with the error: "top.DISPFRAME.document.getElementById(menuLayer) has no properties."
I should point out that this error occurs within another function, and 'menuLayer' is an argument to the function where this fails. I have also tried to directly change the content of a layer and it still fails.

Below is a snippet of code where the problem is occurring. I won't post it all since there's way too much to go through.

NOTE: All the code posted below is called in the CONTROLFRAME, as described above.

code:--------------------------------------------------------------------------------

top.DISPFRAME.document.open();
top.DISPFRAME.document.write("<HTML><HEAD>\n");
top.DISPFRAME.document.write("<meta http-equiv=\"Expires\" content=\"-1\">\n");
top.DISPFRAME.document.write("<meta http-equiv=\"Pragma\" content=\"No-Cache\">\n");
top.DISPFRAME.document.write("<LINK REL=\"stylesheet\" TYPE=\"text/css\" HREF=\"class01.css\" />\n");
top.DISPFRAME.document.write("<TITLE>Display Frame</TITLE>\n");
top.DISPFRAME.document.write("</HEAD>\n");
top.DISPFRAME.document.write("<BODY BGCOLOR=\"" + getBGColor() + "\" TEXT=\"#FFFFFF\" LINK=\"#FFFFFF\" VLINK=\"#FFFFFF\" ALINK=\"#0000FF\">\n");

createLayer("bgLayer",0,0,58,100,"LEFT","TOP",1,getBGColor());
createLayer("whiteBorderLayer",0,0,100,60,"CENTER","CENTER",2,"#FFFFFF");
createLayer("mainMenuLayer",0,0,17.6,57.48,"LEFT","CENTER",2,"#FFB500");
createLayer("contentBGLayer",18.14,0,81.9,57.48,"LEFT","CENTER",2,"#0000AA");
createLayer("contentBGImgLayer",0,0,56.0,57.48,"RIGHT","CENTER",2);
createLayer("sectionTitleLayer",39.2,24.8,56.4,7.7,"LEFT","TOP",3,null,"title");
createLayer("contentLayer",39.2,32.6,56.4,42,"LEFT","TOP",3,null,"content");
createLayer("siteTitleLayer",3.6,13.5,50,6,"LEFT","TOP",2,null,"siteTitle","./");
createLayer("loadingLayer",1,5,25,6,"LEFT","BOTTOM",4,null,"loading");

createMenu("mainMenu","mainMenuLayer",15.7,5.9,"RIGHT","CENTER","mainMenu");
createMenu("sectionMenu","contentBGLayer",15.7,5.9,"LEFT","CENTER","subMenu");

// Finish the HTML code for the page.
top.DISPFRAME.document.write("</BODY>\n");
top.DISPFRAME.document.write("</HTML>\n");

// Close the document for writing.
top.DISPFRAME.document.close();

top.DISPFRAME.document.getElementById('loadingLayer').innerHTML = "<b><i>Loading... Please Wait</i></b>";

getSection();
--------------------------------------------------------------------------------

The 'createLayer' functions above merely perform some calculations for placement of the layer, then use a good-ol' top.DISPFRAME.document.write() to create the layer. This works fine. However, the createMenu functions, which use one of the previous rendered layers to create a menu, is where the code fails. Right now, all I have in this function is:

code:--------------------------------------------------------------------------------
alert("Menu Layer '" + menuLayer + "' height: " + top.DISPFRAME.document.getElementById(menuLayer).style.height);
--------------------------------------------------------------------------------

This is where my problem lies. The getElementById call doesn't recognize the layer yet I assume. The Mozilla Javascript console, again, gives this error:
"top.DISPFRAME.document.getElementById(menuLayer) has no properties."

I've been fooling around with this for a few days and just can't find a solution for it. I've gone to so many different sites and looked in so many different books, but none of them say anything different. According to them, my code should work... but it doesn't.

Any help on this would be greatly appreciated so I don't have to go bald anytime soon. :^)

Thanx,

- coredumped.

glenngv

10-11-2002, 05:29 AM

this does not belong to DOM forum.
anyway, could you post the code of the createMenu() function?

coredumped

10-11-2002, 12:28 PM

Ooops... sorry 'bout posting to the wrong forum. Wasn't totally sure whether it was related or not. Sorry. :^)

Anyways, my code for the createMenu() function is quite literally what I've provided in the last post:

function createMenu(menuSetName, menuLayer, menuItemWidth, menuItemHeight, menuHAlign, menuVAlign, menuStyle)
{
alert("Menu Layer '" + menuLayer + "' height: " + top.DISPFRAME.document.getElementById(menuLayer).style.height);

}

Any ideas?

- coredumped

Bosko

10-11-2002, 04:30 PM

http://forums.devshed.com/showthread.php?s=&threadid=45167 ;)

beetle

10-11-2002, 04:49 PM

I think I need to see what createLayer is doing. How does it add the 'layers'? In your calls you are sending anywhere between 7 and 10 parameters (no big deal in itself, but I don't know what all of them are doing...)

Need to see that, I'm sure....

coredumped

10-11-2002, 10:51 PM

hehehe... amazing how I get around eh Bosko? :)

Anyways, createLayer is adding the layers by using top.DISPFRAME.document.write() calls. It _does_ perform some calculations for placement based on the arguments passed to it are, but that's about it.

function createLayer(layerName, layerXPos, layerYPos, layerWidth, layerHeight, layerHAlign, layerVAlign, layerIndex, layerBGColor, layerCSSClass, gotoOnClickURL)
{
var _TEMP_LAYERXPOS;
var _TEMP_LAYERYPOS;
var _TEMP_LAYERWIDTH;
var _TEMP_LAYERHEIGHT;

// Calculate the width and height of the layer in pixels.
_TEMP_LAYERWIDTH = (_BROWSER_CLIENTWIDTH*(layerWidth/100));
_TEMP_LAYERHEIGHT = (_BROWSER_CLIENTHEIGHT*(layerHeight/100));

//alert("Width: " + _TEMP_LAYERWIDTH + "\nHeight: " + _TEMP_LAYERHEIGHT + "\n");
//alert("HAlign: " + layerHAlign + "\nVAlign: " + layerVAlign + "\n");

// Calculate the starting horizontal position of the layer.
if (layerHAlign == "CENTER")
_TEMP_LAYERXPOS = ((getScreenXCentre())-(_TEMP_LAYERWIDTH/2));
else if (layerHAlign == "LEFT")
_TEMP_LAYERXPOS = (_BROWSER_CLIENTWIDTH*(layerXPos/100));
else if (layerHAlign == "RIGHT")
_TEMP_LAYERXPOS = (_BROWSER_CLIENTWIDTH-(_TEMP_LAYERWIDTH+(_BROWSER_CLIENTWIDTH*(layerXPos/100))));

// Calculate the starting vertical position of the layer.
if (layerVAlign == "CENTER")
_TEMP_LAYERYPOS = ((getScreenYCentre())-(_TEMP_LAYERHEIGHT/2));
else if (layerVAlign == "TOP")
_TEMP_LAYERYPOS = (_BROWSER_CLIENTHEIGHT*(layerYPos/100));
else if (layerVAlign == "BOTTOM")
_TEMP_LAYERYPOS = (_BROWSER_CLIENTHEIGHT-(_TEMP_LAYERHEIGHT+(_BROWSER_CLIENTHEIGHT*(layerYPos/100))));

_TEMP_LAYERXPOS = Math.round(_TEMP_LAYERXPOS);
_TEMP_LAYERYPOS = Math.round(_TEMP_LAYERYPOS);
_TEMP_LAYERWIDTH = Math.round(_TEMP_LAYERWIDTH);
_TEMP_LAYERHEIGHT = Math.round(_TEMP_LAYERHEIGHT);

// Display the layer to the DISPFRAME.
top.DISPFRAME.document.write("<div id=\"" + layerName + "\" class=\"" + layerCSSClass + "\" style=\"position:absolute; left:" + _TEMP_LAYERXPOS + "px; top:" + _TEMP_LAYERYPOS + "px; width:" + _TEMP_LAYERWIDTH + "px; height:" + _TEMP_LAYERHEIGHT + "px; z-index:" + layerIndex + "; background-color:" + layerBGColor + "; visibility:hidden; filter:alpha(opacity=100);\"");

if (gotoOnClickURL)
top.DISPFRAME.document.write(" onClick=\"top.document.location='" + gotoOnClickURL + "'\";");

top.DISPFRAME.document.write("></div>\n");
}

So, to recap... when the page in the CONTROLFRAME it loaded, it calls a function called initPage. initPage then begins calling createLayer and createMenu to create layers in the DISPFRAME. The problem then arises when I attempt to use getElementById in Mozilla (works great in IE6) to access these new layers in the createMenu function, it gives an error: 'top.DISPFRAME.document.getElementById(menuLayer) has no properties'.

Any ideas?

- coredumped.

beetle

10-11-2002, 11:32 PM

I think that's the problem. Since you are adding HTML with document.write() instead of adding objects with some sort of DOM compatible method....

coredumped

10-12-2002, 12:17 AM

Hmmm, might be... so any suggestions as to what functions to use, or how to use them, or any URLs that might help me out?

- coredumped.

coredumped

10-12-2002, 11:13 PM

??? Anyone?

I've looked at a few 'tutorials' online that kinda give a rough demonstration of how to use Javascript DOM functions, but I have yet to get anything to work on my own.

All the tutorials I've seen have Javascript embedded within the HTML itself, which isn't what I want. I need to be able to create a fresh HTML document from the CONTROLFRAME, into the DISPFRAME. So far, I can't even get functions like createElement to work properly in a single-page (non-framed) environment.

I'm really at a loss here. Any help or pointers would be a HUGE help.

Thanx,

- coredumped.

MattyUK

01-20-2003, 12:33 PM

I could be completely barking up the wrong tree here but I suspect that you need to close the document after using document.write() method. I thought (perhaps wrongly) that the new elements added by dopcument.write() didn't become scriptable as elements via DHTML until the document was closed. Only the elements originally in the document (not the new ones would be in the DOM cache of IE.

Look at
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/obj_document.asp?frame=true
and play. Hope I'm right and this helps.

brothercake

01-20-2003, 12:58 PM

Forget document.write; createElement is what you need.

I suggest you start outside your application and become comfortable with the methods, and then come back and apply your new knowledeg to your existing application.

The essence of it is:

var newDiv = document.createElement("div");
document.body.appendChild(newDiv);

now you can write into it using innerHTML, or apply attributes and nodes using setAttribute and similair methods. Try http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/createelement.asp and http://www.mozilla.org/docs/dom/domref/dom_doc_ref46.html for starters