• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

7.3. prefs.html

Although the sequence of screen captures leads you through the true progression of events (i.e., the user begins with no preference settings), let's assume the user has previously set user preferences and is returning to prefs.html to make changes. I think you'll find it much easier to follow. Example 7.1 shows prefs.html.

Example 7.1. prefs.html

     1  <HTML>
     2  <HEAD>
     3  <TITLE>Take-A-Dive User Preferences</TITLE>
     4  <STYLE type="text/css">
     5    BODY, TD { font-family: Arial; }
     6  </STYLE>
     7  <SCRIPT LANGAUGE="JavaScript1.2" SRC="cookies.js"></SCRIPT>
     8  <SCRIPT LANGUAGE="JavaScript1.2">
     9  
    10  var imagePath = 'images/';
    11  var newsNames = new Array(
    12    new Array('The Wall Street Journal','http://www.wsj.com/'), 
    13    new Array('Barron\'s Online','http://www.barrons.com/'), 
    14    new Array('CNN Interactive','http://www.cnn.com/'), 
    15    new Array('MSNBC','http://www.msnbc.com/'), 
    16    new Array('Fox News','http://www.foxnews.com/')
    17    );
    18  
    19  var indexNames = new Array(
    20    new Array('The New York Stock Exchange','http://www.nyse.com/'), 
    21    new Array('NASDAQ','http://www.nasdaq.com/'), 
    22    new Array('Dow Jones Indexes','http://www.dowjones.com/')
    23    );
    24  
    25  var strategy = new Array(
    26    new Array('Cheap', 'I\'m Really Cheap'), 
    27    new Array('Stingy', 'I\'m Pretty Stingy'), 
    28    new Array('Conservative', 'I\'m Conservative'), 
    29    new Array('Moderate', 'I\'m a Moderate'), 
    30    new Array('Agressive', 'I\'m Aggressive'), 
    31    new Array('Willing to sell mother', 'I\'d Sell My Mother!')
    32    ); 
    33  
    34  var background = new Array(
    35    new Array(imagePath + 'goldthumb.gif', 'Gold Bars'), 
    36    new Array(imagePath + 'billsthumb.gif', 'Dollar Bills'), 
    37    new Array(imagePath + 'fistthumb.gif', 'Fist of Cash'), 
    38    new Array(imagePath + 'currency1thumb.gif', 'Currency 1'), 
    39    new Array(imagePath + 'currency2thumb.gif', 'Currency 2')
    40    ); 
    41  
    42  var face = new Array(
    43    new Array('times', 'Times Roman'), 
    44    new Array('arial', 'Arial'), 
    45    new Array('courier', 'Courier New'), 
    46    new Array('tahoma', 'Tahoma')
    47    );
    48  
    49  var size = new Array(
    50    new Array('10', 'Small'), 
    51    new Array('12', 'Medium'), 
    52    new Array('14', 'Large'), 
    53    new Array('16', 'X-Large')
    54    ); 
    55  
    56  indexNames = indexNames.sort();
    57  newsNames = newsNames.sort();
    58  
    59  var allImages = new Array();
    60  
    61  var imageNames = new Array(
    62    'courier10', 'courier12', 'courier14', 'courier16', 
    63    'arial10', 'arial12', 'arial14', 'arial16', 
    64    'times10', 'times12', 'times14', 'times16', 
    65    'tahoma10', 'tahoma12', 'tahoma14', 'tahoma16', 
    66    'goldthumb','billsthumb','fistthumb','currency1thumb','currency2thumb',
    67    'blank'
    68    );
    69  
    70  for (var i = 0; i < imageNames.length; i++) {
    71    allImages[i] = new Image();
    72    allImages[i].src = imagePath + imageNames[i] + '.gif';
    73    }
    74  
    75  function makePath(formObj) {
    76    var fontName = imagePath + 
    77      formObj.face.options[formObj.face.selectedIndex].value + 
    78      formObj.size.options[formObj.size.selectedIndex].value + '.gif';
    79    swapImage("fontImage", fontName);
    80    }
    81  
    82  function swapImage(imageName, imageBase) {
    83    document[imageName].src = imageBase;
    84    }
    85  
    86  function genSelect(name, select, onChangeStr) {
    87    var optStr = "";
    88    var arrObj = eval(name);
    89    for (var i = 0; i < arrObj.length; i++) {
    90      optStr += '<OPTION VALUE="' + arrObj[i][0] + 
    91       (i == select ? '" SELECTED' : '"') + '>' + arrObj[i][1];
    92      }
    93    return '<SELECT NAME="' + name + '"' + (onChangeStr ? ' onChange="' + 
    94      onChangeStr + ';"' : '') + '>' + optStr + '</SELECT>';
    95    }
    96  
    97  function genBoxes(handle, arrObj) {
    98    var boxStr = '';
    99    for (var i = 0; i < arrObj.length; i++) {
   100      boxStr += '<INPUT TYPE=CHECKBOX NAME="' + handle + i + '" VALUE="' + 
   101        arrObj[i][0] + ',' + arrObj[i][1] + '"> ' + arrObj[i][0] + '<BR>';
   102      }
   103    return boxStr;
   104    }
   105  
   106  function getPrefs(formObj) {
   107    var prefStr = GetCookie('userPrefs');
   108    if (prefStr == null) { return false; }
   109    var prefArray = prefStr.split('-->');
   110    for (var i = 0; i < prefArray.length; i++) {
   111      var currPref = prefArray[i].split('::');
   112      if (currPref[1] == "select") { 
   113        formObj[currPref[0]].selectedIndex = currPref[2]; 
   114        }
   115      else if (currPref[1] == "text") { 
   116        formObj[currPref[0]].value = currPref[2]; 
   117        }
   118      else if (currPref[1] == "checkbox") { 
   119        formObj[currPref[0]].checked = true; 
   120        }
   121      }
   122    return true;
   123    }
   124  
   125  function setPrefs(formObj) {
   126    var prefStr = '';
   127    var htmlStr = '';
   128    for (var i = 0; i < formObj.length; i++) {
   129      if (formObj[i].type == "select-one") {
   130        prefStr += formObj[i].name + '::select::' + 
   131        formObj[i].selectedIndex + '-->';
   132        htmlStr += formObj[i].name + '=' + 
   133          formObj[i].options[formObj[i].selectedIndex].value + '-->';
   134        }
   135      else if (formObj[i].type == "text") {
   136        if (formObj[i].value == '') { formObj[i].value = "Not Provided"; }
   137          prefStr += formObj[i].name + '::text::' + 
   138          safeChars(formObj[i].value) + '-->';
   139          htmlStr += formObj[i].name + '=' + formObj[i].value + '-->';
   140        }
   141      else if (formObj[i].type == "checkbox" && formObj[i].checked) {
   142        prefStr += formObj[i].name + '::checkbox::' + '-->';
   143        htmlStr += formObj[i].name + '=' + formObj[i].value + '-->';
   144        }
   145      }
   146    SetCookie('userPrefs', prefStr, expiry);
   147    SetCookie('htmlPrefs', htmlStr, expiry);
   148    if (confirm('Preferences changed. Go to your personalized page?')) {
   149      self.location.href = "dive.html";
   150      }
   151    }
   152  
   153  function safeChars(str) {
   154    return str.replace(/::|=|-->/g, ':;');
   155    }
   156  
   157  function populateForm(formObj) {
   158    if (getPrefs(formObj)) { 
   159      makePath(formObj);
   160      swapImage('bkgImage',
   161       formObj.background.options[formObj.background.selectedIndex].value);
   162      }
   163    else { resetImage(document.forms[0]); }
   164    }
   165  
   166  function resetImage(formObj) { 
   167    swapImage('bkgImage', formObj.background.options[0].value);
   168    swapImage('fontImage', imagePath + formObj.face.options[0].value +
   169      formObj.size.options[0].value + '.gif');
   170    }
   171  
   172  </SCRIPT>
   173  </HEAD>
   174  
   175  <BODY BGCOLOR=FFFFFF onLoad="populateForm(document.forms[0]);">
   176  <DIV ID="setting">
   177  <H2>Take-A-Dive User Preferences</H2>
   178  Choose the settings you like best, then choose<BR>
   179  <UL> 
   180    <LI><B>Save</B> to keep your changes, 
   181    <LI><B>Clear</B> to reset the form, or 
   182    <LI> <B>Back</B> to return to your links page.
   183  </UL>
   184  
   185  <FORM>
   186  <TABLE BORDER=1 CELLBORDER=0 CELLPADDING=0 CELLSPACING=1>
   187    <TR>
   188      <TD COLSPAN=2>
   189      <BR>
   190      <H3>Investor Profile</H3>
   191      </TD>
   192    </TR>
   193    <TR> 
   194      <TD>Name</TD>
   195      <TD><INPUT TYPE=TEXT NAME="investor"></TD>
   196    </TR>
   197    <TR>
   198      <TD>Age</TD>
   199      <TD><INPUT TYPE=TEXT NAME="age"></TD>
   200    </TR>
   201    <TR>
   202      <TD>Strategy</TD>
   203      <TD>
   204        <SCRIPT LANGUAGE="JavaScript1.2">
   205        document.write(genSelect('strategy', 3));
   206        </SCRIPT>
   207      </TD>
   208    </TR>
   209    <TR>
   210      <TD>Occupation</TD>
   211      <TD>
   212        <INPUT TYPE=TEXT NAME="occupation">
   213      </TD>
   214        <TR>
   215          <TD COLSPAN=2>
   216            <BR> 
   217            <H3>Investment Links</H3>
   218          </TD>
   219        </TR>
   220        <TR>
   221          <TD><B>News<B></TD>
   222          <TD>
   223            <SCRIPT LANUAGE="JavaScript1.2">
   224            document.write(genBoxes('newsNames'));
   225            </SCRIPT>
   226          </TD>
   227        </TR>
   228        <TR> 
   229          <TD><B>Stock Indexes</B></TD>
   230          <TD>
   231            <SCRIPT LANUAGE="JavaScript1.2">
   232            document.write(genBoxes('indexNames'));
   233            </SCRIPT>
   234          </TD>
   235        </TR> 
   236        <TR>
   237         <TD COLSPAN=2>
   238         <BR>
   239         <H3>Screen Layout</H3>
   240         </TD>
   241        </TR>
   242        <TR>
   243          <TD>
   244           <B>Background</B>
   245           <BR>
   246           <SCRIPT LANGUAGE="JavaScript1.2">
   247            document.write(genSelect('background', 0, 
   248              "swapImage('bkgImage',
   249              this.options[this.selectedIndex].value)"));
   250            </SCRIPT>
   251            </TD>
   252            <TD>
   253            <IMG SRC="images/blank.gif" 
   254              NAME="bkgImage" WIDTH=112 HEIGHT=60>
   255            </TD>
   256       </TR>
   257        <TR>
   258          <TD>
   259            <B>Font Face</B>
   260            <BR>
   261            <SCRIPT LANGUAGE="JavaScript1.2">
   262            document.write(genSelect('face', 0, "makePath(this.form)"));
   263            </SCRIPT>
   264            </TD>
   265            <TD ROWSPAN=2>
   266              <IMG SRC="images/blank.gif" NAME="fontImage" 
   267                WIDTH=112 HEIGHT=60>
   268            </TD>
   269  
   270       </TR>
   271       <TR>
   272          <TD>
   273            <B>Font Size</B>
   274            <BR>
   275            <SCRIPT LANGUAGE="JavaScript1.2">
   276            document.write(genSelect('size', 0, "makePath(this.form)"));
   277            </SCRIPT>
   278          </TD>
   279       </TR>
   280  </TABLE>
   281  <BR><BR>
   282  <INPUT TYPE=BUTTON VALUE="Save" onClick="setPrefs(this.form);"> 
   283  <INPUT TYPE=RESET VALUE="Clear" onClick="resetImage(this.form);">  
   284  <INPUT TYPE=BUTTON VALUE="Back" onClick="location.href='dive.html';">  
   285  <!--
   286  <INPUT TYPE=BUTTON VALUE="Show" 
   287    onClick="alert(GetCookie('userPrefs'));alert(GetCookie('htmlPrefs'));">  
   288  <INPUT TYPE=BUTTON VALUE="Erase" 
   289    onClick="DeleteCookie('userPrefs'); DeleteCookie('htmlPrefs');"> 
   290  //-->
   291  </FORM>
   292  </DIV>
   293  </BODY>
   294  </HTML>

					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint