├── 01technologies ├── newlisteners.html └── oldlisteners.html ├── 02dom ├── basic_image.gif ├── basic_image2.gif ├── basic_image2_over.gif ├── basic_image_over.gif ├── expandingForm.html ├── rollovers.html └── rollovers.js ├── 03events ├── keycodedetect.html ├── portabledetect.html ├── smartlink.js ├── smartlinks.html ├── tableHighlight.html └── tableHighlight.js ├── 04featuredetection ├── 1-thumb.jpg ├── 1.jpg ├── 2-thumb.jpg ├── 2.jpg ├── 3-thumb.jpg ├── 3.jpg ├── 4-thumb.jpg ├── 4.jpg ├── 5-thumb.jpg ├── 5.jpg ├── scrollImage.html ├── scrollImage.js ├── scrollImage.js~ └── scrollimage.html~ ├── 05animation ├── animated_links.html ├── cancelTips.html ├── cancelTips.html~ ├── cancelTips.js ├── cancelTips.js~ ├── clock.html ├── clock.js ├── clock.js~ ├── remote.gif ├── remote_a.gif ├── risingTooltips.css ├── risingTooltips.html ├── risingTooltips.js ├── risingTooltips.js~ └── trycatch.html ├── 06validation ├── exampleValidation.css ├── exampleValidation.html ├── exampleValidation.js ├── genericValidation.js ├── phpValidation.php ├── serverValidation.php ├── typeahead.html └── typeahead.js ├── 07slidingmenus ├── event-cache.js ├── menu-stage-1.html ├── menu-stage-1.html~ ├── menu-stage-2.html ├── menu-stage-2.html~ ├── menu-stage-3.html ├── menu-stage-3.html~ ├── menu-stage-4.html ├── menu-stage-4.html~ ├── menu-stage-5.html ├── menu-stage-5.html~ ├── menu-stage-6.html ├── menu-stage-6.html~ ├── menu-stage-7.html ├── menu-stage-7.html~ ├── menu-stage-8.html ├── menu-stage-8.html~ ├── sliding-menu-2.css ├── sliding-menu-2.css~ ├── sliding-menu-3.css ├── sliding-menu-3.css~ ├── sliding-menu-4.css ├── sliding-menu-4.css~ ├── sliding-menu-5.css ├── sliding-menu-5.css~ ├── sliding-menu-5.js ├── sliding-menu-5.js~ ├── sliding-menu-6.css ├── sliding-menu-6.css~ ├── sliding-menu-6.js ├── sliding-menu-6.js~ ├── sliding-menu-7.css ├── sliding-menu-7.css~ ├── sliding-menu-7.js ├── sliding-menu-7.js~ ├── sliding-menu-8.css ├── sliding-menu-8.css~ ├── sliding-menu-8.js ├── sliding-menu-8.js~ ├── sliding-menu.css ├── sliding-menu.css~ ├── sliding-menu.html ├── sliding-menu.html~ ├── sliding-menu.js └── sliding-menu.js~ ├── 08remotescripting ├── autoform │ ├── autoform.css │ ├── autoform.html │ ├── autoform.js │ ├── autoform.php │ ├── autoform_save.png │ └── autoform_saved.png ├── beerguide │ ├── beers.php │ ├── beerserver1.php │ ├── beerserver2.php │ ├── first-beer.css │ ├── first-beer.html │ ├── fourth-beer.css │ ├── fourth-beer.js │ ├── fourth-beer.php │ ├── sarissa.js │ ├── second-beer.css │ ├── second-beer.php │ ├── third-beer.css │ ├── third-beer.js │ └── third-beer.php ├── checkusername │ ├── check-username.css │ ├── check-username.html │ ├── check-username.js │ ├── check-username.php │ └── sarissa.js ├── nameresolution │ ├── nameresolution.css │ ├── nameresolution.html │ ├── nameresolution.js │ ├── resolver.php │ └── rslite.js └── simpleiframe │ ├── simple-iframe-2.css │ ├── simple-iframe-2.html │ ├── simple-iframe-2a.png │ ├── simple-iframe-2b.png │ ├── simple-iframe-content-2.html │ ├── simple-iframe-content.html │ └── simple-iframe.html ├── 09servercomms ├── editblog │ ├── IXR.inc.php │ ├── editblog.html │ ├── editblog.js │ ├── example_blogger.php │ └── jsolait │ │ ├── copying.txt │ │ ├── doc │ │ ├── codecs.xhtml │ │ ├── crypto.xhtml │ │ ├── highlight.css │ │ ├── html.css │ │ ├── index.xhtml │ │ ├── jsolait.xhtml │ │ ├── jsonrpc.xhtml │ │ ├── lang.xhtml │ │ ├── stringformat.xhtml │ │ ├── tutorial.xhtml │ │ ├── urllib.xhtml │ │ ├── xml.xhtml │ │ └── xmlrpc.xhtml │ │ ├── init.js │ │ ├── lib │ │ ├── codecs.js │ │ ├── crypto.js │ │ ├── jsonrpc.js │ │ ├── lang.js │ │ ├── urllib.js │ │ ├── xml.js │ │ └── xmlrpc.js │ │ └── missingmixin.js └── filemanager │ ├── aqtree3clickable.css │ ├── aqtree3clickable.js │ ├── dom-drag.js │ ├── fileman.css │ ├── fileman.html │ ├── fileman.js │ ├── getFiles.php │ ├── gnome-fs-directory-accept.png │ ├── gnome-fs-directory-visiting.png │ ├── gnome-fs-directory.png │ ├── moveFiles.php │ ├── sarissa.js │ └── test_data.zip └── 10xpath ├── 10readrss ├── read-rss.html ├── read-rss.js ├── rss-example.rdf ├── sarissa.js ├── sarissa_ieemu_xpath.js ├── sitepoint-dhtmlcss.rdf └── sitepoint-opensource.rdf └── 10simplexpath ├── sarissa.js ├── sarissa_ieemu_xpath.js ├── xpath-example.html └── xpath-example.js /01technologies/newlisteners.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | JavaScript event listeners done the modern way 6 | 20 | 21 | 22 |
23 | 24 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /01technologies/oldlisteners.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | JavaScript event listeners done the old way 6 | 7 | 8 |
9 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /02dom/basic_image.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/dhtml1/95da5460674a4b54247aa9035a87138140c64b02/02dom/basic_image.gif -------------------------------------------------------------------------------- /02dom/basic_image2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/dhtml1/95da5460674a4b54247aa9035a87138140c64b02/02dom/basic_image2.gif -------------------------------------------------------------------------------- /02dom/basic_image2_over.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/dhtml1/95da5460674a4b54247aa9035a87138140c64b02/02dom/basic_image2_over.gif -------------------------------------------------------------------------------- /02dom/basic_image_over.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/dhtml1/95da5460674a4b54247aa9035a87138140c64b02/02dom/basic_image_over.gif -------------------------------------------------------------------------------- /02dom/expandingForm.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Free beer signup form 6 | 7 | 18 | 19 | 31 | 32 | 33 | 34 |

Free beer signup form

35 |
36 | 37 | 38 |
39 | Friends you wish to invite 40 | 43 | 44 |
45 | 46 |
47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /02dom/rollovers.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Modular rollovers 6 | 7 | 13 | 14 | 15 |

Modular rollovers

16 |

Below we have two links, containing images that we want 17 | to change on mouseover.

18 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /02dom/rollovers.js: -------------------------------------------------------------------------------- 1 | function setupRollovers() { 2 | if (!document.getElementsByTagName) 3 | return; 4 | var all_links = document.getElementsByTagName('a'); 5 | for (var i = 0; i < all_links.length; i++) { 6 | var link = all_links[i]; 7 | if (link.className && 8 | (' ' + link.className + ' ').indexOf(' rollover ') != -1) { 9 | if (link.childNodes && 10 | link.childNodes.length == 1 && 11 | link.childNodes[0].nodeName.toLowerCase() == 'img') { 12 | link.onmouseover = mouseover; 13 | link.onmouseout = mouseout; 14 | } 15 | } 16 | } 17 | } 18 | 19 | function find_target(e) 20 | { 21 | /* Begin the DOM events part, which you */ 22 | /* can ignore for now if it's confusing */ 23 | var target; 24 | 25 | if (window.event && window.event.srcElement) 26 | target = window.event.srcElement; 27 | else if (e && e.target) 28 | target = e.target; 29 | if (!target) 30 | return null; 31 | 32 | while (target != document.body && 33 | target.nodeName.toLowerCase() != 'a') 34 | target = target.parentNode; 35 | 36 | if (target.nodeName.toLowerCase() != 'a') 37 | return null; 38 | 39 | return target; 40 | } 41 | 42 | function mouseover(e) { 43 | var target = find_target(e); 44 | if (!target) return; 45 | 46 | // the only child node of the a tag in target will be an img tag 47 | var img_tag = target.childNodes[0]; 48 | 49 | // Take the "src", which names an image called "something.ext", 50 | // Make it point to "something_over.ext" 51 | // This is done with a regular expression 52 | img_tag.src = img_tag.src.replace(/(\.[^.]+)$/, '_over$1'); 53 | } 54 | 55 | function mouseout(e) { 56 | var target = find_target(e); 57 | if (!target) return; 58 | 59 | // the only child node of the A-tag in |target| will be an IMG-tag 60 | var img_tag = target.childNodes[0]; 61 | 62 | // Take the "src", which names an image as "something_over.ext", 63 | // Make it point to "something.ext" 64 | // This is done with a regular expression 65 | img_tag.src = img_tag.src.replace(/_over(\.[^.]+)$/, '$1'); 66 | } 67 | 68 | // When the page loads, set up the rollovers 69 | window.onload = setupRollovers; 70 | 71 | -------------------------------------------------------------------------------- /03events/keycodedetect.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Detect keystrokes 6 | 19 | 20 | 21 |
22 | 23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /03events/portabledetect.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Detect keystrokes 6 | 40 | 41 | 42 |
43 | 44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /03events/smartlink.js: -------------------------------------------------------------------------------- 1 | function addEvent(elm, evType, fn, useCapture) { 2 | // cross-browser event handling for IE5+, NS6 and Mozilla 3 | // By Scott Andrew 4 | if (elm.addEventListener) { 5 | elm.addEventListener(evType, fn, useCapture); 6 | return true; 7 | } else if (elm.attachEvent) { 8 | var r = elm.attachEvent('on' + evType, fn); 9 | return r; 10 | } else { 11 | elm['on' + evType] = fn; 12 | } 13 | } 14 | 15 | // Here's the smart link code 16 | 17 | function handleLink(e) { 18 | var el; 19 | if (window.event && window.event.srcElement) 20 | el = window.event.srcElement; 21 | if (e && e.target) 22 | el = e.target; 23 | if (!el) 24 | return; 25 | 26 | while (el.nodeName.toLowerCase() != 'a' && 27 | el.nodeName.toLowerCase() != 'body') 28 | el = el.parentNode; 29 | if (el.nodeName.toLowerCase() == 'body') 30 | return; 31 | 32 | if (document.getElementById('newwin') && 33 | document.getElementById('newwin').checked) { 34 | window.open(el.href); 35 | if (window.event) { 36 | window.event.cancelBubble = true; 37 | window.event.returnValue = false; 38 | } 39 | if (e && e.stopPropagation && e.preventDefault) { 40 | e.stopPropagation(); 41 | e.preventDefault(); 42 | } 43 | } 44 | } 45 | 46 | function cancelClick() { 47 | if (document.getElementById('newwin') && 48 | document.getElementById('newwin').checked) { 49 | return false; 50 | } 51 | return true; 52 | } 53 | 54 | // here's the bit that installs the listeners 55 | 56 | function addListeners() { 57 | if (!document.getElementById) 58 | return; 59 | 60 | var all_links = document.getElementsByTagName('a'); 61 | for (var i = 0; i < all_links.length; i++) { 62 | addEvent(all_links[i], 'click', handleLink, false); 63 | all_links[i].onclick = cancelClick; 64 | } 65 | } 66 | 67 | addEvent(window, 'load', addListeners, false); 68 | 69 | -------------------------------------------------------------------------------- /03events/smartlinks.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Smart Links 6 | 7 | 16 | 17 | 18 |

Smart Links

19 |

20 | 23 |

24 | 25 |

This page contains several links, such as 26 | SitePoint, 27 | Yahoo, and 28 | Google. 29 | These links should ordinarily open in the same window when 30 | clicked, unless the tickbox is ticked; this will make them open 31 | in a new window. 32 |

33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /03events/tableHighlight.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Highlighted Tables 6 | 7 | 17 | 18 | 19 |

Highlighted Tables

20 | 21 |

A table with highlighting

22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 |
Column 1Column 2Column 3Column 4
Row 11,11,21,31,4
Row 22,12,22,32,4
Row 33,13,23,33,4
Row 44,14,24,34,4
47 | 48 |

A table with different highlighting

49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 |
Column 1Column 2Column 3Column 4
Row 11,11,21,31,4
Row 22,12,22,32,4
Row 33,13,23,33,4
Row 44,14,24,34,4
74 | 75 | 76 | -------------------------------------------------------------------------------- /03events/tableHighlight.js: -------------------------------------------------------------------------------- 1 | function addEvent(elm, evType, fn, useCapture) 2 | // cross-browser event handling for IE5+, NS6+ and Mozilla 3 | // By Scott Andrew 4 | { 5 | if (elm.addEventListener) { 6 | elm.addEventListener(evType, fn, useCapture); 7 | return true; 8 | } else if (elm.attachEvent) { 9 | var r = elm.attachEvent('on' + evType, fn); 10 | return r; 11 | } else { 12 | elm['on' + evType] = fn; 13 | } 14 | } 15 | 16 | // climb up the tree to the supplied tag. 17 | function ascendDOM(e, target) { 18 | while (e.nodeName.toLowerCase() != target && 19 | e.nodeName.toLowerCase() != 'html') 20 | e = e.parentNode; 21 | 22 | return (e.nodeName.toLowerCase() == 'html') ? null : e; 23 | } 24 | 25 | // turn on highlighting 26 | function hi_cell(e) { 27 | var el; 28 | if (window.event && window.event.srcElement) 29 | el = window.event.srcElement; 30 | if (e && e.target) 31 | el = e.target; 32 | if (!el) return; 33 | 34 | el = ascendDOM(el, 'td'); 35 | if (el == null) return; 36 | 37 | var parent_row = ascendDOM(el, 'tr'); 38 | if (parent_row == null) return; 39 | 40 | var parent_table = ascendDOM(parent_row, 'table'); 41 | if (parent_table == null) return; 42 | 43 | // row styling 44 | parent_row.className += ' hi'; 45 | 46 | // column styling 47 | var ci = -1; 48 | for (var i = 0; i < parent_row.cells.length; i++) { 49 | if (el === parent_row.cells[i]) { 50 | ci = i; 51 | } 52 | } 53 | if (ci == -1) return; // this should never happen 54 | 55 | for (var i = 0; i < parent_table.rows.length; i++) { 56 | var cell = parent_table.rows[i].cells[ci]; 57 | cell.className += ' hi'; 58 | } 59 | 60 | } 61 | 62 | // turn off highlighting 63 | function lo_cell(e) { 64 | var el; 65 | if (window.event && window.event.srcElement) 66 | el = window.event.srcElement; 67 | if (e && e.target) 68 | el = e.target; 69 | if (!el) return; 70 | 71 | el = ascendDOM(el, 'td'); 72 | if (el == null) return; 73 | 74 | var parent_row = ascendDOM(el, 'tr'); 75 | if (el == null) return; 76 | 77 | var parent_table = ascendDOM(parent_row, 'table'); 78 | if (el == null) return; 79 | 80 | // row de-styling 81 | parent_row.className = parent_row.className.replace(/\b ?hi\b/, ''); 82 | 83 | // column de-styling 84 | var ci = -1; 85 | for (var i = 0; i < parent_row.cells.length; i++) { 86 | if (el === parent_row.cells[i]) { 87 | ci = i; 88 | } 89 | } 90 | if (ci == -1) return; // this should never happen 91 | 92 | for (var i = 0; i < parent_table.rows.length; i++) { 93 | var cell = parent_table.rows[i].cells[ci]; 94 | cell.className = cell.className.replace(/\b ?hi\b/, ''); 95 | } 96 | } 97 | 98 | function addListeners() { 99 | if (!document.getElementsByTagName) return; 100 | 101 | var all_cells = document.getElementsByTagName('td'); 102 | for (var i = 0; i < all_cells.length; i++) { 103 | addEvent(all_cells[i], 'mouseover', hi_cell, false); 104 | addEvent(all_cells[i], 'mouseout', lo_cell, false); 105 | } 106 | } 107 | 108 | addEvent(window, 'load', addListeners, false); 109 | 110 | -------------------------------------------------------------------------------- /04featuredetection/1-thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/dhtml1/95da5460674a4b54247aa9035a87138140c64b02/04featuredetection/1-thumb.jpg -------------------------------------------------------------------------------- /04featuredetection/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/dhtml1/95da5460674a4b54247aa9035a87138140c64b02/04featuredetection/1.jpg -------------------------------------------------------------------------------- /04featuredetection/2-thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/dhtml1/95da5460674a4b54247aa9035a87138140c64b02/04featuredetection/2-thumb.jpg -------------------------------------------------------------------------------- /04featuredetection/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/dhtml1/95da5460674a4b54247aa9035a87138140c64b02/04featuredetection/2.jpg -------------------------------------------------------------------------------- /04featuredetection/3-thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/dhtml1/95da5460674a4b54247aa9035a87138140c64b02/04featuredetection/3-thumb.jpg -------------------------------------------------------------------------------- /04featuredetection/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/dhtml1/95da5460674a4b54247aa9035a87138140c64b02/04featuredetection/3.jpg -------------------------------------------------------------------------------- /04featuredetection/4-thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/dhtml1/95da5460674a4b54247aa9035a87138140c64b02/04featuredetection/4-thumb.jpg -------------------------------------------------------------------------------- /04featuredetection/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/dhtml1/95da5460674a4b54247aa9035a87138140c64b02/04featuredetection/4.jpg -------------------------------------------------------------------------------- /04featuredetection/5-thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/dhtml1/95da5460674a4b54247aa9035a87138140c64b02/04featuredetection/5-thumb.jpg -------------------------------------------------------------------------------- /04featuredetection/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/dhtml1/95da5460674a4b54247aa9035a87138140c64b02/04featuredetection/5.jpg -------------------------------------------------------------------------------- /04featuredetection/scrollImage.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | ScrollImage demonstration 6 | 7 | 28 | 29 | 30 | 31 |

Scanned documents

32 | 33 |

34 | 38 | 39 | 43 | 44 | 48 | 49 | 53 | 54 | 58 |

59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /04featuredetection/scrollImage.js: -------------------------------------------------------------------------------- 1 | // Based on findPos*, by ppk (http://www.quirksmode.org/js/findpos.html) 2 | function findPosX(obj) { 3 | var curLeft = 0; 4 | if (obj.offsetParent) { 5 | do { 6 | curLeft += obj.offsetLeft; 7 | } while (obj = obj.offsetParent); 8 | } 9 | else if (obj.x) { 10 | curLeft += obj.x; 11 | } 12 | return curLeft; 13 | } 14 | 15 | function findPosY(obj) { 16 | var curTop = 0; 17 | if (obj.offsetParent) { 18 | do { 19 | curTop += obj.offsetTop; 20 | } while (obj = obj.offsetParent); 21 | } 22 | else if (obj.y) { 23 | curTop += obj.y; 24 | } 25 | return curTop; 26 | } 27 | 28 | // cross-browser event handling for IE5+, NS6+ and Mozilla/Gecko 29 | // By Scott Andrew 30 | function addEvent(obj, evType, fn, useCapture) { 31 | if (obj.addEventListener) { 32 | obj.addEventListener(evType, fn, useCapture); 33 | return true; 34 | } else if (obj.attachEvent) { 35 | var r = obj.attachEvent('on' + evType, fn); 36 | return r; 37 | } else { 38 | obj['on' + evType] = fn; 39 | } 40 | } 41 | 42 | var isIE = !window.opera && navigator.userAgent.indexOf('MSIE') != -1; 43 | 44 | addEvent(window, 'load', scrollInit, false); 45 | 46 | function scrollInit() { 47 | if (!document.getElementsByTagName) 48 | return; 49 | var allLinks = document.getElementsByTagName('a'); 50 | for (var i = 0; i < allLinks.length; i++) { 51 | var link = allLinks[i]; 52 | if ((' ' + link.className + ' ').indexOf(' scrollimage ') != -1) { 53 | addEvent(link, 'mousemove', moveListener, false); 54 | } 55 | } 56 | } 57 | 58 | function attVal(element, attName) { 59 | return parseInt(element.getAttribute(attName)); 60 | } 61 | 62 | function moveListener(ev) { 63 | var e = window.event ? window.event : ev; 64 | var t = e.target ? e.target : e.srcElement; 65 | 66 | var mX, mY; 67 | if (e.pageX && e.pageY) { 68 | mX = e.pageX; 69 | mY = e.pageY; 70 | } else if (e.clientX && e.clientY) { 71 | mX = e.clientX; 72 | mY = e.clientY; 73 | if (isIE) { 74 | mX += document.body.scrollLeft; 75 | mY += document.body.scrollTop; 76 | } 77 | } 78 | 79 | var xPos = mX - findPosX(t); 80 | var yPos = mY - findPosY(t); 81 | 82 | if (t.nodeName.toLowerCase() == 'img') 83 | t = t.parentNode; 84 | if (t.nodeName.toLowerCase() == 'a') { 85 | // scaleFactorY = (width(big) - width(small)) / width(small) 86 | var scaleFactorY = 87 | (attVal(t, 'mainy') - attVal(t, 'thumby')) / attVal(t, 'thumby'); 88 | var scaleFactorX = 89 | (attVal(t, 'mainx') - attVal(t, 'thumbx')) / attVal(t, 'thumbx'); 90 | 91 | t.style.backgroundPosition = 92 | (-parseInt(xPos * scaleFactorX)) + 'px ' + 93 | (-parseInt(yPos * scaleFactorY)) + 'px'; 94 | } 95 | } 96 | 97 | -------------------------------------------------------------------------------- /04featuredetection/scrollImage.js~: -------------------------------------------------------------------------------- 1 | // findPos*, by ppk (http://www.quirksmode.org/js/findpos.html) 2 | function findPosX(obj) { 3 | var curLeft = 0; 4 | if (obj.offsetParent) { 5 | while (obj.offsetParent) { 6 | curLeft += obj.offsetLeft 7 | obj = obj.offsetParent; 8 | } 9 | } 10 | else if (obj.x) { 11 | curLeft += obj.x; 12 | } 13 | return curLeft; 14 | } 15 | 16 | function findPosY(obj) { 17 | var curTop = 0; 18 | if (obj.offsetParent) { 19 | while (obj.offsetParent) { 20 | curTop += obj.offsetTop 21 | obj = obj.offsetParent; 22 | } 23 | } 24 | else if (obj.y) { 25 | curTop += obj.y; 26 | } 27 | return curTop; 28 | } 29 | 30 | // cross-browser event handling for IE5+, NS6+ and Mozilla/Gecko 31 | // By Scott Andrew 32 | function addEvent(obj, evType, fn, useCapture){ 33 | if (obj.addEventListener) { 34 | obj.addEventListener(evType, fn, useCapture); 35 | return true; 36 | } else if (obj.attachEvent){ 37 | var r = obj.attachEvent("on"+evType, fn); 38 | return r; 39 | } else { 40 | obj["on"+evType] = fn; 41 | } 42 | } 43 | 44 | var isIE = (!window.opera && navigator.userAgent.indexOf('MSIE') != -1); 45 | 46 | addEvent(window,"load",scrollInit); 47 | 48 | function scrollInit() { 49 | if (!document.getElementsByTagName) 50 | return; 51 | var allLinks = document.getElementsByTagName("a"); 52 | for (var i=0; i 2 | 3 | 4 | Scrollimage demonstration 5 | 6 | 27 | 28 | 29 | 30 |

Scanned documents

31 | 32 |

33 | 35 | 36 | 38 | 39 | 41 | 42 | 44 | 45 | 47 |

48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /05animation/animated_links.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Animated links 6 | 16 | 17 | 18 | 19 |

Animated links

20 | 21 |

This paragraph contains some links: some are local, 22 | others are external. External 23 | links, such as one to SitePoint, 24 | have a class in the CSS that applies a GIF image to them and an animated image when 25 | moused over.

26 | 27 | 28 | -------------------------------------------------------------------------------- /05animation/cancelTips.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 16 | 17 | 18 | Home 19 |

 

20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /05animation/cancelTips.html~: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 13 | 14 | 15 | 16 | Home 17 |

 

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /05animation/cancelTips.js: -------------------------------------------------------------------------------- 1 | function addEvent(elm, evType, fn, useCapture) { 2 | if (elm.addEventListener) { 3 | elm.addEventListener(evType, fn, useCapture); 4 | return true; 5 | } else if (elm.attachEvent) { 6 | var r = elm.attachEvent('on' + evType, fn); 7 | return r; 8 | } else { 9 | elm['on' + evType] = fn; 10 | } 11 | } 12 | 13 | function init() { 14 | if (!document.getElementById) return; 15 | var mylink = document.getElementById('mylink'); 16 | addEvent(mylink, 'mouseover', mover, false); 17 | addEvent(mylink, 'mouseout', mout, false); 18 | } 19 | 20 | function mover() { 21 | TIMEOUT_ID = setTimeout( 22 | 'document.getElementById("explain").innerHTML' + 23 | ' = "Return to the homepage"', 24 | 2000); 25 | } 26 | 27 | function mout() { 28 | // put in an   placeholder to clear the current content 29 | document.getElementById("explain").innerHTML = " "; 30 | clearTimeout(TIMEOUT_ID); 31 | } 32 | 33 | var TIMEOUT_ID; 34 | addEvent(window, 'load', init, false); 35 | 36 | -------------------------------------------------------------------------------- /05animation/cancelTips.js~: -------------------------------------------------------------------------------- 1 | function addEvent(elm, evType, fn, useCapture) { 2 | if (elm.addEventListener) { 3 | elm.addEventListener(evType, fn, useCapture); 4 | return true; 5 | } else if (elm.attachEvent) { 6 | var r = elm.attachEvent("on"+evType, fn); 7 | return r; 8 | } else { 9 | elm['on'+evType] = fn; 10 | } 11 | } 12 | 13 | function init() { 14 | if (!document.getElementById) return; 15 | var mylink = document.getElementById("mylink"); 16 | addEvent(mylink,"mouseover",mover); 17 | addEvent(mylink,"mouseout",mout); 18 | } 19 | 20 | function mover() { 21 | TIMEOUT_ID = setTimeout( 22 | 'document.getElementById("explain").firstChild.nodeValue' + 23 | ' = "Return to the homepage"', 24 | 2000); 25 | } 26 | 27 | function mout() { 28 | // put in an   placeholder to clear the current content 29 | document.getElementById("explain").firstChild.nodeValue = " \0xA0"; 30 | clearTimeout(TIMEOUT_ID); 31 | } 32 | 33 | var TIMEOUT_ID; 34 | addEvent(window,"load",init); 35 | 36 | -------------------------------------------------------------------------------- /05animation/clock.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 12 | 13 | 14 |   15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /05animation/clock.js: -------------------------------------------------------------------------------- 1 | function addEvent(elm, evType, fn, useCapture) { 2 | if (elm.addEventListener) { 3 | elm.addEventListener(evType, fn, useCapture); 4 | return true; 5 | } else if (elm.attachEvent) { 6 | var r = elm.attachEvent('on' + evType, fn); 7 | return r; 8 | } else { 9 | elm['on' + evType] = fn; 10 | } 11 | } 12 | 13 | function init() { 14 | if (!document.getElementById) 15 | return; 16 | var clock = document.getElementById('clock'); 17 | if (!clock.innerHTML) 18 | return; 19 | setInterval(function() { update(clock); }, 1000); 20 | } 21 | 22 | function update(clock) { 23 | var d = new Date(); 24 | var digits, readout = ''; 25 | 26 | digits = d.getHours(); 27 | readout += (digits > 9 ? '' : '0') + digits + ':'; 28 | 29 | digits = d.getMinutes(); 30 | readout += (digits > 9 ? '' : '0') + digits + ':'; 31 | 32 | digits = d.getSeconds(); 33 | readout += (digits > 9 ? '' : '0') + digits; 34 | 35 | clock.innerHTML = readout; 36 | } 37 | 38 | addEvent(window, 'load', init, false); 39 | 40 | -------------------------------------------------------------------------------- /05animation/clock.js~: -------------------------------------------------------------------------------- 1 | function addEvent(elm, evType, fn, useCapture) { 2 | if (elm.addEventListener) { 3 | elm.addEventListener(evType, fn, useCapture); 4 | return true; 5 | } else if (elm.attachEvent) { 6 | var r = elm.attachEvent('on' + evType, fn); 7 | return r; 8 | } else { 9 | elm['on' + evType] = fn; 10 | } 11 | } 12 | 13 | function init() { 14 | if (!document.getElementById) 15 | return; 16 | var clock = document.getElementById('clock'); 17 | if (!clock.innerHTML) 18 | return; 19 | setInterval(function() { update(clock); }, 1000); 20 | } 21 | 22 | function update(clock) { 23 | var d = new Date(); 24 | var digits, readout = ''; 25 | 26 | digits = d.getHours(); 27 | readout += ((digits > 9 ) ? '' : '0') + digits + ':'; 28 | 29 | digits = d.getMinutes(); 30 | readout += ((digits > 9 ) ? '' : '0') + digits + ':'; 31 | 32 | digits = d.getSeconds(); 33 | readout += ((digits > 9 ) ? '' : '0') + digits; 34 | 35 | clock.innerHTML = readout; 36 | } 37 | 38 | addEvent(window, 'load', init, false); 39 | 40 | -------------------------------------------------------------------------------- /05animation/remote.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/dhtml1/95da5460674a4b54247aa9035a87138140c64b02/05animation/remote.gif -------------------------------------------------------------------------------- /05animation/remote_a.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/dhtml1/95da5460674a4b54247aa9035a87138140c64b02/05animation/remote_a.gif -------------------------------------------------------------------------------- /05animation/risingTooltips.css: -------------------------------------------------------------------------------- 1 | ul, div#extra { 2 | display: block; 3 | background-color: blue; 4 | position: absolute; 5 | top: 30px; 6 | left: 0; 7 | width: 100%; 8 | height: 2em; 9 | padding: 0; 10 | margin: 0; 11 | z-index: 20; 12 | } 13 | 14 | div#extra { 15 | z-index: 10; 16 | } 17 | 18 | li { 19 | display: inline; 20 | font-weight: bold; 21 | padding: 0; 22 | margin: 0; 23 | } 24 | 25 | li a { 26 | color: white; 27 | background-color: blue; 28 | } 29 | 30 | span { 31 | position: absolute; 32 | top: 0; 33 | background: yellow; 34 | border: 1px solid blue; 35 | border-width: 1px 1px 0 1px; 36 | display: none; 37 | } 38 | 39 | -------------------------------------------------------------------------------- /05animation/risingTooltips.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /05animation/risingTooltips.js: -------------------------------------------------------------------------------- 1 | var rH = { 2 | addEvent: function(elm, evType, fn, useCapture) { 3 | // addEvent cross-browser event handling for IE5+, NS6 and Mozilla 4 | // By Scott Andrew 5 | if (elm.addEventListener) { 6 | elm.addEventListener(evType, fn, useCapture); 7 | return true; 8 | } else if (elm.attachEvent) { 9 | var r = elm.attachEvent('on' + evType, fn); 10 | return r; 11 | } else { 12 | elm['on' + evType] = fn; 13 | } 14 | }, 15 | 16 | init: function() { 17 | 18 | // get the header links 19 | if (!document.getElementsByTagName || !document.getElementById) 20 | return; 21 | var navList = document.getElementById('nav'); 22 | rH.links = navList.getElementsByTagName('a'); 23 | 24 | var extra = document.getElementById('extra'); 25 | 26 | for (var i = 0; i < rH.links.length; i++) { 27 | 28 | // install event listeners 29 | rH.addEvent(rH.links[i], 'mouseover', rH.mOver, false); 30 | rH.addEvent(rH.links[i], 'mouseout', rH.mOut, false); 31 | 32 | // move the corresponding span into the extra div 33 | var theLi = rH.links[i].parentNode; 34 | var theSpan = theLi.getElementsByTagName('span')[0]; 35 | extra.appendChild(theSpan); 36 | theSpan.style.display = 'block'; 37 | 38 | // remember where the span is, and what's happening 39 | rH.links[i].tipSpan = theSpan; 40 | rH.links[i].tipState = 'none'; 41 | 42 | } 43 | setInterval(rH.moveLinks, 50); // test with 500 44 | }, 45 | 46 | mOver: function(e) { 47 | var link; 48 | if (e && e.target) 49 | link = e.target; 50 | if (window.event && window.event.srcElement) 51 | link = window.event.srcElement; 52 | if (!link) 53 | return; 54 | 55 | if (link.nodeType == 3) { 56 | link = link.parentNode; // Fix for Safari 57 | } 58 | 59 | if (link.tipState != 'full' ) { 60 | link.tipState = 'rising'; 61 | } 62 | }, 63 | 64 | mOut: function(e) { 65 | var link; 66 | if (e && e.target) 67 | link = e.target; 68 | if (window.event && window.event.srcElement) 69 | link = window.event.srcElement; 70 | if (!link) 71 | return; 72 | 73 | if (link.nodeType == 3) { 74 | link = link.parentNode; // Fix for Safari 75 | } 76 | 77 | if (link.tipState != 'none' ) { 78 | link.tipState = 'falling'; 79 | } 80 | }, 81 | 82 | moveLinks: function() { 83 | for (var i = 0; i < rH.links.length; i++) { 84 | var link = rH.links[i]; 85 | if (link.tipState == 'none' || 86 | link.tipState == 'full') { 87 | continue; 88 | } 89 | var theSpan = link.tipSpan; 90 | var height = parseInt(theSpan.style.top); 91 | if (isNaN(height)) { 92 | height = 0; 93 | } 94 | if (link.tipState == 'rising') { 95 | height -= 2; 96 | if (height <= -theSpan.offsetHeight) { 97 | link.tipState = 'full'; 98 | } 99 | } else { 100 | height += 2; 101 | if (height >= 0) { 102 | link.tipState = 'none'; 103 | } 104 | } 105 | theSpan.style.top = height + 'px'; 106 | } 107 | }, 108 | 109 | links: [] 110 | }; 111 | 112 | rH.addEvent(window, 'load', rH.init, false); 113 | 114 | -------------------------------------------------------------------------------- /05animation/risingTooltips.js~: -------------------------------------------------------------------------------- 1 | 2 | var rH = { 3 | addEvent: function(elm, evType, fn, useCapture) { 4 | // addEvent cross-browser event handling for IE5+, NS6 and Mozilla 5 | // By Scott Andrew 6 | if (elm.addEventListener) { 7 | elm.addEventListener(evType, fn, useCapture); 8 | return true; 9 | } else if (elm.attachEvent) { 10 | var r = elm.attachEvent('on' + evType, fn); 11 | return r; 12 | } else { 13 | elm['on' + evType] = fn; 14 | } 15 | }, 16 | 17 | init: function() { 18 | 19 | // get the header links 20 | if (!document.getElementsByTagName || !document.getElementById) 21 | return; 22 | var navList = document.getElementById('nav'); 23 | rH.links = navList.getElementsByTagName('a'); 24 | 25 | var extra = document.getElementById('extra'); 26 | 27 | for (var i = 0; i < rH.links.length; i++) { 28 | 29 | // install event handlers 30 | rH.addEvent(rH.links[i], 'mouseover', rH.mOver, false); 31 | rH.addEvent(rH.links[i], 'mouseout', rH.mOut, false); 32 | 33 | // move the corresponding span into the extra div 34 | var theLi = rH.links[i].parentNode; 35 | var theSpan = theLi.getElementsByTagName('span')[0]; 36 | extra.appendChild(theSpan); 37 | theSpan.style.display = 'block'; 38 | 39 | // remember where the span is, and what's happening 40 | rH.links[i].tipSpan = theSpan; 41 | rH.links[i].tipState = 'none'; 42 | 43 | } 44 | setInterval(rH.moveLinks, 50); // test with 500 45 | }, 46 | 47 | mOver: function(e) { 48 | var link; 49 | if (e && e.target) 50 | link = e.target; 51 | if (window.event && window.event.srcElement) 52 | link = window.event.srcElement; 53 | if (!link) 54 | return; 55 | 56 | if (link.nodeType == Node.TEXT_NODE) { 57 | link = link.parentNode; // Fix for Safari 58 | } 59 | 60 | if (link.tipState != 'full' ) { 61 | link.tipState = 'rising'; 62 | } 63 | }, 64 | 65 | mOut: function(e) { 66 | var link; 67 | if (e && e.target) 68 | link = e.target; 69 | if (window.event && window.event.srcElement) 70 | link = window.event.srcElement; 71 | if (!link) 72 | return; 73 | 74 | if (link.nodeType == Node.TEXT_NODE) { 75 | link = link.parentNode; // Fix for Safari 76 | } 77 | 78 | if (link.tipState != 'none' ) { 79 | link.tipState = 'falling'; 80 | } 81 | }, 82 | 83 | moveLinks: function() { 84 | 85 | for (var i = 0; i < rH.links.length; i++) { 86 | var link = rH.links[i]; 87 | if (link.tipState == 'none' || 88 | link.tipState == 'full') { 89 | continue; 90 | } 91 | var theSpan = link.tipSpan; 92 | var height = parseInt(theSpan.style.top); 93 | if (isNaN(height)) { 94 | height = 0; 95 | } 96 | if (link.tipState == 'rising') { 97 | height -= 2; 98 | if (height <= -theSpan.offsetHeight) { 99 | link.tipState = 'full'; 100 | } 101 | } else { 102 | height += 2; 103 | if (height >= 0) { 104 | link.tipState = 'none'; 105 | } 106 | } 107 | theSpan.style.top = height + 'px'; 108 | } 109 | }, 110 | 111 | links: [] 112 | } 113 | 114 | rH.addEvent(window, 'load', rH.init, false); 115 | 116 | -------------------------------------------------------------------------------- /05animation/trycatch.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /06validation/exampleValidation.css: -------------------------------------------------------------------------------- 1 | input { 2 | border-width: 1px; 3 | border-style: solid; 4 | border-color: #ccc #666 #666 #ccc; 5 | padding: 3px; 6 | color: #666; 7 | } 8 | 9 | span.errormessage { 10 | color: red; 11 | } 12 | -------------------------------------------------------------------------------- /06validation/exampleValidation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Client-side form validation 5 | 6 | 7 | 8 | 9 | 10 |

Client-side form validation

11 |
12 |

13 | 14 |

15 | 16 |

17 |

18 | 19 |

20 |

21 | 22 |

23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /06validation/exampleValidation.js: -------------------------------------------------------------------------------- 1 | var validationSet = { 2 | 'email': { 3 | 'regexp': /^.+?@.+?\..+$/, 4 | 'error': 'This email address is invalid. ' + 5 | 'It should be of the form someone@example.com.' 6 | }, 7 | 'phone': { 8 | 'regexp': /^[- ()0-9]+$/, 9 | 'error': 'A phone number must be digits only.' 10 | }, 11 | 'country': { 12 | 'regexp': /^[a-zA-Z][a-zA-Z]$/, 13 | 'error': 'Country codes are two letters only. ' + 14 | 'Examples are US, UK or FR.' 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /06validation/genericValidation.js: -------------------------------------------------------------------------------- 1 | var fV = { 2 | addEvent: function(elm, evType, fn, useCapture) { 3 | // cross-browser event handling for IE5+, NS6 and Mozilla 4 | // By Scott Andrew 5 | if (elm.addEventListener) { 6 | elm.addEventListener(evType, fn, useCapture); 7 | return true; 8 | } else if (elm.attachEvent) { 9 | var r = elm.attachEvent('on' + evType, fn); 10 | return r; 11 | } else { 12 | elm['on' + evType] = fn; 13 | } 14 | }, 15 | 16 | init: function() { 17 | for (var i in validationSet) { 18 | if (document.getElementsByName(i)) { 19 | var formField = document.getElementsByName(i)[0]; 20 | fV.addEvent(formField, 'blur', fV.checkValid, false); 21 | 22 | if (!formField.form.validateSubmit) { 23 | fV.addEvent(formField.form, 'submit', fV.checkValidSubmit, false); 24 | formField.form.onsubmit = fV.checkSubmit; // Safari 25 | formField.form.validateSubmit = true; 26 | } 27 | } 28 | } 29 | }, 30 | 31 | checkValidSubmit: function(e) { 32 | var frm = window.event ? window.event.srcElement : e ? e.target : null; 33 | if (!frm) return; 34 | var errText = []; 35 | 36 | for (var i = 0; i < frm.elements.length; i++) { 37 | if (frm.elements[i].name && validationSet[frm.elements[i].name]) { 38 | 39 | var failedE = fV.handleValidity(frm.elements[i]); 40 | 41 | var errDisplay = document.getElementById('error_' + frm.elements[i].name); 42 | 43 | if (failedE && errDisplay) { 44 | errDisplay.innerHTML = 45 | validationSet[failedE.name]['error']; 46 | } 47 | if (!failedE && errDisplay) { 48 | errDisplay.innerHTML = ''; 49 | } 50 | 51 | if (failedE) { 52 | var labels = document.getElementsByTagName('label'); 53 | errText[errText.length] = validationSet[failedE.name]['error']; 54 | for (var j = 0; j < labels.length; j++) { 55 | if (labels[j].htmlFor == failedE.id) { 56 | errText[errText.length - 1] += 57 | ' (field \'' + labels[j].firstChild.nodeValue + '\')'; 58 | } 59 | } 60 | } 61 | } /* end 'if' */ 62 | } /* end 'for' */ 63 | 64 | if (errText.length > 0) { 65 | alert('Please fix the following errors and resubmit:\n' + 66 | errText.join('\n')); 67 | frm.submitAllowed = false; 68 | if (e && e.stopPropagation && e.preventDefault) { 69 | e.stopPropagation(); 70 | e.preventDefault(); 71 | } 72 | if (window.event) { 73 | window.event.cancelBubble = true; 74 | window.event.returnValue = false; 75 | return false; 76 | } 77 | } else { 78 | frm.submitAllowed = true; 79 | } 80 | }, 81 | 82 | checkSubmit: function() { 83 | if (this.attachEvent) return true; 84 | return this.submitAllowed; 85 | }, 86 | 87 | checkValid: function(e) { 88 | var target = window.event ? window.event.srcElement : e ? e.target : null; 89 | if (!target) return; 90 | 91 | var failedE = fV.handleValidity(target); 92 | 93 | var errDisplay = document.getElementById('error_' + target.name); 94 | 95 | if (failedE && errDisplay) { 96 | errDisplay.innerHTML = validationSet[failedE.name]['error']; 97 | failedE.focus(); 98 | } 99 | if (failedE && !errDisplay) { 100 | alert(validationSet[failedE.name]['error']); 101 | } 102 | if (!failedE && errDisplay) { 103 | errDisplay.innerHTML = ''; 104 | } 105 | }, 106 | 107 | handleValidity: function(field) { 108 | if (!field.value) { 109 | return null; 110 | } 111 | var re = validationSet[field.name]['regexp']; 112 | if (!field.value.match(re)) { 113 | return field; 114 | } else { 115 | return null; 116 | } 117 | } 118 | } 119 | 120 | fV.addEvent(window, 'load', fV.init, false); 121 | 122 | -------------------------------------------------------------------------------- /06validation/phpValidation.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Client and Server-side form validation 5 | 6 | 7 | 8 |

Client and server-side form validation

9 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /06validation/serverValidation.php: -------------------------------------------------------------------------------- 1 | array( 5 | 'regexp' => '/^.+?@.+?\..+$/', 6 | 'error' => 'This email address is invalid. ' . 7 | 'It should be of the form someone@example.com.' 8 | ), 9 | 'phone' => array( 10 | 'regexp' => '/^[- ()0-9]+$/', 11 | 'error' => 'A phone number must be digits only.' 12 | ), 13 | 'country' => array( 14 | 'regexp' => '/^[a-zA-Z][a-zA-Z]$/', 15 | 'error' => 'Country codes are two letters only. ' . 16 | 'Examples are US, UK or FR' 17 | ) 18 | ); 19 | 20 | function build_javascript($form_variables) { 21 | $js = "var validationSet = {\n"; 22 | $entries = array(); 23 | foreach ($form_variables as $name => $properties) { 24 | $entry = " '$name': {\n"; 25 | $entry .= " 'regexp': {$properties['regexp']},\n"; 26 | $entry .= " 'error': '".addslashes($properties['error'])."'\n"; 27 | $entry .= " }"; 28 | $entries[] = $entry; 29 | } 30 | $js .= join(",\n", $entries) . "\n"; 31 | $js .= "}\n"; 32 | return $js; 33 | } 34 | 35 | function build_form($form_variables, $errors=array(), $data=array()) { 36 | // Ensure $errors and $data have empty strings for incorrect fields 37 | foreach (array_keys($form_variables) as $name) { 38 | $data[$name] = isset($data[$name]) ? htmlspecialchars($data[$name]) : ''; 39 | if (!isset($errors[$name])) { 40 | $errors[$name] = ''; 41 | } elseif ($errors[$name]) { 42 | $data[$name] = ''; // Don't redisplay invalid data 43 | } 44 | } 45 | 46 | $javascript = build_javascript($form_variables); 47 | 48 | echo << 50 | $javascript 51 | 52 | 53 |
54 |

55 | 56 | 58 | {$errors['email']} 60 |

61 |

62 | 63 | 65 | {$errors['phone']} 67 |

68 |

69 | 70 | 72 | {$errors['country']} 74 |

75 |

76 |
77 | EOD; 78 | } 79 | 80 | // Now generate the form or POST response page 81 | if ($_POST) { 82 | $errors = array(); 83 | foreach ($form_variables as $name => $properties) { 84 | $value = isset($_POST[$name]) ? $_POST[$name] : ''; 85 | if (!preg_match($properties['regexp'], $value)) { 86 | $errors[$name] = $properties['error']; 87 | } 88 | } 89 | if ($errors) { 90 | // Redisplay the form 91 | echo build_form($form_variables, $errors, $_POST); 92 | } else { 93 | // Process contents 94 | echo 'Processing...'; 95 | echo '
'; print_r($_POST); echo '
'; 96 | } 97 | } else { 98 | echo build_form($form_variables); 99 | } 100 | 101 | ?> 102 | -------------------------------------------------------------------------------- /06validation/typeahead.js: -------------------------------------------------------------------------------- 1 | var tADD = { 2 | addEvent: function(elm, evType, fn, useCapture) { 3 | // cross-browser event handling for IE5+, NS6 and Mozilla 4 | // By Scott Andrew 5 | if (elm.addEventListener) { 6 | elm.addEventListener(evType, fn, useCapture); 7 | return true; 8 | } else if (elm.attachEvent) { 9 | var r = elm.attachEvent('on' + evType, fn); 10 | return r; 11 | } else { 12 | elm['on' + evType] = fn; 13 | } 14 | }, 15 | 16 | init: function() { 17 | if (!document.getElementsByTagName) return; 18 | var selects = document.getElementsByTagName('select'); 19 | for (var i = 0; i < selects.length; i++) { 20 | tADD.addEvent(selects[i], 'keydown', tADD.addKey, false); 21 | tADD.addEvent(selects[i], 'keypress', 22 | function(e) { if (e) e.preventDefault(); }, false); 23 | } 24 | }, 25 | 26 | addKey: function(e) { 27 | var t = window.event ? window.event.srcElement : e ? e.target : null; 28 | if (!t) return; 29 | 30 | if (e && e.which) { 31 | var code = e.which; 32 | } else if (e && e.keyCode) { 33 | var code = e.keyCode; 34 | } else if (window.event && window.event.keyCode) { 35 | var code = window.event.keyCode; 36 | } else { 37 | return; 38 | } 39 | 40 | var character = String.fromCharCode(code).toLowerCase(); 41 | if (t.timeout_key) 42 | clearTimeout(t.timeout_key); 43 | 44 | if (!t.keyword) 45 | t.keyword = ''; 46 | 47 | if (code == 8) { 48 | if (t.keyword != '') 49 | t.keyword = t.keyword.substr(0, t.keyword.length - 1); 50 | } else if (code >= 32) { 51 | t.keyword += character; 52 | } 53 | 54 | if (t.keyword == '') { 55 | window.status = ''; 56 | } else { 57 | window.status = 'Searching: ' + t.keyword; 58 | 59 | t.timeout_key = setTimeout( 60 | function() { window.status = t.keyword = ''; }, 61 | 5000); 62 | 63 | var gotoIndex = t.selectedIndex; 64 | for (var i = 0; i < t.options.length; i++) { 65 | if (t.options[i].text.toLowerCase().indexOf(t.keyword) != -1) { 66 | gotoIndex = i; 67 | break; 68 | } 69 | } 70 | setTimeout(function() { t.selectedIndex = gotoIndex; }, 1); 71 | } 72 | 73 | if (window.event) { 74 | window.event.cancelBubble = true; 75 | window.event.returnValue = false; 76 | } else if (e) { 77 | e.stopPropagation(); 78 | e.preventDefault(); 79 | } 80 | } 81 | } 82 | 83 | tADD.addEvent(window, 'load', tADD.init, false); 84 | -------------------------------------------------------------------------------- /07slidingmenus/event-cache.js: -------------------------------------------------------------------------------- 1 | /* EventCache Version 1.0 2 | Copyright 2005 Mark Wubben 3 | 4 | Provides a way for automagically removing events from nodes and thus preventing memory leakage. 5 | See for more information. 6 | 7 | This software is licensed under the CC-GNU LGPL 8 | */ 9 | 10 | /* Implement array.push for browsers which don't support it natively. 11 | Please remove this if it's already in other code */ 12 | if(Array.prototype.push == null){ 13 | Array.prototype.push = function(){ 14 | for(var i = 0; i < arguments.length; i++){ 15 | this[this.length] = arguments[i]; 16 | }; 17 | return this.length; 18 | }; 19 | }; 20 | 21 | /* Event Cache uses an anonymous function to create a hidden scope chain. 22 | This is to prevent scoping issues. */ 23 | var EventCache = function(){ 24 | var listEvents = []; 25 | 26 | return { 27 | listEvents : listEvents, 28 | 29 | add : function(node, sEventName, fHandler, bCapture){ 30 | listEvents.push(arguments); 31 | }, 32 | 33 | flush : function(){ 34 | var i, item; 35 | for(i = listEvents.length - 1; i >= 0; i = i - 1){ 36 | item = listEvents[i]; 37 | 38 | if(item[0].removeEventListener){ 39 | item[0].removeEventListener(item[1], item[2], item[3]); 40 | }; 41 | 42 | /* From this point on we need the event names to be prefixed with 'on" */ 43 | if(item[1].substring(0, 2) != "on"){ 44 | item[1] = "on" + item[1]; 45 | }; 46 | 47 | if(item[0].detachEvent){ 48 | item[0].detachEvent(item[1], item[2]); 49 | }; 50 | 51 | item[0][item[1]] = null; 52 | }; 53 | } 54 | }; 55 | }(); 56 | -------------------------------------------------------------------------------- /07slidingmenus/menu-stage-1.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Sliding menus 6 | 7 | 8 | 9 | 10 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /07slidingmenus/menu-stage-1.html~: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Sliding menus 6 | 7 | 8 | 9 | 10 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /07slidingmenus/menu-stage-2.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Sliding menus 6 | 7 | 8 | 9 | 10 | 11 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /07slidingmenus/menu-stage-2.html~: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Sliding menus 6 | 7 | 8 | 9 | 10 | 11 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /07slidingmenus/menu-stage-3.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Sliding menus 6 | 7 | 8 | 9 | 10 | 11 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /07slidingmenus/menu-stage-3.html~: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Sliding menus 6 | 7 | 8 | 9 | 10 | 11 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /07slidingmenus/menu-stage-4.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Sliding menus 6 | 7 | 8 | 9 | 10 | 11 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /07slidingmenus/menu-stage-4.html~: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Sliding menus 6 | 7 | 8 | 9 | 10 | 11 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /07slidingmenus/menu-stage-5.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Sliding menus 6 | 7 | 8 | 9 | 10 | 11 | 12 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /07slidingmenus/menu-stage-5.html~: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Sliding menus 6 | 7 | 8 | 9 | 10 | 11 | 12 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /07slidingmenus/menu-stage-6.html~: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Sliding menus 6 | 7 | 8 | 9 | 10 | 11 | 12 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /07slidingmenus/menu-stage-7.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Sliding menus 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /07slidingmenus/menu-stage-7.html~: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Sliding menus 6 | 7 | 8 | 9 | 10 | 11 | 12 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /07slidingmenus/menu-stage-8.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Sliding menus 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /07slidingmenus/menu-stage-8.html~: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Sliding menus 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu-2.css: -------------------------------------------------------------------------------- 1 | /* layout styles */ 2 | 3 | /* remove standard HTML list indenting, and display as normal blocks */ 4 | ul.slidingmenu, 5 | ul.slidingmenu ul, 6 | ul.slidingmenu li, 7 | ul.slidingmenu a { 8 | padding: 0; 9 | margin: 0; 10 | display: block; 11 | } 12 | 13 | /* use a fixed width for menu and submenus */ 14 | ul.slidingmenu, 15 | ul.slidingmenu ul { 16 | width: 10em; 17 | } 18 | 19 | /* make li's into clean, moveable blocks */ 20 | ul.slidingmenu li { 21 | list-style-type: none; 22 | position: relative; 23 | } 24 | 25 | /* Make list items do what they're supposed to in IE */ 26 | ul.slidingmenu a { 27 | width: 100%; 28 | } 29 | 30 | /* make sure any ul inside an li (a submenu) takes up zero normal flow */ 31 | ul.slidingmenu ul { 32 | position: absolute; 33 | left: 100%; 34 | top: 0; 35 | } 36 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu-2.css~: -------------------------------------------------------------------------------- 1 | /* layout styles */ 2 | 3 | /* remove standard HTML list indenting, and display as normal blocks */ 4 | ul.slidingmenu, 5 | ul.slidingmenu ul, 6 | ul.slidingmenu li, 7 | ul.slidingmenu a { 8 | padding: 0; 9 | margin: 0; 10 | display: block; 11 | } 12 | 13 | /* use a fixed width for menu and submenus */ 14 | ul.slidingmenu, 15 | ul.slidingmenu ul { 16 | width: 10em; 17 | } 18 | 19 | /* make li's into clean, moveable blocks */ 20 | ul.slidingmenu li { 21 | list-style-type: none; 22 | position: relative; 23 | } 24 | 25 | /* Make list items do what they're supposed to in IE */ 26 | ul.slidingmenu a { 27 | width: 100%; 28 | } 29 | 30 | /* make sure any ul inside an li (a submenu) takes up zero normal flow */ 31 | ul.slidingmenu ul { 32 | position: absolute; 33 | left: 100%; 34 | top: 0; 35 | } 36 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu-3.css: -------------------------------------------------------------------------------- 1 | /* Appearance */ 2 | body { 3 | font-family: sans-serif; 4 | } 5 | 6 | ul.slidingmenu, ul.slidingmenu ul { 7 | border: 1px solid #666; 8 | border-width: 4px 1px 1px 1px; 9 | } 10 | 11 | ul.slidingmenu li { 12 | background: #efe; 13 | text-align: center; 14 | border-bottom: 1px dotted #999; 15 | } 16 | 17 | ul.slidingmenu a { 18 | color: #666; 19 | background: #efe; 20 | text-decoration: none; 21 | } 22 | 23 | ul.slidingmenu a:hover { 24 | background: #cdc; 25 | color: #333; 26 | } 27 | 28 | /* layout styles */ 29 | 30 | /* remove standard HTML list indenting, and display as normal blocks */ 31 | ul.slidingmenu, 32 | ul.slidingmenu ul, 33 | ul.slidingmenu li, 34 | ul.slidingmenu a { 35 | padding: 0; 36 | margin: 0; 37 | display: block; 38 | } 39 | 40 | /* use a fixed width for menu and submenus */ 41 | ul.slidingmenu, 42 | ul.slidingmenu ul { 43 | width: 10em; 44 | } 45 | 46 | /* make li's into clean, moveable blocks */ 47 | ul.slidingmenu li { 48 | list-style-type: none; 49 | position: relative; 50 | } 51 | 52 | /* Make list items do what they're supposed to in IE */ 53 | ul.slidingmenu a { 54 | width: 100%; 55 | } 56 | 57 | /* make sure any ul inside an li (a submenu) takes up zero normal flow */ 58 | ul.slidingmenu ul { 59 | position: absolute; 60 | left: 100%; 61 | top: 0; 62 | } 63 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu-3.css~: -------------------------------------------------------------------------------- 1 | /* Appearance */ 2 | body { 3 | font-family: sans-serif; 4 | } 5 | 6 | ul.slidingmenu, ul.slidingmenu ul { 7 | border: 1px solid #666; 8 | border-width: 4px 1px 1px 1px; 9 | } 10 | 11 | ul.slidingmenu li { 12 | background: #efe; 13 | text-align: center; 14 | border-bottom: 1px dotted #999; 15 | } 16 | 17 | ul.slidingmenu a { 18 | color: #666; 19 | text-decoration: none; 20 | } 21 | 22 | ul.slidingmenu a:hover { 23 | background: #cdc; 24 | color: #333; 25 | } 26 | 27 | /* layout styles */ 28 | 29 | /* remove standard HTML list indenting, and display as normal blocks */ 30 | ul.slidingmenu, 31 | ul.slidingmenu ul, 32 | ul.slidingmenu li, 33 | ul.slidingmenu a { 34 | padding: 0; 35 | margin: 0; 36 | display: block; 37 | } 38 | 39 | /* use a fixed width for menu and submenus */ 40 | ul.slidingmenu, 41 | ul.slidingmenu ul { 42 | width: 10em; 43 | } 44 | 45 | /* make li's into clean, moveable blocks */ 46 | ul.slidingmenu li { 47 | list-style-type: none; 48 | position: relative; 49 | } 50 | 51 | /* Make list items do what they're supposed to in IE */ 52 | ul.slidingmenu a { 53 | width: 100%; 54 | } 55 | 56 | /* make sure any ul inside an li (a submenu) takes up zero normal flow */ 57 | ul.slidingmenu ul { 58 | position: absolute; 59 | left: 100%; 60 | top: 0; 61 | } 62 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu-4.css: -------------------------------------------------------------------------------- 1 | /* Appearance */ 2 | body { 3 | font-family: sans-serif; 4 | } 5 | 6 | ul.slidingmenu, ul.slidingmenu ul { 7 | border: 1px solid #666; 8 | border-width: 4px 1px 1px 1px; 9 | } 10 | 11 | ul.slidingmenu li { 12 | background: #efe; 13 | text-align: center; 14 | border-bottom: 1px dotted #999; 15 | } 16 | 17 | ul.slidingmenu a { 18 | color: #666; 19 | background: #efe; 20 | text-decoration: none; 21 | } 22 | 23 | ul.slidingmenu a:hover { 24 | background: #cdc; 25 | color: #333; 26 | } 27 | 28 | /* layout styles */ 29 | 30 | /* remove standard HTML list indenting, and display as normal blocks */ 31 | ul.slidingmenu, 32 | ul.slidingmenu ul, 33 | ul.slidingmenu li, 34 | ul.slidingmenu a { 35 | padding: 0; 36 | margin: 0; 37 | display: block; 38 | } 39 | 40 | /* use a fixed width for menu and submenus */ 41 | ul.slidingmenu, 42 | ul.slidingmenu ul { 43 | width: 10em; 44 | } 45 | 46 | /* make li's into clean, moveable blocks */ 47 | ul.slidingmenu li { 48 | list-style-type: none; 49 | position: relative; 50 | } 51 | 52 | /* Make list items do what they're supposed to in IE */ 53 | ul.slidingmenu a { 54 | width: 100%; 55 | } 56 | 57 | /* make sure any ul inside an li (a submenu) takes up zero normal flow */ 58 | ul.slidingmenu ul { 59 | position: absolute; 60 | top: -4px; /* the height of the top border */ 61 | left: 100%; 62 | display: none; 63 | } 64 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu-4.css~: -------------------------------------------------------------------------------- 1 | /* Appearance */ 2 | body { 3 | font-family: sans-serif; 4 | } 5 | 6 | ul.slidingmenu, ul.slidingmenu ul { 7 | border: 1px solid #666; 8 | border-width: 4px 1px 1px 1px; 9 | } 10 | 11 | ul.slidingmenu li { 12 | background: #efe; 13 | text-align: center; 14 | border-bottom: 1px dotted #999; 15 | } 16 | 17 | ul.slidingmenu a { 18 | color: #666; 19 | text-decoration: none; 20 | } 21 | 22 | ul.slidingmenu a:hover { 23 | background: #cdc; 24 | color: #333; 25 | } 26 | 27 | /* layout styles */ 28 | 29 | /* remove standard HTML list indenting, and display as normal blocks */ 30 | ul.slidingmenu, 31 | ul.slidingmenu ul, 32 | ul.slidingmenu li, 33 | ul.slidingmenu a { 34 | padding: 0; 35 | margin: 0; 36 | display: block; 37 | } 38 | 39 | /* use a fixed width for menu and submenus */ 40 | ul.slidingmenu, 41 | ul.slidingmenu ul { 42 | width: 10em; 43 | } 44 | 45 | /* make li's into clean, moveable blocks */ 46 | ul.slidingmenu li { 47 | list-style-type: none; 48 | position: relative; 49 | } 50 | 51 | /* Make list items do what they're supposed to in IE */ 52 | ul.slidingmenu a { 53 | width: 100%; 54 | } 55 | 56 | /* make sure any ul inside an li (a submenu) takes up zero normal flow */ 57 | ul.slidingmenu ul { 58 | position: absolute; 59 | top: -4px; /* the height of the top border */ 60 | left: 100%; 61 | display: none; 62 | } 63 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu-5.css: -------------------------------------------------------------------------------- 1 | /* Appearance */ 2 | body { 3 | font-family: sans-serif; 4 | } 5 | 6 | ul.slidingmenu, ul.slidingmenu ul { 7 | border: 1px solid #666; 8 | border-width: 4px 1px 1px 1px; 9 | } 10 | 11 | ul.slidingmenu li { 12 | background: #efe; 13 | text-align: center; 14 | border-bottom: 1px dotted #999; 15 | } 16 | 17 | ul.slidingmenu a { 18 | color: #666; 19 | background: #efe; 20 | text-decoration: none; 21 | } 22 | 23 | ul.slidingmenu a.subheader { 24 | background: #ded; 25 | } 26 | 27 | ul.slidingmenu a:hover { 28 | background: #cdc; 29 | color: #333; 30 | } 31 | 32 | /* layout styles */ 33 | 34 | /* remove standard HTML list indenting, and display as normal blocks */ 35 | ul.slidingmenu, 36 | ul.slidingmenu ul, 37 | ul.slidingmenu li, 38 | ul.slidingmenu a { 39 | padding: 0; 40 | margin: 0; 41 | display: block; 42 | } 43 | 44 | /* use a fixed width for menu and submenus */ 45 | ul.slidingmenu, 46 | ul.slidingmenu ul { 47 | width: 10em; 48 | } 49 | 50 | /* make li's into clean, moveable blocks */ 51 | ul.slidingmenu li { 52 | list-style-type: none; 53 | position: relative; 54 | } 55 | 56 | /* Make list items do what they're supposed to in IE */ 57 | ul.slidingmenu a { 58 | width: 100%; 59 | } 60 | 61 | /* make sure any ul inside an li (a submenu) takes up zero normal flow */ 62 | ul.slidingmenu ul { 63 | position: absolute; 64 | top: -4px; /* the height of the top border */ 65 | left: 100%; 66 | display: none; 67 | } 68 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu-5.css~: -------------------------------------------------------------------------------- 1 | /* Appearance */ 2 | body { 3 | font-family: sans-serif; 4 | } 5 | 6 | ul.slidingmenu, ul.slidingmenu ul { 7 | border: 1px solid #666; 8 | border-width: 4px 1px 1px 1px; 9 | } 10 | 11 | ul.slidingmenu li { 12 | background: #efe; 13 | text-align: center; 14 | border-bottom: 1px dotted #999; 15 | } 16 | 17 | ul.slidingmenu li.subheader { 18 | background: #ded; 19 | } 20 | 21 | ul.slidingmenu a { 22 | color: #666; 23 | text-decoration: none; 24 | } 25 | 26 | ul.slidingmenu a:hover { 27 | background: #cdc; 28 | color: #333; 29 | } 30 | 31 | /* layout styles */ 32 | 33 | /* remove standard HTML list indenting, and display as normal blocks */ 34 | ul.slidingmenu, 35 | ul.slidingmenu ul, 36 | ul.slidingmenu li, 37 | ul.slidingmenu a { 38 | padding: 0; 39 | margin: 0; 40 | display: block; 41 | } 42 | 43 | /* use a fixed width for menu and submenus */ 44 | ul.slidingmenu, 45 | ul.slidingmenu ul { 46 | width: 10em; 47 | } 48 | 49 | /* make li's into clean, moveable blocks */ 50 | ul.slidingmenu li { 51 | list-style-type: none; 52 | position: relative; 53 | } 54 | 55 | /* Make list items do what they're supposed to in IE */ 56 | ul.slidingmenu a { 57 | width: 100%; 58 | } 59 | 60 | /* make sure any ul inside an li (a submenu) takes up zero normal flow */ 61 | ul.slidingmenu ul { 62 | position: absolute; 63 | top: -4px; /* the height of the top border */ 64 | left: 100%; 65 | display: none; 66 | } 67 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu-5.js: -------------------------------------------------------------------------------- 1 | function addEvent(elm, evType, fn, useCapture) { 2 | // cross-browser event handling for IE5+, NS6 and Mozilla 3 | // By Scott Andrew 4 | if (elm.addEventListener) { 5 | elm.addEventListener(evType, fn, useCapture); 6 | return true; 7 | } else if (elm.attachEvent) { 8 | var r = elm.attachEvent('on' + evType, fn); 9 | return r; 10 | } else { 11 | elm['on' + evType] = fn; 12 | } 13 | } 14 | 15 | 16 | function init() { 17 | var uls = document.getElementsByTagName('ul'); 18 | for (var u = 0; u < uls.length; u++) { 19 | if (uls[u].className.search(/\bslidingmenu\b/) == -1) continue; 20 | var lis = uls[u].getElementsByTagName('li'); 21 | for (var i = 0; i < lis.length; i++) { 22 | var node = lis[i]; 23 | if (node.nodeName.toLowerCase() == 'li' && 24 | node.getElementsByTagName('ul').length > 0) { 25 | addEvent(node, 'mouseover', mover, false); 26 | addEvent(node, 'mouseout', mout, false); 27 | node.getElementsByTagName('a')[0].className += ' subheader'; 28 | } 29 | } 30 | } 31 | } 32 | 33 | addEvent(window, 'load', init, false); 34 | 35 | function mover(e) { 36 | var el = window.event ? window.event.srcElement : e ? e.target : null; 37 | if (!el) return; 38 | for (var i = 0; i < el.childNodes.length; i++) { 39 | var node = el.childNodes[i]; 40 | if (node.nodeName.toLowerCase() == 'ul') { 41 | node.style.display = 'block'; 42 | } 43 | } 44 | } 45 | 46 | function mout(e) { 47 | var el = window.event ? window.event.srcElement : e ? e.target : null; 48 | if (!el) return; 49 | for (var i = 0; i < el.childNodes.length; i++) { 50 | var node = el.childNodes[i]; 51 | if (node.nodeName.toLowerCase() == 'ul') { 52 | node.style.display = 'none'; 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu-5.js~: -------------------------------------------------------------------------------- 1 | function addEvent(elm, evType, fn, useCapture) { 2 | // cross-browser event handling for IE5+, NS6 and Mozilla 3 | // By Scott Andrew 4 | if (elm.addEventListener) { 5 | elm.addEventListener(evType, fn, useCapture); 6 | return true; 7 | } else if (elm.attachEvent) { 8 | var r = elm.attachEvent('on' + evType, fn); 9 | return r; 10 | } else { 11 | elm['on' + evType] = fn; 12 | } 13 | } 14 | 15 | 16 | function init() { 17 | var uls = document.getElementsByTagName('ul'); 18 | for (var u = 0; u < uls.length; u++) { 19 | if (uls[u].className.search(/\bslidingmenu\b/) == -1) continue; 20 | var lis = uls[u].getElementsByTagName('li'); 21 | for (var i = 0; i < lis.length; i++) { 22 | var node = lis[i]; 23 | if (node.nodeName.toLowerCase() == 'li' && 24 | node.getElementsByTagName('ul').length > 0) { 25 | addEvent(node, 'mouseover', mover, false); 26 | addEvent(node, 'mouseout', mout, false); 27 | node.className += ' subheader'; 28 | } 29 | } 30 | } 31 | } 32 | 33 | addEvent(window, 'load', init, false); 34 | 35 | function mover(e) { 36 | var el = window.event ? window.event.srcElement : e ? e.target : null; 37 | if (!el) return; 38 | for (var i = 0; i < el.childNodes.length; i++) { 39 | var node = el.childNodes[i]; 40 | if (node.nodeName.toLowerCase() == 'ul') { 41 | node.style.display = 'block'; 42 | } 43 | } 44 | } 45 | 46 | function mout(e) { 47 | var el = window.event ? window.event.srcElement : e ? e.target : null; 48 | if (!el) return; 49 | for (var i = 0; i < el.childNodes.length; i++) { 50 | var node = el.childNodes[i]; 51 | if (node.nodeName.toLowerCase() == 'ul') { 52 | node.style.display = 'none'; 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu-6.css: -------------------------------------------------------------------------------- 1 | /* Appearance */ 2 | body { 3 | font-family: sans-serif; 4 | } 5 | 6 | ul.slidingmenu, ul.slidingmenu ul { 7 | border: 1px solid #666; 8 | border-width: 4px 1px 1px 1px; 9 | } 10 | 11 | ul.slidingmenu li { 12 | background: #efe; 13 | text-align: center; 14 | border-bottom: 1px dotted #999; 15 | } 16 | 17 | ul.slidingmenu a { 18 | color: #666; 19 | background: #efe; 20 | text-decoration: none; 21 | } 22 | 23 | ul.slidingmenu a.subheader { 24 | background: #ded; 25 | } 26 | 27 | ul.slidingmenu a:hover { 28 | background: #cdc; 29 | color: #333; 30 | } 31 | 32 | /* layout styles */ 33 | 34 | /* remove standard HTML list indenting, and display as normal blocks */ 35 | ul.slidingmenu, 36 | ul.slidingmenu ul, 37 | ul.slidingmenu li, 38 | ul.slidingmenu a { 39 | padding: 0; 40 | margin: 0; 41 | display: block; 42 | } 43 | 44 | /* use a fixed width for menu and submenus */ 45 | ul.slidingmenu, 46 | ul.slidingmenu ul { 47 | width: 10em; 48 | } 49 | 50 | /* make li's into clean, moveable blocks */ 51 | ul.slidingmenu li { 52 | list-style-type: none; 53 | position: relative; 54 | } 55 | 56 | /* Make list items do what they're supposed to in IE */ 57 | ul.slidingmenu a { 58 | width: 100%; 59 | } 60 | 61 | /* make sure any ul inside an li (a submenu) takes up zero normal flow */ 62 | ul.slidingmenu ul { 63 | position: absolute; 64 | top: -4px; /* the height of the top border */ 65 | left: 100%; 66 | display: none; 67 | } 68 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu-6.css~: -------------------------------------------------------------------------------- 1 | /* Appearance */ 2 | body { 3 | font-family: sans-serif; 4 | } 5 | 6 | ul.slidingmenu, ul.slidingmenu ul { 7 | border: 1px solid #666; 8 | border-width: 4px 1px 1px 1px; 9 | } 10 | 11 | ul.slidingmenu li { 12 | background: #efe; 13 | text-align: center; 14 | border-bottom: 1px dotted #999; 15 | } 16 | 17 | ul.slidingmenu li.subheader { 18 | background: #ded; 19 | } 20 | 21 | ul.slidingmenu a { 22 | color: #666; 23 | text-decoration: none; 24 | } 25 | 26 | ul.slidingmenu a:hover { 27 | background: #cdc; 28 | color: #333; 29 | } 30 | 31 | /* layout styles */ 32 | 33 | /* remove standard HTML list indenting, and display as normal blocks */ 34 | ul.slidingmenu, 35 | ul.slidingmenu ul, 36 | ul.slidingmenu li, 37 | ul.slidingmenu a { 38 | padding: 0; 39 | margin: 0; 40 | display: block; 41 | } 42 | 43 | /* use a fixed width for menu and submenus */ 44 | ul.slidingmenu, 45 | ul.slidingmenu ul { 46 | width: 10em; 47 | } 48 | 49 | /* make li's into clean, moveable blocks */ 50 | ul.slidingmenu li { 51 | list-style-type: none; 52 | position: relative; 53 | } 54 | 55 | /* Make list items do what they're supposed to in IE */ 56 | ul.slidingmenu a { 57 | width: 100%; 58 | } 59 | 60 | /* make sure any ul inside an li (a submenu) takes up zero normal flow */ 61 | ul.slidingmenu ul { 62 | position: absolute; 63 | top: -4px; /* the height of the top border */ 64 | left: 100%; 65 | display: none; 66 | } 67 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu-6.js: -------------------------------------------------------------------------------- 1 | function addEvent(elm, evType, fn, useCapture) { 2 | // cross-browser event handling for IE5+, NS6 and Mozilla 3 | // By Scott Andrew 4 | if (elm.addEventListener) { 5 | elm.addEventListener(evType, fn, useCapture); 6 | return true; 7 | } else if (elm.attachEvent) { 8 | var r = elm.attachEvent('on' + evType, fn); 9 | return r; 10 | } else { 11 | elm['on' + evType] = fn; 12 | } 13 | } 14 | 15 | 16 | function init() { 17 | var uls = document.getElementsByTagName('ul'); 18 | for (var u = 0; u < uls.length; u++) { 19 | if (uls[u].className.search(/\bslidingmenu\b/) == -1) continue; 20 | var lis = uls[u].getElementsByTagName('li'); 21 | for (var i = 0; i < lis.length; i++) { 22 | var node = lis[i]; 23 | if (node.nodeName.toLowerCase() == 'li' && 24 | node.getElementsByTagName('ul').length > 0) { 25 | addEvent(node, 'mouseover', getMoverFor(node), false); 26 | addEvent(node, 'mouseout', getMoutFor(node), false); 27 | node.getElementsByTagName('a')[0].className += ' subheader'; 28 | } 29 | } 30 | } 31 | } 32 | 33 | addEvent(window, 'load', init, false); 34 | 35 | function getMoverFor(node) { 36 | return function(e) { mover(e, node); }; 37 | } 38 | 39 | function getMoutFor(node) { 40 | return function(e) { mout(e, node); }; 41 | } 42 | 43 | function mover(e, targetElement) { 44 | var el = window.event ? targetElement : e ? e.currentTarget : null; 45 | if (!el) return; 46 | for (var i = 0; i < el.childNodes.length; i++) { 47 | var node = el.childNodes[i]; 48 | if (node.nodeName.toLowerCase() == 'ul') { 49 | node.style.display = 'block'; 50 | } 51 | } 52 | } 53 | 54 | function mout(e, targetElement) { 55 | var el = window.event ? targetElement : e ? e.currentTarget : null; 56 | if (!el) return; 57 | for (var i = 0; i < el.childNodes.length; i++) { 58 | var node = el.childNodes[i]; 59 | if (node.nodeName.toLowerCase() == 'ul') { 60 | node.style.display = 'none'; 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu-6.js~: -------------------------------------------------------------------------------- 1 | function addEvent(elm, evType, fn, useCapture) { 2 | // cross-browser event handling for IE5+, NS6 and Mozilla 3 | // By Scott Andrew 4 | if (elm.addEventListener) { 5 | elm.addEventListener(evType, fn, useCapture); 6 | return true; 7 | } else if (elm.attachEvent) { 8 | var r = elm.attachEvent('on' + evType, fn); 9 | return r; 10 | } else { 11 | elm['on' + evType] = fn; 12 | } 13 | } 14 | 15 | 16 | function init() { 17 | var uls = document.getElementsByTagName('ul'); 18 | for (var u = 0; u < uls.length; u++) { 19 | if (uls[u].className.search(/\bslidingmenu\b/) == -1) continue; 20 | var lis = uls[u].getElementsByTagName('li'); 21 | for (var i = 0; i < lis.length; i++) { 22 | var node = lis[i]; 23 | if (node.nodeName.toLowerCase() == 'li' && 24 | node.getElementsByTagName('ul').length > 0) { 25 | addEvent(node, 'mouseover', getMoverFor(node), false); 26 | addEvent(node, 'mouseout', getMoutFor(node), false); 27 | node.className += ' subheader'; 28 | } 29 | } 30 | } 31 | } 32 | 33 | addEvent(window, 'load', init, false); 34 | 35 | function getMoverFor(node) { 36 | return function(e) { mover(e, node); }; 37 | } 38 | 39 | function getMoutFor(node) { 40 | return function(e) { mout(e, node); }; 41 | } 42 | 43 | function mover(e, targetElement) { 44 | var el = window.event ? targetElement : e ? e.currentTarget : null; 45 | if (!el) return; 46 | for (var i = 0; i < el.childNodes.length; i++) { 47 | var node = el.childNodes[i]; 48 | if (node.nodeName.toLowerCase() == 'ul') { 49 | node.style.display = 'block'; 50 | } 51 | } 52 | } 53 | 54 | function mout(e, targetElement) { 55 | var el = window.event ? targetElement : e ? e.currentTarget : null; 56 | if (!el) return; 57 | for (var i = 0; i < el.childNodes.length; i++) { 58 | var node = el.childNodes[i]; 59 | if (node.nodeName.toLowerCase() == 'ul') { 60 | node.style.display = 'none'; 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu-7.css: -------------------------------------------------------------------------------- 1 | /* Appearance */ 2 | body { 3 | font-family: sans-serif; 4 | } 5 | 6 | ul.slidingmenu, ul.slidingmenu ul { 7 | border: 1px solid #666; 8 | border-width: 4px 1px 1px 1px; 9 | } 10 | 11 | ul.slidingmenu li { 12 | background: #efe; 13 | text-align: center; 14 | border-bottom: 1px dotted #999; 15 | } 16 | 17 | ul.slidingmenu a { 18 | color: #666; 19 | background: #efe; 20 | text-decoration: none; 21 | } 22 | 23 | ul.slidingmenu a.subheader { 24 | background: #ded; 25 | } 26 | 27 | ul.slidingmenu a:hover { 28 | background: #cdc; 29 | color: #333; 30 | } 31 | 32 | /* layout styles */ 33 | 34 | /* remove standard HTML list indenting, and display as normal blocks */ 35 | ul.slidingmenu, 36 | ul.slidingmenu ul, 37 | ul.slidingmenu li, 38 | ul.slidingmenu a { 39 | padding: 0; 40 | margin: 0; 41 | display: block; 42 | } 43 | 44 | /* use a fixed width for menu and submenus */ 45 | ul.slidingmenu, 46 | ul.slidingmenu ul { 47 | width: 10em; 48 | } 49 | 50 | /* make li's into clean, moveable blocks */ 51 | ul.slidingmenu li { 52 | list-style-type: none; 53 | position: relative; 54 | } 55 | 56 | /* Make list items do what they're supposed to in IE */ 57 | ul.slidingmenu a { 58 | width: 100%; 59 | } 60 | 61 | /* make sure any ul inside an li (a submenu) takes up zero normal flow */ 62 | ul.slidingmenu ul { 63 | position: absolute; 64 | top: -4px; /* the height of the top border */ 65 | left: 100%; 66 | display: none; 67 | } 68 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu-7.css~: -------------------------------------------------------------------------------- 1 | /* Appearance */ 2 | body { 3 | font-family: sans-serif; 4 | } 5 | 6 | ul.slidingmenu, ul.slidingmenu ul { 7 | border: 1px solid #666; 8 | border-width: 4px 1px 1px 1px; 9 | } 10 | 11 | ul.slidingmenu li { 12 | background: #efe; 13 | text-align: center; 14 | border-bottom: 1px dotted #999; 15 | } 16 | 17 | ul.slidingmenu li.subheader { 18 | background: #ded; 19 | } 20 | 21 | ul.slidingmenu a { 22 | color: #666; 23 | text-decoration: none; 24 | } 25 | 26 | ul.slidingmenu a:hover { 27 | background: #cdc; 28 | color: #333; 29 | } 30 | 31 | /* layout styles */ 32 | 33 | /* remove standard HTML list indenting, and display as normal blocks */ 34 | ul.slidingmenu, 35 | ul.slidingmenu ul, 36 | ul.slidingmenu li, 37 | ul.slidingmenu a { 38 | padding: 0; 39 | margin: 0; 40 | display: block; 41 | } 42 | 43 | /* use a fixed width for menu and submenus */ 44 | ul.slidingmenu, 45 | ul.slidingmenu ul { 46 | width: 10em; 47 | } 48 | 49 | /* make li's into clean, moveable blocks */ 50 | ul.slidingmenu li { 51 | list-style-type: none; 52 | position: relative; 53 | } 54 | 55 | /* Make list items do what they're supposed to in IE */ 56 | ul.slidingmenu a { 57 | width: 100%; 58 | } 59 | 60 | /* make sure any ul inside an li (a submenu) takes up zero normal flow */ 61 | ul.slidingmenu ul { 62 | position: absolute; 63 | top: -4px; /* the height of the top border */ 64 | left: 100%; 65 | display: none; 66 | } 67 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu-7.js: -------------------------------------------------------------------------------- 1 | function addEvent(elm, evType, fn, useCapture) { 2 | // cross-browser event handling for IE5+, NS6 and Mozilla 3 | // By Scott Andrew 4 | if (elm.addEventListener) { 5 | elm.addEventListener(evType, fn, useCapture); 6 | return true; 7 | } else if (elm.attachEvent) { 8 | var r = elm.attachEvent('on' + evType, fn); 9 | EventCache.add(elm, evType, fn); 10 | return r; 11 | } else { 12 | elm['on' + evType] = fn; 13 | } 14 | } 15 | 16 | addEvent(window, 'unload', EventCache.flush, false); 17 | 18 | function init() { 19 | var uls = document.getElementsByTagName('ul'); 20 | for (var u = 0; u < uls.length; u++) { 21 | if (uls[u].className.search(/\bslidingmenu\b/) == -1) continue; 22 | var lis = uls[u].getElementsByTagName('li'); 23 | for (var i = 0; i < lis.length; i++) { 24 | var node = lis[i]; 25 | if (node.nodeName.toLowerCase() == 'li' && 26 | node.getElementsByTagName('ul').length > 0) { 27 | addEvent(node, 'mouseover', getMoverFor(node), false); 28 | addEvent(node, 'mouseout', getMoutFor(node), false); 29 | node.getElementsByTagName('a')[0].className += ' subheader'; 30 | } 31 | } 32 | } 33 | } 34 | 35 | addEvent(window, 'load', init, false); 36 | 37 | function getMoverFor(node) { 38 | return function(e) { mover(e, node); }; 39 | } 40 | 41 | function getMoutFor(node) { 42 | return function(e) { mout(e, node); }; 43 | } 44 | 45 | function mover(e, targetElement) { 46 | var el = window.event ? targetElement : e ? e.currentTarget : null; 47 | if (!el) return; 48 | for (var i = 0; i < el.childNodes.length; i++) { 49 | var node = el.childNodes[i]; 50 | if (node.nodeName.toLowerCase() == 'ul') { 51 | node.style.display = 'block'; 52 | } 53 | } 54 | } 55 | 56 | function mout(e, targetElement) { 57 | var el = window.event ? targetElement : e ? e.currentTarget : null; 58 | if (!el) return; 59 | for (var i = 0; i < el.childNodes.length; i++) { 60 | var node = el.childNodes[i]; 61 | if (node.nodeName.toLowerCase() == 'ul') { 62 | node.style.display = 'none'; 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu-7.js~: -------------------------------------------------------------------------------- 1 | function addEvent(elm, evType, fn, useCapture) { 2 | // cross-browser event handling for IE5+, NS6 and Mozilla 3 | // By Scott Andrew 4 | if (elm.addEventListener) { 5 | elm.addEventListener(evType, fn, useCapture); 6 | return true; 7 | } else if (elm.attachEvent) { 8 | var r = elm.attachEvent('on' + evType, fn); 9 | EventCache.add(elm, evType, fn); 10 | return r; 11 | } else { 12 | elm['on' + evType] = fn; 13 | } 14 | } 15 | 16 | addEvent(window, 'unload', EventCache.flush, false); 17 | 18 | function init() { 19 | var uls = document.getElementsByTagName('ul'); 20 | for (var u = 0; u < uls.length; u++) { 21 | if (uls[u].className.search(/\bslidingmenu\b/) == -1) continue; 22 | var lis = uls[u].getElementsByTagName('li'); 23 | for (var i = 0; i < lis.length; i++) { 24 | var node = lis[i]; 25 | if (node.nodeName.toLowerCase() == 'li' && 26 | node.getElementsByTagName('ul').length > 0) { 27 | addEvent(node, 'mouseover', getMoverFor(node), false); 28 | addEvent(node, 'mouseout', getMoutFor(node), false); 29 | node.className += ' subheader'; 30 | } 31 | } 32 | } 33 | } 34 | 35 | addEvent(window, 'load', init, false); 36 | 37 | function getMoverFor(node) { 38 | return function(e) { mover(e, node); }; 39 | } 40 | 41 | function getMoutFor(node) { 42 | return function(e) { mout(e, node); }; 43 | } 44 | 45 | function mover(e, targetElement) { 46 | var el = window.event ? targetElement : e ? e.currentTarget : null; 47 | if (!el) return; 48 | for (var i = 0; i < el.childNodes.length; i++) { 49 | var node = el.childNodes[i]; 50 | if (node.nodeName.toLowerCase() == 'ul') { 51 | node.style.display = 'block'; 52 | } 53 | } 54 | } 55 | 56 | function mout(e, targetElement) { 57 | var el = window.event ? targetElement : e ? e.currentTarget : null; 58 | if (!el) return; 59 | for (var i = 0; i < el.childNodes.length; i++) { 60 | var node = el.childNodes[i]; 61 | if (node.nodeName.toLowerCase() == 'ul') { 62 | node.style.display = 'none'; 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu-8.css: -------------------------------------------------------------------------------- 1 | /* Appearance */ 2 | body { 3 | font-family: sans-serif; 4 | } 5 | 6 | ul.slidingmenu, ul.slidingmenu ul { 7 | border: 1px solid #666; 8 | border-width: 4px 1px 1px 1px; 9 | } 10 | 11 | ul.slidingmenu li { 12 | background: #efe; 13 | text-align: center; 14 | border-bottom: 1px dotted #999; 15 | } 16 | 17 | ul.slidingmenu a { 18 | color: #666; 19 | background: #efe; 20 | text-decoration: none; 21 | } 22 | 23 | ul.slidingmenu a.subheader { 24 | background: #ded; 25 | } 26 | 27 | ul.slidingmenu a:hover { 28 | background: #cdc; 29 | color: #333; 30 | } 31 | 32 | /* layout styles */ 33 | 34 | /* remove standard HTML list indenting, and display as normal blocks */ 35 | ul.slidingmenu, 36 | ul.slidingmenu ul, 37 | ul.slidingmenu li, 38 | ul.slidingmenu a { 39 | padding: 0; 40 | margin: 0; 41 | display: block; 42 | } 43 | 44 | /* use a fixed width for menu and submenus */ 45 | ul.slidingmenu, 46 | ul.slidingmenu ul { 47 | width: 10em; 48 | } 49 | 50 | /* make li's into clean, moveable blocks */ 51 | ul.slidingmenu li { 52 | list-style-type: none; 53 | position: relative; 54 | } 55 | 56 | /* Make list items do what they're supposed to in IE */ 57 | ul.slidingmenu a { 58 | width: 100%; 59 | } 60 | 61 | /* make sure any ul inside an li (a submenu) takes up zero normal flow */ 62 | ul.slidingmenu ul { 63 | position: absolute; 64 | top: -4px; /* the height of the top border */ 65 | left: 100%; 66 | display: none; 67 | } 68 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu-8.css~: -------------------------------------------------------------------------------- 1 | /* Appearance */ 2 | body { 3 | font-family: sans-serif; 4 | } 5 | 6 | ul.slidingmenu, ul.slidingmenu ul { 7 | border: 1px solid #666; 8 | border-width: 4px 1px 1px 1px; 9 | } 10 | 11 | ul.slidingmenu li { 12 | background: #efe; 13 | text-align: center; 14 | border-bottom: 1px dotted #999; 15 | } 16 | 17 | ul.slidingmenu li.subheader { 18 | background: #ded; 19 | } 20 | 21 | ul.slidingmenu a { 22 | color: #666; 23 | text-decoration: none; 24 | } 25 | 26 | ul.slidingmenu a:hover { 27 | background: #cdc; 28 | color: #333; 29 | } 30 | 31 | /* layout styles */ 32 | 33 | /* remove standard HTML list indenting, and display as normal blocks */ 34 | ul.slidingmenu, 35 | ul.slidingmenu ul, 36 | ul.slidingmenu li, 37 | ul.slidingmenu a { 38 | padding: 0; 39 | margin: 0; 40 | display: block; 41 | } 42 | 43 | /* use a fixed width for menu and submenus */ 44 | ul.slidingmenu, 45 | ul.slidingmenu ul { 46 | width: 10em; 47 | } 48 | 49 | /* make li's into clean, moveable blocks */ 50 | ul.slidingmenu li { 51 | list-style-type: none; 52 | position: relative; 53 | } 54 | 55 | /* Make list items do what they're supposed to in IE */ 56 | ul.slidingmenu a { 57 | width: 100%; 58 | } 59 | 60 | /* make sure any ul inside an li (a submenu) takes up zero normal flow */ 61 | ul.slidingmenu ul { 62 | position: absolute; 63 | top: -4px; /* the height of the top border */ 64 | left: 100%; 65 | display: none; 66 | } 67 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu-8.js: -------------------------------------------------------------------------------- 1 | function addEvent(elm, evType, fn, useCapture) { 2 | // cross-browser event handling for IE5+, NS6 and Mozilla 3 | // By Scott Andrew 4 | if (elm.addEventListener) { 5 | elm.addEventListener(evType, fn, useCapture); 6 | return true; 7 | } else if (elm.attachEvent) { 8 | var r = elm.attachEvent('on' + evType, fn); 9 | EventCache.add(elm, evType, fn); 10 | return r; 11 | } else { 12 | elm['on' + evType] = fn; 13 | } 14 | } 15 | 16 | addEvent(window, 'unload', EventCache.flush, false); 17 | 18 | function init() { 19 | var uls = document.getElementsByTagName('ul'); 20 | for (var u = 0; u < uls.length; u++) { 21 | if (uls[u].className.search(/\bslidingmenu\b/) == -1) continue; 22 | var lis = uls[u].getElementsByTagName('li'); 23 | for (var i = 0; i < lis.length; i++) { 24 | var node = lis[i]; 25 | if (node.nodeName.toLowerCase() == 'li' && 26 | node.getElementsByTagName('ul').length > 0) { 27 | addEvent(node, 'mouseover', getMoverFor(node), false); 28 | addEvent(node, 'mouseout', getMoutFor(node), false); 29 | node.getElementsByTagName('a')[0].className += ' subheader'; 30 | } 31 | } 32 | } 33 | } 34 | 35 | addEvent(window, 'load', init, false); 36 | 37 | function getMoverFor(node) { 38 | return function(e) { mover(e, node); }; 39 | } 40 | 41 | function getMoutFor(node) { 42 | return function(e) { mout(e, node); }; 43 | } 44 | 45 | function mover(e, targetElement) { 46 | var el = window.event ? targetElement : e ? e.currentTarget : null; 47 | if (!el) return; 48 | clearTimeout(el.outTimeout); 49 | for (var i = 0; i < el.childNodes.length; i++) { 50 | var node = el.childNodes[i]; 51 | if (node.nodeName.toLowerCase() == 'ul') { 52 | node.style.display = 'block'; 53 | } 54 | } 55 | } 56 | 57 | function mout(e, targetElement) { 58 | var el = window.event ? targetElement : e ? e.currentTarget : null; 59 | if (!el) return; 60 | el.outTimeout = setTimeout(function() { mout2(el); }, 300); 61 | } 62 | 63 | function mout2(el) { 64 | for (var i = 0; i < el.childNodes.length; i++) { 65 | var node = el.childNodes[i]; 66 | if (node.nodeName.toLowerCase() == 'ul') { 67 | node.style.display = 'none'; 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu-8.js~: -------------------------------------------------------------------------------- 1 | function addEvent(elm, evType, fn, useCapture) { 2 | // cross-browser event handling for IE5+, NS6 and Mozilla 3 | // By Scott Andrew 4 | if (elm.addEventListener) { 5 | elm.addEventListener(evType, fn, useCapture); 6 | return true; 7 | } else if (elm.attachEvent) { 8 | var r = elm.attachEvent('on' + evType, fn); 9 | EventCache.add(elm, evType, fn); 10 | return r; 11 | } else { 12 | elm['on' + evType] = fn; 13 | } 14 | } 15 | 16 | addEvent(window, 'unload', EventCache.flush, false); 17 | 18 | function init() { 19 | var uls = document.getElementsByTagName('ul'); 20 | for (var u = 0; u < uls.length; u++) { 21 | if (uls[u].className.search(/\bslidingmenu\b/) == -1) continue; 22 | var lis = uls[u].getElementsByTagName('li'); 23 | for (var i = 0; i < lis.length; i++) { 24 | var node = lis[i]; 25 | if (node.nodeName.toLowerCase() == 'li' && 26 | node.getElementsByTagName('ul').length > 0) { 27 | addEvent(node, 'mouseover', getMoverFor(node), false); 28 | addEvent(node, 'mouseout', getMoutFor(node), false); 29 | node.getElementsByTagName('a')[0].className += ' subheader'; 30 | } 31 | } 32 | } 33 | } 34 | 35 | addEvent(window, 'load', init, false); 36 | 37 | function getMoverFor(node) { 38 | return function(e) { mover(e, node); }; 39 | } 40 | 41 | function getMoutFor(node) { 42 | return function(e) { mout(e, node); }; 43 | } 44 | 45 | function mover(e, targetElement) { 46 | var el = window.event ? targetElement : e ? e.currentTarget : null; 47 | if (!el) return; 48 | clearTimeout(el.outTimeout); 49 | for (var i = 0; i < el.childNodes.length; i++) { 50 | var node = el.childNodes[i]; 51 | if (node.nodeName.toLowerCase() == 'ul') { 52 | node.style.display = 'block'; 53 | } 54 | } 55 | } 56 | 57 | function mout(e, targetElement) { 58 | var el = window.event ? targetElement : e ? e.currentTarget : null; 59 | if (!el) return; 60 | el.outTimeout = setTimeout(function() { mout2(el); }, 1000); 61 | } 62 | 63 | function mout2(el) { 64 | for (var i = 0; i < el.childNodes.length; i++) { 65 | var node = el.childNodes[i]; 66 | if (node.nodeName.toLowerCase() == 'ul') { 67 | node.style.display = 'none'; 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu.css: -------------------------------------------------------------------------------- 1 | /* Appearance */ 2 | body { 3 | font-family: sans-serif; 4 | } 5 | 6 | ul.slidingmenu, ul.slidingmenu ul { 7 | border: 1px solid #666; 8 | border-width: 4px 1px 1px 1px; 9 | } 10 | 11 | ul.slidingmenu li { 12 | background: #efe; 13 | text-align: center; 14 | border-bottom: 1px dotted #999; 15 | } 16 | 17 | ul.slidingmenu a { 18 | color: #666; 19 | background: #efe; 20 | text-decoration: none; 21 | } 22 | 23 | ul.slidingmenu a.subheader { 24 | background: #ded; 25 | } 26 | 27 | ul.slidingmenu a:hover { 28 | background: #cdc; 29 | color: #333; 30 | } 31 | 32 | /* layout styles */ 33 | 34 | /* remove standard HTML list indenting, and display as normal blocks */ 35 | ul.slidingmenu, 36 | ul.slidingmenu ul, 37 | ul.slidingmenu li, 38 | ul.slidingmenu a { 39 | padding: 0; 40 | margin: 0; 41 | display: block; 42 | } 43 | 44 | /* use a fixed width for menu and submenus */ 45 | ul.slidingmenu, 46 | ul.slidingmenu ul { 47 | width: 10em; 48 | } 49 | 50 | /* make li's into clean, moveable blocks */ 51 | ul.slidingmenu li { 52 | list-style-type: none; 53 | position: relative; 54 | } 55 | 56 | /* Make list items do what they're supposed to in IE */ 57 | ul.slidingmenu a { 58 | width: 100%; 59 | } 60 | 61 | /* make sure any ul inside an li (a submenu) takes up zero normal flow */ 62 | ul.slidingmenu ul { 63 | position: absolute; 64 | top: -4px; /* the height of the top border */ 65 | left: 100%; 66 | display: none; 67 | } 68 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu.css~: -------------------------------------------------------------------------------- 1 | 2 | ul.slidingmenu li ul { 3 | position: absolute; 4 | top: -4px; /* the height of the top border */ 5 | left: 100%; 6 | display: none; 7 | } 8 | 9 | /* Appearance */ 10 | body { font-family: sans-serif; } 11 | 12 | ul.slidingmenu, ul.slidingmenu ul { 13 | border: 1px solid #666; 14 | border-width: 4px 1px 1px 1px; 15 | } 16 | 17 | ul.slidingmenu li { 18 | background: #efe; 19 | text-align: center; 20 | border-bottom: 1px dotted #999; 21 | } 22 | 23 | ul.slidingmenu a { 24 | color: #666; 25 | text-decoration: none; 26 | } 27 | 28 | ul.slidingmenu li > a:hover { background: #cdc; color: #333; } 29 | ul.slidingmenu li.subheader { background: #ded; } 30 | 31 | 32 | /* layout styles */ 33 | 34 | /* 35 | ul { border: solid thin black; } 36 | li { border: solid thin red; } 37 | a { border: solid thin green; } 38 | */ 39 | 40 | /* remove standard HTML list indenting, and wrap */ 41 | ul.slidingmenu, 42 | ul.slidingmenu ul, 43 | ul.slidingmenu li, 44 | ul.slidingmenu a { 45 | padding: 0; margin: 0; width: 10em; 46 | } 47 | 48 | /* make li's into clean, moveable blocks */ 49 | ul.slidingmenu li { 50 | list-style-type: none; 51 | position: relative; 52 | /* display: block;*/ 53 | } 54 | 55 | /* make sure links fill their containers */ 56 | ul.slidingmenu a { 57 | display: block; 58 | } 59 | 60 | /* make sure any ul inside an li (a submenu) takes up zero normal flow */ 61 | ul.slidingmenu li ul { 62 | position: absolute; 63 | left: 100%; 64 | top: -4px; 65 | display: none; 66 | } 67 | 68 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Sliding menus 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /07slidingmenus/sliding-menu.html~: -------------------------------------------------------------------------------- 1 | 2 | 3 | 36 | 37 | 64 | -------------------------------------------------------------------------------- /08remotescripting/autoform/autoform.css: -------------------------------------------------------------------------------- 1 | input { 2 | padding-right: 20px; 3 | display: block; 4 | } 5 | 6 | .autoform_pending { 7 | background: url(autoform_save.png) center right no-repeat; 8 | } 9 | .autoform_saved { 10 | background: url(autoform_saved.png) center right no-repeat; 11 | } 12 | 13 | #autoform_ifr { 14 | border: none; 15 | width: 0; 16 | height: 0; 17 | } 18 | -------------------------------------------------------------------------------- /08remotescripting/autoform/autoform.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | A very simple form 6 | 7 | 8 | 9 | 10 |

A simple form

11 |
12 |

13 | 14 | 15 |

16 |

17 | 18 | 19 |

20 |

21 | 22 | 23 |

24 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /08remotescripting/autoform/autoform.php: -------------------------------------------------------------------------------- 1 | value array 5 | 6 | $data_file = './serialized.dat'; 7 | 8 | if (!file_exists($data_file)) { 9 | // Initalise file with default array keys 10 | $fp = fopen($data_file, 'w'); 11 | fwrite($fp, serialize(array('name' => '', 'age' => '', 'shoesize' => ''))); 12 | fclose($fp); 13 | } 14 | 15 | $from_file = unserialize(file_get_contents($data_file)); 16 | 17 | if (isset($_GET['debug'])) { 18 | echo "
"; print_r($from_file); exit;
19 |   }
20 | 
21 |   $changed_keys = array();
22 | 
23 |   if ($_POST) {
24 |     foreach (array_keys($from_file) as $key) {
25 |       if (array_key_exists($key, $_POST) && $_POST[$key] != $from_file[$key]) {
26 |         $changed_keys[] = $key;
27 |         $from_file[$key] = $_POST[$key];
28 |       }
29 |     }
30 |     if (count($changed_keys) > 0) {
31 |       // Write data back to file
32 |       $fp = fopen($data_file, 'w');
33 |       fwrite($fp, serialize($from_file));
34 |       fclose($fp);
35 |     }
36 |   }
37 | ?>
38 | 
40 | 
41 |   
42 |     
43 |     
44 |     
51 |   
52 |   
53 |     
An auto-saving form

54 | 
55 |     

56 |       

57 |         
58 |         
60 |       

61 |       

62 |         
63 |         
65 |       

66 |       

67 |         
68 |         
70 |       

71 |       
72 |     

73 |   
74 | 
75 | 


--------------------------------------------------------------------------------
/08remotescripting/autoform/autoform_save.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spbooks/dhtml1/95da5460674a4b54247aa9035a87138140c64b02/08remotescripting/autoform/autoform_save.png


--------------------------------------------------------------------------------
/08remotescripting/autoform/autoform_saved.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spbooks/dhtml1/95da5460674a4b54247aa9035a87138140c64b02/08remotescripting/autoform/autoform_saved.png


--------------------------------------------------------------------------------
/08remotescripting/beerguide/beers.php:
--------------------------------------------------------------------------------
 1 |  array(
 7 |     'Adnams Bitter',
 8 |     'An excellent drinking beer, with the characteristic Adnams aroma of 
 9 |     hops, citrus fruits and sulphur. The flavour is dry and hoppy, with some
10 |     fruit. The finish is long, dry and hoppy.',
11 |     'hoppy'),
12 |   'draughtbass' => array(
13 |     'Draught Bass',
14 |     'Once the Rolls-Royce of cask beer, it is now just a Ford Fiesta. 
15 |     Cost-cutting (the beer is no longer dry hopped in cask) and indifferent 
16 |     quality control mean the beer is all too often overly malty and cloying.',
17 |     'malty'),
18 |   'boddingtonsbitter' => array(
19 |     'Boddington\'s Bitter',
20 |     'A golden, straw coloured beer in which the grainy malt, hop and bitter 
21 |     character can be spoiled by a cloying sweetness.',
22 |     'hoppy'),
23 |   'cainstraditionalbitter' => array(
24 |     'Cain\'s Traditional Bitter',
25 |     'A darkish, full bodied and fruity bitter, with a good, hoppy nose 
26 |     and a dry aftertaste.',
27 |     'hoppy'),
28 |   'bombardier' => array(
29 |     'Charles Wells Bombardier',
30 |     'Citrus fruits are present but malt balances this beer, making it 
31 |     particularly well rounded with a long dry finish.',
32 |     'malty'),
33 |   'hydes' => array(
34 |     'Hydes Bitter',
35 |     'A good flavoured bitter, with a malty and fruity nose, malt and 
36 |     hop in the taste, with a fruity background, and a good bitterness 
37 |     through into the aftertaste.',
38 |     'fruity')
39 | );
40 | ?>
41 | 


--------------------------------------------------------------------------------
/08remotescripting/beerguide/beerserver1.php:
--------------------------------------------------------------------------------
 1 | 
10 | 


--------------------------------------------------------------------------------
/08remotescripting/beerguide/beerserver2.php:
--------------------------------------------------------------------------------
 1 | 
10 |       document.getElementById('').className = '';
11 |     
12 |     document.getElementById('').className = 'highlight';
13 |     
17 |       document.getElementById('').className = '';
18 |       
19 |         document.getElementById('').className = 'highlight';
20 |       
24 | 


--------------------------------------------------------------------------------
/08remotescripting/beerguide/first-beer.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: sans-serif;
 3 | }
 4 | 
 5 | h1 {
 6 |   margin: 5px 0;
 7 |   padding: 0;
 8 | }
 9 | 
10 | #characters {
11 |   width: 25%;
12 |   float: left;
13 |   margin-right: 5px;
14 |   overflow: hidden;
15 | }
16 | 
17 | #beers {
18 |   width: 40%;
19 |   float: left;
20 |   margin-right: 5px;
21 |   overflow: hidden;
22 | }
23 | 
24 | a {
25 |   width: 100%;	  		/* IE hack */
26 |   display: block;
27 |   background-color: #d0d;
28 |   border-left: 5px solid #f0f;
29 |   text-decoration: none;
30 |   color: white;
31 |   font-weight: bold; 
32 |   padding-left: 1em;
33 | }
34 | 
35 | ul {
36 |   padding: 0;
37 |   margin: 0;
38 | }
39 | 
40 | li {
41 |   padding: 0;
42 |   margin: 0;
43 |   list-style: none;
44 | }
45 | 
46 | h2 {
47 |   width: 100%;	  		/* IE hack */
48 |   padding: 0 0 0 20px; 
49 |   margin: 0;
50 |   background-color: #f0f;
51 |   font-size: 1em;
52 | }
53 | 
54 | a:hover { 
55 |   background-color: #0d0; 
56 |   border-left: 5px solid #0f0;
57 | }
58 | 


--------------------------------------------------------------------------------
/08remotescripting/beerguide/first-beer.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 |   
 5 |     The beer guide
 6 |     
 7 |   
 8 |   
 9 |     
The beer guide

10 | 
11 |     

12 |       
Beer characters

13 |       
27 |     

28 | 
29 |     

30 |       
The beers

31 |       
57 |     

58 |   
59 | 
60 | 


--------------------------------------------------------------------------------
/08remotescripting/beerguide/fourth-beer.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: sans-serif;
 3 | }
 4 | 
 5 | h1 {
 6 |   margin: 5px 0;
 7 |   padding: 0;
 8 | }
 9 | 
10 | #characters {
11 |   width: 25%;
12 |   float: left;
13 |   margin-right: 5px;
14 |   overflow: hidden;
15 | }
16 | 
17 | #beers {
18 |   width: 40%;
19 |   float: left;
20 |   margin-right: 5px;
21 |   overflow: hidden;
22 | }
23 | 
24 | #beerdata {
25 |   width: 25%;
26 |   float: left;
27 |   margin-right: 5px;
28 |   overflow: hidden;
29 |   border-left: solid 5px #f0f;
30 | }
31 | 
32 | #beerdef {
33 |   background-color: #d0d;
34 |   text-decoration: none;
35 |   color: white;
36 |   padding: 0 0 0 1em;
37 |   margin: 0;
38 |   font-size: 80%;
39 |   font-weight: bold;
40 | }
41 | 
42 | a { 
43 |   width: 100%;      /* IE hack */
44 |   display: block;
45 |   background-color: #d0d;
46 |   border-left: 5px solid #f0f;
47 |   text-decoration: none;
48 |   color: white;
49 |   font-weight: bold; 
50 |   padding-left: 1em;
51 | }
52 | 
53 | ul {
54 |   padding: 0;
55 |   margin: 0;
56 | }
57 | 
58 | li {
59 |   padding: 0;
60 |   margin: 0;
61 |   list-style: none;
62 | }
63 | 
64 | h2 {
65 |   width: 100%;     /* IE hack */
66 |   padding: 0 0 0 20px;
67 |   margin: 0;
68 |   background-color: #f0f;
69 |   font-size: 1em;
70 | }
71 | 
72 | a:hover { 
73 |   background-color: #0d0; 
74 |   border-left: 5px solid #0f0;
75 | }
76 | 
77 | a.highlight { 
78 |   background-color: #0dd;
79 |   border-left: 5px solid #0ff;
80 | }
81 | 
82 | 


