To see each example:-
Click on a link below and load the example in this window.
Then to view the source code:-
Click the right mouse button over the window and then select "View Source" from the pop-up window.
If any graphics are used in the script:-
Click the right mouse button over each graphic and then select "Save Picture As" from the pop-up menu. (All of the graphics are included in the same directory as the javascript example.)
To go back to the Index:-
Click on the "Back" button at the top of your browser.
404 Referrer Do you get lots of 404 "file not found" errors every time you change a file's name? Use this simple script to include in a HTML form (a hidden field) that contains the referring page's address.
Arrow Links This neat little JavaScript will indicate which link is selected with a little arrow image. Hard to explain, but you'll understand when you see it!
Bookmark Us (Internet Explorer Only) Allow your visitors to click one text link to quickly and easily add your site to their "Favorites." Don't let your visitors lose you because they forget to bookmark your site! (Netscape Users won't get any errors, but instead of the bookmark link, see a message reminding them to bookmark the site)
Born On Date In place of the boring "Last Updated" script, you can use this script. It does everything and more - it gives the page title, the day the page was last updated, and if the page has been updated since the visitor's last visit all in a cool little table!
Break Frames If a visitor comes to your site and is looking through frames, this script will automatically make the page break out of frames. As an added bonus, it's only 8 lines of script!
Check Url This script is particularly useful for those who have their site on a free webspace provider, then use a "come.to" redirecting service. What this script will do is analyze the URL the visitor is at, and if they did not came to your site via the redirecting URL, it can print out a message telling them that is your new URL.
Close Window JavaScript can close a window when you push a button or click a text link. Super-short script too!
Closing Windows This set of short, easy scripts shows six different ways to close a window from JavaScript, including closing windows from a clicked link, a clicked image, or a clicked form button. Close framed pages also!
Color Chart JavaScript can print out 8 tables with the 512 standard colors and their corresponding #RRGGBB values.
Content Protector If your content page is loaded directly (not in frames) the page is reloaded in your frames. And to the aid of webmasters everywhere, this script also foils other sites loading your content page in their frames. Visitors are notified of the bandwidth theft then are sent to the page on your site (if used with our Dynamic Frameset script) or back to your main page.
Date Time Stamp With this script, you can have the date and time the page was loaded stamped to the page. This would make a wonderful header or footer for any web page.
Date Updated On your site, you might want to just let visitors know the date that the script was updated, but not the time (maybe it's not important?) This simple script (about a dozen lines) you can do just that!
Delayed Gif Normally, animated GIF images start as soon as they are loaded on the page. But, if your GIF only loops once, it displays before the rest page is completely visible. This JavaScript solution ensures that the page is fully loaded before the animated GIF begins.
Determined Popup This short, easy script set launches a window that continually re-opens itself and cannot be permanently closed unless the visitor clicks on a link that you provide. Compatible Browsers: NS6 and IE4-6.
Dom Browser The DOM Browser is a visual, interactive representation of the DOM (Document Object Model). It's helpful to beginners learning to interact with the DOM in JavaScript. It's also a great tool for side-by-side comparisons of Netscape, Internet Explorer, and other browsers and how they interpret the document and its elements.
Dynamic Title Bar Displays changing text in a multi-message display in the browser title bar. Any number of message lines may be used, and a moving, attention-getting slide box draws the eye to the messages.
Dynamic Sized Image Sometimes, your image does not look very good in different sized browser windows. This script will proportionally resize a graphic to fit within the current window or frame when a page is loaded, thus giving a more consistent and attractive look to your page.
Email This Page Allow your visitors to email the current page to a friend. They just enter a friend's name and email address. It will send them a link to the current web page address in an email message signed by you, courtesy of freedback.com.
Email Protector Here's a clever way to prevent email address collecting robots from grabbing your email address while still making your address available to your visitors.
Fake Counter If you don't quite have the traffic you'd like to your site, you can use your own fake page counter!
Focus Onload You can easily put the user's cursor inside a text box (calling giving the text box focus) as soon as the page is loaded. This helps ensure that visitors do not overlook an important form item on your site. Only 1 line of code!
Highlighted Text Captures any text that has been highlighted with the cursor. In Internet Explorer, it even grabs text highlighted within a text box or textarea.
Image Manipulator Displays an online image or local image from your computer under various width and height manipulations that you enter. Useful for determining the best size for an image on your site without all the work.
Image Load Notifies the user is an image on your site fails to load properly or if it is aborted when loading. Definitely an excellent example of the onAbort and onError image event handlers in use. Please note that in the script example we intentionally included a broken image that fails to load properly to display the script in use.
Last Modified When you just can't stand to look at another "Last Updated: Feb 02 1998 14:12:56:10" Script, give this script a try. It'll write to the page in the format, "Last Updated February 2 1998"
Launch Date Displays one of two messages after comparing the current date on the user's computer to a date that you determine, such as a product or web site launch date. A before or after message can be customized with your own HTML code, including images.
Link Of Minute JavaScript will create a link that will change depending on the minute of the hour! You can add as many entries as you want!
Load HTML This script loads an external html file into a css layer. It is NS6 compatible as well as supporting IE4+ and NS4.
Logo Branding Have you seen the floating logo on Geocities sites? How would you like to have your own logo floating in the corner of your site? This script does just that!
Menu Branding Keeps logo (or text) in the bottom right corner of the browser window as they scroll the page up and down. The logo glides very smoothly when the page is scrolled and looks great. When their cursor is on the logo, a menu appears in its place offering links to different sections of the site. The menu returns to the logo a few seconds after the move the cursor off the menu.
Mouse Coordinates Capture mouse X - Y positions with this easy script. Works much like our Mouse Tracker script, but much simpler! Compatible in Internet Explorer and Netscape versions 4+.
Mouse Coordinates 2 This script can display the mouse's X and Y coordinates in the status window.
Mouse Orbit A series of dots orbit the mouse cursor on the page, giving the appearance of a comet effect.
Mouse Bubbles Bubbles float up from mouse giving the effect that the mouse is under water. The bubbles even expand in Internet Explorer.
Netscape Source Image When visitors using Netscape right-click your web page and select "View Source" or go to the View menu bar and select "View -> Page Source" the entire source code of your page is displayed. Interestingly enough, it's possible to actually insert an image into Netscape's view source page instead of just having text. When Netscape users view the source of your page, they see an image as well as the source code! Your image could tell the visitor that they are not allowed to view this source code, for example.
New Links Displaying links as new for a few weeks after adding them is great. But, adding, removing, and updating that "New" icon for each link is pointless! Let JavaScript do your work for you! Just add a small code (less than 40 characters) next to each link with the date you want it to expire, and it will automatically display the "New" icon until the expiration date.
No Right Click (4.0+ browsers) Ever wanted to prevent users from borrowing images from your site through right-clicking them and "save image as..." or right-clicking the page and viewing your page source? This script will (attempt to) disable the right click on your page! As explained, however, this script is not fool-proof !!
Page Extension Displays a message based on the extension (like .html) of the web page. And, it's a breeze to add more file types to the script.
Page Time This script will count the number of seconds a person has been on your webpage.
Page Up For JavaScript can even display how long your web page has been online. Just enter the date, the script does the calculations, and prints out the time.
Page Variable Not exactly the most used script, but this one allows you to reference the page name in a variable. Instead of yourdomain.com/index.html, you can use this script to create a variable that stores index.html for your use! You can use it with alerts, document.write, etc.
Page Viewed Date This JavaScript will write out when the page was viewed, according to the visitor's clock.
Preload Page Displays a loading message as the page, including images and sound elements, are loaded in the background. When the page finishes loading the screen is shown, similar to how Macromedia's Flash plugin works
Reload On Resize Useful for situations when a page resize moves the page elements improperly or causes JavaScript errors, which has been known to occasionally occur on pages with layers. As a solution, this script reloads the web page when the user resizes the page.
Resize Link Useful for webmasters, this script lets you view any web page at different resolutions by simply clicking the link and entering the height and width values. Tip: You can drag the link to your Links toolbar, and use it on any page you are viewing.
Resolutions Test Shows how a page will look at different screen resolutions. It includes the 3 most common resolutions as well as inputs for custom window sizes. It even gives you the exact inner document dimensions for precision testing!
Right Click Menu (Internet Explorer Only) Displays a menu when the visitor right click's on the page. You can easily use style sheets to modify the menu skins, or write your own.
Roman Numerals This script helps you write the copyright statements on your page. It outputs the correct Roman Numerals for any year you want, including the current year.
Scrollbar Color (IE 5.5+) Changes the color of the scrollbars in a page dynamically.
Set Homepage Link Allow the visitor to set your site as their homepage with a link. This script works best in Internet Explorer, but also displays the appropriate information based on browser type.
Smart Popup Create popup windows that will center on your screen or popup near your link without popping off the edge of the screen. Also shows how to create a clickable popup or a popup that displays when you hover over the link with your mouse.
Source Viewer View the source of any web page. This will bypass any "No right click" scripts on the page.
Thumbnail Viewer Save page space by opening a new window to display larger images on your site when a thumbnail image or a picture text link is clicked. The same window is re-used when the images are the same size.
Time Box This is a neat little script that makes your web page look a whole lot more professional. This JavaScript will display a small box with the time the visitor loaded the page.
Time Greeting Don't just welcome your visitors anymore, JavaScript can write good morning, good evening, or good afternoon based on the time the page was loaded, according to the user's system clock.
Title Bar Typist This script types a string or series of strings into the Title Bar.
Top Alert If you want to show your visitors how long they have been on your page but don't exactly like those clock displays, then you might like this script. When the visitor leaves or clicks the button, they are alerted to the time they have been on your page. Many times, they won't even expect it!
Top Clock Occasionally, it might be interesting to show the visitor how long they have been on your page. So, you can use this script to write a clock to the screen that will tell them exactly that!
Top Onunload When someone visits your web page, JavaScript will start the clock. When the leave that page, they will be alerted with the time they have been viewing the page!
Top Seconds If the other time on page scripts seem too impersonal for you, this could be your solution. Instead of the 00:00 readout, it displays 'X Secs'.
Web Cam Time Set your Web Cam for a Online viewing time and an Offline viewing time. This is very useful if you do not have you cam online 24/7. It will display the updated web cam image while during the online time, and an offline image during you offline time.
Week Day Image Displays a new image every day of the week. For example, it displays monday.jpg on Monday, tuesday.jpg on Tuesday, etc. You can also change what image is shown each day.
Window Print Quickly and easily print the current page by clicking on a link. Add this function to a submit button to automatically print a submitted form!