SuperTable Example #3
| Color Key |
|---|
| Control |
| DOM |
| Event |
| Object |
| References |
| Other |
| Category |
Description
|
Code Snippet |
|---|---|---|
| CSS | Forcing minimum table column width (without spacer image) | <th>
Column title |
| Control | Simple true-false switch statement | (myVal < 0) ? myVal = -myVal : myVal = myVal; |
| 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; |
| 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)"> |
| DOM | Adding properties to DOM HTML objects (defineGetter & defineSetter) | HTMLElement.prototype.__defineGetter__( 'foo',
function(){return 'bar'} ); output = document.body.foo; //Output is 'bar' |
| DOM | Appending new nodes | oNew_cell=document.createElement("TD"); oNew_cell.innerHTML = sCell_text; oNew_row.appendChild(oNew_cell); |
| 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 |
| 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!
|
| Debug | Prevent error messages from being processed by browser | window.onError=null; |
| 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!
|
| Event | Detect <enter> key | function detectEnter(evt) {
if( evt.keyCode == 13 && evt.shiftKey ) {
alert('enter key pressed');
}
}
<textarea ... onKeyDown="detectEnter(event)"> |
| 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 |
| 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 |
| 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> |
| 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) |
| 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. |
| 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'
|
| 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})?$/
|