--------------------------------------------------------------------------------
/08remotescripting/beerguide/fourth-beer.js:
--------------------------------------------------------------------------------
 1 | bG = {
 2 |   init: function() {
 3 |     if (!Sarissa || !document.getElementsByTagName) return;
 4 |     var beerlinks = document.getElementById('beers').getElementsByTagName('a');
 5 |     for (var i = 0; i < beerlinks.length; i++) {
 6 |       bG.addEvent(beerlinks[i], 'click', bG.clickBeer, false);
 7 |       beerlinks[i].onclick = function() { return false; }; // Safari
 8 |     }
 9 |     var charlinks = document.getElementById('characters').getElementsByTagName('a');
10 |     for (var i = 0; i < charlinks.length; i++) {
11 |       bG.addEvent(charlinks[i], 'click', bG.clickCharacter, false);
12 |       charlinks[i].onclick = function() { return false; }; // Safari
13 |     }
14 |   },
15 | 
16 |   addEvent: function(elm, evType, fn, useCapture) {
17 |     if (elm.addEventListener) {
18 |       elm.addEventListener(evType, fn, useCapture);
19 |       return true;
20 |     } else if (elm.attachEvent) {
21 |       var r = elm.attachEvent('on' + evType, fn);
22 |       return r;
23 |     } else {
24 |       elm['on' + evType] = fn;
25 |     }
26 |   },
27 |   
28 |   geturl: function(u, fn) {
29 |     var xmlhttp = Sarissa.getXmlHttpRequest();
30 |     xmlhttp.open('GET', u, true);
31 |     xmlhttp.onreadystatechange = function() {
32 |       if (xmlhttp.readyState == 4) {
33 |         fn(xmlhttp.responseText);
34 |       }
35 |     }
36 |     xmlhttp.send(null);
37 |   },
38 |   
39 |   clickBeer: function(e) {
40 |     var target = window.event ? window.event.srcElement : e ? e.target : null;
41 |     if (!target) return;
42 |     if (target.nodeName.toLowerCase() != 'a')
43 |       target = target.parentNode;
44 | 
45 |     bG.display(target.id);
46 |     
47 |     if (window.event) {
48 |       window.event.cancelBubble = true;
49 |       window.event.returnValue = false;
50 |       return;
51 |     }
52 |     if (e) {
53 |       e.stopPropagation();
54 |       e.preventDefault();
55 |     }
56 |   },
57 | 
58 |   display: function(beer) {
59 |     bG.geturl('beerserver1.php?action=beer&beer=' + escape(beer), bG.display2);
60 |   },
61 | 
62 |   display2: function(beerdata) {
63 |     var text = document.getElementById('beerdef');
64 |     text.innerHTML = beerdata;
65 |     text.style.display = '';
66 |   },
67 | 
68 |   clickCharacter: function(e) {
69 |     var target = window.event ? window.event.srcElement : e ? e.target : null;
70 |     if (!target) return;
71 |     if (target.nodeName.toLowerCase() != 'a')
72 |       target = target.parentNode;
73 | 
74 |     bG.highlight(target.id);
75 | 
76 |     if (window.event) {
77 |       window.event.cancelBubble = true;
78 |       window.event.returnValue = false;
79 |       return;
80 |     }
81 |     if (e) {
82 |       e.stopPropagation();
83 |       e.preventDefault();
84 |     }
85 |   },
86 | 
87 |   highlight: function(character) {
88 |     bG.geturl('beerserver2.php?action=character&character=' + escape(character), bG.highlight2);
89 |   },
90 |   
91 |   highlight2: function(charjs) {
92 |     eval(charjs);
93 |   }
94 | }
95 | 
96 | bG.addEvent(window, 'load', bG.init, false);
97 | 


