 Use JavaScript to Display a 'New' Link Marker
By
William
Bontrager
Here is a way you can put
"New" markers next to links that you have added or changed since your visitor
last viewed your web page.
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:
<script type="text/javascript" language="JavaScript"><!--
var numlinks = document.links.length - 1;
var ls = escape(document.URL);
for(var i = 0; i <= numlinks; i++)
{ ls += '&' + escape(document.links[i]); }
var ii = ls.length;
ii += 41;
document.writeln('Cookie length: ' + ii);
// --></script>
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:
PrintForNew = '<span class="bold">[NEW]</span>';
PrintForNew = '>>>NEW';
PrintForNew = '<img src="image.gif">';
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:
<script><!--
IsNew("http://willmaster.com/");
//--></script>
<a href="http://willmaster.com/">WillMaster</a>
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:
<a href="http://willmaster.com/">WillMaster</a>
<script><!--
IsNew("http://willmaster.com/");
//--></script>
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.
Will Bontrager
About the Author:
William
Bontrager Programmer/Publisher, "WillMaster Possibilities"
ezine
mailto:possibilities@willmaster.com
Are you looking for top quality scripts? Visit
Willmaster
and check out his highly acclaimed Master Series scripts. Some free, some
for a fee. |
|
Web
Development
