Updated: 03/27/2004 10:45:15 AM               (Broken Link? Report It Here)      



Design Area

Hints 'N Tips

What is the purpose of the Design Hints and Tips area?

Many times one has enough knowledge about a subject to be beyond the need of a tutorial but not enough to know exactly how to accomplish a certain task or reach a certain goal. Often one finds himself needing to learn how to do just one small thing instead of a receiving a full course instruction. And then there are times where you learn something interesting and useful just by browsing around; but without really intending to learn.

That's the purpose of the Design Hints and Tips area - to teach you something small, but interesting and useful. To show you how to do just one thing at a time and help you reach your goal. More importantly, to provide you the opportunity to learn something new each day; which is a goal most people envision and strive for.

Membership requirements for Giz Gears.

This interactive area within Giz Gears does not require an active Giz-Net Network membership in order to participate.

Working With JavaScript

Resources  Previous Page   Next Page  Tutorials

Design Tidbits Working With CSS Working With Forms Working With Tables

Add a Simple Clock To Your Webpage

Copy the code below and place it in-between the <head></head> tags of your webpage.

<script type="text/javascript">
var timer = null
function stop()
{
clearTimeout(timer)
}
function start()
{
var time = new Date()
var hours = time.getHours()
var minutes = time.getMinutes()
minutes=((minutes < 10) ? "0" : "") + minutes
var seconds = time.getSeconds()
seconds=((seconds < 10) ? "0" : "") + seconds
var clock = hours + ":" + minutes + ":" + seconds
document.forms[0].display.value = clock
timer = setTimeout("start()",1000)
}
</script>

Then add the bolded code below to your <body> tag.

<body onload="start()" onunload="stop()">

 Last, add the form tag below to your page in the location you would like the clock to appear.

<form>
<input type="text" name="display" size="7" style="background-color:#E8EFFA; color:#000000; font:bold 11px verdana;">
</form>

Note: I did not load an example for this JavaScript block because it conflicts with other JavaScript codes on my webpage. But feel free to copy the code and try it out on your own website!

Hide Your Email Address From Collection Spiders

Did you know that some, maybe even a lot, of the SPAM you receive comes from posting your email address on your webpage? It's true! There are little gremlins, known as collection spiders, that spider your webpage in much the same way a search engine does. The only difference is they are searching for email addresses.

So how do you get around them and still provide a way for your visitors to contact you? Use the JavaScript below to hide your email address from the collection spiders. If you don't want to enter this code into every webpage you have, then create a contact webpage and link all your webpages to the contact webpage. Then you only have to enter the JavaScript once.

Enter this code where you would normally enter the link for your email address.

<script language="JavaScript">
<!-- // Hide
var showtext = "Email Me";
var mailpart1 = "webmaster";
var mailpart2 = "mysite.com";
document.write("<a href=" + "mail" + "to:" + mailpart1 +
"@" + mailpart2 + ">" + showtext + "</a>")
//-->
</script>

For Example:

Click the link to send me an email: 

Stopping JavaScript Error Alerts - Contributed by Jean Grey!

A JavaScript that causes an error in a browser shows your visitor either a pop-up error alert or an exclamation sign in the status bar. Which one the visitor sees is dependent upon how he has his browser configured. Often these alerts happen because not all JavaScript codes are compatible with all browsers.

New users often become confused by the alerts and some tend to be suspicious of them and wonder what the site is "up to".

If you use JavaScript, add this bit of JavaScript to prevent your visitors from seeing the error message. Place the code in the HEAD section of your webpage and it will stop the browser from showing both the alert and the status bar error symbol.

<SCRIPT LANGUAGE="JavaScript">
<!--
//from giz-net.com
function stopError() {
return true;
}
window.onerror = stopError;
-->
</SCRIPT>

Preload Your Images with JavaScript- Added 25 Mar

Insert the JavaScript code below in between the <HEAD></HEAD> tag to load images in the background while the rest of your webpage loads. Be sure to use the correct name and path for your image.

<SCRIPT LANGUAGE = JAVASCRIPT>
if (document.images)
{
img1 = new Image();
img2 = new Image();
img1.src = "imageName1.gif";
img2.src = "imageName2.gif"
}
</SCRIPT>

Then insert the preloaded image on subsequent pages by its name and path: "imageName1.gif".

The browser will cache the images and then immediately display them wherever they're used on subsequent pages. Preloading images doesn't actually change your download time, but subsequent pages appear to load faster.

Browsers that don't recognize the above JavaScript code will simply ignore it. The images won't preload, but will still display on your webpages exactly as before.

Display A Random Image And Hyperlink - Contributed by Jean Grey!

Use this script to randomly display images and hyperlinks from a list. The script randomly selects an image from a list you input and loads it when a page is loaded into a browser.

This example has only two images but you can add as many as you like. You can also add the same image twice to double its weight. If you have two images and would like one to be shown twice as much as the other one, simply add the preferred image twice.

  1. Copy and paste the script below into your webpage where you want the images to load.

  2. Then replace the variable "imagenumber" with the number of images you are using.

  3. Label each image with its corresponding number in the images array.

  4. Then do the same for the corresponding links.

  5. You can also control your image attributes in the display portion of this script, which begins with "document.write"

  6. Load the webpage and refresh it to see the changes.

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide
var imagenumber = 2 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;
images = new Array
images[1] = "Directory/First_Image_Name.jpg"
images[2] = "Directory/Second_Image_Name.jpg"
var myimage = images[rand1]
links = new Array
links[1] = "Directory/Your_Page.html"
links[2] = "Directory/Your_Page.html"
var mylink = links[rand1]
document.write('<A HREF="' + mylink + '"><IMG src="' + myimage + '"></A>')
// -- End Hiding -->
</SCRIPT>

Below is an example of this script which displays the four navigation buttons on this page in random order when you refresh this webpage.

Design Tidbits Working With CSS Working With Forms Working With Tables

Resources  Previous Page   Next Page  Tutorials

Contributions for Giz Gears.

If you have a great web design source you would like to share, please let me know! I give credit for all sources of contributions; links, tutorials, downloads, hints, tips, etc. If you would like to see other pages added to this area, please let me know either through email or through the Forum.

Top of Page