--------------------------------------------------------------------------------
/08remotescripting/beerguide/fourth-beer.php:
--------------------------------------------------------------------------------
 1 | 
 4 | 
 6 | 
 7 |   
 8 |     The beer guide
 9 |     
10 |     
11 |     
12 |   
13 |   
14 |     
The beer guide

15 | 
16 |     

17 |       
Beer characters

18 |       
    
19 |         
20 |           
  • 
21 |             
25 |           
    • 
26 |         
27 |       

28 |     

29 | 
30 |     

31 |       
The beers

32 |       
    
33 |         
34 |         
  • 
35 |           
39 |         
    • 
40 |         
41 |       

42 |     

43 | 
44 |     

45 |       
Beer data

46 |       

47 |     

48 |   
49 | 
50 | 


--------------------------------------------------------------------------------
/08remotescripting/beerguide/second-beer.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: sans-serif;
 3 | }
 4 | 
 5 | h1 {
 6 |   margin: 5px 0;
 7 |   padding: 0;
 8 | }
 9 | 
10 | #characters {
11 |   width: 25%;
12 |   float: left;
13 |   margin-right: 5px;
14 |   overflow: hidden;
15 | }
16 | 
17 | #beers {
18 |   width: 40%;
19 |   float: left;
20 |   margin-right: 5px;
21 |   overflow: hidden;
22 | }
23 | 
24 | #beerdata {
25 |   width: 25%;
26 |   float: left;
27 |   margin-right: 5px;
28 |   overflow: hidden;
29 |   border-left: solid 5px #f0f;
30 | }
31 | 
32 | #beerdef {
33 |   background-color: #d0d;
34 |   text-decoration: none;
35 |   color: white;
36 |   padding: 0 0 0 1em;
37 |   margin: 0;
38 |   font-size: 80%;
39 |   font-weight: bold;
40 | }
41 | 
42 | a { 
43 |   width: 100%;			/* IE hack */
44 |   display: block;
45 |   background-color: #d0d;
46 |   border-left: 5px solid #f0f;
47 |   text-decoration: none;
48 |   color: white;
49 |   font-weight: bold; 
50 |   padding-left: 1em;
51 | }
52 | 
53 | ul {
54 |   padding: 0;
55 |   margin: 0;
56 | }
57 | 
58 | li {
59 |   padding: 0;
60 |   margin: 0;
61 |   list-style: none;
62 | }
63 | 
64 | h2 {
65 |   width: 100%;			/* IE hack */
66 |   padding: 0 0 0 20px; 
67 |   margin: 0;
68 |   background-color: #f0f;
69 |   font-size: 1em;
70 | }
71 | 
72 | a:hover { 
73 |   background-color: #0d0; 
74 |   border-left: 5px solid #0f0;
75 | }
76 | 


