JavaScripts

 First posted Jun 2002
Last update Dec 20, 2009
E-mail hiding script, foils spam harvesting robots
Popup window script for galleries as seen throughout CowboyFrank.net
Webcam image refresh script, without reloading the entire page
Expiring New icon, goes away on a date you select
Close a popup window by clicking on a link or image, like in my galleries
Random image chooser as seen on my main index page

Important Introductory Information

The JavaScripts on this page assume you understand a bit about HTML (HyperText Markup Language). If you do not know how to work in HTML, it would be a very good idea to learn just a little bit about it. You don't have to learn allot, just a little, then you can read all of it. I teach a course in Reading HTML. The entire course only takes one to two hours, depending on how many questions come up.

HTML is the language of the web. It is simple to see the raw code behind a web page. In Internet Explorer, click View and Source. Looks like a lot of gibberish doesn't it? Believe me, it's not as complex as it seems, you just have to know a little bit about what you are looking at.

Everything between the < > symbols (sometimes called angle brackets) is HTML coding which controls the formatting, background, fonts, colors, pictures, and links on the page. Here is a simple example.

<A HREF="http://cowboyfrank.net">Click Here</A> for a link.

The "A" indicates this tag is going to be an "Anchor" tag, also called a link.
The HREF= is an attribute to this tag that defines the address where you will go when you click the link.
The </A> is the closing tag for the Anchor.
Most tags require an opening tag and a closing tag.
Make sense?

There are about 30 or so tags available. Only about 10 are used extensively. It's that simple. Now of course there is more to it, such as style sheets, JavaScript, Embedded Objects, and so forth, but you don't really have to understand those to be able to read the coding behind a web page.

One important thing to know about HTML. If the web browser comes across a tag it doesn't understand, the browser simply ignores it and goes on. However, if a piece of code is in the wrong place, or isn't properly formatted it can cause a real mess. I have a saying, "Real Webmasters Know HTM-hell". In other words, the coding can be simple or get very complex. Just look at my main index page for some rather complex coding.

Hiding your E-mail From The Spamers

A few years ago someone in the spaming industry came up with a program that searches through web pages looking for e-mail addresses. When turned loose these "e-mail harvesting robots" look through your web page seeking out the "mailto:" coding tag that is used to start an e-mail anchor. It also looks for the familiar @ symbol which is generally used only for e-mail address. When it finds yours it will add you to their spam list. The most common sourse by far for spam lists are e-mail addresses exposed on web pages. The second most common source are e-mails with lots of other people's e-mail addresses showing. If you send an e-mail to a number of people, use Blind Carbon Copy to hide other's addresses.

A very interesting study on spam and it's sources can be found at
Center for Democracy & Technology March 2003

A simple method of hiding your address from the harvesters

It is easy to hide your e-mail address by replacing the dot and @ symbol with html code equivalents. You must be editing the raw html code of your page to do these modifications. You can not simply enter these codes in a graphical web editor like FrontPage, DreamWeaver or an online website builder. Check your editor's menus for an option to insert JavaScript or html code.
Replace your @ charter with this code     &#64;
and replace the dot with &#46;
Don't forget the semicolon on the end

Here's a simple to use converter that generates the above code for what ever e-mail address you enter.

This script does not submit your email address to me, it just converts some of the charters to html equivalents. Copy the result from the lower box and paste it into your html page editor's JavaScript or html code inserting option. You may notice I have also included an additional converted charter (the "m" in mailto) just to add an extra level of confusion for the spam harvesters.

Enter your E-mail address here:

Encoded E-mail Address:

A more advanced system which I use to use but began abandoning in 2008 because some newer web browsers wouldn't display the script.

This is a script designed by a friend of mine.

This part goes in the header of your page
<SCRIPT language=JavaScript>
<!--
function escramble(z,x)
{
var h='</a>'
var b='lto:'
var d='@'
var f='\">'
var a='<a href=\"mai'
document.write(a+b+x+d+z+f+x+d+z+h)
}
-->
</script>

