Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Sep 2002
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    getElementById problems in Mozilla (Long)

    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.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    this does not belong to DOM forum.
    anyway, could you post the code of the createMenu() function?
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    New to the CF scene
    Join Date
    Sep 2002
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Sorry...

    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:

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

    - coredumped

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Netherlands
    Posts
    217
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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....
    Last edited by beetle; 10-11-2002 at 04:51 PM.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #6
    New to the CF scene
    Join Date
    Sep 2002
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    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.
    Last edited by coredumped; 10-11-2002 at 10:56 PM.

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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....
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #8
    New to the CF scene
    Join Date
    Sep 2002
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Suggestions?

    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.

  • #9
    New to the CF scene
    Join Date
    Sep 2002
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Anyone???

    ??? 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.

  • #10
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    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/de...asp?frame=true
    and play. Hope I'm right and this helps.

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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/de...ateelement.asp and http://www.mozilla.org/docs/dom/domr...doc_ref46.html for starters


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •