The Banner HTML Document
61HTML Ebook - Part 5
Introduction
This is part 5 of my series, HTML Ebook. In this part of the series we look at the banner HTML document for the HTML ebook project.
Note: If you cannot see the code or if you think anything is missing in this article (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
BODY banner Content
In the HTML BODY element of the banner page (document), you have the ebook title and a Search box. In our project, the ebook title is in an H1 element. The Search controls are a Text Input control and an HTML button. These two are in an HTML OBJECT element. The OBJECT element is floated to the right. Here is the complete code of the banner document:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<h1 style="text-align:center">Title of Ebook</h1>
<form action = "searchResults.htm" target="content">
<object style="float:right"><input type="text" id="I0"><button type="submit" onclick="parent.searchVar = document.getElementById('I0').value">Search</button></object>
</form>
</body>
</html>
The HTML Form
The button for the Search Box is an HTML submit button. A submit button, when clicked, needs an HTML Form to submit the Form information. The Text Input Control and the button are in an HTML Object, which is in an HTML Form. When the button is clicked, a results page should display the titles as links and page description for the chapter pages that have the keywords searched. The results page is an HTML page; its name is searchResults.htm. It is kept in the head directory. This results page is displayed in the content frame of the frameset. So the action attribute value of the Form element is the file name, searchResults.htm of the results page. The Form also has the target attribute. The value of the target attribute is the frame of the frameset to which the file, searchResults.htm will be opened.
The Parent Variable
When a Form is sent, the Form information is in the Form's query string sent. The program that receives the query string is normally at the server. The situation here is different: The browser sends the Form and the form information is supposed to be received by the browser still (in the content frame). This is not common, so I do not know of any way the browser can obtain a query string sent by the browser itself.
What we need is the text from the Text Input Control of the banner. If you remember, there is a variable called, searchVar in the JavaScript of the frameset. This is the variable I use to transfer the text from the Text Input Control of the banner frame page to the content frame page. The text is effectively transferred from an HTML document (banner.htm) in the banner frame to an HTML document (searchResults.htm) in the content frame.
In order for JavaScript in any frame to access this variable in the frameset, it has to precede the variable name with "parent" and a dot; i.e. "parent.searchVar". The submit button has an onclick event. When the button is clicked, the event handler (value of the onclick attribute - see above code) sets this variable to the content (value) of the Input Text control; that is, the value of the Text Input control is assigned to parent.searchVar. The action and the target attributes of the Form then open the file, searchResults.htm for the results in the content frame. There is JavaScript in the content frame document, which reads the value of the variable, searchVar from the JavaScript of the frameset. The JavaScript in the content frame document uses this value to find the chapter pages that have any of the keywords in the value.
Use of the HTML Object Element
The use of the HTML Object element in the above code is just to keep the Text Input control and the Submit button in one place. As the Object element is floated to the right, both the Text Input Control and the Button are moved together.
Wow, not as difficult as it appeared. We continue to read on in the next part of the series.
Chrys
PrintShare it! — Rate it: up down flag this hub
psychicdog.net says:
2 months ago
good stuff, though with doctype for framesets I thought (mistakenly?)it needed to include framesets in the doctype. No?