Home JavaScript Snippets Index

These JavaScript snippets can be used in conjunction with other scripts to enhance their usefulness. These can save you a great deal of time. Many of these are generic and can be used in most scripts. General questions about JavaScript snippets here should be posted to The JavaScript Forum.

Title: A Good Enough addEvent
Contributor: Austin Matzko
Contributor URL: http://www.ilfilosofo.com/
Date Uploaded: July 25, 2008
Description: This function makes it easy to add events without tripping over existing ones. Easy to implement.

Title: A Modular Toolbox
Contributor: Anthony Corbelli
Contributor URL: http://www.htmlgoodies.com/
Date Uploaded: November 24, 2008
Description: Creating and maintaining an effective JavaScript toolbox can greatly reduce development time. This script will show you how to include specific snippet modules on individual pages. Comments and a tutorial are included.

Title: Add a Hotkey
Contributor: Roy Marchand
Contributor URL: http://www.expertsrt.com
Date Uploaded: December 19, 2007
Description: This script will fire an event when the key specified in the variable "key1" is pressed. In this example, pressing the spacebar will trigger the display of an alert box.

Title: Add/Remove an Event
Contributor: Caleb Duke
Contributor URL: http://www.askapache.com/
Date Uploaded: November 17, 2007
Description: Use this set of snippets to add or remove events from your scripts. Consists of two functions: addEvent and removeEvent.

Title: Add and Remove Elements
Contributor: Dustin Diaz
Contributor URL: http://www.dustindiaz.com/
Date Uploaded: February 15, 2008
Description: Dynamically create HTML elements with content wrapped within them according to the DOM2 specification. Easy to implement.

Title: addLoadListener
Contributor: htaccessElite
Contributor URL: htaccessElite.com
Date Uploaded: January 8, 2007
Description: This snippet will prevent designated functions from being executed until after the page loads. Includes a sample of the function in use.

Title: Alert Button
Uploaded: June 21 1997
Description: Sometimes you need to display an information box. Copy this script into your document and you will have a button alert. Label it whatever you want and customize the message to fit your needs.

Title: Alert Box Protection
Contributor: Benjamin Joffe
Contributor URL: http://www.abrahamjoffe.com.au/
Date Uploaded: January 23, 2006
Description: Often when working on scripts alert boxes are placed inside loops as a debugging tool. You can sometimes end up with hundreds of alert boxes and no way to stop them. This script placed at the start of your code will give you an option to disable the alert boxes after a pre-determined number set by you.

Title: All Lower Case
Date Uploaded: August 10 1999
Description: Converts a textbox entry to all lowercase letters as soon as they move to the next item in the form (or click the submit button).

Title: All Upper Case
Date Uploaded: August 9 1999
Description: Converts a textbox entry to all capital letters as soon as they move to the next item in the form (or click the submit button).

Title: Autofill and Select Form Fields
Contributor: assbach
Contributor URL: http://www.ipernity.com/home/assbach
Date Uploaded: November 12, 2007
Description: When testing forms you don't need to keep filling in the different fields. Use this function to automatically fill-in input blocks and select values in the form for you. Very easy to use.

Title: Backward-Forward
Contributor: Lee Underwood
Contributor URL: http://javascript.internet.com
Details: 0.60 KB * Uploaded October 24 2005
Description: Use this snippet to add backward and forward buttons to your Web page.

Title: Change Background Colors
Contributor: A&M
Contributor URL: 
Date Uploaded: April 9, 2008
Description: Use this snippet to let your visitors change the background color of your Web page. Combined with a cookie, the setting could follow them through your whole site.

Title: Check for Leap Year
Contributor: The JSLab Team, Tavs Dokkedahl
Contributor URL: http://www.jslab.dk/
Date Uploaded: April 21, 2008
Description: This snippet will check whether a date belongs to a leap year. Easy to add to an existing script.

Title: Client Window Size
Contributor: Konstantin Jagello
Contributor URL: http://javascript-array.com/
Date Uploaded: July 7, 2008
Description: Use this snippet to obtain the width and height of the visitor's client window. This is a much better method than getting the resolution as this is the actual size of the window displaying the Web page.

Title: Convert HTML Entities
Contributor: Ultimater
Contributor URL: http://webdeveloper.com/forum/member.php?u=30185
Date Uploaded: January 29, 2007
Description: This script will convert entities (e.g., &, é) back into normal characters (e.g., &, é). Short and easy to use.

Title: Date Format
Contributor: Oded Arbel
Contributor URL: http://geek.co.il/wp/
Date Uploaded: September 27, 2006
Description: This JavaScript date library is an extension of the internal Date object, which enables various formatting of date/time values.

Title: Detecting Google Chrome
Contributor: David Walsh
Contributor URL: http://davidwalsh.name/
Date Uploaded: September 5, 2008
Description: Need to check Google's new browser to see if it has a quirk that none of the other browsers have? You can detect Chrome by using this snippet in your scripts.

Title: Delete Confirmation
Contributor: Justin Barlow
Contributor URL: http://www.netlobo.com/
Date Uploaded: April 25, 2008
Description: When writing many types of Web applications, there is sometimes a need to let a user delete something. It is generally a good practice, however, to have the user confirm their intentions. One method of doing this is by using a snippet of code to bring up a confirmation message. This snippet can easily be added to an existing or new script or application.

Title: Determine Window Size
Contributor: Fang
Contributor URL: WebDeveloper.com Forums
Date Uploaded: February 8, 2008
Description: Use this snippet to determine the size of an open window. Can be used in many different situations, e.g., for setting the size of a div.

Title: Display Page URL
Contributor: Lee Underwood
Contributor URL: http://javascript.internet.com/
Date Uploaded: August 6, 2007
Description: Sometimes you may want to give your visitor the URL of the page they are on. You can provide the entire path with breadcrumb scripts but, if you just want to give them the current URL, this short snippet will do the trick. Just place it anywhere on the page you want to display the URL.

Title: DOM Append Text and Element Functions
Contributor: HunBug
Contributor URL: http://www.astral-consultancy.co.uk/
Date Uploaded: February 20, 2009
Description: These two functions will append new text or new elements (nodes) to existing elements within the page. Great addition to a JavaScript library. Easily modified.

Title: domFunction
Contributor: James Edwards
Contributor URL: http://www.brothercake.com/
Date Uploaded: February 26, 2007
Description: An easy-to-use snippet, that allows other DOM scripting to run before window.onload. The practical benefit is that JavaScript doesn't have to wait for images or other dependencies to finish loading. It can begin as soon as the DOM is ready.

Title: Dynamic Timed Redirect
Contributor: Jon Brown
Contributor URL: http://allthingsrunescape.freewebs.com
Date Uploaded: October 04, 2006
Description: Redirect the user to a different Web page after a designated number of seconds, while displaying a countdown in the document title representing the number of seconds left before redirection.

Title: Event Listeners
Contributor: Gavin Kistner
Contributor URL: http://phrogz.net
Date Uploaded: October 3, 2008
Description: Add event listeners for all browsers at once. Easy to use, for all browsers.

Title: Explorer Object Starter
Contributor: Jeroen Haan
Contributor URL: http://www.haan.net/
Date Uploaded: January 22, 2007
Description: A very simple script which activates objects in Explorer 7 so people don't have to click on Flash to activate.

Title: Explorer Plugin Starter
Contributor: Jeroen Haan
Contributor URL: http://www.haan.net
Date Uploaded: August 3, 2007
Description: A simple script which activates objects in Internet Explorer 7 so users don't have to click on Flash to activate. In addition to object and embed tags, support is also provided for applet tags and all their param tags.

Title: File Include
Contributor: Krijn Hoetmer
Contributor URL: http://krijnhoetmer.nl/
Date Uploaded: November 27, 2006
Description: Use this script to target which files you will include on a designated Web page. Easy to set-up and use.

Title: Filler Text
Contributor: ciceraccio
Date Uploaded: August 8, 2008
Description: Use this snippet to display text on a Web page when testing and doing design layout work. The amount and type of text can easily be changed, according to your preferences and needs.

Title: Find All Elements By Class
Contributor: Joe Homs
Contributor URL: http://bitshaker.com/
Date Uploaded: November 30, 2007
Description: A function that returns an array of elements based on DOM element, tag, and class name. For instance, getElementsByClassName(document, 'tr', 'info') will return an array of all "tr" tags under the document node having the "info" class.

Title: Full Featured Browser/OS Detection
Contributor: Harald Hope, Tapio Markula
Contributor URL: http://techpatterns.com/
Date Uploaded: March 10, 2006
Description: Add this code to your scripts when you need to detect the browser or operating system. It's quite complex but very effective.

