Index
|
Custom Color Schemes
Another frivolous yet eye-pleasing dynamic feature you can add to almost any site is a custom color scheme. By storing custom color values in the cookie file, you can set them for any page that is loaded. This feature was first introduced in Chapter 11, but I will elaborate on it now to make it a fully functional, dynamic HTML effect.
The first part of implementing a custom color scheme for an entire Web site is to create a page where the color variables can be set in the cookie file. Because this is such an easy task to do and because it has been explained in previous chapters, I will simply present you with the working source code. Figure 20.4 shows the simple user interface, which allows site visitors the ability to "customize" the color scheme to their liking.
<html> <head> <title> Center Park - Customization </title> <script language="JavaScript"> <!-- function saveCustoms( form ) { document.cookie = "bgColor=" + form.bgColor.value; document.cookie = "fgColor=" + form.fgColor.value; } // --> </script> </head> <body> <form onSubmit="JavaScript: saveCustoms( this );"> <table> <tr> <td> <b><font size="5">Customize <br> Web site colors:<br> <br></font></b> </td> <tr> <td> <b>Background Color: </b> </td> <td> <input type="text" name="bgColor" size="15"> </td> </tr> <tr> <td> <b>Foreground Color:</b> </td> <td> <input type="text" name="fgColor" size="15"> </td> <td> <input type="submit" value="Submit"> </td> </tr> </table> </form> </body> </html> 
Figure 20.4: Even simple user-customizable options such as this can bring a real sense of personalization to your Web site, encouraging users to feel a stronger sense of ownership (translation: they will be more inclined to return to your site).
This is the bare minimum code required to store a custom color scheme. A simple function, saveCustoms():
function saveCustoms( form ) { document.cookie = "bgColor=" + form.bgColor.value; document.cookie = "fgColor=" + form.fgColor.value; } is called when the Submit button on the form is pressed, and it stores the custom color variables in the cookie file. From that point on, any page that has access to that cookie file and has the proper code to retrieve the custom color variable can have the color scheme that the visitor desires.
The code to load the custom color variables is equally simple. All that is required is to read the variables from the cookie file and set the document fields accordingly. Figure 20.5 illustrates this functionality by customizing the background to black and setting the foreground to white.
<html> <head> <title> Center Park - Customization </title> <script language="JavaScript"> <!-- function saveCustoms( form ) { document.cookie = "bgColor=" + form.bgColor.value; document.cookie = "fgColor=" + form.fgColor.value; } function getCookieValue( name ) { var c = document.cookie; var begin = c.indexOf( name ); if( begin < 0 ) return( "" ); begin += name.length + 1; var end = c.indexOf( ";", begin ); if( end == -1 ) end = c.length; return( c.slice( begin, end ) ); } function setCustoms() { var bg = getCookieValue( "bgColor" ); var fg = getCookieValue( "fgColor" ); if( bg != "" ) document.bgColor = bg; if( fg != "" ) document.fgColor = fg; } // --> </script> </head> <body onLoad="JavaScript: setCustoms();"> <form onSubmit="JavaScript: saveCustoms( this );"> <table> <tr> <td> <b><font size="5">Customize <br> Web site colors:<br> <br></font></b> </td> <tr> <td> <b>Background Color: </b> </td> <td> <input type="text" name="bgColor" size="15"> </td> </tr> <tr> <td> <b>Foreground Color:</b> </td> <td> <input type="text" name="fgColor" size="15"> </td> <td> <input type="submit" value="Submit"> </td> </tr> </table> </form> </body> </html> 
Figure 20.5: Individual users can be quite particular about how they like their information displayed. A customization feature such as this can go a long way towards making their experience on your Web site a happier one.
This slightly modified example not only saves the custom colors, but loads and applies them the next time the page is loaded. The setCustoms() function,
function setCustoms() { var bg = getCookieValue( "bgColor" ); var fg = getCookieValue( "fgColor" ); if( bg != "" ) document.bgColor = bg; if( fg != "" ) document.fgColor = fg; } which is called from the body tag's onLoad event handler,
<body onLoad="JavaScript: setCustoms();">
reads the color variables from the cookie file and applies them to the document's color fields. The same exact approach can be applied to any page that has access to the cookie file. Figure 20.6 utilizes the following code, but displays it with the same color scheme that was set above (in this case, a black background with a white foreground).
<html> <head> <title>Center Park Home Page - Main Page</title> <script language="JavaScript"> <!-- function getAd() { var ad = "ad"; ad += parseInt( Math.random() * 2 ) + 1; return( ad + ".jpg" ); } function rotateAd() { with( document ) { for( i = 0 ; i < images.length ; i++ ) { if( images[i].name == "adImage" ) { images[i].alt = images[i].src = getAd(); } } } window.setTimeout( "rotateAd()", 10000 ); } function getCookieValue( name ) { var c = document.cookie; var begin = c.indexOf( name ); if( begin < 0 ) return( "" ); begin += name.length + 1; var end = c.indexOf( ";", begin ); if( end == -1 ) end = c.length; return( c.slice( begin, end ) ); } function setCustoms() { var bg = getCookieValue( "bgColor" ); var fg = getCookieValue( "fgColor" ); if( bg != "" ) document.bgColor = bg; if( fg != "" ) document.fgColor = fg; } // --> </script> </head> <body onLoad="JavaScript: setCustoms(); rotateAd();"> <center> <font color="red" size="6"><b> Center Park Home Page </b></font></center> <br><br> <table width="100%"> <tr> <td width="50%"> <img name="adImage" border="0" width="345" height="200"> </td> <td width="50%"> <a href="login.html">Log In</a><br> <a href="store.html">Store</a><br> <a href="customize.html">Customize</a> </td> </tr> <tr> <td width="100%" colspan="2"> <hr> <font face="Courier" size="5">*** School News ***</font> <br> <br> <b>July 4th</b> - Fireworks on the mall! Come enjoy the holiday with the Center Park faculty, staff and students.<br> <br> <b>July 3rd</b> - First annual Adopt a Nerd Day! They are people too.<br> <br> <b>June 12th</b> - June Bug festival begins.</td> </tr> </table> </body> </html> 
Figure 20.6: While perhaps not visually pleasing to one person, this custom color scheme might be just the ticket for someone else.
This example is the default content for the frames page presented earlier in this chapter. It utilizes the setCustoms() function to apply the user's desired color scheme. All pages in the Center Park site are similarly equipped to apply the user's desired color scheme.
|
EAN: 2147483647
Pages: 130