JavaScript Section

On these pages I've gathered some JavaScripts that I use myself. No doubt someone on the Internet will like them and use them.

Please feel free to copy, paste, use or abuse anything you find in here. No copyright notices or other boring stuff are necessary. If you're really happy with a script, you might include the URL of this site in a comment, though.

When copying my scripts for educational purposes, please put a comment with the URL of this site in the script, so that your students can properly trace the scripts back to their source.

All the scripts work, but you'll probably need to tweak them just a little bit to make them work in your own pages. After all, all web pages are different and need a little special care.
If you need support in implementing one of my scripts you can mail me under the following conditions:

This site is not a tutorial. It assumes that you have already done some simple things with JavaScript and need a particular bit of code or want to know how a particular script works. If you are looking for a tutorial, please see the JavaScript links. Another good idea would be to become member of a mailing list where you can listen to JavaScript discussions and ask JavaScript questions.

If there is another script that you'd like to see added, please mail me. I have a To Do list and when a script is much requested it moves up in the list.

General
This category gives general information about JavaScript. No coding examples, lots of useful information about JavaScript in general.
General introduction	The difference between JavaScript and Java. What are the possibilities and restrictions of JavaScript? Which versions exist? Which browsers support it? How can you debug a script?
Placing JavaScripts	Here you can find information about how to place a script on your page. You can either put the script inside the page or you can use a JavaScript include. Includes information about the <NOSCRIPT> tag.
Support detection	A very important concept that you need to understand well if you're serious about learning JavaScript. If you know that a script doesn't work in certain browsers and you want to avoid error messages, don't use a browser detect to see if the script should be executed. Instead detect if the browser supports the methods, properties or arrays you want to use. This page tells you how to do that. It includes a few examples.
JavaScript links	A few links to other interesting sites, mainly about JavaScript but also a bit about HTML and CSS.
Inconsistency	between Netscape and Explorer when you do a cross-frame image swap to a page that's in another directory. Not recommended for beginning scripters.

Browsers
This category gives information about browsers.
Browsers	Introduction to the wonderful world of browsers. Also contains my versioning system, which is used throughout this site.
Version 2 Browsers	Definition: Version 2 browsers are those browsers that support JavaScript, but none of the techniques of the higher browsers.
Version 3 Browsers	Definition: Version 3 browsers are those browsers that support document.images and window.focus, but none of the techniques of the higher browsers.
Version 4 Browsers	Definition: Version 4 browsers are those browsers supporting DHTML but none of the techniques of the higher browsers.
Version 5 Browsers	Definition: Version 5 browsers are those browsers supporting the creation and removal of HTML elements.

Building blocks
This category explains some of the fundamentals of JavaScript. Again, no scripts in these pages, just an explanation how a few very important things work in JavaScript. These examples will teach you how to write your own code.
Statements	Introduction to a few JavaScript statements (commands). At the moment I give information about if() and for(). Since these statements are used very often, it's useful to learn about them.
Functions	The core of nearly each script on this site is a function that does whatever needs to be done. You need to understand what a function expects from you and what you can expect from a function.
Strings	Strings are series of characters, like 'Hello!' or 'http://www.xs4all.nl/~ppk/js' or '14'. They are very important in JavaScript and you need to know how to handle them and what kind of useful things you can do with them.
Boolean logic	One of the fundamentals of every programming language. This page explains Boolean logic and has a Boolean generator with which you can construct and evaluate your own statements.
Level 0 DOM	This page gives an explanation of what the Document Object Model is and a bit of history that explains why there's more than one DOM. This is the place to start if you don't know what a DOM is. The Level 0 DOM is supported by all browsers. By using the DOM you can access form fields and images and change them. Indispensable for form checking scripts and mouseover scripts.

Miscellaneous scripts
I try to place all scripts on this site in a category. However, some scripts defy classification, so I placed them in this category. Some scripts are among the most popular and most often requested.
Browser detect	The most overrated script on the WWW. A browser detect can occasionally come in very handy, but many people use it instead of a Support Detect, which is much the superior check. This script only detects JavaScript capable browsers (of course!) on the most common platforms: Windows, Mac, Linux and Unix. Includes a short history of the user agent string. Ends with an impassioned plea not to use this script.
Flash detect	A much more useful detect is to see if a browser has the Flash plugin installed, and if so which version.
Cookies	Cookies are used to remember information about your visitors. The three simple scripts on this page are all you need to manage cookies on your site. Includes some general information about cookies and the document.cookie property of the browser.
Mouseover	The most popular, most often requested script on the WWW. In fact, this is The Classical Script. Some clever soul invented the MouseOver when Netscape 3 made it possible to switch images in a page and it was an instant hit. For some reason the effect has never become boring and it is a standard part of many sites. In fact, it has become so popular that Microsoft invented a:hover to port the effect to CSS. Even W3C relented and made mouseovers a part of the CSS2 specification. Nonetheless most mouseover scripts that wander around on the WWW are horridly complicated, totally incomprehensible and use far too much code. My version is light and handy, although you do need to understand the naming system I use.
Click	The sequel to the mouseover. If you modify the code as explained on this page, a third image is loaded when the user clicks on a link. This is useful for showing the user on what page he is. You need to have the mouseover script up and running to implement this one.
Banner rotation	A third script about swapping images. This time, how to switch banners without reloading the page.
Get selection	How to see what text the user has selected with his mouse. Very easy script and I think it can come in very handily in lots of situations.
Print	How to print out a page. This is especially useful in frames, when the user should first select the frame, then press 'Print' etc. I'm not yet content with this script, there's something wrong in the communication between JavaScript and VBScript. I'll rewrite it later on.
File size	Developer's script that lets you read out how large your page is. This way you can check if your page goes over the magical 40K boundary. Works only in Explorer on Windows, though.