This part goes where your e-mail will be on the page
Notice how the domain is placed first then your actual account name or handle comes next, and the @ symbol is missing from the line. You can use as many of these as you like throughout the page with different addresses.
<SCRIPT LANGUAGE="JavaScript">escramble('CowboyFrank.net','Cowboy')</SCRIPT>

Pop up window JavaScript

In memory of our friend Tom Williams.
Tom was a Visual Basic programmer. He had never worked with JavaScript. In early May 2000, I asked him to try to help me improve a pop up window script I had been using for several years. Over a period of about 2 weeks, he purchased a reference book and learned the language. On May 26, 2000, Tom and his friend Bev, met us at Luray, Virginia for a Memorial Day weekend camping trip. On Friday I set up my notebook and a desktop computer on the picnic table. I networked the 2 machines together, and we started in earnest. The desktop had a number of older web browsers installed on it for trouble shooting. We spent about 5 hours together, he instructing me during the process.

After 4 hours of fighting bugs in older browser versions, I made the decision to abandon error checking. Instead Tom constructed a script to redirect older browsers to a secondary file which did not use the JavaScript. That made everything much simpler. A few more adjustments and everything worked perfectly. We were all ecstatic. I have since had to abandon this redirect script, due to several issues with newer web browsers.

There are three unique feature to this 'new window open' script.

  1. It allows the web author to specify the exact size of each new window called from the script. This is done in the anchor element rather than the script itself, greatly simplifying the script.
  2. It will check for a pervious instance of its use, within any given web page, and, if one exists, close that instance before opening the new window. That way, if someone forgets to close the previous window, it's done for you.
  3. Forcing the previous window to close allows the next window to be built with new size parameters, in addition the new window always appears on top. These features make this script perfect for large image libraries.

After almost four years of tinkering, I finally had a script that did what I wanted. The next morning, after breakfast, Tom suffered a massive heart attack. At 1:38 pm, he was pronounced dead at the hospital. This is my memorial to a very dear friend.

This part goes in your header
<SCRIPT language=JavaScript>
<!--

// Please leave these comment lines in place.
// This script is in memorial of Tom Williams.
// He died of a heart attack the following day,
// after writing this code. May 27, 2000

var NewWind
  function makeA(url,w,h)
  {
    if (NewWind && !NewWind.closed)
    {
        NewWind.close()
    }

    params = ""
    params += "resizable=1,"
    params += "width=" + w + ","
    params += "height=" + h

    NewWind = window.open(url, "" , params);
  }
//-->
</script>

The Anchor Element
For each link within a page, insert the following code.

<A href="javascript:makeA('FileName','width','height')"><img src="frank.jpg" width="50" height="50"></A>
FileName is the file to open.
width is the width in pixels of the new window.
height is the hight in pixels of the new window.
Blue area is the text or thumbnail image which will become the Anchor, (the spot to click on).
 

The anchor can be linked directly to the larger image but you will need to add about 20 or so pixels to the dimensions of the window over the size of the image due to the margin web browsers create on the top and left of the picture. Instead, I create a separate html file as follows with the larger picture in it. Note the style inside the body tag to eliminate the margin.

<html>
<head>
<title>Cowboy Frank's Galleries</title>
</head>
<BODY STYLE="margin-left : 0px; margin-top : 0px;">
<img src="image.jpg" border="0" width="298" height="450" >
</body>
</html>

Important suggestion for the popup script
The profusion of popup advertisements that have hit the Internet lately has created a market for applications that block popup windows. If your visitor has one of those blockers turned on, chances are this popup script won't work. I would strongly suggest you include a standard, non-JavaScript, page which doesn't use the popups but links to your larger images directly. You will notice at the top of each of my gallery pages a link that says "If popup windows don't work click here".

Webcam Refresh Script