--------------------------------------------------------------------------------
/08remotescripting/beerguide/second-beer.php:
--------------------------------------------------------------------------------
 1 | 
 4 | 
 6 | 
 7 |   
 8 |     The beer guide
 9 |     
10 |   
11 |   
12 |     
The beer guide

13 | 
14 |     

15 |       
Beer characters

16 |       
    
17 |         
18 |           
  • 
19 |             
23 |           
    • 
24 |         
25 |       

26 |     

27 | 
28 |     

29 |       
The beers

30 |       
    
31 |         
32 |           
  • 
33 |             
37 |         
    • 
38 |         
39 |       

40 |     

41 | 
42 |     

43 |       
Beer data

44 |       

45 |     

46 |   
47 | 
48 | 


--------------------------------------------------------------------------------
/08remotescripting/beerguide/third-beer.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: sans-serif;
 3 | }
 4 | 
 5 | h1 {
 6 |   margin: 5px 0;
 7 |   padding: 0;
 8 | }
 9 | 
10 | #characters {
11 |   width: 25%;
12 |   float: left;
13 |   margin-right: 5px;
14 |   overflow: hidden;
15 | }
16 | 
17 | #beers {
18 |   width: 40%;
19 |   float: left;
20 |   margin-right: 5px;
21 |   overflow: hidden;
22 | }
23 | 
24 | #beerdata {
25 |   width: 25%;
26 |   float: left;
27 |   margin-right: 5px;
28 |   overflow: hidden;
29 |   border-left: solid 5px #f0f;
30 | }
31 | 
32 | #beerdef {
33 |   background-color: #d0d;
34 |   text-decoration: none;
35 |   color: white;
36 |   padding: 0 0 0 1em;
37 |   margin: 0;
38 |   font-size: 80%;
39 |   font-weight: bold;
40 | }
41 | 
42 | a { 
43 |   width: 100%;      /* IE hack */
44 |   display: block;
45 |   background-color: #d0d;
46 |   border-left: 5px solid #f0f;
47 |   text-decoration: none;
48 |   color: white;
49 |   font-weight: bold; 
50 |   padding-left: 1em;
51 | }
52 | 
53 | ul {
54 |   padding: 0;
55 |   margin: 0;
56 | }
57 | 
58 | li {
59 |   padding: 0;
60 |   margin: 0;
61 |   list-style: none;
62 | }
63 | 
64 | h2 {
65 |   width: 100%;     /* IE hack */
66 |   padding: 0 0 0 20px;
67 |   margin: 0;
68 |   background-color: #f0f;
69 |   font-size: 1em;
70 | }
71 | 
72 | a:hover { 
73 |   background-color: #0d0; 
74 |   border-left: 5px solid #0f0;
75 | }
76 | 


