JavaScript

Page 1

Downloading Files from Your Site

One question I hear asked a lot is: "How can I allow visitors to download files from my site?"

The answer is simple. All you need to do is point to your files using the HREF tag. However, the file must be in a format that will not execute or display on a browser. Instead, if the browser can't recognize the file, it will launch a download window.

For most purposes, you should try "zipping" your files for optimum results. Zip files are compressed and therefore download faster, and you can zip images, sounds or even HTML files without worrying about them actually executing. If you have never used Zips or other compression formats, visit CNET or Download.com for more info.

If you need to download a "clickable" file, you can get around this by telling your visitors to press the SHIFT Key and then Right Click to save the file to their own computers.

Sample: <a href="yourfile.ext">Download my file</a>
Simple Navigation Aids

Here are a few common and simple navigation aids that you can use on your website. These have been a standard for some time and are quite easy to implement on any website.

Back/Forward/Reload/Print page
<a href="javascript:history.back(1)">Go Back</a>
<a href="javascript:history.forward(1)">Go Forward</a>
<a href="javascript:location.reload(1)">Refresh</a>
<a href="javascript:window.print()">Print This Page</a>
This is how it would look using the form text and incorporating css styling.

Go Back Go Forward Refresh Print This Page

You can also separate them by placing Vertical lines between them like this:

[ Go Back | Go Forward | Refresh | Print This Page ]

Here are examples of navigation aids similar to the ones above but using form buttons incorporating css style to enhance the regular buttons.
<FORM>
<INPUT TYPE="button" VALUE=" BACK " onClick="history.go(-1)" style="font-family:verdana;color:#FFFFFF;background-color:blue;font-size:11px;">
<INPUT TYPE="button" VALUE="FORWARD" onCLick="history.go(1)" style="font-family:verdana;color:#FFFFFF;background-color:green;font-size:11px;">
<INPUT TYPE="button" VALUE="Print this page" onCLick="window.print()" style="font-family:verdana;color:#FFFFFF;background-color:orange;font-size:11px;">
</FORM>
This is how it would look using the form buttons and incorporating css styling.

The problem I find with the button method above, is that you seem to need to have been to the page before or after the page you are on in order for them to work.  However, the "Print this page" works regardless.  So I wouldn't recommend using the "Back" and "Forward" buttons.  But then, I've still got learning to do in this area myself.  So you might want to play with it some to figure it out.

Try these on your own web site to help improve the ease of navigation between pages for your visitors.

Indenting With Images

A very common way to indent and control space is by using a transparent GIF. By using this you can control space by setting the WIDTH= and HEIGHT= attributes. It's very useful if you don't want to bother with tables. For example, you could place a transparent GIF (or one with the same color as your background) at the beginning of a paragraph. To indent this paragraph by 15 pixels, set the width to WIDTH="15".  Be sure not to add ALT Tag text as this will appear if someone places their mouse over your hidden image!


[ JavaScripts 1 | JavaScripts 2 | JavaScripts 3 | JavaScripts 4 | JavaScripts 5 | JavaScripts 6 ]

  

[ About Me | Site Legal Info | Site Design | CSS Coding ]
[ JavaScripts | Hints & Tips | BackGrounds | Misc. Images ]
[ Templates | Logo Page | Special Characters | Color Chart ]
[ Contact Us! | Awards Won | Links ]
[ Home | Site Map ]

 

Go to Top


Webmaster & Owner: Anita Eberline
No part may be reproduced without prior permission by Anita Eberline