Setting the Features of Web Page Dialog Boxes - Sending Content to the Dialog Box
(Page 3 of 4 )
When you create a new window (box) using the open() method, it is empty. You then have to send the HTML elements to it -- the BODY, TABLE, TD, H1 and all of the others. Do not forget this: you also have to send the title element.
You may think this is strange, but you have to send the window's style and script if the box needs them. Remember that the style in a web page is in a style element, and the script is in the script element.
Let us continue with the basic window and see how to give it a title and color. We shall also give it two input text elements and a button.
Giving the Title
After creating or opening the window, you can send the title to it. It is advisable to create a string of what you want to send, and then send the string. Remember that the dialog box is a web page. We know that the title of a web page is an HTML element inside a HEAD element. The following JavaScript code will create a string for the title, open a new window, and then send the string to it.
<script type="text/javascript">
function openWindow()
{
boxStr = "<html>"
+ "<head>"
+ "<title>"
+ "My Title"
+ "</title>"
+ "</head>"
+ “<body>”
+ “</body>”
+"</html>";
myWindow = window.open("","","menubar=no,toolbar=no,width=400,height=400","");
myWindow.document.write(boxStr);
}
</script>
The first statement above is the string. This string has all the elements needed for the web page. The TITLE element is in the HEAD element. The second statement creates the window. It returns a reference to the new window. This reference is assigned to the identifier, “myWindow.” The third statement uses this reference to write the string into the dialog box.
Let us look at the third statement. The DOM Document object represents the entire HTML document and can be used to access all of the elements in a page. The DOM Document is the entire content of the web page. It can be used to access the HEAD element, the TITLE element, the BODY element, the DIV element -- all of the elements.
Do not confuse the Document object with the Body object. The BODY element contains what you see on the web page. There are some elements, such as the LINK element, which you do not see on the web page. The HTML element is the document element (object); it contains the body element as well as the LINK and other hidden elements.
Speaking of object-oriented programming, the document object can be a property to the window object (reference). The method “write()” is a method to the document object. It takes a string argument. In our current context, this string is the entire content of the new window. This is why our third statement is:
myWindow.document.write(boxStr);
Providing a Little Color
Today the color of any web page should be in a Style Sheet, unless you have an important reason not to have it so. Here, we do not have any such reason. As I said above, the DOM Document is the entire content of the web page.
You may be surprised to learn this, but in order to give our dialog box a color, we have to send a style element which contains the color to the dialog box (new window). The following code illustrates this:
<script type="text/javascript">
function openWindow()
{
boxStr = "<html>"
+ "<head>"
+ "<style type="text/css">"
+ "body {background-color:silver}"
+ "</style>"
+ "</head>"
+ "<body></body>"
+"</html>";
myWindow = window.open("","","menubar=no,toolbar=no,width=400,height=400","");
myWindow.document.write(boxStr);
}
</script>
Again, all the elements of the document (HTML page) are in the string. This is normally what you have to do; when you open a window, you send its content afterwards.
Next: Giving it Body Elements >>
More HTML Articles
More By Chrysanthus Forcha
