JavaScript DHTML examples (example source code) Organized by topic





Ext JS /

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

SmartClient /

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

Dojo toolkit /

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

jQuery /

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

YUI Library /

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

Mochkit /

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

Scriptaculous /

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

Rico /

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

Mootools /

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

Ajax Layer /

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

GUI Components /

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

Page Components /

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

Security /

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

HTML /

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

Form Control /

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

Utilities /

Code Strip 3JavaScript Syntax 1

Data Type /

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

Date Time /

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

Document /

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

Object Oriented /

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

Style Layout /

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

Table /

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

Event onMethod /

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

Event /

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

Node Operation /

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

Javascript Objects /

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

Javascript Collections /

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

Language Basics /

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

Development /

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

Window Browser /

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