Title: getElementById
Contributor: Ultimater
Contributor URL: http://ultimiacian.tripod.com/
Details: 0.94 KB * Uploaded August 10 2005
Description: The document.getElementById method is very useful but isn't supported in early browsers. To define the method for use in those older browsers, just add this snippet to the beginning of your scripts.

Title: getElementsByAttribute
Contributor: Robert Nyman
Contributor URL: http://www.robertnyman.com
Date Uploaded: February 1, 2006
Description: Ever run into a situation where you want to get an array of all elements with a specific attribute? Or even want elements with a certain value for that chosen attribute as well? Just add this code snippet to your script and your problem will be solved.

Title: getElementsByClass
Contributor: Dustin Diaz
Contributor URL: http://www.dustindiaz.com/
Date Uploaded: December 30, 2005
Description: A quick and elegant way of grabbing elements by a class name. JavaScript provides functions for obtaining elements by id, name, and tag name, but not by class. This function will do the trick!

Title: getElementsByClassName Deluxe Edition
Contributor: Stuart Colville
Contributor URL: http://muffinresearch.co.uk/
Date Uploaded: August 8, 2007
Description: JavaScript does not provide a function for obtaining elements by class, only by id, name, and tag name. This snippet will accomplish that, and includes optional arguments with defaults and support for multiple classnames in any order. It works in IE, Firefox, Opera, Safari and IE Mac.

Title: getElementsByClassName - The Ultimate Version
Contributor: Robert Nyman
Contributor URL: http://www.robertnyman.com
Date Uploaded: May 23, 2008
Description: This JavaScript function will obtain elements by class name. If you want to apply a certain event to some elements, you can loop through the elements in the page and then apply the event accordingly, assigning them to those elements that have a certain class name.

Title: getPosition
Contributor: Ultimater
Contributor URL: http://ultimiacian.tripod.com/
Details: 0.77 KB * Uploaded August 29 2005
Description: When a layer is inside another layer, it's style.left and style.top positions can both be '0' but the layer itself can be 500 pixels away from the actual margin. These functions will return the true offset.

Title: GetPosition 2
Contributor: Daniel Burnett ("IceMetalPunk")
Contributor URL: 
Date Uploaded: May 9, 2008
Description: This code returns the position of a given element in a given container, relative to other elements of its type. Very useful for finding position indexes of list items, pictures, form items, and more.

Title: getStyle
Contributor: Robert Nyman
Contributor URL: http://www.robertnyman.com/
Date Uploaded: May 8, 2006
Description: Use this snippet to get the rendered style of an element. Quick and simple to implement.

Title: getXML
Contributor: Neal Venditto
Contributor URL: http://neal.venditto.org/
Date Uploaded: October 13, 2006
Description: Obtain the contents of an XML element and convert it to text. This script is great for using with Ajax-type applications, when it's neccessary to send back the contents of an element to the server without knowing what's there.

Title: History Keeper
Contributor: Kevin Newman
Contributor URL: http://www.unfocus.com/projects/HistoryKeeper/
Date Uploaded: June 8, 2007
Description: A JavaScript-based library for managing browser history (back button) and providing support for deep linking for Flash and Ajax applications.

Title: in_array()
Contributor: Benoit Asselin
Contributor URL: http://www.ab-d.fr
Date Uploaded: October 24, 2007
Description: This snippet searches an array for a pre-specified element and returns 'true' if it's found, 'false' if it's not found. It functions like the in_array() in PHP.

Title: insertAfter()
Contributor: Public Domain
Contributor URL: 
Date Uploaded: March 29, 2006
Description: Use this snippet to insert a node after another node. Quite handy in laying out Web pages. (Thanks to Dustin Diaz)

Title: JavaScript Includes
Contributor: J Wynia.
Contributor URL: http://www.wynia.org/
Date Uploaded: June 1, 2007
Description: When you start using Prototype, Scriptaculous, and other JavaScript libraries, you often end up with a dozen lines of script tags pulling in all of the code from different places. That would be fine if you never added a new library or never needed to swapped them out. This script will create a single JavaScript loader for each project that contains all of the scripts necessary.

