JavaScript DHTML examples (example source code) Organized by topic





Ext JS /

Accordion 2Action 7Anchor 5Animation 14
ArrayReader 2ArrayStore 7Auto Complete 1Body 2
Border Layout 13Browser 1BufferView 1Button Bar 1
Button 22ButtonGroup 7Cardlayout 1CheckBox 4
ColorMenu 2Column Layout 3ColumnModel 1ComboBox 9
Context Menu 3Date Field 6DateMenu 2defer 1
Dialog 8Drag Drop 7DropDown Menu 3EditorGridPanel 1
Email Field 1Event 5Ext String 1Ext 7
File Input 1Firebug Console 1Form Fields 13Form Layout 16
Form Mask 2Form Submit 6Form Validation 10FormButton 1
FormPanel 17Forum 1Grid Editor 6Grid Renderer 10
GridPanel 33HBox Layout 16History 1HTML Editor 3
HTML 16JsonReader 1JsonStore 4Label 2
Layout 7ListBox 4MemoryProxy 1MemoryStore 1
Menu 15MessageBox 20Number Field 2Pageable 5
PagingToolbar 4Panel 26Password 2Portal 2
ProgressBar Dialog 1ProgressBar 4ProgressDialog 2RadioButton 5
Resizable 7ScriptTagProxy 2SearchField 1SimpleStore 3
Slider 3Spinner 1SplitButton 3StatusBar 5
Store 3Submit Button 4Table Layout 7TabPanel 25
Template 12TextArea 2TextBox 8Time Field 7
Toolbar 20Tooltip 12Tree 4VBox Layout 13
ViewPort 8Window 46XmlReader 3

SmartClient /

Animation 12Background 2Button 7Calendar 3
Canvas 11CheckBox 2ColorPicker 3ComboBox 5
Common Dialog 2Console 1Context Menu 1DataSource 1
Date Picker 3DetailViewer 1Dialog 6Drag Drop 20
DynamicForm 1Event 13File Upload 1Form Fields 9
Form Layout 8Form Reset 1Form Submit 1Form Validation 19
Hidden Field 1History 1Horizontal Layout 4HStack 1
HTMLFlow 6HTMLPane 5ImageButton 4Img 6
Label 14List Box 2ListGrid Click Selection 7ListGrid Columns 11
ListGrid Drag Drop 6ListGrid Editor 16ListGrid Filter 3ListGrid Header 3
ListGrid Renderer 20ListGrid Row 10ListGrid 12Menu 13
Page 3Password 1Portal 3ProgressBar 2
RadioButton 3Resize 4ScrollBar 2SearchForm 1
SectionStack 6Shadow 1Slider 16SmartClient Controls 9
SmartClient 1Spinner 1StatusBar 1StretchImgButton 5
Style 1Tab Panel 17TextArea 1TextBox 4
Tile Grid 2Time Field 1Toolbar 4Tooltip 1
Tree 7TreeTable 1Vertical Layout 3VStack 1
Web Services 2Window 18XJSONDataSource 1YesNoDialog 1

Dojo toolkit /

Accordion Pane 5addOnLoad 1Animation 26Array 8
ArrayList 12behavior 3body 1BorderLayout 4
Browser History 1Button 5byId 2Calendar Control 1
Calendar 3Canvas Draw 9CheckBox 8Class Definition 3
clone 2Color 14ColorPalette 5ColorPicker 1
ComboBox 6ComboButton 3connect 5Cookie 1
coords 1Currency Format 3CurrencyTextBox 3Date 10
DateTextBox 6Dialog 9Dictionary 10disconnect 1
dojo basics 5Drag Drop 6DropDownButton 1every 2
exist 4filter 1FilteringSelect 2firebug console 1
Fisheye 2foreach 3I18N Locale 3Icon 4
iframe 1InlineEditBox 4isDescendant 2isFunction 1
isInRange 1isObject 1JSON 3LayoutContainer 1
map 2Math 7Menu 3Number 1
NumberSpinner 8NumberTextBox 3objectToQuery 1place 1
Popup Context Menu 2ProgressBar 6query 7RadioButton 2
regexp 3registerModulePath 1Rich Text Editor 2Sequence 1
setObject 1setSelectable 2Slider 11some 2
SplitPane 2sprintf 4Stack Container 4Stack 6
stopEvent 1String 13StringBuilder 5Style Class 10
subscribe 2TabContainer 7Text Editor 4TextArea 2
TextBox 7Timer 1TimeTextBox 2TitlePane Disclosure 4
Toaster 3ToggleButton 3Toggler 1ToolBar 3
ToolTip 3TooltipDialog 1Tree 1UUID 8
Validation 9ValidationTextBox 8