--------------------------------------------------------------------------------
/08remotescripting/beerguide/third-beer.js:
--------------------------------------------------------------------------------
 1 | bG = {
 2 |   init: function() {
 3 |     if (!Sarissa || !document.getElementsByTagName) return;
 4 | 
 5 |     var beerlinks = document.getElementById('beers').getElementsByTagName('a');
 6 |     for (var i = 0; i < beerlinks.length; i++) {
 7 |       bG.addEvent(beerlinks[i], 'click', bG.clickBeer, false);
 8 |       beerlinks[i].onclick = function() { return false; }; // Safari
 9 |     }
10 |   },
11 | 
12 |   addEvent: function(elm, evType, fn, useCapture) {
13 |     if (elm.addEventListener) {
14 |       elm.addEventListener(evType, fn, useCapture);
15 |       return true;
16 |     } else if (elm.attachEvent) {
17 |       var r = elm.attachEvent('on' + evType, fn);
18 |       return r;
19 |     } else {
20 |       elm['on' + evType] = fn;
21 |     }
22 |   },
23 |   
24 |   geturl: function(u, fn) {
25 |     var xmlhttp = Sarissa.getXmlHttpRequest();
26 |     xmlhttp.open('GET', u, true);
27 |     xmlhttp.onreadystatechange = function() {
28 |       if (xmlhttp.readyState == 4) {
29 |         fn(xmlhttp.responseText);
30 |       }
31 |     };
32 |     xmlhttp.send(null);
33 |   },
34 |   
35 |   clickBeer: function(e) {
36 |     var target = window.event ? window.event.srcElement : e ? e.target : null;
37 |     if (!target) return;
38 |     if (target.nodeName.toLowerCase() != 'a')
39 |       target = target.parentNode;
40 | 
41 |     bG.display(target.id);
42 |     
43 |     if (window.event) {
44 |       window.event.cancelBubble = true;
45 |       window.event.returnValue = false;
46 |       return;
47 |     }
48 |     if (e) {
49 |       e.stopPropagation();
50 |       e.preventDefault();
51 |     }
52 |   },
53 | 
54 |   display: function(beer) {
55 |     bG.geturl('beerserver1.php?action=beer&beer=' + escape(beer), bG.display2);
56 |   },
57 | 
58 |   display2: function(beerdata) {
59 |     var text = document.getElementById('beerdef');
60 |     text.innerHTML = beerdata;
61 |     text.style.display = '';
62 |   }
63 | }
64 | 
65 | bG.addEvent(window, 'load', bG.init, false);
66 | 


