With this JavaScript/cookie method, the “New” markers appear only when a link is new for the particular visitor viewing your page. Other visitors won’t see the “New” markers unless, of course, one or more of the links are new for that individual.

Now you can call attention to links your visitor hasn’t yet had the opportunity to see, without bothering visitors who have already seen them.

Here are the steps:

1. Obtain the JavaScript source code (URL below).
2. Specify values (or verify that they are already correct) in three clearly marked spots in the source code.
3. Put the source code into the HEAD area of your web page.
4. Insert special JavaScript at the places in your page content where you want the “New” markers to appear.
5. Test.

The JavaScript uses cookies to record which links are on a page when a visitor views it. The next time the visitor views the page, that record is compared to the current links. Any links on the page that are not in the cookie record are considered new links.

You can use the JavaScript on every page you want to print “New” markers.

Limitations

The cookie specifications allow domains to store up to 20 cookies, and up to 4 kilobytes per cookie. See http://www.netscape.com/newsref/std/cookie_spec.html

Browsers may allow more than the specifications, but the relaxing of limitations can’t be depended upon.

This means that if you have more than 20 pages with the “New” marker JavaScript, only the last 20 the visitor views can be counted on to have a cookie stored. The number is less if your domain stores other cookies.

It also means that when the links on a page exceeds 4 kilobytes, including the URL of the current page (which is part of the identifying cookie name), then some of the links might not be stored in the cookie. 4 kilobytes is a lot of links, but if you have a links page then you might exceed the limit.

To give you an idea of how many links fit in 4 kilobytes (4800 characters), here are two examples:

1. The link href=”nextpage.html” is 13 characters long. Adding 1 character used when the cookie is stored, allows 342 of those links to fit within 4 kilobytes.
2. The link href=”http://willmaster.com/master/” is 29 characters long. Adding the 1 character padding, 160 of those links fit within 4 kilobytes.

41 additional characters are required for the cookie expiration date and the cookie name.

If you think you might be close to the limit, put the following temporary JavaScript at the bottom of the BODY area of your web page, just above the </body> tag:

-==-

When you load the page into your browser, the temporary JavaScript will print the cookie length. Once you have the information you need, remove the temporary JavaScript.

Here are expanded instructions for implementing the “New” link marker system.

Obtain the JavaScript Source Code

The demonstration page at http://willmaster.com/a/18/pl.pl?art184 has links to the source code.

Save the source code to your computer.

You’ll notice that the source code is a web page. You can use that web page and modify it for your own use or you can modify one of your existing web pages. The following assume you’re modifying one of your existing web pages.

Specify Values In the Source Code

In the web page source code you downloaded, you’ll find a large block of JavaScript code in the HEAD area.

The JavaScript can be customized in three places by specifying custom values. These are near the beginning of the JavaScript block, clearly marked.

1. You can specify what the “New” markers are. They can be the word “NEW” or an image or anything else that can be printed on a web page.

   The code for the “New” markers is put between the apostrophes on the line indicated in instructions found in the JavaScript. Here are a few examples:

   -==-

2. You can specify how many days the cookie shall be stored on the visitor’s computer. The number shall be at least 1 and no more than 3652 (which is 10 years).

   Example (183 days for a cookie existing 6 months):

   CookieDays = 183;

3. Specify the number of seconds it takes for the web page to load.

   It is necessary that all links are loaded in the browser before the new cookie with current links is set. The cookie setting will be delayed for the number of seconds you specify here.

   When determining the number of seconds for loading your web page, consider that some may access your page with a dialup account or with a cell phone. It is better to over-estimate by a few seconds than to under-estimate.

   Because the load time will vary from visitor to visitor, an estimate is the best that can be done.

   Example:
   LoadTimeSeconds = 12;

Put the Source Code Into the HEAD Area

Now that you’ve specified the values in the large block of JavaScript code, copy that block of code and paste it into the HEAD area of the web page you’re modifying.

Insert Special JavaScript For “New” Markers

Three lines of JavaScript are put on your page where you want “New” markers to display whenever the link is new for the visitor.

This example puts the “New” marker in front of the link:

-==-

Notice that the URL between the quotation marks, in both the IsNew() function and the href= attribute, is exactly the same. They must be the same URL so the “New” marker knows which URL it’s supposed to be associated with.

Here are three other considerations:

1. All URLs that you intend to work with the “New” marker must be absolute http://… URLs.

   Some browsers store URLs as absolute URLs, internally, regardless whether or not the source code uses relative URLs. Use absolute URLs to work with the greatest number of browsers.

2. The domain name following http:// must be all lower-case.

   Some browsers store the domain name in lower-case, internally, regardless of how the source code is printed, and some do not. Make all domain names lower-case to work with the greatest number of browsers.

3. Any URLs that end with a domain name or directory name must have the slash character (“/”) at the end of the URL.

   Some browsers append a slash character to the URL unless the URL ends with a file name. End all URLs with a slash character, unless it ends with a file name, in order to work with the greatest number of browsers.

   Here are examples of href attributes with correct

   URLs:
   href=”http://domain.com/”
   href=”http://domain.com/page.html”
   href=”http://domain.com/directory/”
   href=”http://domain.com/directory/page.html”

Only links that will have the “New” marker JavaScript will need to have the above considerations. Put the JavaScript only with the links where you want the “New” marker to appear.

If you have the same link in more than one place on the web page, the “New” marker JavaScript can be put with none, one, or more of the links.

This example puts the “New” marker after the link:

-==-

Other places where the “New” marker might be appropriate is before, after, or within a description paragraph.

Testing

To test your page, first remove all links and load the page into your browser. To make it easy, you might cut the entire BODY area of your page and paste it to a temporary file.

After you’ve loaded the page without the links into your browser (which sets a cookie with no links), put the links back into the your page. Now when you load your browser, the “New” markers should appear wherever you put the JavaScript for it. If it doesn’t, check that you’ve placed the JavaScript correctly.

After you’ve determined that all of the “New” markers appear where they’re supposed to, load the page again. This time, all of the “New” markers should disappear because none of of the links are new to your browser. If any remain visible, check the three “other consideration” points, above.

When you have it working for one browser, check it with other browsers. Opera 6 and IE 5 are the most picky of the browsers I’ve tested. If you pass with those, you should be okay with others.

If you need to test more than once with the same browser, you’ll need to remove the cookies before subsequent tests. A way to do it without removing cookies is to rename the web page file you’re testing. Renaming means a different cookie will be used.

Consider the limitations and follow the five implementation steps. You’ll have “New” link markers custom printed for each of your site visitors.