Title: JavaScript Off Redirect
Contributor: Will Bontrager
Contributor URL: http://www.willmaster.com/
Date Uploaded: July 19, 2006
Description: Here's a trick that will redirect a browser when JavaScript is turned off. Why not redirect the ones that have JavaScript? Less than 10% of browsers have JavaScript turned off; therefore, redirecting less than 10% of visitors is better than redirecting over 90%.

Title: JavaScript Utilities Library
Contributor: Aaron Gustafson
Contributor URL: http://www.easy-designs.net/
Date Uploaded: May 18, 2007
Description: This script provides functions for browsers which do not inherently support the entire JavaScript Core and supplies some useful functions PHP developers might wish they had access to.

Title: Keycode Checker Tool
Contributor: Ryan Cooper
Contributor URL: http://www.ryancooper.com/
Date Uploaded: January 11, 2008
Description: Use this script to determine the JavaScript key code of a selected key. Just press a key and an alert box will display the corresponding keycode.

Title: Keycode Checker Tool - Disable
Contributor: Ryan Cooper
Contributor URL: http://www.ryancooper.com/
Date Uploaded: January 18, 2008
Description: Use this function to disable certain keys. This essentially tells the page to cancel the last event, e.g. the pressing of that certain key.

Title: Multi-Dimensional Array Searching
Contributor: Jonathan Fenocchi
Contributor URL: http://www.slightlyremarkable.com/
Date Uploaded: June 5, 2006
Description: Use this prototype function to search through a multi-dimensional array. Simple yet efficient! Includes examples.

Title: Multiple onLoad
Contributor: Lee Underwood
Contributor URL: http://javascript.internet.com/
Details: 0.33 KB * Uploaded September 19 2005
Description: Use this snippet in an external file to call several functions using the onLoad event handler.

Title: Multiple onLoad 2
Contributor: Simon Willison
Contributor URL: http://simon.incutio.com/
Date Uploaded: June 29, 2007
Description: Need to load several functions after the page loads? Use this snippet to call several functions using the onLoad event handler. Easy to use.

Title: Numeric Array Sort
Contributor: Patrick Hunlock
Contributor URL: http://www.hunlock.com
Date Uploaded: March 21, 2007
Description: JavaScript's Array object only sorts alphabetically. That means if you pass it an array of numbers it will sort the array alphabetically (1,15,100,2,25,200) instead of numerically (1,2,15,25,100,200). This is easily fixed by adding a new method which will sort a numerical array very nicely.

Title: Obtaining the URL of the Referring Document
Contributor: Chris Stimpert
Contributor URL: http://ilovethecode.com/
Date Uploaded: October 06, 2006
Description: Use this snippet to obtain the URL which referred the user to that page. Be aware that on some servers this may not work.

Title: Opening New Windows
Contributor: Roger Johansson
Contributor URL: http://www.456bereastreet.com/
Date Uploaded: December 4, 2006
Description: When using strict doctypes the target attribute is not allowed for opening new windows. This script will accomplish that task easily and unobtrusively.

Title: Overriding IE's getElementById()
Contributor: J. Max Wilson
Contributor URL: http://www.sixteensmallstones.org/
Date Uploaded: March 3, 2008
Description: There is a well-known bug in the Internet Explorer implementation of the getElementById() method, which, contrary to the W3C standard, allows the method to return an element even if only the element's name attribute matches the requested id. This snippet will easily correct that problem.

Title: parseUri
Contributor: Steven Levithan
Contributor URL: stevenlevithan.com
Date Uploaded: October 24, 2008
Description: This function splits any well-formed URI into its parts (all are optional). All parts are split with a single regex using backreferences, and all groupings which don't contain complete URI parts are non-capturing.

Title: Passing Arguments
Contributor: William Wen
Contributor URL: http://www.devx.com/tips/Tip/13163
Date Uploaded: August 28, 2006
Description: JavaScript functions have a special property called arguments, which contains an array of input parameters. Using the 'length' property of an array, you can iterate through the array for each parameter. This enables you to develop functions that can change as their parameters do

Title: Popup Blocker Detection
Contributor: Casey Ryan
Contributor URL: http://www.ebooger.com
Date Uploaded: April 7, 2006
Description: Use this snippet to detect if the client browser is using a popup blocker. If a one is detected, the script can then perform a different action. The sample uses an alert box to inform the user whether a popup blocker is present or not.

