We’ve looked at some of the simple scripts used within our web page design. Now we will look at some of the more complex scripts we use to create a more interactive and animated web page design and layout.
[Note: We don’t use most of these javascripts any more, but we did for several years, so we enjoy showing them off, hoping others can use them with their web page designs and layout. Since moving to WordPress, most of these features are now handled by PHP and WordPress Plugins.]
Message of the Day Javascript
The JavaScript Source is a major source of javascripts for us. We love the serious way they take javascripts, offering a wide range for all needs. One of their javascripts sets up an array, like a small database of possiblities, and then posts that message so it changes every day, a new message every day, until the end of the month when it starts the cycle over. We use this script in a variety of ways.
In our Connect the Dots sidebar, the top item on the list changes every day so a different article is featured. At the bottom of our sidebar is a tip of the day on travel or nature photography. Both of these use the same javascript with different information. We use another similar javascript that presents rotating information with every refresh of the screen. We’ll get to that one in a moment.
The basic javascript is shown first, and then we’ve included a couple of examples of how we use it.
<!–Original: Mike W. (mikew@dvol.com) –>
<!–Website: http://www.dvol.com/~users/mikew –>
// Message of the Day
var msg1 = new Array();
Stamp = new Date();
today = Stamp.getDate();
msg1[1] = “Some witty and brilliant comment here.”;
msg1[2] = “I know a good story, how about you?”;
msg1[3] = “Do you have something interesting to say?”;
msg1[4] = “New message here.”;
msg1[5] = “New message here.”;
msg1[6] = “New message here.”;
msg1[7] = “New message here.”;
msg1[8] = “New message here.”;
msg1[9] = “New message here.”;
msg1[10] = “New message here.”;
msg1[11] = “New message here.”;
msg1[12] = “New message here.”;
msg1[13] = “New message here.”;
msg1[14] = “New message here.”;
msg1[15] = “New message here.”;
msg1[16] = “New message here.”;
msg1[17] = “New message here.”;
msg1[18] = “New message here.”;
msg1[19] = “New message here.”;
msg1[20] = “New message here.”;
msg1[21] = “New message here.”;
msg1[22] = “New message here.”;
msg1[23] = “New message here.”;
msg1[24] = “New message here.”;
msg1[25] = “New message here.”;
msg1[26] = “New message here.”;
msg1[27] = “New message here.”;
msg1[28] = “New message here.”;
msg1[29] = “New message here.”;
msg1[30] = “New message here.”;
msg1[31] = “New message here.”;
function feature() {
document.write(msg1[today]);
}
In the example below, we use this javascript to highlight one article a day as the featured article. Notice how left slashes were used before every quote mark in the web page address. This causes the javascript to ignore the quote marks and simply “write” them to the screen as any other text content. We only listed part of our version of the script to give you an idea of how we use it.
<!–Original: Mike W. (mikew@dvol.com) –>
<!–Website: http://www.dvol.com/~users/mikew –>
<!–Feature Article for Connect the Dots –>
var msg1 = new Array();
Stamp = new Date();
today = Stamp.getDate();
msg1[1] = “<a href= “learn/biz/write1.html“>Photo/Writing: Enhance Your Story with Photographs</a>”;
msg1[2] = “<a href=”living/workroad.html”>Travel: Working on the Road</a>”;
msg1[3] = “<a href=”learn/weather/winterwhite.html”>Weather Photography: Winter Whites</a>”;
msg1[4] = “<a href=”learn/wild.html”>Wild Things: Photographing Wildlife</a>”;
msg1[5] = “<a href=”…
[BREAK]
…href=”learn/biz/10words.html”>Networking for Photo Business Sucess</a>”;
function feature() {
document.write(msg1[today]);
}
And we use this javascript in our HTML web page like this:
<ul><li> <script type=”text/javascript”>
<!–
feature();
//–></script></li>
<li><a title=”check out what is new!” accesskey=”2″ tabindex=”13″ href=”doing/whatnew.html”>What’s New?</a></li>
<li><a title=”information about who we are” accesskey=”5″ tabindex=”14″ href=”about.html”>About Us</a></li>
<li><a title=”new gallery images” tabindex=”15″ href=”gallery.html”>Gallery Images</a></li>…
In this version of the same script, we feature a tip a day for our sidebar. The tips consist of a couple of paragraphs of information and the line breaks inside of the paragraphs are created by using forced line breaks (<br>) to create the space. We use email and web page addresses inside of these messages, too. Be sure and add a left slash before every quote mark in these addresses. At the bottom of the script is the HTML layout that the script writes to the screen and displays the content of the message. It uses the javascript command document.write which writes the content to the screen, including the HTML tags.
<!–Original: Mike W. (mikew@dvol.com) –>
<!–Website: http://www.dvol.com/~users/mikew –>
<!–Tip of the Day for Sidebar –>
function tip() {
var msg = new Array();
Stamp = new Date();
today = Stamp.getDate();
msg[1] = “Remember, you can turn off the Program Mode on your camera and take advantage of the aperture and shutter to control different aspects of your composition. A smaller aperture creates a deeper depth of field, increasing your range of what is in focus. In reverse, it can also put things in the foreground and background out of focus, accentuating your subject and separating it from the background. <br><br>Shutter speed controls the ‘motion’ of your subject and the things around it. A slow shutter speed makes water silky and soft, while a fast shutter speed freezes the action. These two tools are part of your compositional arsenal. Take advantage of them.”;
msg[2] = “The closer your lens is to the subject, the less depth of field you have in your final image. For extreme closeup photography, your depth of field may be measured in millimeters, though with most closeup work, centimeters is typical.<br><br>To check your depth of field, use the depth-of-field preview button to manually close your aperture to the set opening. Called the ‘make it dark’ button, your image will darken and the focus and out-of-focus areas will be clearer. Adjust as necessary.<br><br>Older lenses offer a depth of field range guide on the lens barrel. From a tick mark, go to the two ends where it states your aperture spot, and relate these to the measurement scale, in feet and meters, to determine the range of focus.”;
msg[3] = “Working with extreme closeups, light is often a challenge and a problem….
[BREAK]
…Keep your hat tied tightly to your head, too, because it never fails that your hat blowing off your head will distract your subject or cause you to miss the shot.<br><br>Do you have a photo tip you would like to share with others? Email us at <a title=”email us with a photo tip” href=”mailto:email@example.com?subject=I have a photo tip for you”>email@example.com</a> with your tip and we’ll add it to your tip list. Thanks for helping!”;
msg[31] = “When choosing your sunglasses for your photographic traveling adventures, take extra care to choose a good pair that offer anti-glare coating, and that are not colorized, influencing the coloration of what you are seeing. Some lenses enhance the colors to make them more blue, red, green, or orange. Stick to lenses that make the view ‘natural’, helping you to see more clearly what there is to photograph.”;
function tip() {
document.write (“<div class=”tip”><h4>Daily<br>Photo Tip</h4><p>\r\n”);
document.write(msg[today]);
document.write (“</p></div>\r\n”);
}
}
We call out the javascript which includes our HTML formating like this:
<script type=”text/javascript”>
<!–
tip();
//–></script></div>
Quote of the Moment Javascript
Similar to the message of the day, we also use a javascript which changes the message with every screen refresh. Near the bottom of our sidebar we feature an image of the day along with quotes which change with every page or screen refresh. The Javascript works on a variable which randomly picks a number which results in the posting of a random quote. The number of quotes within your array is up to you. We have over 100 quotes in our javascript but you can have less.
We’ve included the simple empty version of the quote of the moment javascript along with a sample of our own layout. The quotes within the array have a few interesting features that need to be taken into consideration.
- All closing tags require a left slash such as <i>italic word</i> would be <i>italic word<\/i>
- All semi-colons require a left slash such as “The earth does not belong to man\; man belongs to the earth.”
- All apostrophes (‘) must be represented with its extended character code such as “an insect’s wings” should be “an insect's wings”
- Place the number of quotes plus one in the following line (replace the ten) of the javascript:
var quote= new makeArray (10);
To see this javascript in action, check out our sidebar’s “The Art of Nature” and hit the F5 key or click the refresh or reload button on the toolbar of your browser to reload the page and watch the quotes change each time.
function makeArray(len) {
for (var i = 0; i<len; i++) this[i] = null;
this.length = len;
}
//Array of quotes – place number of quotes plus one here
var quote = new makeArray (10);
quote[0] = ‘Quote message’;
quote[1] = ‘Quote message’;
quote[2] = ‘Quote message’;
quote[3] = ‘Quote message’;
quote[4] = ‘Quote message’;
quote[5] = ‘Quote message’;
quote[6] = ‘Quote message’;
quote[7] = ‘Quote message’;
quote[8] = ‘Quote message’;
quote[9] = ‘Quote message’;
//random number generator
function rand(n) {
seed = (0x015a4e35 * seed) % 0x7fffffff;
return (seed >> 16) % n;
}
document.write(“<div class=”quotebody”>\r\n”);
var now = new Date()
var seed = now.getTime() % 0xfffffff
document.write(quote[rand(quote.length)])
document.write(“</div>\r\n”);
This is our example of how we use our quote of the moment javascript. Pay attention to the use of HTML opening and closing tags, semi-colons and other content within the quotes.
function makeArray(len) {
for (var i = 0; i<len; i++) this[i] = null;
this.length = len;
}
//Array of quotes
var quote = new makeArray(136);
quote[0] = ‘You must teach our children that the ground beneath their feet is the ashes of your grandfathers. So that they will respect the land, tell your children that the earth is rich with the lives of our kin. Teach your children what we have taught our children, that the earth is our mother. Whatever befalls the earth befalls the sons of the earth … This we know: The earth does not belong to man\; man belongs to the earth. This we know. All things are connected … <br><i>Inspired by Chief Seattle, 1854<\/i>’;
quote[1] = ‘The shadow’s the thing. Outside, shadows are blue, I read, because they are lighted by the blue sky and not the yellow sun. Their blueness bespeaks infinitesimal particles scattered down infinitesimal distances. Muslims, whose religion bans representational art as idolatrous, don’t observe the rule strictly\; but they do forbid sculpture, because it casts a shadow. So shadows define the real … .<br><i>Anne Dillard Pilgrim at Tinker Creek<\/i>’;
quote[2] = ‘Wildlife needs clutter and chaos. It needs options and opportunities. It needs the slow centuries of growth, nurture, disturbance and decline that produces a complex and unique forest community.<br><i>David Middleton, Ancient Growth<\/i>’;
quote[3] = ‘Our ways are different from your ways….
[BREAK]
…a state of harmony between men and land.<br><i>Aldo Leopold<\/i>’;
quote[135] = ‘Solitary trees, if they grow at all, grow stong.<br><i>Winston Churchill<\/i>’;
//random number generator
function rand(n) {
seed = (0x015a4e35 * seed) % 0x7fffffff;
return (seed >> 16) % n;
}
document.write(“<div class=”quotebody”>\r\n”);
var now = new Date()
var seed = now.getTime() % 0xfffffff
document.write(quote[rand(quote.length)])
document.write(“</div>\r\n”);
To create our “The Art of Nature” box in the side bar, we use three javascripts outlined in the text ( image of the day, quote of the moment, and tip of the day) which include the HTML structure and CSS references for prsentation within the javascript itself. The following is the HTML code found on every page within our site which initiates the javascripts in the sidebar.
<script type=”text/javascript” src=”scripts/imageday.js”> </script>
<script type=”text/javascript”>
<!–
imageday();
//–></script>
<script type=”text/javascript” src=”scripts/photoq.js”> </script>
</div>
Image of the Day Javascript
As nature photographers, we never miss an opportunity to show off our beautiful nature images. Our image of the day javascript gives us the chance to showcase seven different images cycling every day over a week. Every few months we change these seven images to showcase more beautiful nature photography. We’ve combined these with our quote of the moment javascript in our “The Art of Nature” section of our sidebar.
The script itself is a fairly simple array of seven images on a list. A document.write function places one of these image files into the layout on our page. Using style codes, we’ve created a nice presentation design for the images and the quote below.
There are a few constraints to the javascript.
- The images must sit in the same directory as designated with the
img srclocation within thedocument.writelayout. - The images must be approximately the same size to fit within the designed container and space allowed, though with less constraint on the container’s design, there could be some size variance.
function imageday(){
today = new Date();
day = today.getDay();
arday = new Array(” ferns.jpg”, “blueeye.jpg”, “dewweb.jpg”, “frog.jpg”, “monkeywhite.jpg”, “foxcloseup.jpg”, “herontricolor.jpg“);
document.write(“<div class=”sidetitle”><a title=”Visit our Nature and Travel Photography Gallery” tabindex=”23″ href=”gallery.html”>The Art of Nature</a></div><img class=”noborder” src=’images/core/” + arday[day] + “‘><br>”);
}
Style Sheet:
#sidebar.sidetitle {
font-style:normal; border-top:1px solid #333;
border-bottom:1px solid blue; padding:.15em .5em;
color:navy; text-align:center; font-weight:bold;
text-transform:uppercase; letter-spacing:.1em}
img.noborder {
margin:0; padding:0}
HTML to Javascript: Content as a Javascript
We use another technique involving javascripts with the help of a great program from Byte-size Software called Javascript Maker. In places where we have redundant text and code on every page within our Website, like the sidebar links, Javascript Maker turns that HTML into javascript that “writes” the information to the page so it is visible on the screen. If I need to make a change in the content, instead of changing the information on a couple hundred web pages, I simply change the script file and when the javascript runs, the updated information is there. Anything that makes for less work is welcome here.
Javascript Maker takes your HTML file and turns it into javascript using the document.write function. You can do this yourself manually, but it is best to learn a bit about javascript programing and code writing before stepping into this. Using Javascript Maker takes seconds to change HTML into javascript.
The following is a sample of our links for our Toshi’s Tails web pages which include articles about taking your pet on the road traveling.
<ul><li><a title=”article about taking your pet on the road.” href=”going/toshi.html”>Toshi’s Tales</a></li>
<li><a title=”article about taking your cat on the road” href=”going/catroad.html”>Cat on the Road</a></li>
<li><a title=”journal story about Dahni the cat” href=”going/dahni.html”>Lessons Learned from Dahni, the Eyeless Wonder Cat</a></li>
<li><a title=”article about Dahni written up in a magazine” href=”going/dahninews.html”>Dahni in the News!</a></li>
</ul>
The following is the same HTML information written as javascript.
document.write (“<h6>Toshi’s Tails</h6>\r\n”);
document.write (“<ul><li><a title=”article about taking your pet on the road.” href=”going/toshi.html”>Toshi’s Tales</a></li>\r\n”);
document.write (“<li><a title=”article about taking your cat on the road” href=”going/catroad.html”>Cat on the Road</a></li>\r\n”);
document.write (“<li><a title=”journal story about Dahni the cat” href=”going/dahni.html”>Lessons Learned from Dahni, the Eyeless Wonder Cat</a></li>\r\n”);
document.write (“<li><a title=”article about Dahni written up in a magazine” href=”going/dahninews.html”>Dahni in the News!</a></li>\r\n”);
document.write (“</ul>\r\n”);
}
To activate javascript in HMTL:
<script type=”text/javascript” src=”../scripts/lists/toshi.js”> </script>
<script type=”text/javascript”>
<!–
toshi();
//–></script>
Consolidating Javascripts – Optimization
A web page’s size is based upon the sum of the HTML file, the CSS file, all graphics and images embedded in the HTML and CSS file, and all javascripts called out from within the HTML file. The more javascripts loading, the longer the entire page takes to load.
Many of the javascripts shown are on all of our pages all the time. Instead of having individual javascript loading, we’ve combined most of them into a single file. With fewer files loading with our web page, we can speed up the time it takes for a web page’s content to pop into view.
Besides reducing the number of javascripts loading, and shrinking the file sizes, if you use Website traffic and statistic analyzing tools like Webanalyzer or Analog, there is a section that lists the most popular files accessed. The more javascripts used, the more those files will be at the top of your most accessed lists, not giving you the real information about which web pages are being accessed the most. By limiting the number of javascript files embedded in your web pages, hopefully you will start to see more HTML pages come up on the URL list over time.
Here are a few rules to keep in mind as you combine your javascripts into a single file.
- The names of each javascript (
function name()) must be unique within that javascrpt. - Keep window event handlers to a minimum so they don’t conflict with each other.
- Keep the javascript source and copyright information together with each javascript to help you track down the resource if a problem occurs later.
How Combining Javascript Files Works
To begin the process of combining javascript files into one file, copy and paste each script into a single file and check each one for repeated names or call-outs (arrays, etc.). Make sure each one is unique to itself.
Separate each script with a comment that designates the next script’s name and action, source and copyright information.
When completed, save the file as a javascript file and set the script call-out to load from within the head of your web page.
To initiate the specific javascript from within the “grouped.js” file within your document, enter the javascript function call-out like these examples:
<ul><li> <script type=”text/javascript”>
<!–
javascriptone();
//–></script></li>
<li><a href=”listtwo.html”>List Two</a></li>
<li><a href=”listhree.html”>List Three</a></li> </ul>
<div id=”box”>
<script type=”text/javascript”>
<!–
javascripttwo();
//–></script> </div>
Here is a sample of part of one of our javascripts which uses a combination of javascripts in a single file.
function imageday(){
today = new Date();
day = today.getDay();
arday = new Array(“ferns.jpg”, “blueeye.jpg”, “dewweb.jpg”, “frog.jpg”, “monkeywhite.jpg”, “foxcloseup.jpg”, “herontricolor.jpg”);
document.write(“<div class=”sidetitle”><a title=”Visit our Nature and Travel Photography Gallery” tabindex=”23″ href=”gallery.html”>The Art of Nature</a></div><img class=”noborder” src=’images/core/” + arday[day] + “‘><br>”);
}
// Checknew
// Nicolas www.javascript-page.com and javascript.internet.com
function checknew(date) {
var pic = “images/core/new.gif”;
expdate = new Date(date);
curdate = new Date();
if (expdate.getTime() > curdate.getTime())
document.write(“<img class=”noborder” src=” + pic + “>”);
}
// Copyright – ATOJ(c)2002 www.atouchofjamaica.com
function right() {
copyright=new Date();
update=copyright.getYear();
document.write(“Copyright © 1996-“+ update + “”);
}
// Update Original: Nicolas www.javascript-page.com
function update(date) {
var pic = “images/core/update.gif”;
expdate = new Date(date);
curdate = new Date();
if (expdate.getTime() > curdate.getTime())
document.write(“<img class=”noborder” src=” + pic + “>”);
}
// Page Updated Original: Kenneth Preston drkennan at ionet.net
// The JavaScript Source javascript.internet.com
function updatepage() {
var m = “Page updated ” + document.lastModified;
var p = m.length-8;
document.write(m.substring(p, 0));
}
// Unframe
function unframe() {
if (top.location !=self.location) {
top.location = self.location
}
}
Want To Know More About Javascripts?
As you’ve seen from our few examples, javascripts are quite capable little programs that help animate and complement a web page. If you would like to know more about javascripts, writing, editing, creating, or just using them, or about how to make them benefit you on your Website, we’ve included a list of helful resources and links about javascripts.
Links and Resources for Javascripts
- Websiteoptimizaton’s Optimizing JavaScript for Download Speed – Includes Resources ****
- BrainJar’s Free Online Javascript Optimizer – Instructions *****
- BrainJar’s Free Online Javascript Optimizer *****
- Saltstorm’s Free Javascript Optimizer called ESC (ECMAScript Cruncher) ***
- JSCruncher Pro
- Developer.com’s Javascripts
- Webdeveloper’s Javascripts
- Javascripts.com ****
- The JavaScript Source *****
- Dynamic Drive ****
- Code House