- Separate Navigation from Content
- Design Your Web Page
- Inline Frames
- Working with XmlHttpRequest
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Design Your Web Page
The first step in separation of content and navigation is the creation of placeholders on the web page where the navigational elements will be inserted. For each contiguous area of navigational elements, you should create a separate DIV element with a unique id, so that you can identify it later in your JavaScript code. To prevent excessive flicker during the page composition, the DIV elements above or to the right of the content should be sized close to the actual size of your navigational elements so the content won't shift when you replace them with the desired HTML code. The most versatile means of achieving this goal is to insert an empty, properly sized DIV element within the placeholder.
In the case of Informit, the page structure is already very well designed, with the DIV elements already in place, as shown in Figure 1.
)
Figure 1 Page structure of an Informit article.
You would only need to remove the content from the navigational DIV elements and insert an empty box where the header will appear, resulting in a web page structure similar to this example. (For the sake of simplicity, we'll conveniently forget the requirement to have logo and copyright information embedded in every page.) Here's the code:
<div id="header"> <div style="height: 100px; width: 100%"></div> </div> <div id="contentArticle"> <div id="firstCol"> ... article content .... </div> <div id="secondCol" ></div> </div> <div id="footer"></div>
The navigational elements that have been removed from the web pages have to be re-created as independent pages. You should use static HTML files for static content (this will allow the content to be cached regardless of the web server you use) and create a server-side script that will display the dynamic elements based on the web page loading them. For Informit, each web page has a unique article identifier (the p= parameter in the URL), so you would need to create a server-side script that would accept the article identifier and create the right-hand column. In most cases, you can reuse server-side code that creates inline navigational elements.
After the web pages have been redesigned, you're ready to implement the AJAX portion of this solution. As always, you can work with inline frames (IFRAME elements) or use an XmlHttpRequest object.