jQuery /

add 4addClass 6after 5andSelf 2
Animation 26append 6appendTo 3attr 12
before 7bind 6blur 3change 2
children 6click 4clone 5closest 2
contains 1contents 3css function 14CSS 13
dblclick 1DIV 29document 5each 15
empty 2end 1eq 4error 1
Event click 3Event Double Click 2Event Key 8Event Mouse 18
Event 15extend 2fadeIn 6fadeOut 6
fadeTo 7filter 10find 4focus 6
Form Button 9Form CheckBox 4Form Controls 11Form RadioButton 3
Form Select 7Form Submit 5Form TextBox 8fx 1
get 4Grep 4hasClass 2height 6
hide 6hover 6html 10id 2
Img 1inArray 1index 6innerHeight 1
insertAfter 7insertBefore 2is 4isArray 1
isFunction 1Join 3jQuery 7length 1
live 1load 1map 17merge 3
next 4nextAll 3nodeType 1not 3
offset 4one 2outerHeight 1outerWidth 2
Paragraph 34param 1parents 9position 1
post 1prepend 7prev 3prevAll 3
queue 2ready 2remove 1removeAttr 2
removeClass 5replaceAll 2replaceWith 5resize 1
scroll 2scrollLeft 2scrollTop 2select 3
Selector Attribute 14Selector children 7Selector even odd index 13Selector first last 10
Selector Form 27Selector ID 9Selector relation 10Selector table 6
Selector tag class 11Selector 31show 10siblings 4
size 1slice 7slideDown 8slideToggle 8
slideUp 10Span 10split 2support 11
Table 21text 8this 3toggle 10
toggleClass 3trigger 9triggerHandler 1trim 1
UI Accordion 20UI Datepicker 19UI Dialog 20UI Draggable 25
UI Droppable 12UI Effects 19UI Progessbar 3UI Resizable 14
UI Selectable 5UI Slider 13UI Sortable 15UI Tab 20
UL LI 13unbind 6unique 1unload 2
val 7width 5window 2wrap 6
wrapAll 5wrapInner 4

YUI Library /

Animation 11ARIA 4AutoComplete 10Browser History 4
Button 8Calendar 15Carousel 3Chart 9
Color Picker 5Connection Manager 6Cookie 3CSS Style 5
DataSource 3DataTable 22Dialog 6DOM 22
Drag Drop 13DropDown Button 11Event 3Fade 2
Flickr 1Form Button 4FunctionDataSource 1Image Crop 5
ImageLoader 4JSON 3Layout 7Loader 2
Log 3Menu MenuItem 18Overlay 2Paginator 6
Panel 6Popup Menu 2Profile 4Radio Button 1
Resizable 5RichText Editor 12Slider 6Split Pane 1
TabView 7Test Case 5Toggle Button 4Tooltip 2
Tree TreeView 14Uploader 4XHR 2YUI 6

Mochkit /

applymap 2camelize 1chain 1Color 26
compare 1Count 1Cycle 1Date 5
Drag Drop 3dropwhile 1Effect 3evalJSON 1
Every 1exhaust 1filter 1findValue 1
forEach 3iextend 2imap 1instanceof 1
InterpreterManager 1isArrayLike 1isCallable 1isEmpty 1
islice 1isNotEmpty 2isNull 1isUndefined 1
isUndefinedOrNull 1iterate 1izip 1keyComparator 2
KeyEvents 1List 3listMin 1log 1
map 4mean 1median 1Mouse 1
Number Format 9Number 5objEqual 1objMax 1
partial 1range 3reduce 1RegExp 1
Repeat 1repr 2reversed 1serializeJSON 1
some 1Sortable 1StringMap 1Sum 2
takewhile 1tee 1Timestamp 1

