■Special characters $ function, 18–21, 136 DOM nodes, 20–21 multiple arguments, 19–20 strings and nodes, 19 $ string, 19 $$ function, 26–28 $$('a[rel]') selector, 28 $$('a[rel~=external]) selector, 28 $$('li.current + li') selector, 28 $$('li.current li') selector, 28 $$('ul#menu a:not([rel])') selector, 28 $$('ul#menu li:not(.current)') selector, 28 $_REQUEST global variable, 63 $A array, 46 $A function, 24–25 $break exception, 47 $break object, 34 $H shortcut, 43 $('input[type="text"]') selector, 28 $super method, 146 $time value, 84 ■Numerics 0px property, 217 50px property, 217 80 per cent rule, 11 ■A a element, 18, 28 absolute mode, 228 absolute positioning, 200–201 abstract code, 311 action attribute, 98 addClassName method, 117–119 addMethods method, 148 addObservers function, 102, 105 administration section, 288 advanced enumeration, 38–40 Enumerable#inject method, 38–39 Enumerable#invoke method, 40 Enumerable#map method, 38–39 Enumerable#pluck method, 40 after value, 59 afterFinish parameter, 241 afterSetup parameter, 241 afterStart parameter, 241 afterUpdate parameter, 241 afterUpdateElement element, 286 Ajax, 49–89 Ajax object, 50–62 dynamic content, 62–74, 89 and Firefox, 308–309 overview, 49 pros and cons of, 49–50 Ajax Autocompleter, 283–285 Ajax classes, 297 Ajax.Autocompleter class, 279, 283 ajax.html file, 57, 59 Ajax.InPlaceEditor, 288–293 options and features, 292–293 overview, 288–290 styling, 291–292 ajax.js file, 50 Ajax.PeriodicalUpdater, 60, 297 Ajax.Request, 52–56, 297 Ajax.Updater, 56–59, 69, 297 alert dialog, 101, 241 alert function, 7 ancestor nodes, 114 ancestors method, 132 anchor, 195 anonymous function, 8, 92 application/json content type, 88 application/json MIME type, 110 application/x-javascript file, 53 arbitrary properties, 6–7 Index 315 arguments, multiple, $ function, 19–20 arguments variable, 24, 25 Array data type, 5 Array object, 33 Array#clear method, 188 Array#reverse method, 188 Array#sort method, 37 Array#uniq method, 189 Array#without method, 189 Array.prototype, 6 arrays, 8, 188–189 associative array, 41 asynchronous communication, 49 autocomplete_players.php file, 284 Autocompleter class, 278 Autocompleter.Local, 279–283 autocompleters, 277–286 overview, 277 using, 278–286 Ajax Autocompleter, 283–285 Autocompleter.Local, 279–283 options and features, 285–286 overview, 278–279 when to use, 277–278 axis option, 296 ■B base classes, 143–144 before value, 59 beforeFinish parameter, 241 beforeSetup parameter, 241 beforeStart parameter, 241 beforeUpdate parameter, 241 big-box class name, 226 blank data type, 4 blank method, 176 block property, 194 block-level elements, visualizing with, 194 blocks, for matting with inline elements, 195–196 blur handler , 104 body tag, 267 border box, 198 border property, 198 borders, 196–198 bottom property, 203 bottom value, 59 box score page, 76 break keyword, 34 breakfast log example, 62–73 client side, 64–67 error handling, 67–73 overview, 62–63 server side, 63–64 breakfast.js file, 102 breakfast.php file, 63, 68 breakfast.php script, 67, 95 breakpoint, 98 browsers compatibility problems, 305–310 capabilities support, 306–307 overview, 305–306 quirks, 307–309 sniffing, 309–310 history of, 91–94 bucket element, 58–59 bugs, 8, 209, 307 builder.js file, 210, 212 ■C callbacks, 241–242, 265–269, 296, 312–313 camelize method, 174–175 cancelLink parameter, 292 cancelText parameter, 292 capabilities support, 306–307 capitalize method, 175 Cascading Style Sheets. See CSS children nodes, 114 class attribute, 118, 127 class name, 118 Class object, 143 Class#addMethods method, 148, 298 Class.cr eate class, 298 Class.create method, 143–144, 304 classes , 142–148 base classes, 143–144 monkeypatching, 148 overview, 142–143 subclasses, 145–147 className property, 118 clear method, 188–189 clearTimeout function, 161 clientHeight property, 198 client-side validation, 102–106 ■INDEX316 clientWidth property, 198 code formatting, 311 code patterns, 297–305 inheritance and mixins, 297–305 keeping track of instances, 302–305 overview, 297–299 setting default options, 299–301 overview, 297 collapsed state, 117 collections, 31–48 advanced enumeration, 38–40 Enumerable#inject method, 38–39 Enumerable#invoke method, 40 Enumerable#map method, 38–39 Enumerable#pluck method, 40 enumerable methods, 34–36 Enumerable#detect method, 35 Enumerable#each method, 34–35 Enumerable#partition method, 36 Enumerable#reject method, 36 Enumerable#select method, 36 source code, 46–48 functional programming, 32–33 hash construct, 41–45 enumerable methods on, 44–45 key safety, 41–42 Object.prototype, 42–44 for loop, 31–32 ObjectRange class, 45–46 overview, 31 sorting, 36–38 turning into arrays, 46 cols parameter, 293 combination effects, 220, 236–240 Effect.BlindUp and Effect.BlindDown, 238–239 Effect.Fade and Effect.Appear, 237–238 Effect.SlideUp and Effect.SlideDown, 239–240 overview, 236–237 comment nodes, and Internet Explorer, 307–308 computeTotalForTable function, 136 configurability, 311–312 Configurable method, 300 Configurable mixin, 301, 312 Connection: close header, 308 console.log function, 7, 157 constraint option, 262 constructor property, 300, 303 containment option, 273 content box, 198 Content-Length header, 308 Content-type header, 87 continue keyword, 34 contributing to script.aculo.us, 209 controls.js file, 210, 212 conventions, 311 core effects, 220 CSS box model, 193–208 CSS positioning, 199–207 absolute positioning, 200–201 offset parents and positioning context, 205–207 with offset properties, 208 overview, 199 relative positioning, 203–204 static positioning, 199 z-index property, 202–203 DHTML properties, 198–199 formatting blocks with inline elements, 195–196 margins, padding, and borders, 196–198 overview, 193–194 visualizing with block-level elements, 194 CSS selector string, 131 currentFrame parameter, 242 currying, 159 custom events, 108–111, 312–313 broadcasting scores, 109–110 listening for scores, 110–111 ov erview, 108–109 ■D dasherize method, 174–175 data types inheritance, 4–5 instance methods, 4 Date type, 182 debugger keyword, 240 decay parameter, 61–62 default action, 98 DEFAULT_OPTIONS property, 300–301 ■INDEX 317 defer function, 163 descendants method, 132 descendants node, 114 destination argument, 22 destroy method, 304 developer control, 277 DHTML, 193. See also CSS box model dictionary, 41 disabled attribute, 127 display property, 194, 196 div container, 65 div element, 135, 280 document argument, 313 document element, 129 document object, 110 Document Object Model. See DOM documentation, 208 document.createTextNode element, 134 document.evaluate function, 307 document.fire function, 110 document.getElementById method, 18, 187, 306 document.getElementsByTagName('* ') method, 307 DOM API nodes, 113–115 overview, 113 DOM behavior pattern, 148–158 overview, 148–150 refactoring, 150–153 reuse, 158 testing, 154–157 DOM extensions, 115–137 node creation, 132–135 node modification, 115–128 addClassName method, 117–119 getStyle method, 119–120 hasClassName method, 117–119 hide method, 115–117 insert method, 120–125 readAttribute method, 126–127 remov e method, 120–125 removeClassName method, 117–119 replace method, 120–123 setStyle method, 119–120 show method, 115–117 toggle method, 115–117 toggleClassName method, 117–119 update method, 120–122 visible method, 115–117 writeAttribute method, 126–128 traversal and collection, 128–132 ancestors method, 132 descendants method, 132 down method, 129–131 immediateDescendants method, 132 navigating nodes, 128–129 next method, 129–131 nextSiblings method, 132 previous method, 129–130 previousSiblings method, 132 select method, 131 siblings method, 132 up method, 129–131 DOM NodeLists, 25 DOM nodes, 20–21 DOM scripting, 92, 101 dom:loaded event, 109, 250 doSomethingCostly method, 163 down method, 129–131 dragdrop.js file, 210, 212 Draggable object, 257 draggables, 257–263 constraint option, 262 ghosting option, 262–263 making, 260–261 overview, 257–259 start, end, and revert effects, 263 zindex option, 263 drop-down menu, 277 droppables, 264–270 callbacks, 265–269 making, 264–265 overview, 264 Droppables object, 257 Droppables.add argument, 270 Droppables.add method, 264 duration argument, 222 dynamic content, Ajax, 62–74, 89 ■E each function, 34 each loop, 35 each method, 33 ■INDEX318 _each method, 47 edit mode, 288 editor_field class, 291 effect callbacks, 241 effect queues, 241 Effect.Appear, 237–238 Effect.Base class, 242, 297 Effect.BlindDown, 238–239 Effect.BlindUp, 238–239 Effect.Fade, 237–238 Effect.Highlight, 233–234, 253, 290 Effect.Morph, 221–226 function of, 222–223 morphing in parallel, 224–226 overview, 221–222 Effect.Move, 228 effects, script.aculo.us, 215–255 adding styles, 247–248 asynchronous, 240–244 callbacks, 241–242 overview, 240–241 queues, 243–244 basics of, 217–220 bringing in help, 248–249 combination effects, 236–240 Effect.BlindUp and Effect.BlindDown, 238–239 Effect.Fade and Effect.Appear, 237–238 Effect.SlideUp and Effect.SlideDown, 239–240 overview, 236–237 defined, 215 Effect.Highlight, 233–234 Effect.Morph, 221–226 function of, 222–223 morphing in parallel, 224–226 overview, 221–222 Effect.Move, 228 Effect.Scale, 230–233 Effect.ScrollTo, 235 overview, 215–220 reasons for use of, 215–216 writing markup, 244–247 Effect.Scale, 230–233 Effect.ScrollTo, 235 effects.js file, 210, 212 Effect.SlideDown, 239–240 Effect.SlideUp, 239–240 Element constructor, 132, 135 Element object, 21 Element#addClassName class, 226 Element#addClassName method, 118 Element#down element, 134 Element#getStyle method, 119 Element#hide control element, 115 Element#identify method, 303 Element#insert method, 124, 133, 170 Element#morph class, 222 Element#readAttribute method, 126, 186 Element#remove method, 125 Element#removeClassName method, 118 Element#replace method, 123 Element#scrollTo function, 235 Element#select class, 152 Element#select method, 136 Element#setStyle class, 221–222, 226 Element#setStyle method, 119, 128, 175 Element#show control element, 115 Element#toggle method, 116 Element#update method, 122, 134, 136, 170 Element#wrap method, 135 Element#writeAttribute method, 126, 134 Element.extend method, 134 Element.extend object, 21 Element.getStyle property, 199 Element.remove object, 19 element.style attribute, 268 empty method, 176 empty text boxes, 107 end effect, 263 end value, 244 endcolor parameter, 234 endsWith method, 176 enhancements, 209 enumerable methods, 34–36, 43, 298 Enumerable#detect method, 35 Enumerable#each method, 34–35 Enumerable#inject method, 38–39 Enumerable#invoke method, 40 Enumerable#map method, 38–39 Enumerable#max method, 37 Enumerable#min method, 37 ■INDEX 319 Enumerable#partition method, 36 Enumerable#pluck method, 40 Enumerable#reject method, 36 Enumerable#select method, 36 Enumerable#sortBy method, 37–38 on hash construct, 44–45 source code, 46–48 error handling, 67–73 escapeHTML method, 170–174 eval function, 182 event argument, 99 Event handlers, 92 event object, 93 Event#element method, 104 Event#preventDefault, 99–101 Event#stop, 99–101 Event#stopPropagation, 99–101 event-driven architecture, 108 Event.observe event, 111 event.preventDefault call, 103 events, 91–111 browsers, 91–94 custom, 108–111 Event#preventDefault, 99–101 Event#stop, 99–101 Event#stopPropagation, 99–101 and forms, 102–108 overview, 91–98 expanded state, 117 exponential decay, 62 ■F fantasy football example, 74–89 Ajax call, 87–89 broadcasting scores, 109–110 code , 80–86 data, 78–80 league, 75–76 listening for scores, 110–111 mocking, 78 overview, 74–75 scoring, 76 stats, 76–77 testing, 86 finishOn option, 242 Firebug, 9, 14 Firebug console, 146 Firefox browser, 9, 308–309 flexible syntax, 8 Foo class, 299–300 food_type parameter, 68 food_type text box, 105 Foo.DEFAULT_OPTIONS property, 300 _fooInstance property, 302 footer cell, 156 for attribute, 127 for loops, 31–32, 34, 47 for.in loop, 24, 42 form element, 107 form parent node, 291 formatting blocks with inline elements, 195–196 Form.getInputs method, 107 forms, and events, 102–108 frequency option, 286 frequency parameter, 60 from method, 33 front option, 244 function literals, 8 function operator, 185 Function#bind, 164–165 Function#curry class, 159–161, 163 Function#defer, 161–163 Function#delay class, 161–163, 219 functional programming, 32–33 functions, 7–8 ■G game.html file, 244, 247–248 GET method, 62 getAttribute method, 126–127 getS tyle method, 119–120 ghosting option, draggables, 262–263 gsub method, 167–169 ■H h2s, 61 handle element, 293 handle option, 260 hasClassName method, 117–119 ■INDEX320 . 279–283 autocompleters, 277–286 overview, 277 using, 278–286 Ajax Autocompleter, 283–285 Autocompleter.Local, 279–283 options and features, 285–286 overview, 278–279 when to use, 277–278 axis option, 296 ■B base. 236–240 Effect.BlindUp and Effect.BlindDown, 238–239 Effect.Fade and Effect.Appear, 237–238 Effect.SlideUp and Effect.SlideDown, 239–240 overview, 236–237 comment nodes, and Internet Explorer, 307–308 computeTotalForTable. 34 contributing to script .aculo. us, 209 controls.js file, 210, 212 conventions, 311 core effects, 220 CSS box model, 193–208 CSS positioning, 199–207 absolute positioning, 200–201 offset parents and positioning context,