Title: Popup Blocker Detection 2
Contributor: Jeff Johnson
Contributor URL: 
Date Uploaded: December 20, 2006
Description: This is a simple, cross-browser method for testing for pop-up blockers. Most scripts test the return value of window.open and conclude that there is a blocker installed if the returned value resolves to false in a boolean statement. However, these scripts fail with browsers such as Opera (as of v9) that return a window object but disable it. This script properly handles this, as well as a null or undefined return type.

Title: Prototype Dollar Function
Contributor: Dustin Diaz
Contributor URL: http://www.dustindiaz.com/
Date Uploaded: December 19, 2005
Description: The dollar function is a simple way to grab an element quickly. It not only takes in strings, it takes objects too.

Title: Regular Expressions Taster
Contributor: Gilbert Hadley
Contributor URL: http://www.web-wise-wizard.com/
Date Uploaded: December 12, 2005
Description: Grab these regular expressions to use in your own JavaScripts. They can add another dimension to your programming experience.

Title: Remove HTML Tags
Contributor: Robert Nyman
Contributor URL: http://robertnyman.com/
Date Uploaded: February 5, 2007
Description: This function will remove all HTML tags from a string.

Title: Removing Nodes Using the DOM
Contributor: Brad
Contributor URL: http://snippets.dzone.com/posts/show/2598
Date Uploaded: May 4, 2007
Description: You can remove existing nodes using the DOM. The removeChild method allows any node to remove one of its child nodes. Simply pass a reference to the node you wish to remove. Any text or elements within the node being removed will be removed along with it.

Title: Rock Solid addEvent()
Contributor: Dustin Diaz
Contributor URL: http://www.dustindiaz.com/
Date Uploaded: April 24, 2006
Description: Usually, when one event loads, it writes over any previous ones. Using this snippet, you can add several events to one page without any problems.

Title: Specify Referring Page
Contributor: Katherine Nolan
Contributor URL: http://www.outfront.net/
Date Uploaded: January 7, 2008
Description: Use this script to ensure that a user can only reach a given page from another specified page. Easy to set-up and use.

Title: Speed Up Object Detection
Contributor: Dean Edwards
Contributor URL: http://dean.edwards.name/
Date Uploaded: January 11, 2006
Description: Object detection is common in JavaScript. Browser irregularities mean that your code must sometimes contain branches for different browsers. Use this snippet to perform object detection once instead of every time you call addEvent.

Title: URL Validation
Contributor: Florencia San Juan
Date Uploaded: February 6, 2008
Description: This snippet is a function that validates a URL. It can easily be added to your current validation script.

Title: Using the Target Attribute
Contributor: Alan Coleman
Contributor URL: http://www.alancoleman.co.uk
Date Uploaded: June 11, 2007
Description: At times you may need to launch certain links into a new window. The 'target' attribute is deprecated and is therefore not allowed when using XHTML with a strict doctype. Using this script, you will be able to keep your pages valid while also using the target attribute to open new windows.

Title: vJustify
Contributor: Michael Futreal
Contributor URL: http://michael.futreal.com/
Date Uploaded: October 20, 2008
Description: Unequal column heights make CSS layouts difficult to manage when the height of content cannot be known in advance, particularly in scenarios where absolute positioning is in use. While there are a variety of strategies to deal with this issue, here's a jQuery-based fix.

Title: Window Close Method
Contributor: Lee Underwood
Contributor URL: http://javascript.internet.com/
Date Uploaded: March 3, 2006
Description: Use this script to close a popup window. Simple but effective!

Title: Window Close Automatically
Contributor: Lee Underwood
Contributor URL: http://javascript.internet.com/
Date Uploaded: April 28, 2006
Description: Many times you just want a popup window to stay open for a few seconds, or a bit longer. Place this snippet in the body tag of the popup window.

Title: Window Open Method
Contributor: suyash jain (hello@yahoo.com )
Contributor URL: www.hello.com
Details: 0.66 KB * Uploaded February 23 2002
Description: This tiny script will open as many windows as you choose to whatever site you choose.

Title: Window Print Method
Contributor: Lee Underwood
Contributor URL: http://javascript.internet.com/
Date Uploaded: February 23, 2006
Description: Add a button to allow your visitors to print your Web page. Compact and simple, yet highly requested.

JavaScript® is a registered trademark of Sun Microsystems, Inc.

Jupitermedia's Database Journal offers SQL courses and other database related resources for beginner to expert developers.