Forms
One of the most useful features of JavaScript is that it can check forms before they're sent off to the server. The advantage is that if the user made a mistake, it doesn't take a round-trip to the server to find out. Also, you can do lots of nice things with select boxes.
Introduction to forms	First of all a page with the background information. What are the dangers of checking forms with JavaScript? How do you tell the browser to submit or not to submit a form? How do you access form elements?
Example form	Then an example of a form checking script. I cannot give you a complete script because each form is different and needs a different approach. Study the example on this page to get started.
Select box navigation	Also a classical script. The user selects an option from a select box (drop down menu) and is sent to a new page. Very easy script that gives you exciting new possibilities for navigation.
Dynamic options	How to change the options in a select box.
Disabling form fields	How to disable form fields. Includes a hack for Netscape 4.
Form printing script	Developer's script. This script prints out the structure of a form for you. This is useful when writing scripts for complicated forms. Which element has which name and number? What is its default value?

Frames and windows
JavaScripts are not restricted to one frame or even browser window. They can influence the behaviour of, or call scripts in, other frames and windows. Frame management is also part of this category: how to make sure that your pages are always in your frameset and only in your frameset.
Introduction to frames	This is an experimental page that not only explains the basics of cross-frame scripting but also contains an exercise. The page has its own frameset and you can modify it and try to reach the other frames.
Popups	The most hated effect on the WWW: how to open a new, small window with a page in it. Much needed but also too often misused. This page also gives a table of arguments that you can use to set the width, position, toolbars and much more so that the popup looks exactly as you want.
Cross-window scripting	The sequel to the popup script. How can you access a popup after opening it? How can the popup access the opening page?
Customized framesets	How to load the content page you want into a general frameset? Useful when you have a noframes homepage where you link to lots of content pages that all should go into the same frameset. This page also explains the script I use myself when someone reaches this site on a content page. I refresh the browser window to my frameset, but with the content page the visitor wanted to see, not the homepage.
Frame Busting	How to stay out of someone else's frameset and what security measures to bypass to obtain this result. The script does not work (yet) in Netscape 6 because its security is far stricter than that of the other browsers. I use this kind of script myself when someone tries to load my site in his own frameset: my site takes over the main window. I don't want to be in someone else's frameset.
Window manipulation	How to manipulate the window, how to see how high and wide it is and other useful stuff. How to resize a window, how to scroll and how to move it. Includes the solution for a Netscape 4 bug.
Frame parsing	Developer's script that prints out the frame structure of a site for you. This can be useful when working with complicated framesets: what frame is a child of which frame?

Date and time
JavaScript can extract the current date and time from the system the browser is on, but you have to tweak the result quite a lot to obtain a user friendly output.
Introduction	First of all, general info. Epoch Time. How to create a Date object and how to extract the hour, the day, the month or whatever from it. This page also contains the solution for the Millennium problem.
Date and time	The most requested practical application: how to print out the current date and time in a user friendly way.
Last modified	How to print out when an HTML document has last been modified in a user friendly way. Some interesting bugs concerning document.lastModified. I use this script myself on each page in this site.
Week number	How to calculate the number of the current week. The only script on this site that I don't quite understand myself, but it works fine.

Events
From the very start of JavaScript, it was possible to capture certain events (mostly user actions). From the Version 4 browsers onwards, we can define general event handlers: that is, define a function to be executed when a mouseover or a keypress occurs anywhere within the document. In due time, this category will explain everything there is to know about events and how to capture them. For the moment my research is not yet complete so you'll have to have some patience.
Example events	Test page where you can try out the various events. Do something and your action will be logged.
Inline events	Inline events are events handled inside HTML tags, like <A HREF="#" onMouseOver="doSomething()">. This page contains a large compatibility table. Which browsers support what event handlers in which tags?
Netscape 4	The page devoted to capturing general events in Netscape 4. It's a complicated business, made even more complicated by the fact that the Netscape documentation is sometimes simply wrong. Later on other browsers will get their own pages.
Image protection	How to partially protect your images from being copied. Usually this is done by disabling the right-click, but this is not enough. On Mac and in Explorer you can also drag an image to your desktop. This script tries to put a stop to that too. It's not perfect, but it'll help you defeating the newbies.

