with Lorelle and Brent VanFossen

Our HTML and CSS Codes – Our Javascripts

Javascripts are incredibly useful tools for web designers. In the right hands they can add usefulness and class to a web page design. In the wrong hands, they can be used to dance, sparkle, wiggle, and ballistically assault a viewer.

Basically, javascripts are programs that run from within a web site. They can be simple such as the one we use to show the date the file was last updated, or complex, calculating massive data information and returning an answer, such as those found on our Travel Tools pages which calculate distance between points, convert measurements, and more. They can also make things happen on the screen which some web designers think is entertaining to their viewers. Sometimes they are, and sometimes they aren’t. Examples of these include taking over your mouse pointer so that it becomes a butterfly or a butterfly chases it across the screen. Or making it “snow” on the web page. These can be great fun when used appropriately.

We’d like to share with you a few of our favorite javascripts and a program we use to write the javascripts which create our side bar menus. We consider these more in the “useful” area of web design rather than the sparkly and pretty. For those into the pretty javascripts, we’ve included some links and resources to help you find plenty of javascripts to keep you busy for a long time.

[Note: With our new move to WordPress, we aren’t using most of these javascripts any more as many of these functions are built into the program. Still, they are wonderful tools.]

Javascripts are currently recognized by most web browsers, though they are not readily accepted by handheld media, web TV and other new media types. Web page reader programs tend to skip through javascripts, though some try to make sense of them, if there is sense to be had of the javascript’s code.


If you do use scripts for critical design or information elements on your web page, make sure you include alternative content in case the javascript doesn’t work. An example would be:

<script type=”text/javascript” src=”/scripts/alphabet.js”></script>
<script type=”text/javascript”>
<!–
alphabet();
//–></script>
<noscript>
Note: Browser unable to display javascripts!

These are the letters of the alphabet: a b c d e f g h i j k l m n o p q r s t u v w x y z.
</noscript>

Our javascripts come from a variety of sources but we mostly enjoy the freeware javascripts from Javascripts.com, Dynamic Drive, and The JavaScript Source.

Javascripts – Links and Resources

 

Simple and Powerful Javascript Tools

We have a few javascripts we enjoy using on our web pages to add a bit of splash and provide useful tools to help us create our web page design.

Page Update Javascript

We use this javascript on every page. Set below the footer on every page, it reports the date of the file, representing the last time the file was saved. While this isn’t a perfect scorecard for when the page was honestly updated but rather saved to disk, it does help us find out which pages might not have been uploaded with fixes and repairs. And if there have been no changes to the web page’s code or structure, it can give us an idea of how long it has been since we checked that page out or made a change in it.

<script type=”text/javascript” src=”/scripts/updatepage.js”> </script>

<script type=”text/javascript”>
<!–
updatepage();
//–></script>

 
// 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));
}
 

New and Updated Javascript

We are constantly adding new articles and updating our articles. Keeping track of what is new and updated is hard work with over 500 web pages on our site. This javascript checks the “expiration” date listed as a variable within it and if the date is still “fresh”, it shows the graphic for “New” or “Updated”. If it has expired, it will stop the graphic showing and disappear. A very helpful javascript.

Article About Web Page Design

Article About Our Web Page Designs

We use the exact same code with two different graphics. We’ve added a class statement to the image to make sure there are no margins or paddings or borders set around the graphic so it fits on the line. We set the expiration date on the call out for the javascript.

We have a lot of viewers who are visually impaired and “older” and they don’t like things that flash and sparkle on a web page. Lucky us, they are vocal in their complaints and after a couple of email requests, we redesigned our animated NEW and UPDATED graphics to only cycle 50 times or less through their rotating flashes. It usually ends within a minute. To see it in action, refresh the page by hitting REFRESH from the menu or the F5 key and watch the animated graphics until they stop. The UPDATED graphic “revolves” slower so it takes longer than the NEW to stop its animation.

<script type=”text/javascript” src=”/scripts/checknew.js”></script>
<script type=”text/javascript” src=”/scripts/update.js”></script>