Refreshes the picture of your webcam without reloading the entire page.
(Note: this script only works for one camera on a page. If you have mutable cameras you want to refresh on the same page try the script on this guy's site. CowboyScripts.org

Simply copy this code and place it in your page where you want your webcam image to be. The only adjustments you need to make are

  • Seconds to refresh
  • image file name
    Can be relative or absolute path, if to another web server, include http://
  • Image dimensions
  • Color of border around image
    This must be a standard named color or a hex number such as #000000

Caution: Make sure you don't introduce any extra carage returns in the long lines of this code or it might not work.

<script language="javascript">
var refreshrate=6;                 //SECONDS BETWEEN REFRESH
var image="WebCam1.jpg";     //IMAGE NAME
var imgheight=240;                   //IMAGE HEIGHT
var imgwidth=320;                 //IMAGE WIDTH
function refresh(){
document.images["pic"].src=image+"?"+new Date();
setTimeout('refresh()', refreshrate*1000);}
document.write('<IMG SRC="'+image+'" ALT="Alternate Text" NAME="pic" ID="pic" WIDTH="'+imgwidth+'" HEIGHT="'+imgheight+'" STYLE="border: 1px solid Black;">');
if(document.images)window.onload=refresh;
</script>

Expiring NEW Sign

This script will allow you to include a graphic next to a new item on your site and not have to worry about remembering to take it off.

The script will show the graphic above until the date you select is past. Then the blank invisible graphic will take its place.

Save these two images to the same directory as the script is used in.

New graphic           Blank graphic, (transparent gif)

This part goes in your header
<SCRIPT language=JavaScript>
<!--
var image = "exp_new.gif"
var blank = "exp_blank.gif"

function expnew(when) {

when = new Date(when)
date = new Date()

if (when.getTime() > date.getTime()) {
document.write("<img src="+image+">")
} else {
document.write("<img src="+blank+">")
}}
//-->
</script>

This part goes where you want the New to appear
You can add as many of these as you want on the page, and they can all have different expiring dates.
<SCRIPT LANGUAGE="Javascript">expnew("4/25/2005")</SCRIPT>

4/25/2005 is the last day to show the New in the form of Month/Day/Year

Close Window Script

This script is what I use in my galleries to allow the visitor to click on the picture to close the popup window. Note that you should not use this script in a regular page as it will cause the visitor to close your site. I only use it to close popup windows.

This part goes in the header of your page
<SCRIPT language=JavaScript>
<!--
function bye() {
window.close()
}
</script>

This part goes where you want the person to click to close the window.
This can be around a picture, or you could use the text Close or what ever to become the link which will close the window. Notice how it is actually an anchor point.
<a href="javascript:bye()">Picture, button or text</A></SCRIPT>

Random Image Script

Does not work with Firefox
Selects a random image from a list each time the page is loaded. Note that the more images you include in your list the more random the appearence. I use to use this script on my home page but with the popularity of Firefox coming up and the fact the script doesn't work in Firefox I have changed to a server side include for those images.

This part goes in your header
The only thing you need to change is the picture1.jpg tags which point to your images. You may add as many images as you like. You can also add width, height, border and alt attributes to each IMG tag if you chose.
<SCRIPT language=JavaScript>
<!--
/*
-------------------------------------------------------------------------------------------------
Random Image/Link JavaScript(tm) by Jim Matvichuk
This code may be used freely as long as this copyright notice remains with the code.
Copyright© 1997, Jim Matvichuk Jim_Matvichuk@compuserve.com All rights reserved
Last Revision: August 19, 1997
-------------------------------------------------------------------------------------------------
*/
 G_total_sa = 0;
G_day = new Date();
G_seed = 1+G_day.getTime();

ae_('<IMG SRC="picture1.jpg">');
ae_('<IMG SRC="picture2.jpg">');
ae_('<IMG SRC="picture3.jpg">');

function ae_ (random_item) {
G_total_sa++;
sa [G_total_sa] = random_item;}
function rand() {
RN = parseInt(((G_seed - (parseInt(G_seed/1000,10) * 1000))/10)/100*G_total_sa + 1,10);
return RN;}
function sa () {}
//-->
</SCRIPT>

This part goes where you want the images to show on your page.
<SCRIPT LANGUAGE="JavaScript">
document.write (sa[rand(G_total_sa)]);
</SCRIPT>

Home