We've looked at the four navigation bar pages, so all that remains is to see what the four main Home pages, and the other content pages, do. In fact, as most of the intelligence is built into default.asp and the four navigation pages, it turns out that the Home and content pages don’t need to do much at all. This is ideal, because it's these pages that we'll be regularly building and updating, so the less intelligence we need to build into them, the better.
We haven’t built fancy Home pages in our example, but simply filled them with some dummy content indicating which group of browsers they are aimed at. Other than that, they all look the same. In fact the only difference between each page (other than this text) is the <SCRIPT> section that is responsible for updating the navigation bar. You'll find all the pages in the samples that you can download for this book from our Web site at http://webdev.wrox.co.uk/books/1797/.
So what we're interested in is how the Home pages interface with the navigation bar to change the image buttons or links that it displays. If you're wondering why we need to do this at all, in other words why we don't just do it when the user clicks a link on the navigation bar, remember that the idea is that the navigation bar reflects the currently selected section. The user can move between sections using the text links, and this should update the navigation bar as well.
In fact, in the simplest case, the process we just described isn't going to work. Because the browser doesn’t support script, we can’t detect a click on one of the links in the pages if it only loads a new page (i.e. we can't run script in the new page to change the navigation bar contents). The only way to change the navigation bar is to reload the entire frameset, specifying the pages we want to appear in each frame.
This is how the links in the simple ASP-only (non-script browser) navigation bar are defined:
<A HREF="default.asp?section=home" TARGET="_top">
<IMG BORDER=0 ...button image here... ></A> So, when a button in the navigation bar is clicked, the entire frameset is reloaded with the correct pages in each frame. However, in the text links at the bottom of the Home and content pages, we are just specifying the page we want to go to, and it is loaded into the main window. In this case, the navigation bar won’t change:
...
<A HREF="books/booklist.asp">Samples</A> |
<A HREF="resources/resources.asp">Resources</A> |
<A HREF="reference/reference.asp">Reference</A> |
<A HREF="search/search.asp">Search</A> |
<A HREF="sitemap/sitemap.asp">Site Map</A>
...The only way round this would be to replace these links with ones that reload default.asp, and hence recreate the entire frameset each time:...
<A HREF="default.asp?section=books">Samples</A> |
<A HREF="default.asp?section=resources">Resources</A> |
<A HREF="default.asp?section=reference">Reference</A> |
<A HREF="default.asp?section=search">Search</A> |
<A HREF="default.asp?section=sitemap">Site Map</A>
...
This will work where default.asp uses server-side ASP code to detect which pages are required in the newly loaded frameset, as in our example. If you provide links to lots of pages, however, this can soon become cumbersome. On top of that, remember that 90% of browsers that are in general use do support JavaScript, and many of those that don't will not support frames anyway. It's probably not worth the effort of doing all this work for the very occasional visitor that will benefit—remember that the buttons still work fine when clicked directly.
When we are serving pages to a browser that supports JavaScript–other than Navigator 4 and Internet Explorer 4–we can use script code in the page to change our navigation bar contents each time a page is loaded into the main window. We showed you how in the frameset examples in Chapters 2 and 3. In the Home page, we have a script section that runs after the page has loaded:
...
<script LANGUAGE="JavaScript">
function setNavBar() {
if (self != parent) parent.frames[0].location.href = 'nav_js.htm';
}
</script>
</head>
<body BGCOLOR="#FFFFFF" ONLOAD="setNavBar()">
...This simply reloads the navigation bar, which itself detects which page is displayed in the main window and displays the appropriate combination of buttons.
The other twoHomepages, those for Navigator 4+ and Internet Explorer 4+, can both change the contents of their own matching navigation bar without having to reload it from the server. In both navigation bars, we provided a function updateNavbar, which accepts the name of the section as a parameter and displays the links or button images appropriate for that section. This means that we can force the correct navigation bar to be displayed by both pages, using the same code:
...
<script LANGUAGE="JavaScript">
function setNavBar() {
if (self != parent) parent.frames[0].updateNavbar('home');
}
</script>
</head>
<body BGCOLOR="#FFFFFF" ONLOAD="setNavBar()">
...
For the two Home pages we've just looked at, and in the plain JavaScript Home page we examined earlier, we are running the code that updates the navigation bar in that page's ONLOAD event, i.e. after it has completed loading. This is to allow the navigation bar time to load and make the function available, before the script in the Home page runs.
We need to run the code that updates or reloads the navigation in the other content pages as well, so that the correct combination of button images or text links is displayed in each case. However, here (because we know we have a frameset loaded), we can generally get away with running the script 'in-line' in the page, i.e. having it execute as the page loads rather than waiting for it to finish loading.
But there is another issue to consider. We've only got one set of content pages (perhaps because we only want to use the specific new browser features in the Home page). How do we get them to update the navigation bar in the correct manner? In the case of the simple no-script pages, we don't have to do anything. However, in the other three situations, we need to carry out two different tasks. If the current browser is Navigator 4/5 or IE 4/5, we must call the updateNavbar function and supply the section name of the current page. If the current browser is a simple JavaScript-enabled browser, we need to reload the navigation bar.
This is where the browser type variable we placed in the frameset page comes in. When default.asp loads, it creates the variable with the value of the browser type: 'nav4', 'ie4', 'js', or 'any'. We cannot do anything when it's 'any', because the browser won’t support script. However, if it's one of the other three we'll take some action. The following is the <SCRIPT> code section in the Books and Samples page—the other content pages are similar but provide different values for the function parameter:
<SCRIPT LANGUAGE="JavaScript">
<!--
if (self != parent)
if (parent.browserType == 'js')
parent.frames[0].location.href = '../nav_js.htm'
else
parent.frames[0].updateNavbar('books');
// -->
</SCRIPT>
All this does is check the value of the browser type variable browserType in the parent frame. If it's 'js' we can reload the simple JavaScript navigation bar. Otherwise we call the updateNavbar function in the navigation bar page (parent.frames[0]), supplying the section name we're currently in.
Of course, if the browser type is 'any', it won’t support client-side JavaScript, so our code won’t get executed at all—just what we want. We've even remembered to surround it in a comment tag <-- .. --> so that it will be hidden from the user in this case.