DHTML - Theory
Now that the Version 4 and 5 browsers become the standard for the Web, it is more and more necessary to know some Dynamic HTML, that is, how to change the style sheet of a certain HTML element. Using DHTML you can make content move across the page, change the text colour or hide some HTML from view. This category gives you the theoretical underpinnings to start writing your own DHTML. It is mainly concerned with giving a broad overview, the practical scripts are in the DHTML - Practice category. In DHTML there are a lot of browser differences so much will be said about this and that browser. It's all necessary information. In addition you'll notice pretty soon that Netscape 4 is really a bad browser in this area.
Introduction to DHTML	What is Dynamic HTML? How does it work? Includes a bit of history and vision. Summary of two problems: Netscape 4 and the DOMs.
Intermediate DOMs	This page gives an introduction to the two Intermediate Document Object Models: document.layers (Netscape 4) and document.all (Explorer 4), as well as some bits of the Level 1 DOM. Purpose of this page is to enable you to write cross-browser DHTML.
Cross-browser DHTML	Here I give some options how to write proper cross-browser DHTML. It includes my favourite function getObj(), which takes care of cross-browser problems for you.
DHTML example	A simple DHTML example to make you understand what DHTML is and what it can do.
Display and visibility	Test page where you can see the difference between display and visibility. Display cannot be changed in Netscape 4.
Dreamweaver patch	I patched one DW function so that generated DHTML works in Netscape 6. Replace one DW function by my code and it works.

DHTML - Practice
Here you'll find some practical DHTML scripts. Some of them are widely requested, others mainly serve as example scripts for a broad variety of effects.
Navigation: layers	One of the most popular DHTML scripts. You create a block with navigation links, if the user mouses over one of them and the link has sub-links, a new block with these sub-links becomes visible. This script can handle an unlimited number of sub-link menus. This is no doubt one of the best things you can do with DHTML, if you design the graphics, interaction and information structure of your site well, this navigation can double as sitemap and users can quickly find their way through complex, multi-layered sites. My script works imperfectly in Netscape 4, but since this browser is on the way out anyway I don't care much.
Navigation: display	Display: block. The explanation of the script running in the navigation frame by which you can open and close blocks of links. This script does not work in Netscape 4 and Opera 5, but it is far simpler than the layer navigation on the previous page.
Scrolling layer	How to make a layer that scrolls separately from the page. The effect is similar to an IFRAME but it also works in Netscape 4 and you're not required to use scrollbars for the scrolling.
Sticky menu	How to create a 'sticky' menu that comes along when the user scrolls down.
Fixed table header	How to create a table that can serve as the header of another table. The trick is to give the TDs the same width as the TDs of the other table.
Writing into layers	How to change the content of a layer. Not surprisingly, this script is a bit buggy and not very versatile in Netscape 4. It might be best to not make it Netscape 4 compatible at all.
CSS Disabling	How to dynamically enable and disable style sheets on your page. By using this script, you can let your users choose which style sheet they like best by viewing them all. Doesn't work in Netscape 4, of course.
Version 5
The Version 5 browsers have again more possibilities than Version 4. In short, it is possible to (re)write (part of) the document structure so that your page really changes while in the browser. Add tables, remove certain TR's, everything is possible.
Level 1 DOM	An introduction to the Level 1 DOM and its many possibilities. The DOM treee, nodes, how to change them and how to create and delete them.
Methods and properties	A large table with the methods and properties of the Level 1 DOM. Includes browser compatibility notes.
Import XML	Example script how to load an XML document into your HTML page and create a table to display the data.
Get styles	How to get the default styles of HTML elements. For instance, a paragraph gets a certain width because of the general styles of a document, and not because of a specific style for that paragraph. How wide is the paragraph? Doesn't work perfectly yet, but you can read out some interesting information.
Edit text	How to let the user click on a paragraph and let him edit its text in an input box. When the user is ready, the text becomes paragraph again. This is a very useful script for content management systems. The only flaw is that there is no simple way to send the revised texts to the server.
Version 5 Links	Links to useful pages about the Version 5 browsers.
DOM parsing script	Developer's script to print out the DOM tree of a (part of a) page for you. Very useful when you're writing Version 5 script and something goes wrong. With this script you can see the HTML structure of the document and (with luck) find the error. Includes a bit about empty text nodes.

JavaScript Section

Table of contents