|
From: Philippe O. <pom...@us...> - 2005-05-15 23:44:49
|
Update of /cvsroot/easystruts/easystruts-website/lib/x-cbe/x3151_cbe4191_z4/cross-browser.com/x/docs In directory sc8-pr-cvs1.sourceforge.net:/tmp/cvs-serv435/lib/x-cbe/x3151_cbe4191_z4/cross-browser.com/x/docs Added Files: debug_tips.html x_reference.html Log Message: Added new web site sources and data --- NEW FILE: x_reference.html --- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>X Library Function Reference : Cross-Browser.com</title> <meta name='author' content='Mike Foster (Cross-Browser.com)' /> <meta name='description' content='Cross-Browser DHTML Libraries and Applications' /> <meta name='keywords' content='menu,dhtml,crossbrowser,layout,css,dom,api,library,demo,javascript,code' /> <link rel='stylesheet' type='text/css' href='../../css/s6.css' /> <style type='text/css'> .topLnk { font-size:smaller; text-align:right; margin:0 0 3em 0; padding:0; } .desc { font-weight:normal; color:#000; background:transparent; margin:.5em 0 .5em 1em; } .para { font-weight:normal; color:#000; background:transparent; margin:.5em 0 .5em 2em; } .misc { font-weight:normal; color:#000; background:transparent; margin:.5em 0 .5em 1em; } </style> </head> <body id='pgTop'><a name='pgTop' class='noDisp'> </a> <div id='header'> <h1>Cross-Browser.com</h1> <div class='subtitle'>X Library Function Reference</div> </div> <!-- end header --> <div id='leftColumn' class='column'> <div class='leftContent'> <h3>Notes</h3> <div class='collapsible'> <p>Almost complete for X version 3.15.1 ;-)</p> <p>Beginning with v3.15, the main library files do not provide support for NN4. If you need NN4 support, use 'x_core_nn4.js' and 'x_event_nn4.js' instead of 'x_core.js' and 'x_event.js'. The function <a href='#lnkInclude'>xInclude</a> will do this for you automatically.</p> </div> <!-- end collapsible --> <h3>Parameter Syntax</h3> <div class='collapsible'> <p>Parameters in square brackets are optional. Parameter names use the following data type prefixes.</p> <div class="misc"> <b>b</b> - boolean<br /> <b>i</b> - signed integer<br /> <b>u</b> - unsigned integer<br /> <b>f</b> - floating point (real)<br /> <b>s</b> - string<br /> <b>fn</b> - function reference<br /> <b>o</b> - object reference </div> <p>The first parameter to most functions is an exception to the above. The <b>ele</b> argument can be an id string or an object reference (window, document, or Element).</p> </div> <!-- end collapsible --> <h3>Global Variables</h3> <div class='collapsible'> <div class="misc"> <b>xVersion</b> - X version string<br /> </div> <p>As much as possible, object-detection is used instead of browser-detection. The following variables are used.</p> <div class="misc"> <b>xUA</b> - lowercase user-agent string<br /> <b>xIE4Up</b> - true if browser is IE 4 or greater<br /> <b>xNN4</b> - true if browser is Netscape Navigator 4.x<br /> <b>xOp5or6</b> - true if browser is Opera 5.x or 6.x<br /> <b>xOp7</b> - true if browser is Opera 7.x </div> <p>For some browsers, the window resize and scroll events are simulated. Some of the following variables may be used.</p> <div class="misc"> <b>xPCW</b> - previous clientWidth<br /> <b>xPCH</b> - previous clientHeight<br /> <b>xREL</b> - resize event listener<br /> <b>xPSL</b> - previous scrollLeft<br /> <b>xPST</b> - previous scrollTop<br /> <b>xSEL</b> - scroll event listener </div> </div> <!-- end collapsible --> </div> <!-- end leftContent --> <h2>FUNCTIONS</h2> <div class='leftContent'> <div class='topLnk'><a name="lnkShow" href="#pgTop" title="Top of page">Top</a></div> <h4>xShow(ele)</h4> <div class="desc">Set the element's visibility to 'visible' ('show' for NN4).</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference</div> <div class="misc">Uses: xGetElementById(), xDef()</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkHide" href="#pgTop" title="Top of page">Top</a></div> <h4>xHide(ele)</h4> <div class="desc">Set the element's visibility to 'hidden' ('hide' for NN4).</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference</div> <div class="misc">Uses: xGetElementById(), xDef()</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkZIndex" href="#pgTop" title="Top of page">Top</a></div> <h4>xZIndex(ele[,uZ])</h4> <div class="desc">Return and optionally set the element's z-index.</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference</div> <div class="para"><b>uZ</b> - unsigned integer z-index</div> <div class="misc">Uses: xGetElementById(), xDef(), xNum()</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkColor" href="#pgTop" title="Top of page">Top</a></div> <h4>xColor(ele[,sColor])</h4> <div class="desc">Return and optionally set the element's text color.</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference</div> <div class="para"><b>sColor</b> - color string</div> <div class="misc">Uses: xGetElementById(), xDef(), xStr()</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkBackground" href="#pgTop" title="Top of page">Top</a></div> <h4>xBackground(ele[,sBgColor[,sBgImage]])</h4> <div class="desc">Return and optionally set the element's background color and image.</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference</div> <div class="para"><b>sBgColor</b> - background color string</div> <div class="para"><b>sBgImage</b> - background image URL string</div> <div class="misc">Uses: xGetElementById(), xDef(), xStr(), xOp5or6</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkMoveTo" href="#pgTop" title="Top of page">Top</a></div> <h4>xMoveTo(ele,iX,iY)</h4> <div class="desc">Set the element's x and y coordinates.</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference</div> <div class="para"><b>iX</b> - integer x coordinate</div> <div class="para"><b>iY</b> - integer y coordinate</div> <div class="misc">Uses: xLeft(), xTop()</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkLeft" href="#pgTop" title="Top of page">Top</a></div> <h4>xLeft(ele[,iX])</h4> <div class="desc">Return and optionally set the element's x coordinate.</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference</div> <div class="para"><b>iX</b> - integer x coordinate</div> <div class="misc">Uses: xGetElementById(), xDef(), xStr(), xNum()</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkTop" href="#pgTop" title="Top of page">Top</a></div> <h4>xTop(ele[,iY])</h4> <div class="desc">Return and optionally set the element's y coordinate.</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference</div> <div class="para"><b>iY</b> - integer y coordinate</div> <div class="misc">Uses: xGetElementById(), xDef(), xStr(), xNum()</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkPageX" href="#pgTop" title="Top of page">Top</a></div> <h4>xPageX(ele)</h4> <div class="desc">Return the element's absolute x coordinate.</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference</div> <div class="misc">Uses: xGetElementById(), xDef()</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkPageY" href="#pgTop" title="Top of page">Top</a></div> <h4>xPageY(ele)</h4> <div class="desc">Return the element's absolute y coordinate.</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference</div> <div class="misc">Uses: xGetElementById(), xDef()</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkOffsetLeft" href="#pgTop" title="Top of page">Top</a></div> <h4>xOffsetLeft(ele)</h4> <div class="desc">Return the element's X offset within its parent element.</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference</div> <div class="misc">Uses: xGetElementById(), xDef()</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkOffsetTop" href="#pgTop" title="Top of page">Top</a></div> <h4>xOffsetTop(ele)</h4> <div class="desc">Return the element's Y offset within its parent element.</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference</div> <div class="misc">Uses: xGetElementById(), xDef()</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkScrollLeft" href="#pgTop" title="Top of page">Top</a></div> <h4>xScrollLeft(ele)</h4> <div class="desc">Return the number of pixels the element (or window) has scrolled horizontally.</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference. If undefined return document scrollLeft.</div> <div class="misc">Uses: xGetElementById(), xDef(), xNum()</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkScrollTop" href="#pgTop" title="Top of page">Top</a></div> <h4>xScrollTop(ele)</h4> <div class="desc">Return the number of pixels the element (or window) has scrolled vertically.</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference. If undefined return document scrollTop.</div> <div class="misc">Uses: xGetElementById(), xDef(), xNum()</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkSlideTo" href="#pgTop" title="Top of page">Top</a></div> <h4>xSlideTo(ele,iX,iY,iTime)</h4> <div class="desc">Animated, linear motion with sinusoidal rate. Slide the element to the target position in the given time.</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference</div> <div class="para"><b>iX</b> - integer x target</div> <div class="para"><b>iY</b> - integer y target</div> <div class="para"><b>iTime</b> - total time of slide in ms</div> <div class="misc">Uses: xGetElementById(), xMoveTo()</div> <div class="misc">File: x_slide.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkResizeTo" href="#pgTop" title="Top of page">Top</a></div> <h4>xResizeTo(ele,uW,uH)</h4> <div class="desc">Set the element's width and height.</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference</div> <div class="para"><b>uW</b> - unsigned integer width</div> <div class="para"><b>uH</b> - unsigned integer height</div> <div class="misc">Uses: xWidth(), xHeight()</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkWidth" href="#pgTop" title="Top of page">Top</a></div> <h4>xWidth(ele[,uW])</h4> <div class="desc">Return and optionally set the element's width.</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference</div> <div class="para"><b>uW</b> - unsigned integer width</div> <div class="misc">Uses: xGetElementById(), xDef(), xNum(), xStr()</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkHeight" href="#pgTop" title="Top of page">Top</a></div> <h4>xHeight(ele[,uH])</h4> <div class="desc">Return and optionally set the element's height.</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference</div> <div class="para"><b>uH</b> - unsigned integer height</div> <div class="misc">Uses: xGetElementById(), xDef(), xNum(), xStr()</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkClip" href="#pgTop" title="Top of page">Top</a></div> <h4>xClip(ele[,iTop,iRight,iBottom,iLeft])</h4> <div class="desc">Set the element's clipping rectangle. If ele is the only argument then set clip to existing width and height. Return void.</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference</div> <div class="para"><b>iTop</b> - integer y coordinate of top-left corner</div> <div class="para"><b>iRight</b> - integer x coordinate of right-bottom corner</div> <div class="para"><b>iBottom</b> - integer y coordinate of right-bottom corner</div> <div class="para"><b>iLeft</b> - integer x coordinate of top-left corner</div> <div class="misc">Uses: xGetElementById(), xNum(), nn4:xWidth(), nn4:xHeight()</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkAddEventListener" href="#pgTop" title="Top of page">Top</a></div> <h4>xAddEventListener(ele,sEventType,fnEventListener,bCapture)</h4> <div class="desc">Register an event listener on the element. For some browsers the window.onscroll and window.onresize events are simulated.</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference</div> <div class="para"><b>sEventType</b> - string event type (mousemove, click, resize, etc.)</div> <div class="para"><b>fnEventListener</b> - reference to the listener function</div> <div class="para"><b>bCapture</b> - boolean capture event flag</div> <div class="misc">Uses: xGetElementById()</div> <div class="misc">File: x_event.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkRemoveEventListener" href="#pgTop" title="Top of page">Top</a></div> <h4>xRemoveEventListener(ele,sEventType,fnEventListener,bCapture)</h4> <div class="desc">Unregister an event listener on the element.</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference</div> <div class="para"><b>sEventType</b> - string event type ('mousemove', 'click', 'resize', etc.)</div> <div class="para"><b>fnEventListener</b> - reference to the listener function</div> <div class="para"><b>bCapture</b> - boolean capture event flag</div> <div class="misc">Uses: xGetElementById()</div> <div class="misc">File: x_event.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkEvent" href="#pgTop" title="Top of page">Top</a></div> <h4>xEvent(oEvent)</h4> <div class="desc">Resolve browser differences for selected event properties and return an object with those properties. This is an object prototype.</div> <div class="misc">Parameters:</div> <div class="para"><b>oEvent</b> - native event object (null for IE)</div> <div class="misc">The following are the current xEvent properties.</div> <div class="para"><b>type</b> - string, event type</div> <div class="para"><b>target</b> - element object, target of event</div> <div class="para"><b>pageX</b> - absolute X coordinate of mouse</div> <div class="para"><b>pageY</b> - absolute Y coordinate of mouse</div> <div class="para"><b>offsetX</b> - target-relative X coordinate of mouse</div> <div class="para"><b>offsetY</b> - target-relative Y coordinate of mouse</div> <div class="para"><b>keyCode</b> - unsigned integer</div> <div class="misc">Uses: xDef(), xPageX(), xPageY(), nn4:xLayerFromPoint()</div> <div class="misc">File: x_event.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkClientWidth" href="#pgTop" title="Top of page">Top</a></div> <h4>xClientWidth()</h4> <div class="desc">Return the inner width of the window.</div> <div class="misc">Uses: xOp5or6, xDef()</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkClientHeight" href="#pgTop" title="Top of page">Top</a></div> <h4>xClientHeight()</h4> <div class="desc">Return the inner height of the window.</div> <div class="misc">Uses: xOp5or6, xDef()</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkGetElementsByAttribute" href="#pgTop" title="Top of page">Top</a></div> <h4>xGetElementsByAttribute(sTag, sAtt, sRE)</h4> <div class="desc">Return an array of all sTag elements whose sAtt attribute matches sRE. sAtt can also be a property name but the property must be of type string.</div> <div class="misc">Parameters:</div> <div class="para"><b>sTag</b> - </div> <div class="para"><b>sAtt</b> - </div> <div class="para"><b>sRE</b> - </div> <div class="misc">Uses: none</div> <div class="misc">File: x_dom.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkGetElementsByClassName" href="#pgTop" title="Top of page">Top</a></div> <h4>xGetElementsByClassName(sClsName, oParentEle, sTagName)</h4> <div class="desc">Returns an array of elements which are descendants of parentEle and have tagName and clsName. If parentEle is null or not present, document will be used. If tagName is null or not present, "*" will be used.</div> <div class="misc">Parameters:</div> <div class="para"><b>sClsName</b> - </div> <div class="para"><b>oParentEle</b> - </div> <div class="para"><b>sTagName</b> - </div> <div class="misc">Uses: xGetElementsByTagName</div> <div class="misc">File: x_dom.js</div> <div class="misc">Demo: <a href='../examples/tooltips3.html'>xTooltip</a>, <a href='../examples/popup.html'>xPopup</a></div> <div class='topLnk'><a name="lnkGetElementsByTagName" href="#pgTop" title="Top of page">Top</a></div> <h4>xGetElementsByTagName(sTagName, oParentEle)</h4> <div class="desc">Returns an array of elements which are descendants of parentEle and have tagName. If parentEle is null or not present, document will be used. If tagName is null or not present, "*" will be used. This even works with IE4.</div> <div class="misc">Parameters:</div> <div class="para"><b>sTagName</b> - </div> <div class="para"><b>oParentEle</b> - </div> <div class="misc">Uses: none</div> <div class="misc">File: x_dom.js</div> <div class="misc">Demo: <a href='../examples/tooltips3.html'>xTooltip</a>, <a href='../examples/popup.html'>xPopup</a></div> <div class='topLnk'><a name="lnkGetComputedStyle" href="#pgTop" title="Top of page">Top</a></div> <h4>xGetComputedStyle(oEle, sProp)</h4> <div class="desc">Works in Moz and Op. For sProp use the css property name, not the object property name. (For finding width in IE this works as long as padding and border use pixel units in the CSS)</div> <div class="misc">Parameters:</div> <div class="para"><b>oEle</b> - element object</div> <div class="para"><b>sProp</b> - css property name</div> <div class="misc">Uses: none</div> <div class="misc">File: x_dom.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkWalkTree" href="#pgTop" title="Top of page">Top</a></div> <h4>xWalkTree(oNode, fnVisit)</h4> <div class="desc">Perform a preorder traversal on the subtree starting at oNode and pass each Element node to fnVisit.</div> <div class="misc">Parameters:</div> <div class="para"><b>oNode</b> - element object at which to begin traversal</div> <div class="para"><b>fnVisit</b> - this function will be called for each node and will be passed a reference to that node.</div> <div class="misc">Uses: none</div> <div class="misc">File: x_dom.js</div> <div class="misc">Demo: <a href='../examples/walktree.html'>xWalkTree</a></div> <div class='topLnk'><a name="lnkGetElementById" href="#pgTop" title="Top of page">Top</a></div> <h4>xGetElementById(ele)</h4> <div class="desc">Return a reference to an Element object or null if <b>ele</b> is invalid.</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference</div> <div class="misc">Uses: nn4:xLayer()</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkLayer" href="#pgTop" title="Top of page">Top</a></div> <h4>xLayer(sId)</h4> <div class="desc">Return a reference to a Layer object or null if <b>sId</b> is invalid. This is only for NN4 and is called by xGetElementById().</div> <div class="misc">Parameters:</div> <div class="para"><b>sId</b> - id string</div> <div class="misc">Uses: none</div> <div class="misc">File: x_core_nn4.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkLayerFromPoint" href="#pgTop" title="Top of page">Top</a></div> <h4>xLayerFromPoint(iX,iY)</h4> <div class="desc">Return a reference to the topmost Layer object containing the point or null if no layer contains the point. This is only for NN4 and is called by xEvent().</div> <div class="misc">Parameters:</div> <div class="para"><b>iX</b> - integer absolute x coordinate</div> <div class="para"><b>iY</b> - integer absolute y coordinate</div> <div class="misc">Uses: none</div> <div class="misc">File: x_event_nn4.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkParent" href="#pgTop" title="Top of page">Top</a></div> <h4>xParent(ele,bNode)</h4> <div class="desc">Return a reference to the element's parent element, or null if not found.</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference</div> <div class="para"><b>bNode</b> - pass true if you want parentNode, else you get offsetParent</div> <div class="misc">Uses: xGetElementById(), xDef()</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkDef" href="#pgTop" title="Top of page">Top</a></div> <h4>xDef(ref[,...])</h4> <div class="desc">Return true if all arguments are defined.</div> <div class="misc">Uses: none</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkNum" href="#pgTop" title="Top of page">Top</a></div> <h4>xNum(ref)</h4> <div class="desc">Return true if typeof(ref) == 'number'.</div> <div class="misc">Uses: none</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkStr" href="#pgTop" title="Top of page">Top</a></div> <h4>xStr(ref)</h4> <div class="desc">Return true if typeof(ref) == 'string'.</div> <div class="misc">Uses: none</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkEnableDrag" href="#pgTop" title="Top of page">Top</a></div> <h4>xEnableDrag(ele,fnDragStart,fnDrag,fnDragEnd)</h4> <div class="desc">Enable dragging for ele.</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference</div> <div class="para"><b>fnDragStart</b> - this function will be called on mousedown on ele</div> <div class="para"><b>fnDrag</b> - this function will be called on each mousemove during dragging</div> <div class="para"><b>fnDragEnd</b> - this function will be called on mouseup on ele</div> <div class="misc">Uses: xGetElementById(), xAddEventListener(), xRemoveEventListener(), xEvent(), xParent(), xMoveTo()</div> <div class="misc">File: x_drag.js</div> <div class="misc">Demo: <a href='../examples/drag1.html'>Drag1</a></div> <div class='topLnk'><a name="lnkImgRollSetup" href="#pgTop" title="Top of page">Top</a></div> <h4>xImgRollSetup(sPath,sOvrSuffix,sFileExt,sImgEleId[,...])</h4> <div class="desc">Can not be called before the window onload event. Pass image IDs starting with 4th argument. Assumes this image file naming convention:<br />out img = path + imgEleId + fileExt<br />over img = path + imgEleId + ovrSuffix + fileExt</div> <div class="misc">Parameters:</div> <div class="para"><b>sPath</b> - path to image files</div> <div class="para"><b>sOvrSuffix</b> - see above file name convention</div> <div class="para"><b>sFileExt</b> - see above file name convention</div> <div class="para"><b>sImgEleId</b> - pass all img ele IDs starting with the 4th argument</div> <div class="misc">Uses: xGetElementById(), xAddEventListener(), xEvent()</div> <div class="misc">File: x_img.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkName" href="#pgTop" title="Top of page">Top</a></div> <h4>xName(ref)</h4> <div class="desc">Returns a string for displaying. It first tries id, then nodeName, then tagName, else returns ele.</div> <div class="misc">Parameters:</div> <div class="para"><b>ref</b> - object reference</div> <div class="misc">Uses: none</div> <div class="misc">File: x_debug.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkLoadScript" href="#pgTop" title="Top of page">Top</a></div> <h4>xLoadScript(sUrl)</h4> <div class="desc">Load a .js file after the window.onload event.</div> <div class="misc">Parameters:</div> <div class="para"><b>sUrl</b> - URL to the .js file</div> <div class="misc">Uses: none</div> <div class="misc">File: x_debug.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkInclude" href="#pgTop" title="Top of page">Top</a></div> <h4>xInclude(sUrl1[,sUrl2[,...]])</h4> <div class="desc">Load .js and/or .css files by document.writing a script or link element into the document. This must be called before the window.onload event. Automatically loads X files with NN4 support if browser is NN4. Returns true if browser has minimal dhtml support, else returns false. Min dhtml support: <i>if (document.getElementById || document.all || document.layers)</i></div> <div class="misc">Parameters:</div> <div class="para"><b>sUrl</b> - URL to the .js or .css file</div> <div class="misc">Uses: xNN4</div> <div class="misc">File: x_load.js</div> <div class="misc">Demo: many of the examples use xInclude</div> <div class='topLnk'><a name="lnkParentChain" href="#pgTop" title="Top of page">Top</a></div> <h4>xParentChain(ele,sDelim,bNode)</h4> <div class="desc">Returns a string for displaying. Iterates up the parent chain of ele.</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference</div> <div class="para"><b>sDelim</b> - for example: '\n' or '<br>'</div> <div class="para"><b>bNode</b> - pass true if you want parentNode, else you get offsetParent</div> <div class="misc">Uses: xGetElementById(), xName(), xParent()</div> <div class="misc">File: x_debug.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkHasPoint" href="#pgTop" title="Top of page">Top</a></div> <h4>xHasPoint(ele,iLeft,iTop,iClpT,iClpR,iClpB,iClpL)</h4> <div class="desc">Returns true if iLeft,iTop is contained within the clipped area of ele.</div> <div class="misc">Parameters:</div> <div class="para"><b>ele</b> - id string or object reference</div> <div class="para"><b>iLeft</b> - </div> <div class="para"><b>iTop</b> - </div> <div class="para"><b>iClpT</b> - </div> <div class="para"><b>iClpR</b> - </div> <div class="para"><b>iClpB</b> - </div> <div class="para"><b>iClpL</b> - </div> <div class="misc">Uses: xNum(), xPageX(), xPageY(), xWidth(), xHeight()</div> <div class="misc">File: x_core.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkWindow" href="#pgTop" title="Top of page">Top</a></div> <h4>xWindow(sName, uW, uH, iX, iY, loc, men, res, scr, sta, too)</h4> <div class="desc">Create an xWindow object for each child window the page will need. Pass a zero for width, height, left, and top and the window will have default size and position. Pass a zero or one for the boolean parameters (location field, menubar, etc.). For a simpler alternative see xWinOpen() in 'x_alt.js'.</div> <div class="misc">Parameters:</div> <div class="para"><b>sName</b> - the same name as the 'target' attribute of the A elements</div> <div class="para"><b>uW</b> - </div> <div class="para"><b>uH</b> - </div> <div class="para"><b>iX</b> - </div> <div class="para"><b>iY</b> - </div> <div class="para"><b>loc</b> - </div> <div class="para"><b>men</b> - </div> <div class="para"><b>res</b> - </div> <div class="para"><b>scr</b> - </div> <div class="para"><b>sta</b> - </div> <div class="para"><b>too</b> - </div> <div class="misc">Uses: none</div> <div class="misc">File: x_win.js</div> <div class="misc">Demo: <a href='../examples/xwindow.html'>xWindow</a></div> <div class='topLnk'><a name="lnkBar" href="#pgTop" title="Top of page">Top</a></div> <h4>xBar(sDir, sConStyle, sBarStyle)</h4> <div class="desc"></div> <div class="misc">Parameters:</div> <div class="para"><b>sDir</b> - direction string, one of: 'ltr', 'rtl', 'ttb', or 'btt'</div> <div class="para"><b>sConStyle</b> - classname for the bar container</div> <div class="para"><b>sBarStyle</b> - classname for the bar</div> <div class="misc">Uses: xLeft(), xTop(), xNum(), xResizeTo(), xMoveTo(), xLinearScale()</div> <div class="misc">File: x_bar.js</div> <div class="misc">Demo: <a href='../examples/bargraph.html'>xBar</a></div> <div class='topLnk'><a name="lnkPopup" href="#pgTop" title="Top of page">Top</a></div> <h4>xPopup(sTmrType, uTimeout, sPosition, sStyle, sId, sUrl)</h4> <div class="desc">An alternative to popup windows.</div> <div class="misc">Parameters:</div> <div class="para"><b>sTmrType</b> - 'timeout' or 'interval'</div> <div class="para"><b>uTimeout</b> - time in ms</div> <div class="para"><b>sPosition</b> - 'cen', 'e', 'se', etc.</div> <div class="para"><b>sStyle</b> - classname</div> <div class="para"><b>sId</b> - id</div> <div class="para"><b>sUrl</b> - popup URL</div> <div class="misc">Uses: xTimer,xSlideTo,xWidth,xHeight,xClientWidth,xClientHeight</div> <div class="misc">File: x_popup.js</div> <div class="misc">Demo: <a href='../examples/popup.html'>xPopup</a></div> <div class='topLnk'><a name="lnkTimer" href="#pgTop" title="Top of page">Top</a></div> <h4>xTimer.set(sTmrType, obj, sMethod, uTime, data)</h4> <div class="desc">Register an object method to receive a timeout or interval event.</div> <div class="misc">Parameters:</div> <div class="para"><b>sTmrType</b> - 'timeout' or 'interval'</div> <div class="para"><b>obj</b> - object to receive event</div> <div class="para"><b>sMethod</b> - string: name of one of obj's methods</div> <div class="para"><b>uTime</b> - time in ms</div> <div class="para"><b>data</b> - passed to listener at event</div> <div class="misc">Uses: none</div> <div class="misc">File: x_timer.js</div> <div class="misc">Demo: <a href='../examples/popup.html'>xPopup</a></div> <div class='topLnk'><a name="lnkEvalTextarea" href="#pgTop" title="Top of page">Top</a></div> <h4>xEvalTextarea()</h4> <div class="desc">Append a textarea and button to the current document. Click the button to evaluate the javascript in the textarea.</div> <div class="misc">Uses: none</div> <div class="misc">File: x_debug.js</div> <div class="misc">Demo: <a href=''></a></div> <div class='topLnk'><a name="lnkTooltipGroup" href="#pgTop" title="Top of page">Top</a></div> <h4>xTooltipGroup(grpClassOrIdList, tipClass, origin, xOffset, yOffset, textList)</h4> <div class="desc"></div> <div class="misc">Parameters:</div> <div class="para"><b>grpClassOrIdList</b> - The css class name which you add to any element you want to trigger a tooltip - Or - an array of id strings.</div> <div class="para"><b>tipClass</b> - The css class name applied to the tooltip triggered by elements with the grpClass class name (or elements whose id is in the IdList).</div> <div class="para"><b>origin</b> - One of 'right', 'top', or 'mouse'. For 'right' or 'top', the tooltip is positioned to the right (or top) of the trigger element. For 'mouse' the tooltip will follow the mouse. In all three cases the following offsets are applied.</div> <div class="para"><b>xOffset/yOffset</b> - The tooltip is positioned relative to the above origin, offset by these amounts.</div> <div class="para"><b>textList</b> - If grpClassOrIdList is an array of IDs, then textList provides the tooltip text for the corresponding array index. If grpClassOrIdList is a class name then textList is not needed (tooltip text is taken from the element's TITLE attribute).</div> <div class="misc">Uses: xGetElementById, xGetElementsByClassName, xAddEventListener, xPageX, xPageY, xWidth, xHeight, xMoveTo, xShow, xEvent</div> <div class="misc">File: x_tip.js</div> <div class="misc">Demo: <a href='../examples/tooltips3.html'>xTooltipGroup</a></div> </div> <!-- end leftContent --> </div> <!-- end leftColumn --> <div id='rightColumn' class='column'> <div class='rightContent'> <!-- Menu --> <div class='noDisp'> <hr /> <h4>Menu</h4> </div> <div class='mnuContainer'> <h5>Appearance</h5> <div class='mnuBox'> <p><a href="#lnkBackground">xBackground</a></p> <p><a href="#lnkColor">xColor</a></p> <p><a href="#lnkHide">xHide</a></p> <p><a href="#lnkShow">xShow</a></p> <p><a href="#lnkZIndex">xZIndex</a></p> </div> <h5>Position</h5> <div class='mnuBox'> <p><a href="#lnkHasPoint">xHasPoint</a></p> <p><a href="#lnkLeft">xLeft</a></p> <p><a href="#lnkMoveTo">xMoveTo</a></p> <p><a href="#lnkOffsetLeft">xOffsetLeft</a></p> <p><a href="#lnkOffsetTop">xOffsetTop</a></p> <p><a href="#lnkPageX">xPageX</a></p> <p><a href="#lnkPageY">xPageY</a></p> <p><a href="#lnkScrollLeft">xScrollLeft</a></p> <p><a href="#lnkScrollTop">xScrollTop</a></p> <p><a href="#lnkTop">xTop</a></p> </div> <h5>Size</h5> <div class='mnuBox'> <p><a href="#lnkClip">xClip</a></p> <p><a href="#lnkHeight">xHeight</a></p> <p><a href="#lnkResizeTo">xResizeTo</a></p> <p><a href="#lnkWidth">xWidth</a></p> </div> <h5>Event</h5> <div class='mnuBox'> <p><a href="#lnkEvent">xEvent</a></p> <p><a href="#lnkAddEventListener">xAddEventListener</a></p> <p><a href="#lnkRemoveEventListener">xRemoveEventListener</a></p> </div> <h5>DOM</h5> <div class='mnuBox'> <p><a href="#lnkGetComputedStyle">xGetComputedStyle</a></p> <p><a href="#lnkGetElementById">xGetElementById</a></p> <p><a href="#lnkGetElementsByAttribute">xGetElementsByAttribute</a></p> <p><a href="#lnkGetElementsByClassName">xGetElementsByClassName</a></p> <p><a href="#lnkGetElementsByTagName">xGetElementsByTagName</a></p> <p><a href="#lnkParent">xParent</a></p> <p><a href="#lnkWalkTree">xWalkTree</a></p> </div> <h5>Animation</h5> <div class='mnuBox'> <p><a href="#lnkBar">xBar</a></p> <p><a href="#lnkSlideTo">xSlideTo</a></p> </div> <h5>Misc</h5> <div class='mnuBox'> <p><a href="#lnkEnableDrag">xEnableDrag</a></p> <p><a href="#lnkImgRollSetup">xImgRollSetup</a></p> <p><a href="#lnkInclude">xInclude</a></p> <p><a href="#lnkPopup">xPopup</a></p> <p><a href="#lnkTimer">xTimer</a></p> <p><a href="#lnkTooltipGroup">xTooltipGroup</a></p> </div> <h5>Window</h5> <div class='mnuBox'> <p><a href="#lnkClientHeight">xClientHeight</a></p> <p><a href="#lnkClientWidth">xClientWidth</a></p> <p><a href="#lnkWindow">xWindow</a></p> </div> <h5>Type</h5> <div class='mnuBox'> <p><a href="#lnkDef">xDef</a></p> <p><a href="#lnkNum">xNum</a></p> <p><a href="#lnkStr">xStr</a></p> </div> <h5>Debug</h5> <div class='mnuBox'> <p><a href="#lnkEvalTextarea">xEvalTextarea</a></p> <p><a href="#lnkLoadScript">xLoadScript</a></p> <p><a href="#lnkName">xName</a></p> <p><a href="#lnkParentChain">xParentChain</a></p> </div> <h5>NN4</h5> <div class='mnuBox'> <p><a href="#lnkLayer">xLayer</a></p> <p><a href="#lnkLayerFromPoint">xLayerFromPoint</a></p> </div> <h5> </h5> <div class='mnuBox'> <p><a href="#pgTop">Top</a></p> <p><a href="../../">Home</a></p> <p><a href="javascript:history.back()">Back</a></p> <p><a href="javascript:history.forward()">Forward</a></p> </div> </div> <!-- end menu --> </div> <!-- end rightContent --> </div> <!-- end rightColumn --> </body> </html> --- NEW FILE: debug_tips.html --- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>General Debugging Tips</title> <meta name='author' content='Mike Foster (Cross-Browser.com)' /> <meta name='description' content='Cross-Browser DHTML Libraries and Applications' /> <meta name='keywords' content='menu,dhtml,crossbrowser,layout,css,dom,api,library,demo,javascript,code' /> <link rel='stylesheet' type='text/css' href='../../css/s6.css' /> <style type='text/css'> </style> </head> <body> <div id='header'> <h1>Cross-Browser.com</h1> <div class='subtitle'>General Debugging Tips</div> </div> <!-- end header --> <div id='leftColumn' class='column'> <div class='leftContent'> <h2>Squash Those Bugs!</h2> <p>You can download some very nice Javascript debugging programs for a variety of platforms, but your initial debugging can be done with simple techniques right in your code. Most browsers will give the line number of an error - this is essential. Some browsers give better error descriptions than others. There are basically two types of errors: syntax errors, and logic errors.</p> <h3>Syntax Errors</h3> <p>A syntax error will occur when you have not followed the <i>grammer</i> of Javascript: forget to put two quotes around a string; forget to put a closing curly brace; have punctuation in the wrong place, etc. The browser will inform you of most syntax errors.</p> <h3>Logic Errors</h3> <p>After you correct your syntax errors, the script still may not work properly while running: it may be mis-calculating a value, or perhaps an <b>if</b> condition is using the logically wrong (but syntactically valid) operator. These are logic errors.</p> <p>Among the tools that most Debuggers provide for solving errors are <i>Watch Variables</i> and <i>Breakpoints</i>. You can utilize these same concepts without a debugger.</p> <h3>Watch Variables</h3> <p>A watch variable is a variable for which you want to watch the value, <i>as the script is running</i> - that is, as the page is active in a browser.</p> <p>A simple technique for using watch variables without a debugger is to use the window's <b>status bar</b> (some browsers are better at this than others). For example, in the following code fragment I want to <i>watch</i> the value of the variable <b>dx</b>. I insert line number 9. Notice the "//// debug" comment. I do this so I won't forget why I added this line, and so, later, I can search my file for "debug", and delete all those lines.</p> <p>Now I save the file, refresh the browser, and watch the value of dx on the status bar, as the script is running.</p> <pre> 1: if (cl + dx < 0) { 2: cl = 0; 3: dx = 0; 4: } 5: else if (cr + dx > this.width()) { 6: cr = cl + this.clipWidth(); 7: dx = 0; 8: } 9: window.status = "dx: " + dx; ////////////////////// debug </pre> <h3>Break Points</h3> <p>There are times when a variable's value is changing too quickly to use a watch. You need to stop the script and look at the variable. A break point is a line in the script at which <i>the script stops running</i>. You can then look at the current values of variables. When you are ready, you let the script continue running.</p> <p>A simple technique for using break points without a debugger is to use Javascript's <b>alert()</b> function. This function stops the script, displays a message, and waits for the user to click the OK button. The script then continues executing. This technique is not <i>exactly</i> like a break point, but its close enough. For example, in the following code fragment I want to see the value of dx only if it enters the <i>else if</i> block, and before it is assigned zero. I insert line number 6. <pre> 1: if (cl + dx < 0) { 2: cl = 0; 3: dx = 0; 4: } 5: else if (cr + dx > this.width()) { 6: alert("dx: " + dx); ////////////////////// debug 7: cr = cl + this.clipWidth(); 8: dx = 0; 9: } </pre> </div> <!-- end leftContent --> <div class='leftContent'> <a href='http://cross-browser.com/'>Cross-Browser.com</a> - DHTML libraries and applications. </div> <!-- end leftContent --> </div> <!-- end leftColumn --> <div id='rightColumn' class='column'> <div class='rightContent'> <p><b>Debugging Tips</b></p> <p>Syntax Errors</p> <p>Logic Errors</p> <p>Watch Variables</p> <p>Break Points</p> </div> <!-- end rightContent --> </div> <!-- end rightColumn --> </body> </html> |