--------------------------------------------------------------------------------
/08remotescripting/beerguide/third-beer.php:
--------------------------------------------------------------------------------
 1 | 
 4 | 
 6 | 
 7 |   
 8 |     The beer guide
 9 |     
10 |     
11 |     
12 |   
13 |   
14 |     
The beer guide

15 | 
16 |     

17 |       
Beer characters

18 |       
    
19 |         
20 |           
  • 
21 |             
25 |           
    • 
26 |         
27 |       

28 |     

29 | 
30 |     

31 |       
The beers

32 |       
    
33 |         
34 |         
  • 
35 |           
39 |         
    • 
40 |         
41 |       

42 |     

43 | 
44 |     

45 |       
Beer data

46 |       

47 |     

48 |   
49 | 
50 | 


--------------------------------------------------------------------------------
/08remotescripting/checkusername/check-username.css:
--------------------------------------------------------------------------------
 1 | form {
 2 |   margin-left: 200px;
 3 | }
 4 | 
 5 | form div {
 6 |   margin: 0 0 0.25em 0;
 7 | }
 8 | 
 9 | label {
10 |   float: left;
11 |   margin-left: -200px;
12 | }
13 | 
14 | label.para {
15 |   float: none;
16 |   display: block;
17 | }
18 | 
19 | label.radio {
20 |   float: none;
21 |   margin-left: 0;
22 | }
23 | 
24 | ul.radio {
25 |   margin: 0;
26 |   padding: 0;
27 |   list-style-type: none;
28 | }
29 | 
30 | input.text {
31 |   width: 15em;
32 | }
33 | 
34 | textarea {
35 |   width: 20em;
36 |   height: 10em;
37 | }
38 | 
39 | input.submit {
40 |   margin-left: -200px;
41 | }
42 | 


--------------------------------------------------------------------------------
/08remotescripting/checkusername/check-username.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 |   
 5 |     Check a username for uniqueness
 6 |     
 7 |     
 8 |     
 9 |   
10 |   
11 |     

12 |       

13 |         
14 |         
15 |       

16 |       

17 |         
18 |         
19 |       

20 |       

21 |         
22 |         
23 |       

24 |       

25 |     

26 |   
27 | 
28 | 


--------------------------------------------------------------------------------
/08remotescripting/checkusername/check-username.js:
--------------------------------------------------------------------------------
 1 | var cU = {
 2 |   init: function() {
 3 |     if (!document.getElementById) return;
 4 |     if (!Sarissa) return;
 5 |     cU.name = document.getElementById('name');
 6 |     cU.username = document.getElementById('username');
 7 |     cU.usernamecontainer = document.getElementById('usernamecontainer');
 8 |     if (!cU.name || !cU.username) return;
 9 |     if (!cU.usernamecontainer.innerHTML) return;
10 |     cU.addEvent(cU.username, 'change', cU.checkUsername, false);
11 |   },
12 | 
13 |   addEvent: function(elm, evType, fn, useCapture) {
14 |     // cross-browser event handling for IE5+, NS6 and Mozilla
15 |     // By Scott Andrew
16 |     if (elm.addEventListener) {
17 |       elm.addEventListener(evType, fn, useCapture);
18 |       return true;
19 |     } else if (elm.attachEvent) {
20 |       var r = elm.attachEvent('on' + evType, fn);
21 |       return r;
22 |     } else {
23 |       elm['on' + evType] = fn;
24 |     }
25 |   },
26 | 
27 |   checkUsername: function() {
28 |     var xmlhttp = Sarissa.getXmlHttpRequest();
29 |     var qs = '?username=' + cU.username.value +
30 |         '&name=' + cU.name.value;
31 |     xmlhttp.open('GET', 'check-username.php' + qs, true);
32 |     xmlhttp.onreadystatechange = function() {
33 |       if (xmlhttp.readyState == 4) {
34 |         cU.receiveUsernames(xmlhttp.responseXML);
35 |       }
36 |     };
37 |     xmlhttp.send(null);
38 |   },
39 | 
40 |   receiveUsernames: function(dom) {
41 |     var alternatives = dom.getElementsByTagName('username');
42 |     var usernameHTML = '' +
46 |       '
    ALTERNATIVESLIST
  • ' +
47 |       ' ' +
50 |       '' +
51 |       '
';
52 |     usernameHTML = usernameHTML.replace('USERNAME', cU.username.value);
53 |     var alternativeslist = '';
54 |     for (var i = 0; i < alternatives.length; i++) {
55 |       var thisAL = '
    • ';
58 |       thisAL = thisAL.replace(/USERNAME/g, alternatives[i].firstChild.nodeValue);
59 |       alternativeslist += thisAL;
60 |     }
61 |     usernameHTML = usernameHTML.replace('ALTERNATIVESLIST', alternativeslist);
62 |     cU.usernamecontainer.innerHTML = usernameHTML;
63 | 
64 |     // reattach the event, giving browsers time to do the innerHTML work
65 |     setTimeout(function() {
66 |       cU.username = document.getElementById('username');
67 |       cU.addEvent(cU.username, 'change', cU.checkUsername, false);
68 |     }, 200);
69 |   }
70 | }
71 | 
72 | cU.addEvent(window, 'load', cU.init, false);
73 | 


--------------------------------------------------------------------------------
/08remotescripting/checkusername/check-username.php:
--------------------------------------------------------------------------------
 1 | 
14 | 
15 |   
16 |   
17 |   194
18 | 
19 | 


--------------------------------------------------------------------------------
/08remotescripting/nameresolution/nameresolution.css:
--------------------------------------------------------------------------------
 1 | label { 
 2 |   width: 100px; 
 3 |   display: block;
 4 |   float: left;
 5 | }
 6 | input {
 7 |   display: block;
 8 |   float: left;
 9 |   width: 300px;
10 | }
11 | p {
12 |   clear: both;
13 | }
14 | textarea {
15 |   width: 400px;
16 |   height: 300px;
17 | }
18 | span.error {
19 |   color: red;
20 |   font-size: 80%;
21 |   padding-left: 1em;
22 | }
23 | 


--------------------------------------------------------------------------------
/08remotescripting/nameresolution/nameresolution.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 |   
 5 |     Name Resolution
 6 |     
 7 |     
 8 |     
 9 |   
10 |   
11 |     
    Name resolution
    
12 |     
    
13 |       
    
14 |         
15 |         
16 |       
    
17 |       
    
18 |         
19 |         
20 |       
    
21 |       
    
22 |         
23 |         
24 |       
    
25 |       
    
26 |         
27 |       
    
28 |       
    
29 |         
30 |       
    
31 |     
    
32 |   
33 | 
34 | 


--------------------------------------------------------------------------------
/08remotescripting/nameresolution/nameresolution.js:
--------------------------------------------------------------------------------
 1 | var nR = {
 2 |   init: function() {
 3 |     if (!document.getElementById) return;
 4 |     if (!RSLiteObject) return;
 5 |     window.RSLite = new RSLiteObject();
 6 |     // Set the "to" and "cc" fields to have name resolution
 7 |     var to_field = document.getElementById('to');
 8 |     if (to_field) nR.addEvent(to_field, 'change', nR.resolve, false);
 9 |     var cc_field = document.getElementById('cc');
10 |     if (cc_field) nR.addEvent(cc_field, 'change', nR.resolve, false);
11 |     // Set up the callbacks
12 |     window.RSLite.callback = nR.resolve_callback;
13 |     window.RSLite.failure = nR.resolve_failure;
14 |   },
15 |   
16 |   addEvent: function(elm, evType, fn, useCapture) {
17 |     // cross-browser event handling for IE5+, NS6 and Mozilla
18 |     // By Scott Andrew
19 |     if (elm.addEventListener){
20 |       elm.addEventListener(evType, fn, useCapture);
21 |       return true;
22 |     } else if (elm.attachEvent){
23 |       var r = elm.attachEvent('on' + evType, fn);
24 |       return r;
25 |     } else {
26 |       elm['on' + evType] = fn;
27 |     }
28 |   },
29 |    
30 |   resolve: function(e) {
31 |     var target = window.event ? window.event.srcElement: e ? e.target : null;
32 |     if (!target || !target.value) return;
33 |     nR.currentTarget = target;
34 |     if (nR.currentTarget.errorSpan) {
35 |       nR.currentTarget.errorSpan.parentNode.removeChild(nR.currentTarget.errorSpan);
36 |       nR.currentTarget.errorSpan = null;
37 |     }
38 |     if (target.value.indexOf('@') != -1) return; // already an email address
39 |     // Try and resolve the entered value to a proper value by calling
40 |     // the server for name resolution
41 |     window.RSLite.call('resolver.php', target.value);
42 |   },
43 |    
44 |   resolve_callback: function(response) {
45 |     nR.currentTarget.value = response;
46 |   },
47 |    
48 |   resolve_failure: function() {
49 |     var errorSpan = document.createElement('span');
50 |     errorSpan.className = 'error';
51 |     errorSpan.appendChild(document.createTextNode(
52 |         'Address ' + nR.currentTarget.value + ' invalid'));
53 |     nR.currentTarget.errorSpan = errorSpan;
54 |     nR.currentTarget.parentNode.appendChild(errorSpan);
55 |   }
56 | }
57 | 
58 | nR.addEvent(window, 'load', nR.init, false);
59 | 


--------------------------------------------------------------------------------
/08remotescripting/nameresolution/resolver.php:
--------------------------------------------------------------------------------
 1 |  'sil@kryogenix.org',
 5 |   'simon' => 'simon@incutio.com',
 6 |   'simonm' => 'simon@sitepoint.com',
 7 |   'nigel' => 'nrm@kingtide.com.au',
 8 |   'kev' => 'kevin@sitepoint.com'
 9 | );
10 | 
11 | $p = @$_GET['p'];
12 | 
13 | if (isset($names[$p]))
14 |   setcookie('RSLite', $names[$p]);
15 | 
16 | ?>
17 | 


--------------------------------------------------------------------------------
/08remotescripting/nameresolution/rslite.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | 
 3 | RSLite 1.0 - by Brent Ashley
 4 | Simple non-concurrent remote scripting calls.
 5 | send one string, receive one string
 6 | 
 7 | 1) use this include
 8 | 2) in body_onload(), set the RSLite var:
 9 |    // make sure not to scope it locally, since it's a global variable
10 |    RSLite = new RSLiteObject();
11 | 3) before using, set callback and failure functions if you want more than an alert
12 | 4) set interval and attempts for retries if defaults not suitable
13 | 5) call it, passing single parm:
14 |    RSLite.call( rsPage, parm )
15 | 6) your callback receives string, or failure function called.
16 | 
17 | rsPage simply takes input parm "p" and sets session-expiry cookie called "RSLite".
18 | it's a good idea to also immediately print out the value you send so you can 
19 | debug by going to that page with the browser
20 | 
21 | 
22 | */
23 | 
24 | function RSLiteObject(){
25 |   this.interval = 500;
26 |   this.attempts = 3;
27 |   this.i = new Image();
28 |   this.call = function ( page, parm ){
29 |     parm = (parm != null)? parm : '';
30 |     var d = new Date();
31 |     document.cookie = 'RSLite=x; expires=Fri, 31 Dec 1999 23:59:59 GMT;';
32 |     this.i.src = page + '?u=' + d.getTime() + '&p=' + parm;
33 |     setTimeout( "RSLite.receive(1);", this.interval );
34 |   }  
35 |   this.receive = function ( attempt ){  
36 |                    var response = null;
37 |                    var aCookie = document.cookie.split("; ");
38 |                    for (var i=0; i < aCookie.length; i++){
39 |                      var aCrumb = aCookie[i].split("=");
40 |                      if (aCrumb[0] == 'RSLite') response = aCrumb[1];
41 |                    }
42 |                    if ( response != null ){
43 |                      this.callback( unescape(response.replace(/\+/g,' ')) );
44 |                    } else {
45 |                      if (attempt < this.attempts){
46 |                        setTimeout( "RSLite.receive( " + (attempt+1) +" );",this.interval);
47 |                      } else {
48 |                        this.failure();
49 |                      }
50 |                    }    
51 |                  }
52 |   this.callback = function( response ){ 
53 |                     alert(response); 
54 |                   }
55 |   this.failure = function(){ 
56 |                    alert( "RSLite timed out"); 
57 |                  }
58 | }
59 | var RSLite;
60 | 


--------------------------------------------------------------------------------
/08remotescripting/simpleiframe/simple-iframe-2.css:
--------------------------------------------------------------------------------
 1 | div {
 2 |   border: 1px solid black;
 3 |   padding: 0 0 1em 0;
 4 |   width: 20em;
 5 | }
 6 | 
 7 | h2 {
 8 |   background-color: black;
 9 |   color: white;
10 |   text-align: center;
11 |   margin: 0;
12 | }
13 | 
14 | div p {
15 |   padding: 0 1em;
16 | }
17 | 
18 | #scriptframe {
19 |   width: 300px;
20 |   height: 100px;
21 |   border: 2px solid red;
22 | }
23 | 


--------------------------------------------------------------------------------
/08remotescripting/simpleiframe/simple-iframe-2.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 |   
 5 |     A simple iframe example
 6 |     
 7 |     
12 |   
13 |   
14 |     
    An iframe to which we send requests
    
15 |     
16 |     
    Send a request
    
18 |     
    
19 |       
    Response data received
    
20 |       
    No data yet.
    
21 |     
    
22 |   
23 | 
24 | 


--------------------------------------------------------------------------------
/08remotescripting/simpleiframe/simple-iframe-2a.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spbooks/dhtml1/95da5460674a4b54247aa9035a87138140c64b02/08remotescripting/simpleiframe/simple-iframe-2a.png


--------------------------------------------------------------------------------
/08remotescripting/simpleiframe/simple-iframe-2b.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spbooks/dhtml1/95da5460674a4b54247aa9035a87138140c64b02/08remotescripting/simpleiframe/simple-iframe-2b.png


--------------------------------------------------------------------------------
/08remotescripting/simpleiframe/simple-iframe-content-2.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 |   
 5 |     
    This iframe document contains the response from the server.
    
 6 |     
12 |   
13 | 
14 | 


--------------------------------------------------------------------------------
/08remotescripting/simpleiframe/simple-iframe-content.html:
--------------------------------------------------------------------------------
1 | 
3 | 
4 |   
5 |     
    This is a document in the iframe.
    
6 |   
7 | 
8 | 


--------------------------------------------------------------------------------
/08remotescripting/simpleiframe/simple-iframe.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 |   
 5 |     A simple iframe example
 6 |     
13 |   
14 |   
15 |     
    A simple iframe
    
16 |     
    Below is an iframe, styled in size with CSS and
17 |       displaying a different document.
    
18 |     
19 |   
20 | 
21 | 


--------------------------------------------------------------------------------
/09servercomms/editblog/editblog.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 |   
 5 |     editblog
 6 |     
 7 |     
 8 |   
 9 |   
10 |     
11 |     
      
12 |     
13 |     
14 |   
15 | 
16 | 
17 | 


--------------------------------------------------------------------------------
/09servercomms/editblog/editblog.js:
--------------------------------------------------------------------------------
  1 | var eB = {
  2 |   /* Change these bits */
  3 |   USERNAME: 'sil',
  4 |   PASSWORD: 'nowayjose!',
  5 |   API_URL: 'example_blogger.php',
  6 |   BLOG_NAME: '/main',
  7 |   
  8 |   /* Don't change anything below here */
  9 |   posts: null,
 10 | 
 11 |   init: function() {
 12 |     if (!jsolait) return;
 13 |     if (!document.getElementById) return;
 14 |     
 15 |     var xmlrpc = importModule('xmlrpc');
 16 |     eB.api = {
 17 |       getRecentPosts: new xmlrpc.XMLRPCMethod(eB.API_URL, 'blogger.getRecentPosts'),
 18 |       editPost: new xmlrpc.XMLRPCMethod(eB.API_URL, 'blogger.editPost')
 19 |     };
 20 |     
 21 |     var element;
 22 |     element = document.getElementById('get');
 23 |     eB.addEvent(element, 'click', eB.getPosts, false);
 24 |     element = document.getElementById('save');
 25 |     eB.addEvent(element, 'click', eB.sendPost, false);
 26 |   },
 27 |   
 28 |   addEvent: function(elm, evType, fn, useCapture) {
 29 |     // cross-browser event handling for IE5+, NS6 and Mozilla
 30 |     // By Scott Andrew
 31 |     if (elm.addEventListener) {
 32 |       elm.addEventListener(evType, fn, useCapture);
 33 |       return true;
 34 |     } else if (elm.attachEvent) {
 35 |       var r = elm.attachEvent('on' + evType, fn);
 36 |       return r;
 37 |     } else {
 38 |       elm['on' + evType] = fn;
 39 |     }
 40 |   },
 41 |   
 42 |   getPosts: function() {
 43 |     try {
 44 |       eB.posts = eB.api.getRecentPosts(
 45 |           '', eB.BLOG_NAME, eB.USERNAME, eB.PASSWORD, 5);
 46 |     } catch(e) {
 47 |       alert('There was an error fetching posts.');
 48 |       return;
 49 |     }
 50 |     var p = document.getElementById('posts');
 51 |     p.innerHTML = '';
 52 |     for (var i = 0; i < eB.posts.length; i++) {
 53 |       eB.addItem(p, eB.posts[i]);
 54 |     }
 55 |   },
 56 |   
 57 |   addItem: function(para, post) {
 58 |     var text = document.createTextNode(post.postid);
 59 | 
 60 |     var a = document.createElement('a');
 61 |     a.href = '#';
 62 |     a.postID = post.postid;
 63 |     eB.addEvent(a, 'click', eB.clickLink, false);
 64 |     a.appendChild(text);
 65 | 
 66 |     var li = document.createElement('li');
 67 |     li.appendChild(a);
 68 | 
 69 |     para.appendChild(li);
 70 |   },
 71 |   
 72 |   clickLink: function(e) {
 73 |     var t = window.event ? window.event.srcElement : e ? e.target : null;
 74 |     if (!t) return;
 75 |     while (t.nodeName.toLowerCase() != 'a' &&
 76 |         t.nodeName.toLowerCase() != 'body')
 77 |       t = t.parentNode;
 78 |     var postid = t.postID;
 79 |     for (var i = 0; i < eB.posts.length; i++) {
 80 |       if (eB.posts[i].postid == postid) {
 81 |         eB.CURRENT_POST = postid;
 82 |         document.getElementById('post').value = eB.posts[i].content;
 83 |         document.getElementById('save').disabled = '';
 84 |         return;
 85 |       }
 86 |     }
 87 |   },
 88 |   
 89 |   sendPost: function() {
 90 |     try {
 91 |       eB.api.editPost(
 92 |           '', eB.CURRENT_POST, eB.USERNAME, eB.PASSWORD,
 93 |           document.getElementById('post').value, true);
 94 |       alert('Post saved OK!');
 95 |       document.getElementById('post').value = '';
 96 |       eB.CURRENT_POST = null;
 97 |       document.getElementById('save').disabled = 'disabled';
 98 |     } catch(e) {
 99 |       alert('There was an error saving your post.\n(' + e.message + ')');
100 |       return;
101 |     }
102 |   }
103 | }
104 | 
105 | eB.addEvent(window, 'load', eB.init, false);
106 | 


--------------------------------------------------------------------------------
/09servercomms/editblog/example_blogger.php:
--------------------------------------------------------------------------------
 1 | methods = array(
13 | 		  // Blogger API
14 | 		  'blogger.getRecentPosts' => 'this:blogger_getRecentPosts',
15 | 		  'blogger.editPost' => 'this:blogger_editPost'
16 | 		);
17 | 		$this->IXR_Server($this->methods);
18 | 	}
19 | 
20 | 	/* blogger.getRecentPosts ...gets recent posts */
21 | 	function blogger_getRecentPosts($args) {
22 |         /* Returns a hard coded list of posts, ignoring input parameters. */
23 |         return array(
24 |             array(
25 |                 'userid' => 'simon',
26 |                 'dateCreated' => new IXR_Date(time()),
27 |                 'content' => 'This is the first post',
28 |                 'postid' => 'firstPost'
29 |             ),
30 |             array(
31 |                 'userid' => 'stuart',
32 |                 'dateCreated' => new IXR_Date(time()),
33 |                 'content' => 'This is another post!',
34 |                 'postid' => 'second'
35 |             )
36 |         );
37 |     }
38 | 
39 | 	/* blogger.editPost ...edits a post */
40 | 	function blogger_editPost($args) { 
41 | 	   /* This doesn't actually do anything. */
42 | 	   return true;
43 | 	}
44 | 
45 | }
46 | 
47 | $exampleBloggerServer = new ExampleBloggerServer();
48 | 
49 | ?>
50 | 


