|
HTML Tips » • Background Sound • Using control characters as bullets • Creating a vertical line • Indenting text |
This section presents a few small JavaScript scripts to enhance your webpages. JavaScript is a scripting language developed specifically by Netscape and Sun for enhancing the capabilities of Web pages. Despite the unfortunate naming which causes a lot of confusion, there's a huge difference between Java and JavaScript. For more information on the differences see Holger's Homepage
and First Step Communications.
A word of warning: Please don't write to Jalfrezi with questions about Java or JavaScript - you'll just get a (perfectly honest) 'I don't know' answer. Also, JavaScript does not run on all browsers (Netscape Navigator 2 and MS Internet Explorer 3 upwards), and users have the option to turn off JavaScript if their browser supports it.
Each tip contains a description and an explanation of how to use the code. Most examples have two parts - the HTML which runs the JavaScript code and the JavaScript script itself.
Automatic revision datesAt the bottom of many pages (this one for example) you may have seen a revision date. You can use a neat bit of JavaScript to revise this date automatically. To produce your automatic date, cut and paste the following code (courtesy of Cranial Software) into your HTML document:
<SCRIPT LANGUAGE="JavaScript">
<!--//hide script from old browsers
document.write( "<I>Last updated "+ document.lastModified +"</I>");
//end hiding contents -->
</SCRIPT>
If you don't see something like "Last updated 11/25/97 21:40:46" rendered in the example then your browser does not support JavaScript.
Creating a back buttonBy using small pieces of JavaScript (courtesy of HTMLib and Alexandr Kornew) you can create a Back button on your webpage. You can create your back button as a form-type button or as a text or graphic link.
<FORM>
<INPUT TYPE="BUTTON" NAME="GOBACK" VALUE="Go Back" OnClick="history.go(-1)">
</FORM>
<A HREF="javascript:history.go(-1)">Go back.</A>
<A HREF="javascript:history.go(1)">Go forward.</A>Go back.
Go forward.
Automatically opening a windowWhen your readers enter a page you can automatically open a new, often smaller window displaying another webpage. This trick is often used to bring up an advert console or control panel. You can specifiy the size and position of the window and turn off some or all the normal features of a graphical browser: scrollbars, toolbar, location bar, directory buttons, status bar and menu bar. The width and height are specified in pixels and the position is specified in pixels from the top-left of the screen. See webreference.com for more info on window properties. Place the code in between the <HEAD></HEAD> tags of your document.
<SCRIPT LANGUAGE="JavaScript">
<!--//hide script from old browsers
window.open("newpage.htm", "new_win", "resizable=yes, scrollbars=no, toolbar=no, location=no, directories=no, status=no, menubar=no, width=520, height=200, top=5, left=5")
//end hiding contents -->
</SCRIPT>
Opening a new window from a linkIn a similar manner to the previous tip, a 'pop-up box' can be launched using JavaScript. You can define the window size in pixels and specify whether to show scrollbars, toolbar, etc. See webreference.com for more info on window properties. Insert the code at the relevant place on your page.
<SCRIPT LANGUAGE="JavaScript">
<!--//hide script from old browsers
function launch() {
open('totd/tipofday.htm', 'tipofday', 'resizable=yes, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, width=500, height=300') }
document.write('<A HREF="javascript:launch()">Todays Tip</A>')
//end hiding contents -->
</SCRIPT>
You should also follow the above code with HTML for browsers that do not support JavaScript:
<NOSCRIPT><A TARGET="tipofday" HREF="totd/tipofday.htm">Today's tip</A>:</NOSCRIPT>
Creating a scrolling text boxBy using small pieces of JavaScript you can create a scrolling text in a text box. First we need to insert the scrolling text JavaScript code in the HEAD of the page.
<HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- // hide script from old browsers var id,pause=0,position=0,revol=9; function banner() { var i,k; var msg=" Take a look into some big grey eyes and ask yourself if you wanna make em cry."; var speed=10; document.thisform.thisbanner.value=msg.substring(position,position+50); if(position++==msg.length) { if (revol-- < 2) return; position=0; } id=setTimeout("banner()",1000/speed); } // end hiding contents --> </SCRIPT> </HEAD>
Then we need to set the text box scrolling once the page has loaded. This is done by calling the JavaScript function by using the onLoad event handler in the BODY element. Note you can also include any other of the normal BODY attributes, such as BGCOLOR, alongside the onLoad event handler.
<BODY onLoad="banner()">
And finally we need to actually insert the text box into the page.
<FORM NAME="thisform">
<INPUT TYPE="text" NAME="thisbanner" size="40">
</FORM>
   |  |     |