 | Source code below from: Ajax Hacks : Tips & Tools for Creating Responsive Web Sites (Hacks) By Bruce Perry Published 01 March, 2006 Average rating 
Powells
Alibris
|
dragdrop.js (519 lines)
158 this.dragging = false; 159 160 this.eventMouseDown = this.startDrag.bindAsEventListener(this); 161 this.eventMouseUp = this.endDrag.bindAsEventListener(this); 162 this.eventMouseMove = this.update.bindAsEventListener(this); 163 this.eventKeypress = this.keyPress.bindAsEventListener(this); 164 165 this.registerEvents(); 166 }, 167 destroy: function() { 168 Event.stopObserving(this.handle, "mousedown", this.eventMouseDown); 169 this.unregisterEvents(); 170 },Additional matches viewable in cache of dragdrop.js.
 | Source code below from: Ajax For Dummies (For Dummies (Computer/Tech)) By Steve Ph.D. Holzner Published 13 March, 2006 Average rating 
Powells
Alibris
|
ch06/drag.html (146 lines)
50 51 function addListener(type, callback) 52 {Additional matches viewable in cache of ch06/drag.html.- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -67 } 68 69 function handleDown(e) 70 { 71 var e = new MouseEvent(e); 72 addListener("mousemove", handleMove); 73 addListener("mouseup", handleUp); 74 offsetX = e.x - parseInt(e.target.style.left); 75 offsetY = e.y - parseInt(e.target.style.top);
 | Source code below from: Professional Ajax (Programmer to Programmer) By Nicholas C. Zakas, Jeremy McPeak, and Joe Fawcett Published 06 February, 2006 Average rating
Powells
Alibris
|
777781Pro_AJAX/Ch07/Autosuggest Example/autosuggest.js (416 lines)
16 /** 17 * The dropdown list layer. 18 * @scope private- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -76 /** 77 * Creates the dropdown layer to display multiple suggestions. 78 * @scope private 79 */ 80 AutoSuggestControl.prototype.createDropDown = function () { 81- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -92 var oThis = this; 93 this.layer.onmousedown = 94 this.layer.onmouseup = 95 this.layer.onmouseover = function (oEvent) {- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -98 99 if (oEvent.type == "mousedown") { 100 oThis.textbox.value = oTarget.firstChild.nodeValue;- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -147 /** 148 * Highlights the next or previous suggestion in the dropdown and 149 * places the suggestion into the textbox.- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -177 /** 178 * Handles three keydown events. 179 * @scope private 180 * @param oEvent The event object for the keydown event. 181 */ 182 AutoSuggestControl.prototype.handleKeyDown = function (oEvent /*:Event*/) { 183 184 switch(oEvent.keyCode) { 185 case 38: //up arrow 186 this.goToSuggestion(-1); 187 break; 188 case 40: //down arrow 189 this.goToSuggestion(1);- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -206 /** 207 * Handles keyup events. 208 * @scope private 209 * @param oEvent The event object for the keyup event. 210 */ 211 AutoSuggestControl.prototype.handleKeyUp = function (oEvent /*:Event*/) { 212- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -239 /** 240 * Hides the suggestion dropdown. 241 * @scope private- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -247 /** 248 * Highlights the given node in the suggestions dropdown. 249 * @scope private 250 * @param oSuggestionNode The node representing a suggestion in the dropdown. 251 */- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -273 274 //assign the onkeyup event handler 275 this.textbox.onkeyup = function (oEvent) { 276- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -281 282 //call the handleKeyUp() method with the event object 283 oThis.handleKeyUp(oEvent); 284 }; 285 286 //assign onkeydown event handler 287 this.textbox.onkeydown = function (oEvent) { 288- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -293 294 //call the handleKeyDown() method with the event object 295 oThis.handleKeyDown(oEvent); 296 };- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -302 303 //create the suggestions dropdown 304 this.createDropDown(); 305 };- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -361 362 //check for support of typeahead functionality 363 if (this.textbox.createTextRange || this.textbox.setSelectionRange){
 | Source code below from: Pragmatic Ajax : A Web 2.0 Primer By Justin Gehtland, Ben Galbraith, and Dion Almaer Published 10 April, 2006 Average rating
Powells
Alibris
|
code/CRMApp/src/main/web/scripts/scriptaculous/dragdrop.js (537 lines)
185 this.dragging = false; 186 187 this.eventMouseDown = this.startDrag.bindAsEventListener(this); 188 this.eventMouseUp = this.endDrag.bindAsEventListener(this); 189 this.eventMouseMove = this.update.bindAsEventListener(this); 190 this.eventKeypress = this.keyPress.bindAsEventListener(this); 191 192 Event.observe(this.handle, "mousedown", this.eventMouseDown); 193 Event.observe(document, "mouseup", this.eventMouseUp); 194 Event.observe(document, "mousemove", this.eventMouseMove); 195 Event.observe(document, "keypress", this.eventKeypress);Additional matches viewable in cache of code/CRMApp/src/main/web/scripts/scriptaculous/dragdrop.js.
code/Beyond/canvasPainter.html (311 lines)
115 //Mouse Event Handlers 116 function onMouseDown(e) { 117 drawing = true;Additional matches viewable in cache of code/Beyond/canvasPainter.html.- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -259 initWidgits(); 260 261 canvasInterface.addEventListener("mousedown", onMouseDown, false); 262 canvasInterface.addEventListener("mousemove", onMouseMove, false); 263 canvasInterface.addEventListener("mouseup", onMouseUp, false); 264 addEventListener("mouseup", onMouseOut, false); 265 document.getElementById("controls").style.display = "block"; 266 267 startRecordAnimation(); 268 } else { 269 var ffb = new Image(); 270 ffb.src = "http://www.mozilla.org/products/firefox/buttons/getfirefox_large2.png"; 271 document.getElementById("controls").style.display = "none"; 272 document.getElementById("noCanvas").style.display = "block"; 273 document.getElementById("ffbutton").src = ffb.src; 274 document.getElementById("cpainterInfo").style.display = "none"; 275 } 276 } 277 </script> 278 <script src="widgits.js" type="text/javascript"></script> 279 280 </head><body onload="init()"> 281 <div id="controls" style="display: none"> 282 <span id="btn_0" style="background: #CCCCCC;" onclick="setDrawAction(0)" onMouseDown="setControlLook(0, '#CCCCCC')" onMouseOver="setControlLook(0, '#EEEEEE')" onMouseOut="setControlLook(0, '#FFFFFF')">brush</span> 283 <span id="btn_1" onclick="setDrawAction(1)" onMouseDown="setControlLook(1, '#CCCCCC')" onMouseOver="setControlLook(1, '#EEEEEE')" onMouseOut="setControlLook(1, '#FFFFFF')">brush 2</span> 284 <span id="btn_2" onclick="setDrawAction(2)" onMouseDown="setControlLook(2, '#CCCCCC')" onMouseOver="setControlLook(2, '#EEEEEE')" onMouseOut="setControlLook(2, '#FFFFFF')">line</span>
code/Beyond/widgits.js (397 lines)
15 16 var colorMouseDown = false; 17 var lwChooserMouseDown = false;Additional matches viewable in cache of code/Beyond/widgits.js.- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -374 //Shared Widgit Event Code 375 function setChooserListners(chooser, listener, mouseover) { 376 chooser.addEventListener("mousedown", listener, false); 377 chooser.addEventListener("mousemove", listener, false); 378 chooser.addEventListener("mouseup", listener, false); 379 chooser.addEventListener("mouseout", listener, false); 380 if(mouseover) 381 chooser.addEventListener("mouseover", listener, false); 382 } 383 384 function validateChooserEvent(e, stateActive) { 385 if(e.type == 'mouseout' || e.type == 'mouseup' || (e.type == 'mousemove' && !stateActive)) { 386 return false; 387 } else if(e.type == 'mousedown') { 388 return true; 389 }
code/GoogleMaps/step4.html (103 lines)
38 setInnerDivSize('2000px', '1400px'); 39 40 // wire up the mouse listeners to do dragging 41 var outerDiv = document.getElementById("outerDiv"); 42 outerDiv.onmousedown = startMove; 43 outerDiv.onmousemove = processMove; 44 outerDiv.onmouseup = stopMove;
code/GoogleMaps/step5-2.html (137 lines)
42 setInnerDivSize('2000px', '1400px'); 43 44 // wire up the mouse listeners to do dragging 45 var outerDiv = document.getElementById("outerDiv"); 46 outerDiv.onmousedown = startMove; 47 outerDiv.onmousemove = processMove; 48 outerDiv.onmouseup = stopMove;
 | Source code below from: Ajax in Action By Dave Crane, Eric Pascarello, and Darren James Published 01 October, 2005 Average rating
Powells
Alibris
|
ch10/refactor/scripts/suggest.js (448 lines)
72 if ( this.isSuccess(request) ) 73 this.component.ajaxUpdate(request); 74 elseAdditional matches viewable in cache of ch10/refactor/scripts/suggest.js.- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -382 383 addKeyHandling: function() { 384 this.input.onkeyup = this.keyupHandler.bindAsEventListener(this); 385 this.input.onkeydown = this.keydownHandler.bindAsEventListener(this); 386 this.input.onblur = this.onblurHandler.bindAsEventListener(this); 387 if ( this.isOpera ) 388 this.input.onkeypress = this.keyupHandler.bindAsEventListener(this); 389 }, 390 391 keydownHandler: function(e) { 392 var upArrow = 38; 393 var downArrow = 40;
ch10/refactor/scripts/suggest_debug.js (457 lines)
72 if ( this.isSuccess(request) ) 73 this.component.ajaxUpdate(request); 74 elseAdditional matches viewable in cache of ch10/refactor/scripts/suggest_debug.js.- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -392 393 addKeyHandling: function() { 394 this.input.onkeyup = this.keyupHandler.bindAsEventListener(this); 395 this.input.onkeydown = this.keydownHandler.bindAsEventListener(this); 396 this.input.onblur = this.onblurHandler.bindAsEventListener(this); 397 if ( this.isOpera ) 398 this.input.onkeypress = this.keyupHandler.bindAsEventListener(this); 399 }, 400 401 keydownHandler: function(e) { 402 var upArrow = 38; 403 var downArrow = 40;
video/animated_slides/dragdrop.js (537 lines)
185 this.dragging = false; 186 187 this.eventMouseDown = this.startDrag.bindAsEventListener(this); 188 this.eventMouseUp = this.endDrag.bindAsEventListener(this); 189 this.eventMouseMove = this.update.bindAsEventListener(this); 190 this.eventKeypress = this.keyPress.bindAsEventListener(this); 191 192 Event.observe(this.handle, "mousedown", this.eventMouseDown); 193 Event.observe(document, "mouseup", this.eventMouseUp); 194 Event.observe(document, "mousemove", this.eventMouseMove); 195 Event.observe(document, "keypress", this.eventKeypress);Additional matches viewable in cache of video/animated_slides/dragdrop.js.
ch05/x/docs/x_reference.html (932 lines)
8 <meta name='description' content='Cross-Browser DHTML Libraries and Applications'> 9 <meta name='keywords' content='dhtml,crossbrowser,tooltips,menu,collapsible,dhtml drag drop,downgradeable layout,dynamic select,image rollover,dhtml layout,css,dom,api,library,demo,javascript,code,unobtrusive dhtml,dom2 events,dynamic forms,animation,ellipse,parametric equation,object-oriented javascript'> 10 <link rel='stylesheet' type='text/css' href='../../css/v3.css'>Additional matches viewable in cache of ch05/x/docs/x_reference.html.- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -502 <div class="misc">Parameters:</div> 503 <div class="para"><b>ele</b> - id string or object reference</div> 504 <div class="para"><b>fnDragStart</b> - this function will be called on mousedown on ele</div> 505 <div class="para"><b>fnDrag</b> - this function will be called on each mousemove during dragging</div> 506 <div class="para"><b>fnDragEnd</b> - this function will be called on mouseup on ele</div> 507 <div class="misc">Uses: xGetElementById(), xAddEventListener(), xRemoveEventListener(), xEvent(), xParent(), xMoveTo()</div> 508 <div class="misc">File: x_drag.js</div> 509 <div class="misc">Demo: <a href='../examples/drag1.html'>Drag1</a></div>
ch06/x/docs/x_reference.html (932 lines)
8 <meta name='description' content='Cross-Browser DHTML Libraries and Applications'> 9 <meta name='keywords' content='dhtml,crossbrowser,tooltips,menu,collapsible,dhtml drag drop,downgradeable layout,dynamic select,image rollover,dhtml layout,css,dom,api,library,demo,javascript,code,unobtrusive dhtml,dom2 events,dynamic forms,animation,ellipse,parametric equation,object-oriented javascript'> 10 <link rel='stylesheet' type='text/css' href='../../css/v3.css'>Additional matches viewable in cache of ch06/x/docs/x_reference.html.- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -502 <div class="misc">Parameters:</div> 503 <div class="para"><b>ele</b> - id string or object reference</div> 504 <div class="para"><b>fnDragStart</b> - this function will be called on mousedown on ele</div> 505 <div class="para"><b>fnDrag</b> - this function will be called on each mousemove during dragging</div> 506 <div class="para"><b>fnDragEnd</b> - this function will be called on mouseup on ele</div> 507 <div class="misc">Uses: xGetElementById(), xAddEventListener(), xRemoveEventListener(), xEvent(), xParent(), xMoveTo()</div> 508 <div class="misc">File: x_drag.js</div> 509 <div class="misc">Demo: <a href='../examples/drag1.html'>Drag1</a></div>
 | Source code below from: Web Standards Programmer's Reference : HTML, CSS, JavaScript, Perl, Python, and PHP By Steven M. Schafer Published 05 August, 2005 Average rating 
Powells
Alibris
|
ProgWeb Online/Chapter Code Snippets/ch22.txt (233 lines)
6 function shudder() { 7 // Move the document window up and down 5 times 8 for (var i=1; i<= 5; i++) {- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -47 Length: <input type="text" name="addlength" size="5" /><br /> 48 Address: <input type="text" name="address" size="30" onkeyup="dolength();"/> 49 </form>- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -68 <p><form name="form1" action="handler.cgi" method="post"> 69 <input type="checkbox" name="list" /> one<br /> 70 <input type="checkbox" name="list" /> two<br /> 71 <input type="checkbox" name="list" /> three<br /> 72 <input type="checkbox" name="list" /> four<br /> 73 <input type="checkbox" name="list" /> five<br /> 74 <input type="checkbox" name="list" /> six<br /> 75 <input type="checkbox" name="list" /> seven<br /> 76 <input type="button" name="x" value="checkall" 77 onclick="checkall(document.form1.list);" /><br /> 78 </form>- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -145 <style type="text/css"> 146 ul.hidelist li { display: none; } 147 ul.showlist li { display: block; } 148 </style>- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -150 151 function hideNreveal(list) { 152 if (list.className == "hidelist") { 153 list.className = "showlist"; 154 } else { 155 list.className = "hidelist"; 156 }- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -166 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 167 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 168 sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 169 mollit anim id est laborum.</p> 170 <p> 171 <ul id="list1" class="hidelist" 172 onclick="hideNreveal(this);">An unordered list. 173 <li>Item 1</li>- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -182 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 183 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 184 sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 185 mollit anim id est laborum.</p>- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -210 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 211 dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 212 nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 213 culpa qui officia deserunt mollit anim id est laborum.</p>- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -217 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 218 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 219 sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 220 mollit anim id est laborum.</p>- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -224 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 225 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 226 sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 227 mollit anim id est laborum.</p>
 | Source code below from: Professional JavaScript for Web Developers (Wrox Professional Guides) By Nicholas C. Zakas Published 22 April, 2005 Average rating
Powells
Alibris
|
Examples/Chapter 13/zdragdroplib.js (6 lines)
1 //JavaScript zEvents Library v1.0 by Nicholas C. Zakas, http://www.nczonline.net 2 function zEvent(){this.type=null;this.target=null;this.relatedTarget=null;this.cancelable=false;this.timeStamp=null;this.returnValue=true;};zEvent.prototype.initEvent=function($a,$b){this.type=$a;this.cancelable=$b;this.timeStamp=(new Date()).getTime();};zEvent.prototype.preventDefault=function(){if(this.cancelable){this.returnValue=false;}};function zEventTarget(){this.eventhandlers=new Object();};zEventTarget.prototype.addEventListener=function($a,$z){if(typeof this.eventhandlers[$a]=="undefined"){this.eventhandlers[$a]=new Array;};this.eventhandlers[$a].push($z);};zEventTarget.prototype.dispatchEvent=function($d){$d.target=this;if(typeof this.eventhandlers[$d.type]!="undefined"){for(var i=0;i<this.eventhandlers[$d.type].length;i++){this.eventhandlers[$d.type][i]($d);}};return $d.returnValue;};zEventTarget.prototype.removeEventListener=function($a,$z){if(typeof this.eventhandlers[$a]!="undefined"){var $e=new Array;for(var i=0;i<this.eventhandlers[$a].length;i++){if(this.eventhandlers[$a][i]!=$z){$e.push(this.eventhandlers[$a][i]);}};this.eventhandlers[$a]=$e;}}; 3 //JavaScript zDragDrop Library v1.0 by Nicholas C. Zakas, http://www.nczonline.net 4 function zDrag(){};zDrag.current=null;zDrag.dragging=false;zDrag.isDragging=function(){return this.dragging;};zDrag.setCurrent=function($a){this.current=$a;this.dragging=true;};zDrag.getCurrent=function(){return this.current;};zDrag.clearCurrent=function(){this.current=null;this.dragging=false;};function zDraggable($b,$z){zEventTarget.call(this);this.construct($b,$z);this.diffX=0;this.diffY=0;this.targets=[];};zDraggable.prototype=new zEventTarget;zDraggable.DRAG_X=1;zDraggable.DRAG_Y=2;zDraggable.prototype.addDropTarget=function($e){this.targets.push($e);};zDraggable.prototype.construct=function($b,$z){this.element=$b;this.constraints=$z;var $f=this;var $g=function(){var $h=new zDragDropEvent();$h.initDragDropEvent("dragstart",true);if($f.dispatchEvent($h)){var $i=arguments[0]||window.event;$f.diffX=$i.clientX-$f.element.offsetLeft;$f.diffY=$i.clientY-$f.element.offsetTop;$f.attachEventHandlers();zDrag.setCurrent($f);}};if(this.element.addEventListener){this.element.addEventListener("mousedown",$g,false);}else if(this.element.attachEvent){this.element.attachEvent("onmousedown",$g);}else{throw new Error("zDrag not supported in this browser.");}};zDraggable.prototype.attachEventHandlers=function(){var $f=this;this.tempMouseMove=function(){var $i=arguments[0]||window.event;var $j=$i.clientX-$f.diffX;var $k=$i.clientY-$f.diffY;if($f.constraints&zDraggable.DRAG_X){$f.element.style.left=$j;};if($f.constraints&zDraggable.DRAG_Y){$f.element.style.top=$k;};var $l=new zDragDropEvent();$l.initDragDropEvent("drag",false);$f.dispatchEvent($l);};$f.tempMouseUp=function(){var $i=arguments[0]||window.event;var $e=$f.getDropTarget($i.clientX,$i.clientY);if($e!=null){var $m=new zDragDropEvent();$m.initDragDropEvent("drop",false,$f);$e.dispatchEvent($m);};var $n=new zDragDropEvent();$n.initDragDropEvent("dragend",false);$f.dispatchEvent($n);zDrag.clearCurrent();$f.detachEventHandlers();};if(document.body.addEventListener){document.body.addEventListener("mousemove",this.tempMouseMove,false);document.body.addEventListener("mouseup",this.tempMouseUp,false);}else if(document.body.attachEvent){document.body.attachEvent("onmousemove",this.tempMouseMove);document.body.attachEvent("onmouseup",this.tempMouseUp);}else{throw new Error("zDrag doesn't support this browser.");}};zDraggable.prototype.detachEventHandlers=function(){if(document.body.removeEventListener){document.body.removeEventListener("mousemove",this.tempMouseMove,false);document.body.removeEventListener("mouseup",this.tempMouseUp,false);}else if(document.body.detachEvent){document.body.detachEvent("onmousemove",this.tempMouseMove);document.body.detachEvent("onmouseup",this.tempMouseUp);}else{throw new Error("zDrag doesn't support this browser.");}};zDraggable.prototype.getDropTarget=function(iX,iY){for(var i=0;i<this.targets.length;i++){if(this.targets[i].isOver(iX,iY)){return this.targets[i];}};return null;};zDraggable.prototype.moveTo=function(iX,iY){this.element.style.left=iX+"px";this.element.style.top=iY+"px";};zDraggable.prototype.getLeft=function(){return this.element.offsetLeft;};zDraggable.prototype.getTop=function(){return this.element.offsetTop;};function zDragDropEvent(){zEvent.call(this);};zDragDropEvent.prototype=new zEvent();zDragDropEvent.prototype.initDragDropEvent=function($p,$q,$r){this.initEvent($p,$q);this.relatedTarget=$r;};function zDropTarget($b){zEventTarget.call(this);this.construct($b);};zDropTarget.prototype=new zEventTarget;zDropTarget.prototype.construct=function($b){this.element=$b;};zDropTarget.prototype.isOver=function(iX,iY){var $s=this.element.offsetLeft;var $t=$s+this.element.offsetWidth;var $u=this.element.offsetTop;var $v=$u+this.element.offsetHeight;return(iX>=$s&&iX<=$t&&iY>=$u&&iY<=$v);};zDropTarget.prototype.getLeft=function(){return this.element.offsetLeft;};zDropTarget.prototype.getTop=function(){return this.element.offsetTop;};zDropTarget.prototype.getHeight=function(){return this.element.offsetHeight;};zDropTarget.prototype.getWidth=function(){return this.element.offsetWidth;}; 5 6
Examples/Chapter 11/ListboxShiftUpDownExample.htm (34 lines)
2 <head> 3 <title>Listbox Shift Example</title> 4 <script type="text/javascript" src="listutil.js"></script>Additional matches viewable in cache of Examples/Chapter 11/ListboxShiftUpDownExample.htm.- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -7 var oListbox = document.getElementById("selListbox"); 8 var oTxtIndex = document.getElementById("txtIndex"); 9 ListUtil.shiftUp(oListbox, parseInt(oTxtIndex.value)); 10 } 11 12 function shiftDown() { 13 var oListbox = document.getElementById("selListbox"); 14 var oTxtIndex = document.getElementById("txtIndex");- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -19 <body> 20 <form> 21 <select id="selListbox" size="5"> 22 <option>Original Value 0</option> 23 <option>Original Value 1</option> 24 <option>Original Value 2</option> 25 <option>Original Value 3</option> 26 <option>Original Value 4</option> 27 </select><br /> 28 Click the "Shift Up" or "Shift Down" button to move the item with this position:<br /> 29 <input type="text" id="txtIndex" /><br /> 30 <input type="button" value="Shift Up" onclick="shiftUp()" />
Examples/Chapter 11/listutil.js (61 lines)
1 var ListUtil = new Object(); 2Additional matches viewable in cache of Examples/Chapter 11/listutil.js.- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -44 }; 45 46 ListUtil.shiftUp = function (oListbox, iIndex) { 47 if (iIndex > 0) { 48 var oOption = oListbox.options[iIndex]; 49 var oPrevOption = oListbox.options[iIndex-1]; 50 oListbox.insertBefore(oOption, oPrevOption); 51 } 52 }; 53 54 ListUtil.shiftDown = function (oListbox, iIndex) { 55 if (iIndex < oListbox.options.length - 1) { 56 var oOption = oListbox.options[iIndex];
Examples/Chapter 18/listutil.js (61 lines)
1 var ListUtil = new Object(); 2Additional matches viewable in cache of Examples/Chapter 18/listutil.js.- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -44 }; 45 46 ListUtil.shiftUp = function (oListbox, iIndex) { 47 if (iIndex > 0) { 48 var oOption = oListbox.options[iIndex]; 49 var oPrevOption = oListbox.options[iIndex-1]; 50 oListbox.insertBefore(oOption, oPrevOption); 51 } 52 }; 53 54 ListUtil.shiftDown = function (oListbox, iIndex) { 55 if (iIndex < oListbox.options.length - 1) { 56 var oOption = oListbox.options[iIndex];
 | Source code below from: Constructing Usable Web Menus By Andy Beaumont, Dave Gibbons, Jody Kerr, and Jon Stephens Published January, 2004 Average rating 
Powells
Alibris
|
scripts/cbe_event.js (236 lines)
4 Cross-Browser DHTML for IE 4+, NN 4+, Gecko, and Opera 4+ 5 Download the latest version at cross-browser.com 6 Documentation is in cbe_reference.htmlAdditional matches viewable in cache of scripts/cbe_event.js.- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -181 cbeEvent.altKey = e.altKey; 182 // cbeEvent.metaKey = e.metaKey; 183 if ((e.type == 'click' && e.which == 0) || ((e.type == 'mousedown' || e.type == 'mouseup') && e.which == 1)) 184 cbeEvent.button = cbeEvent.LEFT; 185 cbeEvent.relatedTarget = e.relatedTarget; 186 // from IE4+ Object Model 187 cbeEvent.keyCode = e.which; 188 // cbeEvent.offsetX = e.layerX; 189 // cbeEvent.offsetY = e.layerY; 190 } 191 } 192 193 function _cbeAddEventListener(type, listener, capture) // cbe method 194 { 195 cbeAddEventListener(this.ele, type, listener, capture);
 | Source code below from: JavaScript: A Programmer's Companion from Basics through DHTML By Stefan Koch and Stefan Koch Published 11 November, 2002 Average rating Powells Alibris |
chapter16/dragdrop.htm (192 lines)
10 var dx = 0, dy = 0; 11 var objList = new Array(); 12 var current = null;Additional matches viewable in cache of chapter16/dragdrop.htm.- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -37 38 // Setting the objects 39 createList("image1", "image2", "image3"); 40 41 // Event Capturing 42 if ((isNav4) || (isW3C)) { 43 document.captureEvents(Event.MOUSEDOWN | 44 Event.MOUSEUP); 45 } 46 47 document.onmousedown = startDrag; 48 document.onmouseup = endDrag; 49 } 50 51 function createList() { 52 for (var i = 0; i < createList.arguments.length; i++) { 53 if (isNav4) {
 | Source code below from: JavaScript + Css + DOM Magic (With CD-ROM) By Makiko Itoh Published 15 June, 2002 Average rating 
Powells
Alibris
|
Project Files/project10 files/step6.html (133 lines)
4 <title>the complete HTML with CSS applied</title> 5 6 <link rel="Stylesheet" rev="Stylesheet" href="dropdown_menus.css" media="Screen"> 7 </head> 8 <body> 9 10 <!-- plain (static position) DIV that holds the base banner and contents. --> 11 <div align="center"> 12 13 <table width="750" border="0" cellpadding="0" cellspacing="0"> 14 <tr><td background="images/topmast1.gif" valign="middle" align="left"><img src="images/logo.gif" width="248" height="80" alt="" border="0"></td></tr></table> 15 16 <p class="textlinks"> 17 <b><a href="index.html" class="link">main</a> | <a href="index.html" class="link">about iMusicHistory</a> | <a href="subscribe.html" class="link">subscribe</a> | <a href="members.html" class="link">members</a> | <a href="forums.html" class="link">forums</a> | <a href="newsletter.html" class="link">newsletter</a> | <a href="contact.html" class="link">contact us</a></b></p> 18 19 <table width="750" border="0" cellpadding="0" cellspacing="0"> 20 <tr><td width="350" valign="top" align="left"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,<img src="images/cdstack1.gif" width="112" height="59" alt="cd stack" border="0" align="right" hspace="5"> sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 21 22 <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore <b><a href="subscribe.html" class="link">eu feugiat nulla facilisis</a></b>.<a href="subscribe.html"><img src="images/arrow_rt.gif" width="24" height="10" alt=">" border="0" hspace="3"></a></p></td><td width="20"> </td> 23 24 <td width="350" valign="top" align="left"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> <p><img src="images/headphones1.gif" width="182" height="57" alt="headphones" border="0" align="right" vspace="2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor <b><a href="listen.html" class="link">sit amet</a></b>.<a href="listen.html"><img src="images/arrow_rt.gif" width="24" height="10" alt=">" border="0" hspace="3"></a></p></td></tr></table> 25 26Additional matches viewable in cache of Project Files/project10 files/step6.html.
Project Files/project10 files/step7.html (118 lines)
5 6 <script src="dropdown_menus.js" type="text/javascript"></script> 7 <link rel="Stylesheet" rev="Stylesheet" href="dropdown_menus.css"> 8 9 </head> 10 <body onload="initialize()" onresize="window.location.reload(false)"> 11 12 13 <!-- plain (static position) DIV that holds the base banner and contents. --> 14 <div align="center"> 15 16 <table width="750" border="0" cellpadding="0" cellspacing="0"> 17 <tr><td background="images/topmast1.gif" valign="middle" align="left"><img src="images/logo.gif" width="248" height="80" alt="" border="0"></td></tr></table> 18 19 <p class="textlinks"> 20 <b><a href="index.html" class="link">main</a> | <a href="index.html" class="link">about iMusicHistory</a> | <a href="subscribe.html" class="link">subscribe</a> | <a href="members.html" class="link">members</a> | <a href="forums.html" class="link">forums</a> | <a href="newsletter.html" class="link">newsletter</a> | <a href="contact.html" class="link">contact us</a></b></p> 21 22 <table width="750" border="0" cellpadding="0" cellspacing="0"> 23 <tr><td width="350" valign="top" align="left"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,<img src="images/cdstack1.gif" width="112" height="59" alt="cd stack" border="0" align="right" hspace="5"> sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 24 25 <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore <b><a href="subscribe.html" class="link">eu feugiat nulla facilisis</a></b>.<a href="subscribe.html"><img src="images/arrow_rt.gif" width="24" height="10" alt=">" border="0" hspace="3"></a></p></td><td width="20"> </td> 26 27 <td width="350" valign="top" align="left"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> <p><img src="images/headphones1.gif" width="182" height="57" alt="headphones" border="0" align="right" vspace="2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor <b><a href="listen.html" class="link">sit amet</a></b>.<a href="listen.html"><img src="images/arrow_rt.gif" width="24" height="10" alt=">" border="0" hspace="3"></a></p></td></tr></table> 28 29Additional matches viewable in cache of Project Files/project10 files/step7.html.
Project Files/project14 files/inc/productlistings.js (223 lines)
46 var moredesc = new Array(); 47 moredesc[0] = "Carts or wagons of this type made of steel have been made for more than 80 years, but the classic design looks as contemporary as if it were made yesterday. The original designs were inspired by the sleek Art-Deco superliners and trains of the 1920s and 30s.Our interepretation of this classic adds some new features, such as a length-adjustable handle and cushioned wheels. The cart itself can support up to 200 lbs. A hard-fired powder enamel finish makes a virtually scratch-proof surface on both the cart and the handle. Wheels can be removed and replaced." 48 49 moredesc[1] = "The sleek design of this tricycle was doubtlessly inspired by the jet fighters of World War II. First introduced in 1949 to cater to the baby boom generation, this model was in production until 1965. We've updated the construction of this tricycle with comfortably padded rubber coated handles, inflatable tires, and a padded seat. Recommended for children age 3 to 5. The tricycle can support up to 100 lbs." 50 51 moredesc[2] = "One your child graduates from the Tricycle, what better choice than this stylish bike? The Rocket Flyer was designed and manufactured by the Acme Bicycle Company from 1955 well into the 1970s, and was one of the most popular designs in their line. It's easy to see why - on this bike, your child will have the most stylish ride on the block.We have updated the construction in subtle ways, by exchanging the original hard seat to a spring-cushioned one, upgrading the single gear to three gears, and making it possible to attach training wheels to the back wheel. Recommended for children age 5 through 8. Supports up to 150 lbs."; 52 53 moredesc[3] = "Scooters were first introduced in the 1940s. This design dates back to 1962. The one-piece construction is extremely strong, and can support up to 200 lbs. We have modified the handle to be height-adjustable, so it can be ridden by the whole family. The graceful curving line of the handle to the base is sure to turn heads as your child - or even you - scoot down the street. Classic powder-blue finish is high-fired enamel and will never chip." 54- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -58 59 moredesc[6] = "What boy - or girl for that matter - doesn't want to emulate Dad in the workshop? With this fully functional, yet safe, tool set, he or she can.r The tools are sized for small hands, and are constructed of a special hard-wearing plastic. Recommended for children aged 2 1/2 and up."; 60- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -138 139 function ProductList() { 140 for (i=0; i < productname.length; i++) {
Project Files/project10 files/variation.html (123 lines)
5 6 <script src="dropdown_menus.js" type="text/javascript"></script> 7 <link rel="Stylesheet" rev="Stylesheet" href="dropdown_menus.css"> 8 <script type="text/javascript">- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -27 <table width="750" border="0" cellpadding="0" cellspacing="0"> 28 <tr><td width="350" valign="top" align="left"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,<img src="images/cdstack1.gif" width="112" height="59" alt="cd stack" border="0" align="right" hspace="5"> sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 29- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -31 32 <td width="350" valign="top" align="left"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> <p><img src="images/headphones1.gif" width="182" height="57" alt="headphones" border="0" align="right" vspace="2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor <b><a href="listen.html" class="link">sit amet</a></b>.<a href="listen.html"><img src="images/arrow_rt.gif" width="24" height="10" alt=">" border="0" hspace="3"></a></p></td></tr></table> 33- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -73 <tr> 74 <td class="menu" id="members1" width="100" height="15"><a href="#" onmouseover="controlsubmenu('members','membersmusic','members1','top_members')" onmouseout="closeall()">Online Listening</a></td></tr> 75 <tr><td class="menu" id="members2" width="100" height="15"><a href="#" onmouseover="controlsubmenu('members','membersteacher','members2','top_members')" onmouseout="closeall()">Teachers' Area</a></td></tr>
Project Files/project4 files/final.html (234 lines)
88 <ul style="margin-left: 10px; margin-right: 10px; 89 padding: 0;list-style-type: disc; list-style-position: inside;"> 90 <li>- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -173 <p>If you stick to relative units to specify all of your sizing, then the user can scale 174 the page elements up and down according to her preference. That is the theory anyway.</p> 175
 | Source code below from: JavaScript: The Definitive Guide By David Flanagan Published 15 December, 2001 Average rating
Powells
Alibris
|
js4examples/19-3.js (90 lines)
2 * PortableDrag.js: 3 * beginDrag() is designed to be called from an onmousedown event handler. 4 * elementToDrag may be the element that received the mousedown event, or itAdditional matches viewable in cache of js4examples/19-3.js.- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -14 15 // Register the event handlers that will respond to the mousemove events 16 // and the mouseup event that follow this mousedown event. 17 if (document.addEventListener) { // DOM Level 2 Event Model 18 // Register capturing event handlers 19 document.addEventListener("mousemove", moveHandler, true);
js4examples/PortableDrag.js (90 lines)
2 * PortableDrag.js: 3 * beginDrag() is designed to be called from an onmousedown event handler. 4 * elementToDrag may be the element that received the mousedown event, or itAdditional matches viewable in cache of js4examples/PortableDrag.js.- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -14 15 // Register the event handlers that will respond to the mousemove events 16 // and the mouseup event that follow this mousedown event. 17 if (document.addEventListener) { // DOM Level 2 Event Model 18 // Register capturing event handlers 19 document.addEventListener("mousemove", moveHandler, true);
js4examples/19-2.js (60 lines)
2 * Drag.js: 3 * This function is designed to be called from a mousedown event handler. 4 * It registers temporary capturing event handlers for the mousemove andAdditional matches viewable in cache of js4examples/19-2.js.- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -22 23 // Register the event handlers that will respond to the mousemove events 24 // and the mouseup events that follow this mousedown event. Note that 25 // these are registered as capturing event handlers on the document. 26 // These event handlers remain active while the mouse button remains 27 // pressed, and are removed when the button is released. 28 document.addEventListener("mousemove", moveHandler, true); 29 document.addEventListener("mouseup", upHandler, true); 30
js4examples/Drag.js (60 lines)
2 * Drag.js: 3 * This function is designed to be called from a mousedown event handler. 4 * It registers temporary capturing event handlers for the mousemove andAdditional matches viewable in cache of js4examples/Drag.js.- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -22 23 // Register the event handlers that will respond to the mousemove events 24 // and the mouseup events that follow this mousedown event. Note that 25 // these are registered as capturing event handlers on the document. 26 // These event handlers remain active while the mouse button remains 27 // pressed, and are removed when the button is released. 28 document.addEventListener("mousemove", moveHandler, true); 29 document.addEventListener("mouseup", upHandler, true); 30
js4examples/16-1.html (146 lines)
61 Cookie.prototype.load = function() { 62 // First, get a list of all cookies that pertain to this document. 63 // We do this by reading the magic Document.cookie property.- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -66 67 // Now extract just the named cookie from that list. 68 var start = allcookies.indexOf(this.$name + '=');- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -75 // Now that we've extracted the value of the named cookie, we've 76 // got to break that value down into individual state variable 77 // names and values. The name/value pairs are separated from each- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -133 // expiration date will be reset to 10 days from this most recent visit. 134 // Also, store them again to save the updated visits state variable. 135 visitordata.store();
 | Source code below from: JavaScript Application Cookbook By Jerry Bradenbaugh Published 11 October, 1999 Average rating 
Powells
Alibris
|
JSAppCookBook/ch01/records.js (43 lines)
6 "Left-Right Scroll|JavaScript application that scrolls web pages from left to right|http://www.serve.com/hotsyte/wildman/autoscroll/auto_scroll.html", 7 "Drop Box|JavaScript application that facilitates web site navigstion with <SELECT> lists|http://www.serve.com/hotsyte/wildman/dropbox/selfrm.html", 8 "E-mail Submission|JavaScript application that sends commands to LISTSERV mail servers|http://www.serve.com/hotsyte/wildman/email_submit/email_submit.html", 9 "Membership Application|JavaScript application that allows users to apply for online membership|http://www.serve.com/hotsyte/wildman/members_app/member_app.html", 10 "HotSyte- The JavaScript Resource|Home page for tutorials, examples, scripts, links, instruction, Netscape articles, editorials, links, newsgroups, JavaScript books, a JavaScript web ring, and web development software|http://www.serve.com/hotsyte/", 11 "Instruction|JavaScript instruction, tutorials, links, examples, and downloadable or cut-and-paste scripts|http://www.serve.com/hotsyte/instruct.html", 12 "Interaction|JavaScript newsgroups, bulletin boards, mailing lists|http://www.serve.com/hotsyte/interact.html", 13 "Editorials|JavaScript articles with tips, dos and don'ts, and other advice about JavaScript|http://www.serve.com/hotsyte/editor.html", 14 "Wildman's Archive|Free JavaScript scripts and applications by the legendary Wildman Timothy Hobbs|http://www.serve.com/hotsyte/wildman/",Additional matches viewable in cache of JSAppCookBook/ch01/records.js.
JSAppCookBook/ch01/searchengineMSIE/nav.html (248 lines)
70 for (i = 0; i < profiles.length; i++) { 71 var compareElement = profiles[i].toUpperCase(); 72 if(searchType == SEARCHANY) { var refineElement = compareElement.substring(0,compareElement.indexOf('|HTTP')); }Additional matches viewable in cache of JSAppCookBook/ch01/searchengineMSIE/nav.html.- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -203 "Got JavaScript?|Free assistance with JavaScript or HTML programming problems, help with debugging JavaScript errors|http://www.serve.com/hotsyte/gotjs.html", 204 "HotSyte- The JavaScript Resource|Home page for tutorials, examples, scripts, links, instruction, Netscape articles, editorials, links, newsgroups, JavaScript books, a JavaScript web ring, and web development software|http://www.serve.com/hotsyte/", 205 "Instruction|JavaScript instruction, tutorials, links, examples, and downloadable or cut-and-paste scripts|http://www.serve.com/hotsyte/instruct.html", 206 "Interaction|JavaScript newsgroups, bulletin boards, mailing lists|http://www.serve.com/hotsyte/interact.html", 207 "Editorials|JavaScript articles with tips, dos and don'ts, and other advice about JavaScript|http://www.serve.com/hotsyte/editor.html", 208 "Wildman's Archive|Free JavaScript scripts and applications by the legendary Wildman Timothy Hobbs|http://www.serve.com/hotsyte/wildman/",
JSAppCookBook/ch02/questions.js (90 lines)
1 // For construction new question objects 2 function question(answer, support, question, a, b, c, d) { 3 this.answer = answer; 4 this.support = support; 5 this.question = question;- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -17 new question("a", "When you call a dialog box, the current window loses focus. As soon as you choose a dialog button such as <FONT FACE=Courier>OK</FONT> or <FONT FACE=Courier>Cancel</FONT>, the dialog box will be recalled..... ad infinitum.", "Which of the following is a known JavaScript bug?", "Using window.alert, window.confirm or window.prompt inside onFocus handlers can cause infinite loops", "Using window.alert, window.confirm or window.prompt inside onBlur handlers can cause infinite loops", "Using window.alert, window.confirm or window.prompt inside onLoad handlers can cause infinite loops", "Using window.alert, window.confirm or window.prompt inside onFocus handlers can cause infinite loops"), 18 new question("a", "<FONT FACE=Courier>link()</FONT> arrived in 1.0; <FONT FACE=Courier>split()</FONT> and <FONT FACE=Courier>join()</FONT> showed up in 1.1", "Select the method added in JavaScript 1.2:", "concat()", "link()", "split()", "join()"), 19 new question("b", "<FONT FACE=Courier>slice()</FONT> came about in version 1.2", "Select the method not supported by JavaScript 1.1:", "sort()", "slice()", "split()", "reverse()"), 20 new question("b", "All the rest came about in 1.1", "Select the feature added in JavaScript 1.0:", "lowsrc", "link()", "split()", "join()"),- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -23 new question("c", "<FONT FACE=Courier>find()</FONT> accepts zero, one, or three arguments, but not two.", "Choose the bogus call to the find() method:", "find()", "find(string)", "find(string, matchcase)", "find(string, matchcase, backward)"), 24 new question("b", "This property identifies plug-in paths.", "Which object is the proud owner of the filename property:", "document", "Plugin", "FileUpload", "Window"), 25 new question("a", "You must use the same &; notation as you do for HTML character entities.", "Which is the proper syntax for using JavaScript entities?", "<TD WIDTH=&{myVar};>", "<TD WIDTH=100>The answer is &{myVar}</TD>", "<&{myVar} WIDTH=100>", "All of them are fine"),- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -31 new question("c", "When using bitwise operators to evaluate multiple expressions (e.g., <FONT FACE=Courier>(i > 6 & g < 7)</FONT> ), if the first is false, the remaining expressions are not evaluated.", "Which uses short-circuit evaluation?", "watch()", "unwatch()", "bitwise operators", "assignment operators"), 32 new question("d", "Microsoft Internet Explorer 4.x supports the <FONT FACE=Courier>document.all</FONT> object. Netscape Navigator does not.", "Which might you use for browser detection?", "document.location", "document.domain", "document.layer", "document.all"), 33 new question("a", "The <FONT FACE=Courier>watch()</FONT> method in a sense owns its own thread, and does monopolize other processes.", "What is arguably the most resource-efficient way to monitor an object property until it has changed?", "watch()", "setTimeOut()", "setInterval()", "a while loop"), 34 new question("d", "This will strap your processing power in the browser, and not free it up until the object property has changed.", "What is arguably the most resource-inefficient way to monitor an object property until it has changed?", "watch()", "setTimeOut()", "setInterval()", "a while loop"), 35 new question("d", "<FONT FACE=Courier>void</FONT> has the syntax of a method or function, but it is an operator.", "Which best describes <I>void</I>?", "A method", "A function", "A statement", "An operator"), 36 new question("a", "Object signing requires the the signature and other files be stored in a Java Archive (JAR) file.", "Which JavaScript feature uses JAR files?", "Object signing", "Style sheets", "Netcaster channels", "Image rollovers"), 37 new question("d", "The <FONT FACE=Courier>charAt()</FONT> method of the <FONT FACE=Courier>String</FONT> object is supported in JavaScript 1.0, which MSIE 3.x supports.", "Which feature is supported in MSIE 3.x?", "split()", "Image()", "join()", "charAt()"), 38 new question("a", "If you do not set the <FONT FACE=Courier>expires</FONT> attribute, the cookie expires at the end of the browser session.", "What's the default setting for the <I>expires</I> attribute of the document.cookie property?", "The duration of the browser session.", "The duration the current document stays loaded.", "Twenty-four hours from the time the cookie is set.", "There is no default setting."), 39 new question("a", "The <FONT FACE=Courier>onKeyDown</FONT> event must first return true before the <FONT FACE=Courier>onKeyPress</FONT> event will be considered.", "Which of the following is true?", "If onKeyDown returns false, the key-press event is cancelled.", "If onKeyPress returns false, the key-down event is cancelled.", "If onKeyDown returns false, the key-up event is cancelled.", "If onKeyPress returns false, the key-up event is canceled."), 40 new question("c", "JavaScript employs prototype-based inheritance, which helps qualify it as an object-oriented language.", "Which is true of JavaScript?", "JavaScript is not object oriented", "JavaScript employs class-based inheritance", "JavaScript employs prototype-based inheritance", "JavaScript supports pointers"), 41 new question("c", "The <FONT FACE=Courier>FileUpLoad</FONT> object belongs to client-side JavaScript", "Choose the server-side JavaScript object:", "FileUpLoad", "Function", "File", "Date"), 42 new question("d", "The <FONT FACE=Courier>File</FONT> object belongs to server-side JavaScript.", "Choose the client-side JavaScript object:", "Database", "Cursor", "Client", "FileUpLoad"), 43 new question("a", "Though the same <FONT FACE=Courier>setTimeout()</FONT> method can be called multiple times, it only runs its statements once.", "Seek the truth about setTimeout():", "The statement(s) it executes run(s) only once.", "It pauses the script in which it is called.", "clearTimeOut() won't stop its execution.", "The delay is measured in hundredths of a second."),- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -63 new question("c", "The word program sounds good, but is not reserved.", "Which is not a reserved word?", "interface", "short", "program", "throws"), 64 new question("a", "<FONT FACE=Courier>enabledPlugin</FONT> returns a reference to the plugin object that supports the corresponding MIME type (if it is installed).", "Select the property that doesn't hold a Boolean value:", "MimeType.enabledPlugin", "option.defaultSelected", "form.reset.enabled", "image.complete"), 65 new question("c", "Even if you pass nothing, <FONT FACE=Courier>open()</FONT> has a hunch that you will be writing HTML.", "What\'s the default string passed to document.open()?", "application/pdf", "image/gif", "text/html", "text/plain"),- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -70 new question("d", "This prevents the mischevious from storing gigabytes of information on your hard drive.", "What happens to the document.cookie data if it exceeds the maximum size?", "Your script automatically generates a run-time error.", "Your script automatically generates a load-time error.", "All processes using document.cookie are ignored.", "The cookie is truncated to the maximum length."), 71 new question("b", "This only happens in nested tables. NN4.x corrects the problem.", "You\'ve embedded the document.write() method to write some text within a pair of <TD></TD> table tags. Upon loading the file, however, you get some garbled junk on the page where that text should be. What browser are you most likely using?", "MSIE 2.x", "Netscape Navigator 3.x", "Netscape Navigator 4 beta 2", "MSIE 3.02"), 72 new question("a", "Choice b could go too high. Choice c does not return an integer. Choice d does not even access the array", "How would you randomly choose an element from an array named myStuff if the number of elements changes dynamically?", "randomElement = myStuff[Math.floor(Math.random() * myStuff.length)];", "randomElement = myStuff[Math.ceil(Math.random() * myStuff.length)];", "randomElement = myStuff[Math.random(myStuff.length)];", "randomElement = Math.random(myStuff.length);"),- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -80 new question("a", "It does no harm, but looks weird.", "After clicking on a link, your main browser window spawns a small new window and writes some text to it. However, when viewing both window page sources, the small window page source is identical to that of the large. How can this be?", "The function writing to the new window didn\'t close the document stream.", "Gimme a break. It\'d never happen.", "Windows receive the source code of the window that wrote to them.", "Since the new window has no filename, it receives the source code of its parent."), 81 new question("d", "Just another dirty ploy to make you choose from a group of wrong answers.", "Choose another way to write x ? a = b : a = c", "if (\'x\') { a = b; } else { a = c; }", "if (x) { a = c; } else { a = b; }", "x : a = c ? a = b", "All of these are bogus."), 82 new question("c", "<FONT FACE=Courier>exec()</FONT> belongs to the <FONT FACE=Courier>RegExp</FONT> object.", "Which of these is not a method of the Math object?", "atan()", "atan2()", "exec()", "acos()"), 83 new question("a", "How do you give a hidden field focus, anyway?", "Choose the object associated with the onFocus event handler:", "Password", "Hidden", "Both", "Neither"), 84 new question("a", "The <FONT FACE=Courier>window</FONT> object does not listen for it.", "Choose the object associated with the onMouseOut event handler:", "Layer", "Window", "Both", "Neither"), 85 new question("a", "You can load documents into <FONT FACE=Courier>Layer</FONT>s all day, but onUnLoad never happens.", "Choose the object associated with the onUnLoad event handler:", "Window", "Layer", "Both", "Neither"),- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -87 new question("a", "Only the <FONT FACE=Courier>document</FONT> object is associated.", "Choose the object associated with the onKeyPress event handler:", "document", "Layer", "Both", "Neither"), 88 new question("a", "The <FONT FACE=Courier>type</FONT> property would reveal that this is a multiple SELECT list.", "Consider the following HTML: <BR><BR><FORM><BR> <SELECT MULTIPLE><BR> <OPTION>This one<BR> <OPTION>That one<BR> </SELECT><BR></FORM><BR><BR>What does alert(document.forms[0].elements[0].type) display?", "select-multiple", "form element", "select", "multiple"), 89 new question("b", "JavaScript is, in fact, a dynamically-typed language. So variable types can be changed on the fly.", "JavaScript does not support dynamic data typing.", "True", "False", "True as of JavaScript 1.2.", "False as of JavaScript 1.2.") 90 );
JSAppCookBook/ch05/nav.html (394 lines)
11 12 // Define a function to create SELECT lists on the fly 13 function genSelect(name, count, start, select) {- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -31 imgRoll[i] = ""; 32 imgDown[i] = ""; 33 imgLink[i] = "";- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -46 imgRoll = new Array(); 47 imgDown = new Array(); 48 imgLink = new Array();- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -69 "<TH ALIGN=LEFT><FONT FACE=Arial>Rollover Path" + 70 (imgDefaults.mousedown.checked ? "<TH ALIGN=LEFT><FONT FACE=Arial>MouseDown Path" : "") + 71 "<TR><TD><BR></TD></TR>");- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -73 74 // Create a set of form fields for each image group 75 for (i = 0; i < imgPrim.length; i++) {- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -80 "<TD VALIGN=BOTTOM><FONT FACE=Arial SIZE=2><INPUT TYPE=FILE NAME='seci" + i + "' VALUE='" + imgRoll[i] + "'>" + 81 (imgDefaults.mousedown.checked ? "<TD VALIGN=BOTTOM><FONT FACE=Arial SIZE=2><INPUT TYPE=FILE NAME='down" + i + "' VALUE='" + imgDown[i] + "'>" : "") + 82 "<TR>" +- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -87 "<IMG SRC='images/statusbar.jpg'> " + 88 (!imgDefaults.mousedown.checked ?"<TR>" : "") + 89 "<TD VALIGN=BOTTOM><FONT FACE=Arial SIZE=2>" + 90 (!imgDefaults.mousedown.checked ? 91 "</TD><TD VALIGN=BOTTOM><FONT FACE=Arial SIZE=2>" : "") +- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -95 "<IMG SRC='images/hgt.jpg'> " + 96 (!imgDefaults.mousedown.checked ? 97 "<TD VALIGN=BOTTOM><FONT FACE=Arial SIZE=2>" : "") +- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -101 "<TD VALIGN=BOTTOM COLSPAN=" + 102 (!imgDefaults.mousedown.checked ? "3" : "4") + 103 "><BR><HR NOSHADE><BR></TD></TR>");- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -125 } 126 if (imgDefaults.mousedown.checked) { 127 if(imgTemplate['down' + i].value == "") { 128 alert("All images and HREF attributes must have URLs.");- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -164 imgRoll[i] = purify(imgTemplate['seci' + i].value); 165 if (imgDefaults.mousedown.checked) { 166 imgDown[i] = purify(imgTemplate['down' + i].value); 167 }- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -189 "// Define global variables in JavaScript 1.0" + br + 190 "var canRollOver = false;" + br + "var canClickDown = false;" + br + br + 191 lt + "/SCR" + "IPT" + gt + br + br + lt +- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -196 secJavaScript = lt + "SCRIPT LANGUAGE=\"JavaScript1.2\"" + gt + br + br + 197 "// Change canClickDown to true in JavaScript 1.2" + br + 198 "canClickDown = true;" + br + br; 199 200 // Iterate through each of the image groups, and create 201 // the Image() object code for preloading the rollovers- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -218 // If the user specified create the Image() object code for preloading the 219 // images for the rollovers associated with the MouseDown event 220 if (imgDefaults.mousedown.checked) { 221 secJavaScript += "// MouseDown image source #" + (j + 1) + br + "switch" + (j + 1) + "down = new Image(" + 222 (HTML ? fontOpen : "") + imgWdh[j] +- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -224 (HTML ? fontOpen : "") + imgHgt[j] + 225 (HTML ? fontClose : "") + "); " + br + "switch" + (j + 1) + "down.src = '" + 226 (HTML ? fontOpen : "") + (imgPrim[j].indexOf(":\\") != -1 ? pathPrep(imgDown[j]) : imgDown[j]) + 227 (HTML ? fontClose : "") + "';" + br + br;- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -230 // Create A HREF and IMG tags to display the images. Add the 231 // onMouseDown event handler only if specified by the user 232 imageLinks += lt + "!-- <I> Image Link #" + (j + 1) + " </I>//--" + gt + br + lt + "A HREF=\"" +- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -237 (j + 1) + "', 'out', false); display('');\"" + 238 (imgDefaults.mousedown.checked ? 239 br + nbsp + "onMouseDown=\"isDown=!isDown; imageSwap('switch" + (j + 1) + "', 'down', true);\"" : "") + 240 gt + br + lt + "IMG SRC=\"" +- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -256 lt + "SCRIPT LANGUAGE =\"JavaScript\"" + gt + br + br + 257 (imgDefaults.mousedown.checked ? "var isDown = false;" + br + br : "") + 258 "// Conditionally perform the rollovers in JavaScript 1.0" + br +- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -260 nbsp + "if (!canRollOver) { return; }" + br + nbsp + 261 (imgDefaults.mousedown.checked ? "if (!isDown) { " + br + nbsp + nbsp : "") + 262 "document[imageName].src = " + "eval(imageName + imageSuffix + \".src\");" + br + nbsp + 263 (imgDefaults.mousedown.checked ? nbsp + "}" + br + nbsp + "else if (canClickDown) {" + br + 264 nbsp + nbsp + "document[imageName].src = eval(imageName + imageSuffix + \".src\");" + br +- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -288 // to a dynamic web page via the javascript: protocol 289 agregate = primJavaScript + (imgDefaults.mousedown.checked ? scriptClose + secJavaScript : "") + 290 swapCode + primHTML + imageLinks + secHTML;- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -345 <FONT FACE="Arial" SIZE=2> 346 MouseDown 347 </TD>- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -349 <FONT FACE="Arial" SIZE=2> 350 <INPUT TYPE=CHECKBOX NAME="mousedown"> 351 </TD>
JSAppCookBook/ch10/front.html (266 lines)
55 function nextIcons() { 56 // Hide the current group of icons 57 for (var i = bRef.iconNum * iconIdx; i < (bRef.iconNum * iconIdx) + bRef.iconNum; i++) {- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -79 else { 80 bRef.hideSlide("greeting" + document.layers["SetupForm"].document.EntryForm.Greetings.selectedIndex); 81 document.layers["SetupForm"].document.EntryForm.reset(); 82 }- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -91 if(document.all) { 92 // Must be equal to or farther down than the background's top edge 93 if((parseInt(ref.left) >= parseInt(ref2.left)) &&- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -97 (parseInt(ref.left) + parseInt(ref.width) <= parseInt(ref2.left) + parseInt(ref2.width)) && 98 // Must be equal to or farther up than the background's bottom edge 99 (parseInt(ref.top) + parseInt(ref.height) <= parseInt(ref2.top) + parseInt(ref2.height))) {- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -103 else { 104 // Must be equal to or farther down than the background's top edge 105 if((ref.left >= ref2.left) &&- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -109 (ref.left + ref.document.images[0].width <= ref2.left + ref2.document.images[0].width) && 110 // Must be equal to or farther up than the background's bottom edge 111 (ref.top + ref.document.images[0].height <= ref2.top + ref2.document.images[0].height)) {- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -201 <BODY onLoad="resetForm();"> 202 <DIV ID="SetupForm" CLASS="Front"> 203 <FORM NAME="EntryForm" ACTION=http://www.your_domain.com/cgi-bin/greetings/greet.pl" METHOD="POST" TARGET="_top" OnSubmit="return shipGreeting(this);">- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -238 239 // Generate a SELECT list using the greetings array 240 var sel = '<SELECT NAME="Greetings" onChange="showGreeting(this.selectedIndex);">';