--------------------------------------------------------------------------------
/09servercomms/editblog/jsolait/doc/codecs.xhtml:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     .: jsolait :. | documentation | codecs
 6 |     
 7 |     
 8 |     
 9 |   
10 |   
11 |     
12 |     
      documentation | 
13 |                     codecs
      
14 |     
      
15 |       
        
16 |       
        copyright © 2004, Jan-Klaas Kollhof
        
17 |     
        
18 |     
        
19 |         
        Module codecs
        
20 |         This module extends the String class with encoding and decoding functionalities.
        
21 |         
22 |         
        
23 |         
24 |         
        public methods:▲
        
25 |           
26 |              
        listEncoders()
        
27 |                     Returns an Array with all encoder names.
        
28 |              
        
29 |              
        listDecoders()
        
30 |                     Returns an Arra with all decoder names.
        
31 |              
        
32 |         
        
33 |         
34 |         
        globals:▲
        
35 |           
36 |              
        String::decode(codec)
        
37 |                           Decodes an encoded string using the codec specified by the codecparameter .
        
38 |                           All parameters but the codec parameter are forwarded to the codec.
        
39 |              
        
40 |              
        String::encode(codec)
        
41 |                         Encodes a string using the codec specified by the codec parameter.
        
42 |                         All Parameters but the codec parameter are forwarded to the codec.
        
43 |              
        
44 |              
        String::decode_base64()
        
45 |                           Decodes a Base64 encoded string to a byte string.
        
46 |              
        
47 |              
        String::encode_base64()
        
48 |                           Encodes a string using Base64.
        
49 |              
        
50 |              
        String::decode_uri()
        
51 |                           Decodes a URI using decodeURI.
        
52 |              
        
53 |              
        String::encode_uri()
        
54 |                           Encodes a URI using encodeURI.
        
55 |              
        
56 |         
        
57 |         
58 |         
        codecs▲
        
59 |             
60 |             Currently there are only two codecs base64 and uri.
        
61 |             If you want to add your own codecs at runtime just extend the Stringl class by adding a 
62 |             String.prototype.encode_yourCodec or
63 |             String.prototype.decode_yourCodec method.
64 |         
        
65 |     
        
66 |   
67 | 
68 | 


--------------------------------------------------------------------------------
/09servercomms/editblog/jsolait/doc/crypto.xhtml:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     .: jsolait :. | documentation | crypto
 6 |     
 7 |     
 8 |     
 9 |   
10 |   
11 |     
12 |     
        documentation | 
13 |                     crypto
        
14 |     
        
15 |       
          
16 |       
          copyright © 2004, Jan-Klaas Kollhof
          
17 |     
          
18 |     
          
19 |          
          Module crypto
          
20 |          This module adds cryptographic services to jsolait.
21 |          
          
22 |          
23 |          
          public members:▲
          
24 |               
25 |                  
          listEncrypters()
          
26 |                               Returns an Array of all available encrypter names.
          
27 |                  
          
28 |                  
          listDecrypters()
          
29 |                               Returns an Array of all available decrypter names.
          
30 |                  
          
31 |          
          
32 |          
33 |          
          globals:▲
          
34 |               
35 |                  
          String::encrypt(crydec)
          
36 |                               Encrypts a string using the encrypter specified by the crydec.
          
37 |                             All parameters but the crypdec parameter are forwardet to the encrypter.
          
38 |                  
          
39 |                  
          String::decrypt(crydec)
          
40 |                               Decrypts a string using the decrypter specified by the crydec.
          
41 |                             All parameters but the crypdec parameter are forwardet to the decrypter.
          
42 |                  
          
43 |                  
          String::encrypt_xor(key)
          
44 |                               Encrypts a string by  XOR.
          
45 |                               The whole String will be XORed with the key parameter. 
          
46 |                               If the key is shorter than the String then it will be multiplied to fit the length of the String.
          
47 |                  
          
48 |                  
          String::decrypt_xor
          
49 |                               Decrypts a string using XOR.
          
50 |                             Since XORing is symetric it is the same as the encrypter.
          
51 |                  
          
52 |                  
          String::encrypt_rc4(key)
          
53 |                               Encrypts a string using the ARC4 algorithm.
          
54 |                              The key is a String and can be of any length.
55 |                  
          
56 |                  
          String::decrypt_rc4
          
57 |                               Decrypts a string using the ARC4 algorithm.
          
58 |                             Since it is symetric it is the same as the encrypter.
          
59 |                  
          
60 |          
          
61 |          
62 |          
          encrypters/decrypters▲
          
63 |             
64 |             Currently there are only two encrypters/decrypters xor and rc4.
          
65 |             If you want to add your own at runtime just extend the Stringl class by adding a 
66 |             String.prototype.encrypt_yourEncrypter or
67 |             String.prototype.decrypt_yourDecrypter method.
68 |         
          
69 |         
70 |      
          
71 |   
72 | 
73 | 


--------------------------------------------------------------------------------
/09servercomms/editblog/jsolait/doc/highlight.css:
--------------------------------------------------------------------------------
 1 | .S0 {
 2 | 	color: #808080;
 3 | }
 4 | .S1 {
 5 | 	color: #007F00;
 6 | }
 7 | .S2 {
 8 | 	color: #007F00;
 9 | }
10 | .S3 {
11 | 	color: #3F70AA;
12 | }
13 | .S4 {
14 | 	color: #007F7F;
15 | }
16 | .S5 {
17 | 	font-weight: bold;
18 | 	color: #00007F;
19 | }
20 | .S6 {
21 | 	color: #7F007F;
22 | }
23 | .S10 {
24 | 	font-weight: bold;
25 | 	color: #000000;
26 | }
27 | .S15 {
28 | 	color: #3F70AA;
29 | }
30 | .S18 {
31 | 	color: #804020;
32 | }
33 | span {
34 | 	font-family: Verdana;
35 | 	font-size: 10pt;
36 | }
37 | 
38 | S50 {
39 |     font-family: Times New Roman;
40 |     color: #000000;
41 |     font-size: 11pt;
42 | }
43 | .S51 {
44 |     color: #000080;
45 | }
46 | .S53 {
47 |     color: #008080;
48 | }
49 | .S56 {
50 |     color: #7F007F;
51 | }
52 | .S58 {
53 |     color: #800080;
54 | }
55 | .S510 {
56 |     font-family: Times New Roman;
57 |     color: #800080;
58 |     font-size: 11pt;
59 | }
60 | .S511 {
61 |     color: #000080;
62 | }
63 | .S521 {
64 |     color: #000080;
65 | }
66 | .S522 {
67 |     font-weight: bold;
68 |     color: #000080;
69 | }
70 | .S523 {
71 |     color: #006600;
72 | }
73 | .S524 {
74 |     color: #800000;
75 | }
76 | 
77 | .code{
78 |     padding:0.5em;
79 |     border:solid;
80 |     border-width:1px;
81 |     margin-left:1em;
82 |     margin-top:2em;
83 |     margin-bottom:1em;
84 | }
85 | 
86 | code{
87 |     font-size:115%;
88 | }
89 | 


--------------------------------------------------------------------------------
/09servercomms/editblog/jsolait/doc/jsonrpc.xhtml:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     .: jsolait :. | documentation | jsonrpc
 6 |     
 7 |     
 8 |     
 9 |   
10 |   
11 |     
12 |     
          documentation | 
13 |                     jsonrpc
          
14 |     
          
15 |       
            
16 |       
            copyright © 2004, Jan-Klaas Kollhof
            
17 |     
            
18 |     
            
19 |          
            Module jsonrpc
            
20 | 
21 |              This module implements the JSON-RPC protocoll.
            
22 |              It supports both JSON-RPC over HTTP and JSON-RPC over TCP sockets(if sockets are available).
            
23 |              
24 |         
            public members:▲
            
25 |               
26 |                  
            ServiceProxy(url, methodNames, localService)
            
27 |                         A class which creates proxy objects for remote JSON-RPC services.
            
28 |                       
              
29 |                             
            • ServiceProxy::url   The URL of the remote services.
              • 
30 |                             
            • ServiceProxy::methodNames   An Array containing the methodNames of the remote service.
              • 
31 |                             
            • ServiceProxy::localService   An Object providing methods to the remote service.
              • 
32 |                       
            
33 |                  
            
34 |          
            
35 |          
            dependencies:▲
            
36 |               
37 |               
38 |               
            lang
            
39 |                     
40 |                     The lang module is required for JSON object serialization and deserialization.
41 |               
            
42 |               
43 |               
            urllib
            
44 |                     
45 |                     The urllib module is only required when using JSON-RPC over HTTP.
46 |               
            
47 |               
48 |               
            Sockets
            
49 |                     
50 |                     You will need SVG1.2 sockets for JSON-RPC over TCP sockets to work.
51 |                     This dependency will change once the net module is written.
52 |                     It will provide networking services to jsolait.
53 |                 
            
54 |               
55 |          
            
56 |      
            
57 |   
58 | 
59 | 


--------------------------------------------------------------------------------
/09servercomms/editblog/jsolait/doc/xml.xhtml:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     .: jsolait :. | documentation | xml
 6 |     
 7 |     
 8 |     
 9 |   
10 |   
11 |     
12 |     
            documentation | 
13 |                     xml
            
14 |     
            
15 |       
              
16 |       
              copyright © 2004, Jan-Klaas Kollhof
              
17 |     
              
18 |     
              
19 |          
              Module xml
              
20 |             Provides parseXML and an importNode implementation.
21 |          
              public members:▲
              
22 |               
23 |                  
              NoXMLParser()
              
24 |                               Exception thrown if no parser could be instanciated.
              
25 |                  
              
26 |                  
              ParsingFailed()
              
27 |                               Exception thrown if a document could not be parsed.
              
28 |                               
                
29 |                                     
              • ParsingFailed::xml     The xml source which could not be parsed.
                • 
30 |                               
              
31 |                  
              
32 |                  
              
33 |                  
              parseXML(xml)
              
34 |                         Parses an xml document.
              
35 |                         xml      The xml text.
              
36 |                         returns           A DOM of the xml document.
              
37 |                  
              
38 |                  
              importNode(importedNode,deep)
              
39 |                          DOM2 implimentation of document.importNode().
              
40 |                         This will import into the current document. In SVG it will create SVG nodes in HTML it will create HTML nodes....
              
41 |                         This might become customizable in the future.
              
42 |                         importedNode    The node to import.
              
43 |                         deep =true        Import all childNodes recursively.
              
44 |                         returns                       The imported Node.
              
45 |                     
              
46 |                  
              
47 |                  
              node2XML(node)
              
48 |                          Turns an XML document into a String.
              
49 |                         node    The node to print.
              
50 |                         returns            A string containing the text for the XML.
              
51 |                     
              
52 |                  
              
53 |          
              
54 |          
              requirements▲
              
55 |             
56 |                 Requires Mozilla's or IE's XML objects or parseXML in SVG(ASV).
57 |          
              
58 |      
              
59 |   
60 | 
61 | 


--------------------------------------------------------------------------------
/09servercomms/filemanager/aqtree3clickable.css:
--------------------------------------------------------------------------------
 1 | /* Turn off list bullets */
 2 | ul.aqtree3clickable li { list-style: none; }
 3 | 
 4 | ul.aqtreeclickable, ul.aqtreeclickable ul, ul.aqtreeclickable li { margin: 0; padding: 0; }
 5 | 
 6 | /* Provide space for our own "bullet" inside the link */
 7 | ul.aqtree3clickable li a { padding-left: 20px; }
 8 | 
 9 | /* Show "bullets" in the links, depending on the class of the
10 |    LI that the link's in */
11 | ul.aqtree3clickable li.aq3open a {
12 |     background: url(gnome-fs-directory-visiting.png) center left no-repeat;
13 | }
14 | ul.aqtree3clickable li.aq3closed a {
15 |     background: url(gnome-fs-directory.png) center left no-repeat;
16 | }
17 | ul.aqtree3clickable li.aq3bullet a {
18 |     background: url(gnome-fs-directory-accept.png) center left no-repeat;
19 | }
20 | 
21 | /* Actually show and hide sublists */
22 | ul.aqtree3clickable li.aq3open ul { display: block; }
23 | ul.aqtree3clickable li.aq3closed ul { display: none; }
24 | 


--------------------------------------------------------------------------------
/09servercomms/filemanager/aqtree3clickable.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | aqtree3clickable.js
 3 | 
 4 | Converts an unordered list to an explorer-style tree, with clickable
 5 | icons
 6 | 
 7 | To make this work, simply add one line to your HTML:
 8 | 
 9 | 
10 | and then make the top UL of your nested unordered list of class
11 | "aqtree3clickable".
12 | 
13 | That's it. No registration function, nothing.
14 | 
15 | http://www.kryogenix.org/code/browser/aqlists/
16 | 
17 | Stuart Langridge, November 2002
18 | sil@kryogenix.org
19 | 
20 | Inspired by Aaron's labels.js (http://youngpup.net/demos/labels/) and Dave Lindquist's menuDropDown.js (http://www.gazingus.org/dhtml/?id=109)
21 | 
22 | */
23 | 
24 | addEvent(window, "load", makeTreesC);
25 | 
26 | function makeTreesC() {
27 |   // We don't actually need createElement, but we do
28 |   // need good DOM support, so this is a good check.
29 |   if (!document.createElement) return;
30 |     
31 |   uls = document.getElementsByTagName("ul");
32 |   for (uli=0;uli
 3 | 
 4 |   
 5 |     File Manager
 6 |     
 7 |     
 8 |     
 9 |     
10 |     
11 |     
12 |   
13 |   
14 | 
15 |     
              Drag a file to a folder
              
16 | 
17 |     
              
18 |       
                
19 |         
              • 
20 |           /
21 |           
                  
22 |             
                • 
23 |               spike
24 |             
                  • 
25 |             
                • 
26 |               sync
27 |             
                  • 
28 |             
                • 
29 |               zfs
30 |             
                  • 
31 |           
                
32 |         
                • 
33 |       
              
34 |     
              
35 | 
36 |     
              
37 |     
              
38 | 
39 |   
40 | 
41 | 


--------------------------------------------------------------------------------
/09servercomms/filemanager/getFiles.php:
--------------------------------------------------------------------------------
 1 | \n";
 7 | $pth = isset($_GET['path']) ? $_GET['path'] : '/';
 8 | $rp = realpath($ROOT . $pth);
 9 | 
10 | // Be paranoid; check that this is a subdir of ROOT
11 | if (strpos($rp, $ROOT) === 0) {
12 |   $dir = dir($rp);
13 |   while ($entry = $dir->read()) {
14 |     if (!is_dir($dir->path . '/' . $entry)) {
15 |       echo '' . htmlspecialchars($entry) . "\n";
16 |     }
17 |   }
18 | }
19 | echo "\n";
20 | ?>
21 | 
22 | 


--------------------------------------------------------------------------------
/09servercomms/filemanager/gnome-fs-directory-accept.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spbooks/dhtml1/95da5460674a4b54247aa9035a87138140c64b02/09servercomms/filemanager/gnome-fs-directory-accept.png


--------------------------------------------------------------------------------
/09servercomms/filemanager/gnome-fs-directory-visiting.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spbooks/dhtml1/95da5460674a4b54247aa9035a87138140c64b02/09servercomms/filemanager/gnome-fs-directory-visiting.png


--------------------------------------------------------------------------------
/09servercomms/filemanager/gnome-fs-directory.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spbooks/dhtml1/95da5460674a4b54247aa9035a87138140c64b02/09servercomms/filemanager/gnome-fs-directory.png


--------------------------------------------------------------------------------
/09servercomms/filemanager/moveFiles.php:
--------------------------------------------------------------------------------
 1 | 
25 | 


--------------------------------------------------------------------------------
/09servercomms/filemanager/test_data.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spbooks/dhtml1/95da5460674a4b54247aa9035a87138140c64b02/09servercomms/filemanager/test_data.zip


--------------------------------------------------------------------------------
/10xpath/10readrss/read-rss.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 5 | Blogroll
 6 | 
 7 | 
 8 | 
 9 | 
55 | 
56 | 
57 | 
              Weblogs
              
58 | 
70 | 
71 | 
72 | 


--------------------------------------------------------------------------------
/10xpath/10readrss/rss-example.rdf:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 6 | 
 7 |   
 8 |     SitePoint's DHTML & CSS Blog: Stylish Scripting
 9 |     http://www.sitepoint.com/blog-view.php?blogid=5
10 |     The latest posts in SitePoint's DHTML & CSS blog, 'Stylish Scripting'.
11 |     
12 |     
13 |       
14 |         
15 |         
16 |       
17 |     
18 |   
19 | 
20 |   
21 |     SitePoint's DHTML & CSS Blog: Stylish Scripting
22 |     http://www.sitepoint.com/blog-view.php?blogid=5
23 |     http://www.sitepoint.com/images/sitepoint-logo.gif
24 |   
25 | 
26 |   
27 |     CSS tricks in both dimensions
28 |     http://www.sitepoint.com/blog-post-view.php?id=197199
29 |     Cameron Adams and Dave Shea both came through recently with some smart new CSS techniques.  Cameron's trick, entitled Resolution dependent layout, provides a welcome new angle to the long running debate over liquid vs. fixed width designs. The standard dilemma is that fixed wi...
30 |     2004-09-22T06:10:41Z
31 |   
32 | 
33 |   
34 |     A9 and Google Local
35 |     http://www.sitepoint.com/blog-post-view.php?id=196678
36 |     If you want proof that remote scripting has hit the mainstream, look no further than the recent launches of both Amazon's A9.com search engine and Google's new Google Local service. Both make extensive use of remote scripting, a technique whereby JavaScript is used to refresh ...
37 |     2004-09-20T05:41:45Z
38 |   
39 | 
40 | 
41 | 


--------------------------------------------------------------------------------
/10xpath/10simplexpath/xpath-example.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 |   
 5 |     
 6 |     
 7 |     
 8 |   
 9 |   
10 |     Empty page that tests XPath via JavaScript
11 |   
12 | 
13 | 


--------------------------------------------------------------------------------
/10xpath/10simplexpath/xpath-example.js:
--------------------------------------------------------------------------------
 1 | var xml = '' +
 2 |   '' +
 3 |   '  ' +
 4 |   '    Drink beer' +
 5 |   '    ' +
 6 |   '      Modern DOM Scripting' +
 7 |   '    ' +
 8 |   '  ' +
 9 |   '  ' +
10 |   '    Write code' +
11 |   '  ' +
12 |   '  ' +
13 |   '    Write code' + 
14 |   '  ' +
15 |   '  sleep' +
16 |   '';
17 | 
18 | var dom = Sarissa.getDomDocument();
19 | dom.loadXML(xml);
20 | 
21 | /* Commands to make the XPath selections work in IE */
22 | dom.setProperty('SelectionNamespaces',
23 |     'xmlns:xsl="http://www.w3.org/1999/XSL/Transform"');
24 | dom.setProperty('SelectionLanguage', 'XPath');
25 | 
26 | var xpaths = [
27 |     '//day',
28 |     '/day',
29 |     '/day/activity',
30 |     '/day/activity/activity',
31 |     '//activity',
32 |     '//activity[@time="0900"]',
33 |     '/day/activity[2]'];
34 | 
35 | function queries() {
36 |   for (var i = 0; i < xpaths.length; i++) {
37 |     var nodes = dom.selectNodes(xpaths[i]);
38 |     var results = xpaths[i] + '\n';
39 |     for (var j = 0; j < nodes.length; j++) {
40 |       results += nodes[j].nodeName + '\n';
41 |     }
42 |     alert(results);
43 |   }
44 | }
45 | 
46 | window.onload = queries;
47 | 


--------------------------------------------------------------------------------