This section offers a few practical examples of DHTML. The scripts you’ll see are necessarily simple to get you started. There are tons of resources on the Internet for additional help, including a vast array of freely available scripts that you can customize for your own use. We’ll take a look at a few of the most popular DHTML routines.
Breadcrumbs (page location indicator)
If you’ve ever seen a series of links at the top of a browser window with the current page’s link deactivated, you’ve seen breadcrumbs. Breadcrumbs derive their name from the concept of a navigation trail, designed to help users know where they are relative to the page they are in. Many user interface experts consider breadcrumbs an absolute necessity. Generally, you’ll find breadcrumbs most easily managed through server-side scripting, but if you don’t want to deal with server-side scripting, or, if you simply don’t have access to a server-side scripting engine (maybe you are simply creating some pages on your home page offered by your ISP), you can create them using JavaScript.
Writing out the code in pseudo-code Generally, the best way to develop any code is to spell it out in pseudo-code. In other words, think about what you’re trying to do in English or whatever your spoken
language is. In this case, our pseudo-code looks like this:
Split the current URL into each folder.
For each folder
Create a link string-based object.
Next Folder,
Combine all result string objects together using a separator
or delimiter to form a single string.
Print the string out to the browser window.
Using the window object to manage URLs
Most action using JavaScript takes place by way of the DOM, which you’ll see in action in the upcoming JavaScript breadcrumb example. In this case, you’ll use the window location property to handle the first part of your pseudo-code. The location property contains the current window’s URL. You’ll need this URL because in order to develop breadcrumbs according to the pseudo-code, you’ll need to break apart the URL string and rip out each directory from it. You do this by separating each chunk of string that is delimited by a forward slash.
Therefore, the first step in creating breadcrumbs is to initialize a JavaScript variable to store the URL, as in the following example:
var sURL = window.location.toString();
Building string arrays with the split() method
Once you’ve got your URL string, you can use the JavaScript split() method to store an array of substrings from the URL string you stored in the sURL variable. The split() method splits a string according to a delimiter you name as the method’s argument. It stores each substring as part of an array, indexed in character
sequence. This means you don’t need to initialize an array with something like this:
var sDir = new Array();
Instead, you can initialize the array by using the split() method:
var sDir=sURL.split(“/”);
Remembering that array indexes are counted beginning with 0, not 1, if your URL is http://www.mydomain.com/mydirectory/here, the split() method used in the preceding code fragment will create an array that looks like this:
sDir[0] = http:
sDir[1] = www.mydomain.com
sDir[2] = mydirectory
sDir[3] = here
Next, initialize a variable to store your output string:
var sOutput=“”;
Then, create a JavaScript for loop to loop through the array. Note that the loop looks a little different than some loops you may have seen:
for (y=2;y<(sDir.length-1);y++)
What’s different about this loop? Usually, you start such a loop with y=0 (or, more often, i=0, but i is simply the name of the new loop variable and we already are using that in another part of the code, as shown in Listing 26-1). Of course, in many instances you won’t start a loop at an array’s zero index value, and this is one of them, because you happen to know that the first two “splits” contain parts of the string related to the protocol (http:), and we don’t want that or the first / of http://, either.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<script language=“javascript”>
function Nest(x)
{
var x=x-3;
var sNesting=“”;
for (i=0;i<x;i++)
{
sNesting=sNesting + “../”;
}
return sNesting;
}
function breadcrumbs()
{
var sDir = new Array();
var sURL = window.location.toString();
sDir=sURL.split(“/”);
var sOutput=“”;
for (y=2;y<(sDir.length-1);y++)
{
sOutput=sOutput + “ :: <a href=’” +
Nest((sDir.length-y)+1) + “index.html’>” + sDir[y] + “</a>”;
}
document.write(sOutput);
}
</script>
<style type=“text/css”>
<!--
body {
font-family: Frutiger, Verdana, Arial, Helvetica, sansserif;
}
.breadcrumbs {
font-size: 10px;
}
-->
</style>
<title>Breadcrumbs</title>
<meta http-equiv=“Content-Type” content=“text/html;
charset=iso-8859-1”>
</head>
<body>
<div id=“breadcrumbs” class=“breadcrumbs”>
<script language=“javascript”>
breadcrumbs();
</script>
</div>
<div style=“border: navy 1px solid; padding: 12px; width:
440px; text-align:center; margin-top:12px;”>
Here is some content.
</div>
</body>
</html>
Breadcrumbs (page location indicator)
If you’ve ever seen a series of links at the top of a browser window with the current page’s link deactivated, you’ve seen breadcrumbs. Breadcrumbs derive their name from the concept of a navigation trail, designed to help users know where they are relative to the page they are in. Many user interface experts consider breadcrumbs an absolute necessity. Generally, you’ll find breadcrumbs most easily managed through server-side scripting, but if you don’t want to deal with server-side scripting, or, if you simply don’t have access to a server-side scripting engine (maybe you are simply creating some pages on your home page offered by your ISP), you can create them using JavaScript.
Writing out the code in pseudo-code Generally, the best way to develop any code is to spell it out in pseudo-code. In other words, think about what you’re trying to do in English or whatever your spoken
language is. In this case, our pseudo-code looks like this:
Split the current URL into each folder.
For each folder
Create a link string-based object.
Next Folder,
Combine all result string objects together using a separator
or delimiter to form a single string.
Print the string out to the browser window.
Using the window object to manage URLs
Most action using JavaScript takes place by way of the DOM, which you’ll see in action in the upcoming JavaScript breadcrumb example. In this case, you’ll use the window location property to handle the first part of your pseudo-code. The location property contains the current window’s URL. You’ll need this URL because in order to develop breadcrumbs according to the pseudo-code, you’ll need to break apart the URL string and rip out each directory from it. You do this by separating each chunk of string that is delimited by a forward slash.
Therefore, the first step in creating breadcrumbs is to initialize a JavaScript variable to store the URL, as in the following example:
var sURL = window.location.toString();
Building string arrays with the split() method
Once you’ve got your URL string, you can use the JavaScript split() method to store an array of substrings from the URL string you stored in the sURL variable. The split() method splits a string according to a delimiter you name as the method’s argument. It stores each substring as part of an array, indexed in character
sequence. This means you don’t need to initialize an array with something like this:
var sDir = new Array();
Instead, you can initialize the array by using the split() method:
var sDir=sURL.split(“/”);
Remembering that array indexes are counted beginning with 0, not 1, if your URL is http://www.mydomain.com/mydirectory/here, the split() method used in the preceding code fragment will create an array that looks like this:
sDir[0] = http:
sDir[1] = www.mydomain.com
sDir[2] = mydirectory
sDir[3] = here
Next, initialize a variable to store your output string:
var sOutput=“”;
Then, create a JavaScript for loop to loop through the array. Note that the loop looks a little different than some loops you may have seen:
for (y=2;y<(sDir.length-1);y++)
What’s different about this loop? Usually, you start such a loop with y=0 (or, more often, i=0, but i is simply the name of the new loop variable and we already are using that in another part of the code, as shown in Listing 26-1). Of course, in many instances you won’t start a loop at an array’s zero index value, and this is one of them, because you happen to know that the first two “splits” contain parts of the string related to the protocol (http:), and we don’t want that or the first / of http://, either.
Building a Simple Breadcrumbs Header
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<script language=“javascript”>
function Nest(x)
{
var x=x-3;
var sNesting=“”;
for (i=0;i<x;i++)
{
sNesting=sNesting + “../”;
}
return sNesting;
}
function breadcrumbs()
{
var sDir = new Array();
var sURL = window.location.toString();
sDir=sURL.split(“/”);
var sOutput=“”;
for (y=2;y<(sDir.length-1);y++)
{
sOutput=sOutput + “ :: <a href=’” +
Nest((sDir.length-y)+1) + “index.html’>” + sDir[y] + “</a>”;
}
document.write(sOutput);
}
</script>
<style type=“text/css”>
<!--
body {
font-family: Frutiger, Verdana, Arial, Helvetica, sansserif;
}
.breadcrumbs {
font-size: 10px;
}
-->
</style>
<title>Breadcrumbs</title>
<meta http-equiv=“Content-Type” content=“text/html;
charset=iso-8859-1”>
</head>
<body>
<div id=“breadcrumbs” class=“breadcrumbs”>
<script language=“javascript”>
breadcrumbs();
</script>
</div>
<div style=“border: navy 1px solid; padding: 12px; width:
440px; text-align:center; margin-top:12px;”>
Here is some content.
</div>
</body>
</html>
0 comments:
Post a Comment