Scriptaculous /

autocompleter 7Blind 3Clone 1Drag Drop 12
Effect 4Fade 2Float 5Highlight 2
In place editor 2Morph 1Opacity 1Puff 1
Scale 3Scroll 2Shake 1Shrink 1
Slide 4Slider 4Sortable 10

Rico /

Accordion 5Ajax 1Animate 3Calendar 3
Color Picker 1Corner 4Drag Drop 5Fade 1
Grid 2Popup 2Pull Down 1Spreadsheet 1
Tab 1Tree 1

Mootools /

Accordion 1Action 2Ajax 3Effect 1
Extend 1Form 1Mouse 1Slide 2
Sortable 2

Ajax Layer /

3D 1Accordion Panel 2Ajax Library 6Animation Action 4
Animation Attributes 2Animation Border 1Animation Bounse 2Animation Color 1
Animation Control Point 4Animation Font 1Animation Path 4Animation Position 2
Animation Scroll 3Animation Size 4AutoComplete Widget 11Banner 2
Bezier 1Border 4Button 3CheckBox 2
Data 1Dock 6DOM Utilities 9Drag Action 2
Drag Constrain 3Drag Draw 2Drag Effects 6Draggable Layer 7
Draggable List 3Fade 3Float 5Font 1
Graph 8HyperLink 2Image Clip 2Image Drag Drop 1
Image ListBox 1Image Load 1Image Rollover 3Image Rotate 1
In Place Editor 2Key Listener 4Knob 1Label 1
Layer Anchor 4Layer Container 4Layer Creation 7Layer Destroy 1
Layer Events 4Layer Focus 1Layer Group 1Layer Limits 1
Layer Position 2Layer Resize Move 4List 3Marquee 1
Mouse 6Nested Layer 3Panel 4Popup ToolTip 37
Progress Bar 3Progress Dialog 1RSS 2Search Engine 2
Text Animation 1Text Effects 12Timer Event 3Transaction 3
Window Dialog 12XML 3XMLHttpRequest 3

GUI Components /

Animation 40Banner 1Border 1Calendar International 2
Calendar 41Canvas 1Chart 2Clock 10
Code Formatter 1Color Chooser 7ComboBox 4Corner 2
Cursor 2Desktop 2Dialog LightBox 6Documentation 1
Drag Drop 22Dual List 1Editor 10Events Calendar 1
Expander 1Grid Layout 17IFrame 1Key Event 1
Log Panel 1Menu 2 26Menu 32Navigation Bar 3
Outlook Bar 1Popup Menu 2RadioButton 2Rating 2
Scroll 11ScrollBar 10Slider 6Sortable Listbox 1
Syntax HighLighter 3Tab 20Table Grid 47TextArea 1
TextBox 1Ticker 7Time Picker 2Toggle 5
ToolBar 3Tooltip 5Tree Table 1Tree 27

Page Components /

Calculator 4Count Down 2Counter 4Database 2
Game 22Image Cropper 13Image Drag 2Image Zoom 2
Painter 1Quiz 1Rotating globe 1Shopping Cart 1
Slide Show 5Spell Checker 1Syntax Highlighter 3Table Of Content 1
Translation 1Word Filter 2

Security /

AES 1Ascii Hex 1Base64 1Binary Ascii 1
Brainfuck Converter Interpreter 1Caesar Cipher 1DES 1Generated Password 1
MD4 1MD5 1Modular Transpose Encryption 1Morse Code ASCII Converter 1
Number Base Converter 1Playfair Encryption 1RC4 Encryption 1RIPEMD 160 Hashing 1
RSA Encoding 1SHA 1 1SHA 256 1Steganography 1
Substitution Cipher 1Text Reverse 1Unescape 1Vigenere 1

HTML /

