SuperTable Example #3
| Color Key |
|---|
| Control |
| DOM |
| Event |
| Object |
| References |
| Other |
| Category |
Description
|
Code Snippet |
|---|---|---|
| Debug | Prevent error messages from being processed by browser | window.onError=null; |
| Object | Read value of form select object | var list = document.myForm.selectList; //selectList
is an Array selectedValue = list.options[list.selectedIndex].value; |
| Object | Dynamically loading images on-the-fly (no precaching -- Slideshow) | Use this technique when you have many large images that
are referenced on the page but you don't want to precache
them - Images will download on demand. IMPORTANT!! The link which loads the image must be called without the onclick event handler!! If it is called using the onclick event handler, then the image will load but not render. Call the image directly from the href as shown below:
<a href="javascript:slideShow(-1)">back</a>
<a href="javascript:slideShow(1)">next</a>
Here is the script for the slideshow:
function slideShow(dir) {
if ( currentImg + dir > 0 && currentImg +
dir < imgArrayLength )
{
document.images['slideImage'].src =
eval( '"' + imgArray[ currentImg + dir ] + '"' );
currentImg += dir;
} else { alert("you are at beginning or end"); }
}
|
| Object | Open new window (most commonly used parameters) | newWindow = window.open('popup.html', 'window-name',
'status=yes, menubar=yes, resizable=yes, scrollbars=yes,
width=700,
height=700'); // Note: there are a bunch of other options... |
| References | Defining constants (opposite of variables -- Works only in Mozilla) | const PI = 3.14159; //Constants can only be assigned ONCE |
| Regex | Common form validation regex patterns |
'name', /\w+/,
'email', /^\w+(.\w+)*@\w+(.\w+)*.(net|org|com)+$/,
'phone', /^((\d-)?\d{3}-)?\d{3}-\d{4}$/,
'zip', /^\d{5}(-\d{4})?$/
|
| Debug | Use confirm box to enable break in a loop (useful when debugging -- allows you to break long loops at will) |
while (1){
( confirm(i) ) ? 1 : last ;
}
// Assumes that variable 'last' is NOT defined!
|
| Control | Simple true-false switch statement | (myVal < 0) ? myVal = -myVal : myVal = myVal; |
| References | Variable variable | x = "var" + "A"; varA = 12; alert( this[x] ); // displays 12 |
| References | Variable function | x= "my"+ "Funct"; myFunct = function(){return 99} alert( this[x]() ); // displays 99 |
| Control | Compound "for" statement | for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) |
| Control | Simple true-false switch statement | (nCodeString < 0) ?
nCodeString = -nCodeString : nCodeString = nCodeString; |
| DOM | Adding properties to DOM HTML objects (defineGetter & defineSetter) | HTMLElement.prototype.__defineGetter__( 'foo',
function(){return 'bar'} ); output = document.body.foo; //Output is 'bar' |
| DOM, Debug | Manually iterating through the DOM "body" node |
for( i=0; i<document.body.childNodes.length; i++ ){
( confirm( document.body.childNodes.item(i).innerHTML ) ) ? 1 : last;
}
// Assumes that variable 'last' is NOT defined!
|
| DOM | Appending new nodes | oNew_cell=document.createElement("TD"); oNew_cell.innerHTML = sCell_text; oNew_row.appendChild(oNew_cell); |
| References | Referencing functions and variables in a document | Keyword "this" in <head> references the
Window Object where all declared functions and variables exist. Example: this.functionName(); this.variableName; |
| References, DOM | Referencing the Window Object | document.defaultView // Reference to Window Object. document.defaultView.myVar // Reference to myVar in <head> |
| DOM | DOM HTML Elements | Referencing DOM HTML Elements Node -> Element -> HTMLElement -> HTMLTableElement Types of HTMLElement Objects ( DOM2 Standard ) * HTMLHtmlElement * HTMLHeadElement * HTMLLinkElement * HTMLTitleElement * HTMLMetaElement * HTMLBodyElement * HTMLFormElement * HTMLTableElement * HTMLInputElement * HTMLParagraphElement * Many Many more.. See: http://www.w3.org/TR/2001/WD-DOM-Level-2-HTML-20011025/ecma-script-binding.html |
| References | Variable Naming Convention | sString_var nNumeric_var bBoolean_var cLoopCounter_var dDate_object oObject aArray pParameter eElement for(eProperty in oObject){} CONSTANT_VAR myFunction(pArgument) |
| Event | Detect <enter> key | function detectEnter(evt) {
if( evt.keyCode == 13 && evt.shiftKey ) {
alert('enter key pressed');
}
}
<textarea ... onKeyDown="detectEnter(event)"> |
| References | Treating a literal as an object | (123).toString(16); This treats the literal number 123 as a number object so that we can access it's method toString(). The example above converts the number 123 to it's hexadecimal value. |
| Control | Using setInterval in the <body> tag | // This example shows how to
pass a parameter to the setInterval function < body onload="window.setInterval('dynamic_yscroll(\'floater\')', 1)"> |
| References | Global Object Variable: Passing by reference example | box.stuffinside = 'stuff';
function box(arg){
box.stuffinside += 'more';
}
box2 = box;
box2.stuffinside = 'new stuff';
alert( box.stuffinside ); // Displays 'new stuff'
|
| CSS | Forcing minimum table column width (without spacer image) | <th>
Column title |