<p> <script type=”text/javascript”>
<!–
checknew(“12/15/2006″)
//–></script>Article About Web Page Design</p>
<p> <script type=”text/javascript”>
<!–
update(“12/15/2006″)
//–></script>Article About Our Web Page Designs</p>
// Checknew
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 + “>”);
}

// Updated
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 + “>”);
}

// Nicolas www.javascript-page.com and javascript.internet.com

Style Sheet:
img.noborder {
margin:0; padding:0; border:0}

No Right Click on Images Javascript

After ages of fighting the paranoia that comes with displaying images on Websites (theft and copyright violations), I found this great javascript from Dynamic Drive Javascripts that allows the user to easily right-click all over our pages but NOT right-click on our images. Excellent!!

Grizzly Bear closeup, photograph by Lorelle VanFossen As a power Internet user, I depend upon the right-click menu to get around, print, open links, and do a variety of things that come from the right-click menu on web pages. The “no right click” javascripts I found before turned off all usage of the right-click menu, limiting this powerful tool on our own Website. This great “no right click image” javascript recognizes when the user is right-clicking over an image and when they are right-clicking anywhere else. This detection process puts a restriction on our images from easily being stolen, and returns the right click menu to its full capabilities. I love it.

To see this script in action, right click anywhere on the screen and the traditional right click menu will appear if your operating system and browser supports it. Right click over the image to the left and see what happens. [ Editor’s Note: Yes, I, a female, took that picture. Want to know more? Left click the photograph.]

/*
Disable right click script II (on images)- By Dynamicdrive.com
For full source, Terms of service, and 100s DTHML scripts
Visit http://www.dynamicdrive.com
*/
var clickmessage=”Right click disabled on images!”
function disableclick(e) {
if (document.all) {
if (event.button==2||event.button==3) {
if (event.srcElement.tagName==”IMG”){
alert(clickmessage);
return false;
}
}
}
else if (document.layers) {
if (e.which == 3) {
alert(clickmessage);
return false;
}
}
else if (document.getElementById){
if (e.which==3&&e.target.tagName==”IMG”){
alert(clickmessage)
return false
}
}
}
function associateimages(){
for(i=0;i document.images[i].onmousedown=disableclick;
}
if (document.all)
document.onmousedown=disableclick
else if (document.getElementById)
document.onmouseup=disableclick
else if (document.layers)
associateimages()

Copyright Javascript

As nature photographers and editorial writers, the issue of copyrights is very important to us. Maintaining all these copyright dates from year to year is a pain. So why not take advantage of a useful javascript tool from A Touch of Jamaica to make the job easier. The javascript lists the starting year and then checks to see what the system date is and puts the current year into the variable.

<script type=”text/javascript” src=”/scripts/copyright.js”></script>

<script type=”text/javascript”>
<!–
right();
//–></script>

// Copyright – ATOJ(c)2002 www.atouchofjamaica.com
function right() {

copyright=new Date();
update=copyright.getYear();
document.write(“Copyright © 1996-“+ update + “”);
}

Unframe Us!! Javascript

While I understand the need for Websites to include their top frame when a visitor links to our site from theirs, we actually can’t stand it. It messes with the design and isn’t user friendly. So we came up with a javascript that removes frames that arrive when a visitor comes to our site.

<script type=”text/javascript” src=”/scripts/unframe.js”></script>

<script type=”text/javascript”>
<!–
unframe();
//–></script>

function unframe() {

if (top.location !=self.location) {

top.location = self.location
}

}

Want More?

In part two of a look at our javascripts, we tackle the more sophisticated javascripts within our pages including the quote of the moment and image of the day, and give you information on how to streamline your web page redundant code and combine javascript files into one single file for faster loading.

2 Comments

  • Posted February 10, 2007 at 18:16 | Permalink

    i was interested in the “no right click on images” script, but i can still copy the image if i left click and drag and select the image. is there anyway to prevent this from happening?

  • Posted February 10, 2007 at 22:27 | Permalink

    Not to my knowledge. The script isn’t a restriction or prevention, just a warning.

Post a Comment

Your email is kept private. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>