Anchor 16Applet 2Area 1Body 4
Cite 1Del 1DIV Style 3DIV 2
EM 1Embed 2Font 3Frame FrameSet 22
Header 2HR Line 4HTML Basic 1HTML Body Event 10
HTML CLass Style 1HTML Generate 2HTML Style 10Hyper Link 35
Iframe 5Image Img 42Image Map 8Layer 18
List Bullets 7Marquee 9Meta Info 4Mime Type 5
Object 12Paragraph 1Script 4Style 4
Table 30Text Direction 1Text HTML 9Text Selection 5
URL 2

Form Control /

Accept 4Button 33CheckBox 20Focus Tab 5
Form Demo 15Form File Input 1Form Help 1Form HTML 21
Form Info 4Form Layout 1Form Reset 3Form Submit 12
Form Validation 15Form 6Formatted TextField 1Label 1
List 5Option Select ComboBox 57Password 5RadioButton Radio 14
TextArea 17TextField 39Upload Button 1Validation 26

Utilities /

Code Strip 3JavaScript Syntax 1

Data Type /

Array 23Number 16parse 3String Comparison 5
String 48Two Dimensional Array 4typeof 2Vector 2
XML 1

Date Time /

Date Calculation 5Date Extension 5Date Get 15Date Parse 3
Date Set 9GMT 1Time Zone 1UTC Date 16

Document /

all 1BaseHref 1Charset 3Clipboard Data 2
Drag Drop 3Eval 2Event 6Focus 3
Hash 1Language 1Movie 1Name Space 1
Open 1Read Only 1Scope Name 1Scroll 3
Selection 4Sound 3Text Direction 1URN 3
version 1write 2

Object Oriented /

constructor 1hasOwnProperty 1Inheritance 1isPrototypeOf 1
Method 2prototype 1

Style Layout /

Align 1Background 3Border 5Bounding Client 4
Bounds 4Clear 1Client 6Clip 4
Color 7Font 6getClientRects 1hasLayout 1
height 1left 1lineHeight 1Margin 4
noWrap 1Offset 4paddingLeft 1paddingTop 1
Page 1position 1Rule 1Space 2
textDecoration 1top 1Units 1visibility 2
Width 2

Table /

abbr 1Caption 5Cell 8Column 2
Data Page 4Row 6summary 1Table Foot 3
Table Head 5Table Layout 4

Event onMethod /

onAbort 1onActivate 1onAfterPrint 1onAfterUpdate 1
onBeforeActivate 1onBeforeCopy 1onBeforeCut 1onBeforeDeactivate 1
onBeforeEditFocus 1onBeforePaste 1onBeforePrint 1onBeforeUnload 1
onBeforeUpdate 1onBlur 1onBounce 1onCellChange 1
onChange 2onClick 5onContextMenu 1onControlSelect 1
onCopy 1onCut 1onDataAvailable 1onDatasetChange 1
onDatasetComplete 1onDblClick 1onDeactivate 1onDrag 1
onDragEnd 1onDragEnter 1onDragLeave 1onDragOver 1
onDragStart 1onDrop 1onError 1onErrorUpdate 1
onFilterChange 1onFinish 1onFocus 2onFocusIn 1
onFocusOut 1onHelp 1onKeyDown 1onKeyPress 1
onKeyUp 1onLayoutComplete 1onLoad 2onLoseCapture 1
onMouseDown 1onMouseEnter 1onMouseLeave 1onMouseMove 1
onMouseOut 1onMouseOver 1onMouseUp 1onMouseWheel 1
onMove 1onMoveEnd 1onMoveStart 1onPaste 1
onPropertyChange 1onReadyStateChange 1onReset 1onResize 1
onResizeEnd 1onResizeStart 1onRowEnter 1onRowExit 1
onRowsDelete 1onRowsInserted 1onScroll 1onSelect 1
onSelectionChange 1onSelectStart 1onStart 1onSubmit 3
onTimeError 1onUnload 1

Event /

Access Key 1Alt Key 2Event Properties 22General Event 19
Hyper Link Event 7Key Event 17Mouse Event 28Mouse 3
Page Load 1

Node Operation /

