JavaScript Scratch Pad Design

[Claus Mygind]

I have a question on using the DOM method - But first let me describe what I am doing.

1. I create on all my forms a generic <div id='scratchPad'> </div>

2. I reuse the scratch pad to display various results, such as searches, browse, about and other intermediate result sets in various formats. Therefore objects like the buttons "Next" and "Prev" do not always exist in the DOM.

Question then, Am I just hogging memory in the browser by creating these objects even if I don't use them? Or can I even create them at all, if they do not exists until dynamically created when needed?

[Dormilich]

1. I create on all my forms a generic <div id='scratchPad'> </div>

IDs must be unique!

2. I reuse the scratch pad to display various results, such as searches, browse, about and other intermediate result sets in various formats. Therefore objects like the buttons "Next" and "Prev" do not always exist in the DOM.

OK, you lost me there.

[Claus Mygind]

Ok overlook any bad coding practice I may be doing here, but this is how I add the generic <div> to each form

/*
Scratch Pad Functions Section
---------------------------------------------------
 this function adds a hidden division to a form
 which can be used to popup information or data
 It would be called from myStartUp the body onload
 event handler
---------------------------------------------------
*/
function addScratchPad(obj)
{
    document.getElementById( obj.document.body.id ).innerHTML += 
        '<div '+
        '  id="scratchPad" '+
        '  align="center" '+
        '  style="position:absolute; '+
        '  visibility:hidden; '+
        '  z-index:99;" '+
        '> '+
        '    <table style="padding:0px; margin:0px;" width="100%"> '+
        '        <tr><td> '+
        '            <button id="closePad" '+ 
        '                type="button" '+
        '                style="padding:0px; float:right; background-color:blue,color:yellow;"'+
        '                onclick="showHideScratchPad(); return false;">'+
        '                <IMG SRC="/ABC/images/closeButton.gif" style="height:16px;width:16px;">'+
        '            </button><br/><br/>'+
        '        </td></tr><tr><td> '+
        '            <table name = "sPadTable" id = "sPadTable" align="center"> '+
        '                <tbody id="sPadData" ></tbody>'+
        '            </table>'+
        '        </td></tr> '+
        '    </table>'+
        '</div>';
 
}
 
 
 

This routine is located in my basic nav.js file I attache to all my forms.

When I want to use it I pass it the parameter, I need to display the scratch pad. When I close scratch pad, I simply clean it out.

/*
-----------------------------------------------------------------------------------------
Display or hide scratch pad
 
usage:
onclick = "showHideScratchPad(left,top,height,width[,cBgColor,cBstyle,cBwidth,cBcolor]);"
 
the first 4 parameter are mandatory, 
if any of the 4 remaining parameters are used
they must be supplied in order specified.
if an optional parameter is not used but 
others are all preceeding parmeters must
be given as false.
 
no parameters are needed to turn off the
scratch pad.
onclick = "showHideScratchPad();"
-----------------------------------------------------------------------------------------
*/
function showHideScratchPad(cLeft,cTop,cHeight,cWidth,cBgColor,cBstyle,cBwidth,cBcolor) 
{
    if (  document.getElementById("scratchPad").style.visibility == "hidden" ) {
        document.getElementById("scratchPad").style.backgroundColor = ( !cBgColor ) ? "#E4BF87" : cBgColor ;
        document.getElementById("scratchPad").style.borderStyle = ( !cBstyle ) ? "ridge" :cBstyle ;
        document.getElementById("scratchPad").style.borderWidth = ( !cBwidth ) ? "5px" : cBwidth ;
        document.getElementById("scratchPad").style.borderColor = ( !cBcolor ) ? "orange" : cBcolor;
        document.getElementById("scratchPad").style.zIndex = "101";
        document.getElementById("scratchPad").style.visibility = "visible";
        document.getElementById("scratchPad").style.overflow = "auto";
        document.getElementById("scratchPad").style.left =  cLeft;
        document.getElementById("scratchPad").style.top = cTop;
        document.getElementById("scratchPad").style.height = cHeight;
        document.getElementById("scratchPad").style.width =  cWidth;
    }else{ //hide if visible
        document.getElementById("scratchPad").style.visibility = "hidden";
        document.getElementById("scratchPad").style.left =  "0px";
        document.getElementById("scratchPad").style.top = "0px";
        document.getElementById("scratchPad").style.height = "0px";
        document.getElementById("scratchPad").style.width =  "0px";
        // remove existing rows, if any
        while (document.getElementById("sPadData").rows.length > 0) 
        {
            document.getElementById("sPadData").deleteRow(0);
        }
    }
}
 

When a result set is returned from the server, I create and load a table on the scratchPad, then I call the display of the Pad itself.

            displayBrowser(form, aCallBack);
            showHideScratchPad(form.left,25, form.screenHeight, form.screenWidth,'#95E3E3');    
 

Here are a couple of screen shots showing different information being displayed.

As you can see the Next and Prev buttons are not always used. Also the inner table used to display the data has different names.

So to create an object in the DOM cannot be done if the object is not going to appear on the screen?

[Dormilich]

So to create an object in the DOM cannot be done if the object is not going to appear on the screen?

that’s not related, DOM is just an API. the DOM defines the methods to work with an XML(-like) document in JavaScript (or other languages). whether a through DOM created object appears on screen is no concern to the DOM, although you (often) need the DOM to make something appear on screen. as example, you can create a paragraph node (document.createElement("p")), but unless you insert it in the current document’s DOM tree (.appendChild(elem)), it’s "invisible".

[Claus Mygind]

From your answer that would suggest that creating the DOM object would then be a memory hog if it is not going to be used.

Yes one item may not be much of a hog. But using this scenario, I would have to create all the possible objects just in case they are going to be used.

I think I prefer creating them on the fly.

Your explanation has been very helpful and I now see where I can improve other parts of my apps.

As always thank you for the great help