addBehavior 1addElement 1addImport 1addRule 1
appendChild 2appendData 1applyElement 1Attributes Value 1
canHaveChildren 1canHaveHTML 1childNodes 1className 1
clearAttributes 1cloneNode 1collapse 1compareEndPoints 1
componentFromPoint 1contains 1Content Editable 1createAttribute 1
createControlRange 1createDocumentFragment 1createElement 2createEventObject 1
createRange 1createStyleSheet 1createTextNode 2createTextRange 1
data 2 1deleteData 1documentElement 1doImport 1
duplicate 1elementFromPoint 1findText 1firstChild 1
getAdjacentText 1getAttribute 2getAttributeNode 1getBookmark 1
getElementById 1getElementsByName 2getElementsByTagName 1getExpression 1
getNamedItem 1hasChildNodes 1htmlText 1id 1
innerHTML 4innerText 1inRange 1insertAdjacentElement 1
insertAdjacentText 1insertBefore 1insertData 1isContentEditable 1
isEqual 1item 1lastChild 1mergeAttributes 1
method 1move 1moveEnd 1moveStart 1
moveToBookmark 1moveToElementText 1moveToPoint 1name 1 1
namedItem 1nextSibling 1nodeName 2nodeType 2
nodeValue 2normalize 1offsetParent 1outerHTML 1
outerText 1ownerDocument 1parentElement 1parentTextEdit 1
pasteHTML 1pathname 1previousSibling 1queryCommandEnabled 1
queryCommandIndeterm 1queryCommandState 1queryCommandValue 1recalc 1
rel 1remove 1removeAttribute 1removeAttributeNode 1
removeBehavior 1removeChild 1removeExpression 1removeNode 1
removeRule 1replaceChild 1replaceData 1replaceNode 1
rev 1search 1select 1setAttribute 1
setAttributeNode 1setExpression 1specified 1splitText 1
substringData 1swapNode 1tagName 1tags 1
text 1type 1uniqueID 1value 1

Javascript Objects /

Array 10attribute 1Boolean 1clientInformation 3
clipboardData 1currentStyle 1dataTransfer 1Date 7
defaults 1Dialog Helper 1document 19event 1
history 6implementation 1location 7Math 33
mimeType 3namespace 1navigator 32Number 10
Object 1page 1plugin 2popup 1
rule 1runtimeStyle 1screen 9selection 1
String 10style 1styleSheet 8TextNode 1
TextRange 1TextRectangle 1userProfile 4Window External 8
Window Scroll 9window 38

Javascript Collections /

all 1anchors 1applets 1areas 1
attributes 1behaviorUrns 1blockFormats 1boundElements 1
cells 1childNodes 1children 1controlRange 1
elements 1embeds 1filters 1fonts 1
forms 1frames 1images 1imports 1
links 1mimeTypes 1namespaces 1options 1
pages 1plugins 1 1plugins 2 1rows 1
rules 1scripts 1styleSheets 1tBodies 1

Language Basics /

Array 38Boolean 1break 1Char 5
Code Layout 5Comments 3Const 1continue 4
delete 1do while 2For 19Function 35
If 16Number Data Type 25Objects Object Oriented 17Operator 20
Random 8Stack 2String 38Switch 7
throw 4Variable Definition 10While 11With 2

Development /

ActiveX 3Applet Jar 6Audio Video Sound 4Boolean Utilities 4
Choose Color Dialog 1Color 5Cookie 20Cursor 3
Data Binding 9Date Calculation 3Date Format 3Date Validation 2
Date 23Debug 4Document 20DOM Content 9
Error Exceptions 10escape 1File Date 3File Upload 3
Flash 1JavaScript in HTML 9JavaScript Version 14Log 6
Math 14NULL 2Number Format 3Number Path 2
Object Property 2PlugIn 11Postfix Infix 3Print 2
ProgressBar 2Regular Expressions 23Server Info 1Sound 1
String Utilities 5System Properties 2Time 10Timer 7
Unit Test 3XML 5

Window Browser /

Browser Event 13Browser Info 24Browser Scroll 3Browser Title Bar 1
Dialog 35History 8Location 5Screen 17
setTimeout 4Setting 1StatusBar 13Window Properties 12
Window 38