├── ajax ├── form_mailer.php ├── weather_bullet.gif ├── fieldset_gradient.jpg ├── weather_panel_top.gif ├── weather_panel_bottom.gif ├── weather_icon_partly_cloudy.gif ├── london.xml ├── new_york.xml ├── melbourne.xml ├── contact_form.ie.css ├── plain.css ├── try-catch_test.js ├── ajax_weather.php ├── try-catch_test.html ├── weather_widget.html ├── weather_widget.css ├── contact_form.css ├── index.html ├── contact_form.html ├── contact_form.js ├── weather_widget.js └── core.js ├── dom ├── cross.gif ├── tick.gif ├── polka_dots.gif ├── table_header.jpg ├── class.css ├── class.js ├── style_object.js ├── plain.css ├── stripy_tables.js ├── style_object.html ├── class.html ├── stripy_tables.css ├── index.html ├── stripy_tables.html └── core.js ├── animation ├── grass.jpg ├── starfleet.png ├── robot_strip.gif ├── soccer_ball.png ├── klingonempire.png ├── tooltips_delay.ie6.css ├── robot_animation.css ├── path-based_motion.ie6.css ├── accordion_animated.ie6.css ├── scriptaculous_highlight.js ├── path-based_motion.css ├── path-based_motion2.css ├── path-based_motion3.css ├── path-based_motion4.css ├── plain.css ├── clear_timeout.js ├── robot_animation.js ├── robot_animation.html ├── clear_timeout.html ├── path-based_motion.html ├── path-based_motion2.html ├── path-based_motion3.html ├── path-based_motion4.html ├── path-based_motion.js ├── scriptaculous_highlight.html ├── tooltips_delay.css ├── path-based_motion3.js ├── path-based_motion2.js ├── path-based_motion4.js ├── tooltips_delay.js ├── accordion_animated.css ├── scriptaculous.js ├── accordion_animated.html ├── tooltips_delay.html ├── index.html ├── accordion_animated.js └── core.js ├── events ├── starfleet.ai ├── starfleet.png ├── klingonempire.ai ├── klingonempire.png ├── tooltips.ie6.css ├── accordion.ie6.css ├── linkhandler.js ├── clickprompt.js ├── newwindow.js ├── linklistener.js ├── clickprompt.html ├── linkhandler.html ├── linklistener.html ├── strayclickcatcher.html ├── clickpromptlistener.html ├── clickpromptlistener.js ├── tooltips.css ├── strayclickcatcher.js ├── tooltips.js ├── newwindow.html ├── accordion.css ├── accordion.js ├── index.html ├── accordion.html ├── tooltips.html └── core.js ├── forms ├── slider_scale.jpg ├── slider_thumb.gif ├── formvalidation.css ├── requiredfield.css ├── dependentfields.css ├── cascadingmenu.css ├── requiredfield-dom0.js ├── requiredfield.js ├── requiredfield.html ├── slider.css ├── slider.html ├── formvalidation.html ├── .#formvalidation.js.1.2 ├── formvalidation-dom0.js ├── formvalidation.js ├── dependentfields.html ├── dependentfields.js ├── index.html ├── slider.js ├── cascadingmenu.html ├── cascadingmenu.js └── core.js ├── shared └── archive_styles │ ├── book-cover.png │ ├── sitepoint-logo.gif │ └── archive.css ├── errors ├── syntax.js ├── syntax.html ├── runtime.html ├── logic.js ├── runtime.js ├── logic.html ├── index.html └── core.js └── index.html /ajax/form_mailer.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dom/cross.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/javascript1/HEAD/dom/cross.gif -------------------------------------------------------------------------------- /dom/tick.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/javascript1/HEAD/dom/tick.gif -------------------------------------------------------------------------------- /animation/grass.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/javascript1/HEAD/animation/grass.jpg -------------------------------------------------------------------------------- /dom/polka_dots.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/javascript1/HEAD/dom/polka_dots.gif -------------------------------------------------------------------------------- /events/starfleet.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/javascript1/HEAD/events/starfleet.ai -------------------------------------------------------------------------------- /dom/table_header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/javascript1/HEAD/dom/table_header.jpg -------------------------------------------------------------------------------- /events/starfleet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/javascript1/HEAD/events/starfleet.png -------------------------------------------------------------------------------- /ajax/weather_bullet.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/javascript1/HEAD/ajax/weather_bullet.gif -------------------------------------------------------------------------------- /animation/starfleet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/javascript1/HEAD/animation/starfleet.png -------------------------------------------------------------------------------- /events/klingonempire.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/javascript1/HEAD/events/klingonempire.ai -------------------------------------------------------------------------------- /events/klingonempire.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/javascript1/HEAD/events/klingonempire.png -------------------------------------------------------------------------------- /forms/slider_scale.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/javascript1/HEAD/forms/slider_scale.jpg -------------------------------------------------------------------------------- /forms/slider_thumb.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/javascript1/HEAD/forms/slider_thumb.gif -------------------------------------------------------------------------------- /ajax/fieldset_gradient.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/javascript1/HEAD/ajax/fieldset_gradient.jpg -------------------------------------------------------------------------------- /ajax/weather_panel_top.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/javascript1/HEAD/ajax/weather_panel_top.gif -------------------------------------------------------------------------------- /animation/robot_strip.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/javascript1/HEAD/animation/robot_strip.gif -------------------------------------------------------------------------------- /animation/soccer_ball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/javascript1/HEAD/animation/soccer_ball.png -------------------------------------------------------------------------------- /ajax/weather_panel_bottom.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/javascript1/HEAD/ajax/weather_panel_bottom.gif -------------------------------------------------------------------------------- /animation/klingonempire.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/javascript1/HEAD/animation/klingonempire.png -------------------------------------------------------------------------------- /ajax/weather_icon_partly_cloudy.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/javascript1/HEAD/ajax/weather_icon_partly_cloudy.gif -------------------------------------------------------------------------------- /events/tooltips.ie6.css: -------------------------------------------------------------------------------- 1 | .federation .tooltip { 2 | height: 54px; 3 | } 4 | 5 | .klingon .tooltip { 6 | height: 54px; 7 | } -------------------------------------------------------------------------------- /shared/archive_styles/book-cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/javascript1/HEAD/shared/archive_styles/book-cover.png -------------------------------------------------------------------------------- /animation/tooltips_delay.ie6.css: -------------------------------------------------------------------------------- 1 | .federation .tooltip { 2 | height: 54px; 3 | } 4 | 5 | .klingon .tooltip { 6 | height: 54px; 7 | } -------------------------------------------------------------------------------- /dom/class.css: -------------------------------------------------------------------------------- 1 | .unreadable 2 | { 3 | background-image: url(polka_dots.gif); 4 | background-position: 15px 15px; 5 | color: #FFFFFF; 6 | } -------------------------------------------------------------------------------- /shared/archive_styles/sitepoint-logo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/javascript1/HEAD/shared/archive_styles/sitepoint-logo.gif -------------------------------------------------------------------------------- /animation/robot_animation.css: -------------------------------------------------------------------------------- 1 | #robot { 2 | width: 150px; 3 | height: 150px; 4 | background-image: url(robot_strip.gif); 5 | background-repeat: no-repeat; 6 | background-position: 0 0; 7 | } -------------------------------------------------------------------------------- /events/accordion.ie6.css: -------------------------------------------------------------------------------- 1 | /* Fixes the unwanted spacing between list items 2 | Side effect: only the text of each heading is clickable. */ 3 | ul.accordion li { 4 | display: inline; 5 | } 6 | -------------------------------------------------------------------------------- /animation/path-based_motion.ie6.css: -------------------------------------------------------------------------------- 1 | #soccerBall { 2 | background-image: none; 3 | filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="soccer_ball.png", sizingMethod="crop"); 4 | } 5 | -------------------------------------------------------------------------------- /animation/accordion_animated.ie6.css: -------------------------------------------------------------------------------- 1 | /* Fixes the unwanted spacing between list items 2 | Side effect: only the text of each heading is clickable. */ 3 | ul.accordion li { 4 | display: inline; 5 | } -------------------------------------------------------------------------------- /ajax/london.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | London 4 | 5 5 | Fine, partly cloudy 6 | partlyCloudy 7 | -------------------------------------------------------------------------------- /dom/class.js: -------------------------------------------------------------------------------- 1 | var ClassChange = 2 | { 3 | init: function() 4 | { 5 | var body = document.getElementsByTagName("body")[0]; 6 | Core.addClass(body, "unreadable"); 7 | } 8 | }; 9 | 10 | Core.start(ClassChange); -------------------------------------------------------------------------------- /ajax/new_york.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | New York 4 | 10 5 | Fine, partly cloudy 6 | partlyCloudy 7 | -------------------------------------------------------------------------------- /ajax/melbourne.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Melbourne 4 | 18 5 | Fine, partly cloudy 6 | partlyCloudy 7 | -------------------------------------------------------------------------------- /animation/scriptaculous_highlight.js: -------------------------------------------------------------------------------- 1 | var Highlight = 2 | { 3 | init: function() 4 | { 5 | new Effect.Highlight("introduction", {startcolor: "#FF0000", endcolor: "#0000FF", duration: 2}); 6 | } 7 | }; 8 | 9 | Core.start(Highlight); -------------------------------------------------------------------------------- /dom/style_object.js: -------------------------------------------------------------------------------- 1 | var StyleObject = 2 | { 3 | init: function() 4 | { 5 | var body = document.getElementsByTagName("body")[0]; 6 | body.style.backgroundColor = "#000000"; 7 | body.style.color = "#FFFFFF"; 8 | } 9 | }; 10 | 11 | Core.start(StyleObject); -------------------------------------------------------------------------------- /errors/syntax.js: -------------------------------------------------------------------------------- 1 | // This script contains four syntax errors 2 | var MyScript = { 3 | init: function 4 | { 5 | MyScript.doSomething(); 6 | } 7 | doSomething: function() 8 | { 9 | alert("Hold onto your "hat"!"); 10 | \\ something happens 11 | } 12 | }; 13 | 14 | Core.start(MyScript); -------------------------------------------------------------------------------- /forms/formvalidation.css: -------------------------------------------------------------------------------- 1 | /* Basic styles */ 2 | 3 | body { 4 | background-color: #2E2E33; 5 | color: #FFF; 6 | font: small Verdana, Arial, sans-serif; 7 | padding: 0 10em; 8 | } 9 | 10 | a:link { 11 | color: #C0C0FF; 12 | } 13 | 14 | a:visited { 15 | color: #A0A0FF; 16 | } 17 | 18 | a:hover, a:focus, a:active { 19 | color: #F0A000; 20 | } -------------------------------------------------------------------------------- /forms/requiredfield.css: -------------------------------------------------------------------------------- 1 | /* Basic styles */ 2 | 3 | body { 4 | background-color: #2E2E33; 5 | color: #FFF; 6 | font: small Verdana, Arial, sans-serif; 7 | padding: 0 10em; 8 | } 9 | 10 | a:link { 11 | color: #C0C0FF; 12 | } 13 | 14 | a:visited { 15 | color: #A0A0FF; 16 | } 17 | 18 | a:hover, a:focus, a:active { 19 | color: #F0A000; 20 | } -------------------------------------------------------------------------------- /events/linkhandler.js: -------------------------------------------------------------------------------- 1 | var wikipediaLink = 2 | { 3 | init: function() 4 | { 5 | var link = document.getElementById("wikipedia"); 6 | link.onclick = wikipediaLink.clickHandler; 7 | }, 8 | 9 | clickHandler: function() 10 | { 11 | alert("Don't believe everything you read on Wikipedia!"); 12 | } 13 | }; 14 | 15 | Core.start(wikipediaLink); 16 | -------------------------------------------------------------------------------- /events/clickprompt.js: -------------------------------------------------------------------------------- 1 | var wikipediaLink = 2 | { 3 | init: function() 4 | { 5 | var link = document.getElementById("wikipedia"); 6 | link.onclick = wikipediaLink.clickHandler; 7 | }, 8 | 9 | clickHandler: function() 10 | { 11 | if (!confirm("Are you sure you want to leave this site?")) 12 | { 13 | return false; 14 | } 15 | } 16 | }; 17 | 18 | Core.start(wikipediaLink); 19 | -------------------------------------------------------------------------------- /animation/path-based_motion.css: -------------------------------------------------------------------------------- 1 | #grass { 2 | background-image: url(grass.jpg); 3 | border-top: 1px solid #FFF; 4 | height: 300px; 5 | position: relative; 6 | width: 750px; 7 | } 8 | 9 | #soccerBall { 10 | background-image: url(soccer_ball.png); 11 | background-repeat: no-repeat; 12 | height: 125px; 13 | left: 0; 14 | margin-top: 25px; 15 | position: absolute; 16 | top: 75px; 17 | width: 125px; 18 | } -------------------------------------------------------------------------------- /animation/path-based_motion2.css: -------------------------------------------------------------------------------- 1 | #grass { 2 | background-image: url(grass.jpg); 3 | border-top: 1px solid #FFF; 4 | height: 300px; 5 | position: relative; 6 | width: 750px; 7 | } 8 | 9 | #soccerBall { 10 | background-image: url(soccer_ball.png); 11 | background-repeat: no-repeat; 12 | height: 125px; 13 | left: 0; 14 | margin-top: 25px; 15 | position: absolute; 16 | top: 0; 17 | width: 125px; 18 | } -------------------------------------------------------------------------------- /animation/path-based_motion3.css: -------------------------------------------------------------------------------- 1 | #grass { 2 | background-image: url(grass.jpg); 3 | border-top: 1px solid #FFF; 4 | height: 300px; 5 | position: relative; 6 | width: 750px; 7 | } 8 | 9 | #soccerBall { 10 | background-image: url(soccer_ball.png); 11 | background-repeat: no-repeat; 12 | height: 125px; 13 | left: 0; 14 | margin-top: 25px; 15 | position: absolute; 16 | top: 0; 17 | width: 125px; 18 | } -------------------------------------------------------------------------------- /animation/path-based_motion4.css: -------------------------------------------------------------------------------- 1 | #grass { 2 | background-image: url(grass.jpg); 3 | border-top: 1px solid #FFF; 4 | height: 300px; 5 | position: relative; 6 | width: 750px; 7 | } 8 | 9 | #soccerBall { 10 | background-image: url(soccer_ball.png); 11 | background-repeat: no-repeat; 12 | height: 125px; 13 | left: 0; 14 | margin-top: 25px; 15 | position: absolute; 16 | top: 0; 17 | width: 125px; 18 | } -------------------------------------------------------------------------------- /ajax/contact_form.ie.css: -------------------------------------------------------------------------------- 1 | fieldset 2 | { 3 | position: relative; 4 | } 5 | 6 | legend 7 | { 8 | position: relative; 9 | left: -7px; 10 | } 11 | 12 | fieldset fieldset legend 13 | { 14 | top: 0; 15 | } 16 | 17 | legend span 18 | { 19 | width: 20em; 20 | } 21 | 22 | fieldset ol 23 | { 24 | margin-top: 3em; 25 | padding-top: 0; 26 | zoom: 1; 27 | } 28 | 29 | fieldset fieldset ol 30 | { 31 | margin-top: 0; 32 | } -------------------------------------------------------------------------------- /events/newwindow.js: -------------------------------------------------------------------------------- 1 | var externalLinks = 2 | { 3 | init: function() 4 | { 5 | var extLinks = Core.getElementsByClass("external"); 6 | 7 | for (var i = 0; i < extLinks.length; i++) 8 | { 9 | extLinks[i].onclick = externalLinks.clickHandler; 10 | } 11 | }, 12 | 13 | clickHandler: function() 14 | { 15 | open(this.href); 16 | return false; 17 | } 18 | }; 19 | 20 | Core.start(externalLinks); 21 | -------------------------------------------------------------------------------- /ajax/plain.css: -------------------------------------------------------------------------------- 1 | /* Zero default margin & padding around common elements */ 2 | body, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, li, ol, p, ul 3 | { 4 | margin: 0; 5 | border: 0 none #FFFFFF; 6 | padding: 0; 7 | } 8 | 9 | body 10 | { 11 | padding: 20px; 12 | font-size: 90%; 13 | font-family: "Baskerville", sans-serif; 14 | } 15 | 16 | h1 17 | { 18 | font-size: 225%; 19 | font-family: "Univers Light Condensed", sans-serif; 20 | } -------------------------------------------------------------------------------- /dom/plain.css: -------------------------------------------------------------------------------- 1 | /* Zero default margin & padding around common elements */ 2 | body, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, li, ol, p, ul 3 | { 4 | margin: 0; 5 | border: 0 none #FFFFFF; 6 | padding: 0; 7 | } 8 | 9 | body 10 | { 11 | padding: 20px; 12 | font-size: 90%; 13 | font-family: "Baskerville", sans-serif; 14 | } 15 | 16 | h1 17 | { 18 | font-size: 225%; 19 | font-family: "Univers Light Condensed", sans-serif; 20 | } -------------------------------------------------------------------------------- /animation/plain.css: -------------------------------------------------------------------------------- 1 | /* Zero default margin & padding around common elements */ 2 | body, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, li, ol, p, ul 3 | { 4 | margin: 0; 5 | border: 0 none #FFFFFF; 6 | padding: 0; 7 | } 8 | 9 | body 10 | { 11 | padding: 20px; 12 | font-size: 90%; 13 | font-family: "Baskerville", sans-serif; 14 | } 15 | 16 | h1 17 | { 18 | font-size: 225%; 19 | font-family: "Univers Light Condensed", "Univers Condensed", sans-serif; 20 | } -------------------------------------------------------------------------------- /ajax/try-catch_test.js: -------------------------------------------------------------------------------- 1 | var TryCatch = 2 | { 3 | init: function() 4 | { 5 | try 6 | { 7 | var requester = new XMLHttpRequest(); 8 | } 9 | catch (error) 10 | { 11 | try 12 | { 13 | var requester = new ActiveXObject("Microsoft.XMLHTTP"); 14 | } 15 | catch (error) 16 | { 17 | var requester = null; 18 | } 19 | } 20 | 21 | alert(typeof requester); 22 | } 23 | }; 24 | 25 | Core.start(TryCatch); -------------------------------------------------------------------------------- /forms/dependentfields.css: -------------------------------------------------------------------------------- 1 | /* Basic styles */ 2 | 3 | body { 4 | background-color: #2E2E33; 5 | color: #FFF; 6 | font: small Verdana, Arial, sans-serif; 7 | padding: 0 10em; 8 | } 9 | 10 | a:link { 11 | color: #C0C0FF; 12 | } 13 | 14 | a:visited { 15 | color: #A0A0FF; 16 | } 17 | 18 | a:hover, a:focus, a:active { 19 | color: #F0A000; 20 | } 21 | 22 | legend { 23 | color: #FFF; 24 | } 25 | 26 | label.secondary { 27 | display: block; 28 | margin-left: 2em; 29 | } 30 | 31 | label.disabled { 32 | color: #A0A0A0; 33 | } -------------------------------------------------------------------------------- /forms/cascadingmenu.css: -------------------------------------------------------------------------------- 1 | /* Basic styles */ 2 | 3 | body { 4 | background-color: #2E2E33; 5 | color: #FFF; 6 | font: small Verdana, Arial, sans-serif; 7 | padding: 0 10em; 8 | } 9 | 10 | a:link { 11 | color: #C0C0FF; 12 | } 13 | 14 | a:visited { 15 | color: #A0A0FF; 16 | } 17 | 18 | a:hover, a:focus, a:active { 19 | color: #F0A000; 20 | } 21 | 22 | legend { 23 | color: #FFF; 24 | } 25 | 26 | label { 27 | display: block; 28 | } 29 | 30 | fieldset label { 31 | display: inline; 32 | } 33 | fieldset select { 34 | margin: 0 1em 0 0.5em; 35 | } -------------------------------------------------------------------------------- /ajax/ajax_weather.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /errors/syntax.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Syntax Errors 5 | 6 | 7 | 8 | 9 | 10 |

Syntax Errors

11 |

This page loads a script that contains a syntax error.

12 | 13 | 14 | -------------------------------------------------------------------------------- /dom/stripy_tables.js: -------------------------------------------------------------------------------- 1 | var StripyTables = 2 | { 3 | init: function() 4 | { 5 | var tables = Core.getElementsByClass("dataTable"); 6 | 7 | for (var i = 0; i < tables.length; i++) 8 | { 9 | var tbodys = tables[i].getElementsByTagName("tbody"); 10 | 11 | for (var j = 0; j < tbodys.length; j++) 12 | { 13 | var rows = tbodys[j].getElementsByTagName("tr"); 14 | 15 | for (var k = 1; k < rows.length; k += 2) 16 | { 17 | Core.addClass(rows[k], "alt"); 18 | } 19 | } 20 | } 21 | } 22 | }; 23 | 24 | Core.start(StripyTables); -------------------------------------------------------------------------------- /errors/runtime.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Runtime Errors 5 | 6 | 7 | 8 | 9 | 10 |

Runtime Errors

11 |

This page loads a script that contains a runtime error.

12 | 13 | 14 | -------------------------------------------------------------------------------- /events/linklistener.js: -------------------------------------------------------------------------------- 1 | var wikipediaLink = 2 | { 3 | init: function() 4 | { 5 | var link = document.getElementById("wikipedia"); 6 | 7 | if (typeof link.addEventListener != "undefined") 8 | { 9 | link.addEventListener("click", wikipediaLink.clickListener, false); 10 | } 11 | else if (typeof link.attachEvent != "undefined") 12 | { 13 | link.attachEvent("onclick", wikipediaLink.clickListener); 14 | } 15 | }, 16 | 17 | clickListener: function() 18 | { 19 | alert("Don't believe everything you read on Wikipedia!"); 20 | } 21 | }; 22 | 23 | Core.start(wikipediaLink); 24 | -------------------------------------------------------------------------------- /ajax/try-catch_test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Try-Catch Test 5 | 6 | 7 | 8 | 9 | 10 | 11 |

12 | Try-Catch Test 13 |

14 | 15 | -------------------------------------------------------------------------------- /animation/clear_timeout.js: -------------------------------------------------------------------------------- 1 | var ClearTimer = 2 | { 3 | init: function() 4 | { 5 | var start = document.getElementById("start"); 6 | Core.addEventListener(start, "click", ClearTimer.clickStart, false); 7 | 8 | var stop = document.getElementById("stop"); 9 | Core.addEventListener(stop, "click", ClearTimer.clickStop, false); 10 | }, 11 | clickStart: function() 12 | { 13 | ClearTimer.timer = setTimeout("alert('Launched')", 2000); 14 | }, 15 | clickStop: function() 16 | { 17 | clearTimeout(ClearTimer.timer); 18 | 19 | alert("Aborted"); 20 | } 21 | }; 22 | 23 | Core.start(ClearTimer); -------------------------------------------------------------------------------- /forms/requiredfield-dom0.js: -------------------------------------------------------------------------------- 1 | var RequiredField = 2 | { 3 | init: function() 4 | { 5 | var requiredField = document.getElementById("requiredfield"); 6 | var theForm = requiredField.form; 7 | 8 | theForm.onsubmit = RequiredField.submitHandler; 9 | }, 10 | 11 | submitHandler: function() 12 | { 13 | var requiredField = document.getElementById("requiredfield"); 14 | 15 | if (requiredField.value == "") 16 | { 17 | requiredField.focus(); 18 | alert("Please fill in a value for this required field."); 19 | return false; 20 | } 21 | } 22 | }; 23 | 24 | Core.start(RequiredField); -------------------------------------------------------------------------------- /animation/robot_animation.js: -------------------------------------------------------------------------------- 1 | var Robot = 2 | { 3 | init: function() 4 | { 5 | Robot.div = document.getElementById("robot"); 6 | Robot.frameHeight = 150; 7 | Robot.frames = 10; 8 | Robot.offsetY = 0; 9 | 10 | Robot.animate(); 11 | }, 12 | animate: function() 13 | { 14 | Robot.offsetY -= Robot.frameHeight; 15 | 16 | if (Robot.offsetY <= -Robot.frameHeight * Robot.frames) 17 | { 18 | Robot.offsetY = 0; 19 | } 20 | 21 | Robot.div.style.backgroundPosition = "0 " + Robot.offsetY + "px"; 22 | 23 | setTimeout(Robot.animate, 75); 24 | } 25 | }; 26 | 27 | Core.start(Robot); -------------------------------------------------------------------------------- /errors/logic.js: -------------------------------------------------------------------------------- 1 | // This script contains three logic errors 2 | var MyScript = { 3 | init: function() 4 | { 5 | var links = document.getElementsByTagName("a"); 6 | var exampleLinks = []; 7 | for (var i = 0; i < links.length; i++) 8 | { 9 | if (links[i].className = "Example") 10 | { 11 | Core.addEventListener( 12 | links[i], "click", MyScript.doSomething); 13 | exampleLinks[exampleLinks.length] = links[i]; 14 | i--; 15 | } 16 | } 17 | }, 18 | doSomething: function(event) 19 | { 20 | alert("Hold onto your \"hat\"!"); 21 | } 22 | }; 23 | 24 | Core.start(MyScript); -------------------------------------------------------------------------------- /dom/style_object.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Style Object 6 | 8 | 9 | 10 | 11 | 12 | 13 |

14 | What's black and white and read all over? 15 |

16 | 17 | -------------------------------------------------------------------------------- /forms/requiredfield.js: -------------------------------------------------------------------------------- 1 | var RequiredField = 2 | { 3 | init: function() 4 | { 5 | var requiredField = document.getElementById("requiredfield"); 6 | var theForm = requiredField.form; 7 | 8 | Core.addEventListener(theForm, "submit", RequiredField.submitListener); 9 | }, 10 | 11 | submitListener: function(event) 12 | { 13 | var requiredField = document.getElementById("requiredfield"); 14 | 15 | if (requiredField.value == "") 16 | { 17 | requiredField.focus(); 18 | alert("Please fill in a value for this required field."); 19 | Core.preventDefault(event); 20 | } 21 | } 22 | }; 23 | 24 | Core.start(RequiredField); -------------------------------------------------------------------------------- /events/clickprompt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Link Click Event Handler 5 | 6 | 7 | 8 | 9 | 10 |

The first captain of the USS Enterprise NCC-1701 was Christopher 12 | Pike.

13 | 14 | 15 | -------------------------------------------------------------------------------- /events/linkhandler.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Link Click Event Handler 5 | 6 | 7 | 8 | 9 | 10 |

The first captain of the USS Enterprise NCC-1701 was Christopher 12 | Pike.

13 | 14 | 15 | -------------------------------------------------------------------------------- /events/linklistener.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Link Click Event Listener 5 | 6 | 7 | 8 | 9 | 10 |

The first captain of the USS Enterprise NCC-1701 was Christopher 12 | Pike.

13 | 14 | 15 | -------------------------------------------------------------------------------- /dom/class.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Adding a class 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 | Now you see me 16 |

17 | 18 | -------------------------------------------------------------------------------- /errors/runtime.js: -------------------------------------------------------------------------------- 1 | // This script contains three runtime errors 2 | var MyScript = { 3 | init: function() 4 | { 5 | var example = document.getElementsById("example"); 6 | 7 | for (var i = 0; i < example.length; i++) 8 | { 9 | Core.addEventListener(example[i], "click", doSomething); 10 | } 11 | 12 | var links = documents.getElementsByTagName("a"); 13 | var firstLink = links[0]; 14 | 15 | if (firstLink && firstLink.className == "") 16 | { 17 | alert("The first link has no class assigned to it!"); 18 | } 19 | }, 20 | doSomething: function(event) 21 | { 22 | alert("Hold onto your \"hat\"!"); 23 | } 24 | }; 25 | 26 | Core.start(MyScript); -------------------------------------------------------------------------------- /events/strayclickcatcher.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Link Click Event Listener 5 | 6 | 7 | 8 | 9 | 10 |

The first captain of the USS Enterprise NCC-1701 was Christopher 12 | Pike.

13 | 14 | 15 | -------------------------------------------------------------------------------- /events/clickpromptlistener.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Link Click Event Listener 5 | 6 | 7 | 8 | 9 | 10 |

The first captain of the USS Enterprise NCC-1701 was Christopher 12 | Pike.

13 | 14 | 15 | -------------------------------------------------------------------------------- /animation/robot_animation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Robot Animation 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

Robot Animation

13 |
14 | 15 | -------------------------------------------------------------------------------- /animation/clear_timeout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Clearing a Timer 5 | 6 | 7 | 8 | 9 | 10 | 11 |

Clearing a Timer

12 |
13 | 14 | 15 |
16 | 17 | -------------------------------------------------------------------------------- /errors/logic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Logic Errors 5 | 6 | 7 | 8 | 9 | 10 |

Logic Errors

11 |

This page loads a script that contains logic errors, including an infinite loop!

12 |

This is an example, but this is not.

13 | 14 | 15 | -------------------------------------------------------------------------------- /forms/requiredfield.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Trivial Form Validation 5 | 6 | 7 | 8 | 9 | 10 | 11 |

A Required Field

12 |
13 |
14 | 15 |
16 |
17 | 18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /events/clickpromptlistener.js: -------------------------------------------------------------------------------- 1 | var wikipediaLink = 2 | { 3 | init: function() 4 | { 5 | var link = document.getElementById("wikipedia"); 6 | 7 | if (link.addEventListener) 8 | { 9 | link.addEventListener("click", wikipediaLink.clickListener, false); 10 | } 11 | else if (link.attachEvent) 12 | { 13 | link.attachEvent("onclick", wikipediaLink.clickListener); 14 | } 15 | }, 16 | 17 | clickListener: function(event) 18 | { 19 | if (typeof event == "undefined") 20 | { 21 | event = window.event; 22 | } 23 | 24 | if (!confirm("Are you sure you want to leave this site?")) 25 | { 26 | if (typeof event.preventDefault != "undefined") 27 | { 28 | event.preventDefault(); 29 | } 30 | else 31 | { 32 | event.returnValue = false; 33 | } 34 | } 35 | } 36 | }; 37 | 38 | Core.start(wikipediaLink); 39 | -------------------------------------------------------------------------------- /animation/path-based_motion.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Path-based Motion 5 | 6 | 7 | 8 | 11 | 12 | 13 | 14 | 15 |

Path-based Motion

16 |
17 |
18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /animation/path-based_motion2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Path-based Motion 2 5 | 6 | 7 | 8 | 11 | 12 | 13 | 14 | 15 |

Path-based Motion 2

16 |
17 |
18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /animation/path-based_motion3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Path-based Motion 3 5 | 6 | 7 | 8 | 11 | 12 | 13 | 14 | 15 |

Path-based Motion 3

16 |
17 |
18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /animation/path-based_motion4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Path-based Motion 4 5 | 6 | 7 | 8 | 11 | 12 | 13 | 14 | 15 |

Path-based Motion 4

16 |
17 |
18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /forms/slider.css: -------------------------------------------------------------------------------- 1 | /* Basic styles */ 2 | 3 | body { 4 | background-color: #FFF; 5 | color: #2E2E33; 6 | font: small Verdana, Arial, sans-serif; 7 | padding: 0 10em; 8 | } 9 | 10 | a:link { 11 | color: #C0C0FF; 12 | } 13 | 14 | a:visited { 15 | color: #A0A0FF; 16 | } 17 | 18 | a:hover, a:focus, a:active { 19 | color: #F0A000; 20 | } 21 | 22 | span.sliderControl { 23 | display: block; 24 | height: 79px; 25 | position: relative; 26 | } 27 | 28 | span.sliderTrack { 29 | background: url(slider_scale.jpg); 30 | display: block; 31 | height: 72px; 32 | left: 0; 33 | position: absolute; 34 | top: 7px; 35 | width: 430px; 36 | } 37 | 38 | span.sliderControl span.sliderThumb { 39 | background-image: url(slider_thumb.gif); 40 | cursor: w-resize; 41 | height: 35px; 42 | position: absolute; 43 | top: 0; 44 | width: 20px; 45 | } 46 | 47 | span.sliderControl input.slider { 48 | margin-left: 430px; 49 | } -------------------------------------------------------------------------------- /forms/slider.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Slider Control 5 | 6 | 7 | 8 | 9 | 10 | 11 |

Shield Intensity

12 |
13 |
14 | 17 |
18 |
19 | 20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /dom/stripy_tables.css: -------------------------------------------------------------------------------- 1 | /* Zero default margin & padding around common elements */ 2 | body, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, li, ol, p, ul 3 | { 4 | margin: 0; 5 | border: 0 none #FFFFFF; 6 | padding: 0; 7 | } 8 | 9 | body 10 | { 11 | padding: 20px; 12 | font-size: 90%; 13 | font-family: "Baskerville", sans-serif; 14 | } 15 | 16 | h1 17 | { 18 | font-size: 225%; 19 | font-family: "Univers Light Condensed", sans-serif; 20 | } 21 | 22 | .dataTable 23 | { 24 | margin-top: 0.5em; 25 | border: 1px solid #DDDDDD; 26 | border-collapse: collapse; 27 | } 28 | 29 | tr.alt 30 | { 31 | background-color: #EEEEEE; 32 | } 33 | 34 | th 35 | { 36 | border: 1px solid #385708; 37 | border-bottom: 4px solid #2A4106; 38 | padding: 8px 15px; 39 | background-color: #385708; 40 | background-image: url(table_header.jpg); 41 | background-repeat: repeat-x; 42 | color: #FFFFFF; 43 | text-align: left; 44 | } 45 | 46 | td 47 | { 48 | padding: 6px 15px; 49 | } 50 | 51 | .number, .yesno 52 | { 53 | text-align: center; 54 | } -------------------------------------------------------------------------------- /ajax/weather_widget.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Weather Widget 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

Weather Widget

13 |
14 |

Weather

15 |

Please select a city:

16 | 27 |
28 | 29 | -------------------------------------------------------------------------------- /animation/path-based_motion.js: -------------------------------------------------------------------------------- 1 | var SoccerBall = 2 | { 3 | init: function() 4 | { 5 | SoccerBall.frameRate = 25; 6 | SoccerBall.duration = 2; 7 | SoccerBall.div = document.getElementById("soccerBall"); 8 | SoccerBall.targetX = 600; 9 | SoccerBall.originX = parseInt(Core.getComputedStyle(SoccerBall.div, "left"), 10); 10 | SoccerBall.increment = (SoccerBall.targetX - SoccerBall.originX) / (SoccerBall.duration * SoccerBall.frameRate); 11 | SoccerBall.x = SoccerBall.originX; 12 | 13 | SoccerBall.animate(); 14 | }, 15 | 16 | animate: function() 17 | { 18 | SoccerBall.x += SoccerBall.increment; 19 | 20 | if ((SoccerBall.targetX > SoccerBall.originX && SoccerBall.x >= SoccerBall.targetX) || (SoccerBall.targetX < SoccerBall.originX && SoccerBall.x <= SoccerBall.targetX)) 21 | { 22 | SoccerBall.x = SoccerBall.targetX; 23 | } 24 | else 25 | { 26 | setTimeout(SoccerBall.animate, 1000 / SoccerBall.frameRate) 27 | } 28 | 29 | SoccerBall.div.style.left = Math.round(SoccerBall.x) + "px"; 30 | } 31 | }; 32 | 33 | Core.start(SoccerBall); -------------------------------------------------------------------------------- /events/tooltips.css: -------------------------------------------------------------------------------- 1 | /* Basic styles */ 2 | 3 | body { 4 | background-color: #2E2E33; 5 | color: #FFF; 6 | font: small Verdana, Arial, sans-serif; 7 | padding: 0 10em; 8 | } 9 | 10 | a:link, a:visited { 11 | position: relative; 12 | } 13 | 14 | a:link { 15 | color: #C0C0FF; 16 | } 17 | 18 | a:visited { 19 | color: #A0A0FF; 20 | } 21 | 22 | a:hover, a:focus, a:active { 23 | color: #F0A000; 24 | z-index: 1; 25 | } 26 | 27 | .section { 28 | background-color: #3E3E55; 29 | margin: 0.5em; 30 | padding: 0.01em 1em; 31 | } 32 | 33 | /* Tooltips (dynamic styles) */ 34 | 35 | .tooltip { 36 | display: block; 37 | font-size: smaller; 38 | left: 0; 39 | padding: 5px; 40 | position: absolute; 41 | text-decoration: none; 42 | top: 1.7em; 43 | width: 15em; 44 | } 45 | 46 | .federation .tooltip { 47 | background: #C0C0FF url(starfleet.png) top left no-repeat; 48 | color: #2E2E33; 49 | min-height: 54px; 50 | padding-left: 64px; 51 | } 52 | 53 | .klingon .tooltip { 54 | background: #BF0000 url(klingonempire.png) top left no-repeat; 55 | color: #FFF; 56 | min-height: 54px; 57 | padding-left: 64px; 58 | } -------------------------------------------------------------------------------- /animation/scriptaculous_highlight.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | script.aculo.us Highlight 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

script.aculo.us Highlight

14 |

15 | Industrial Light & Magic (ILM) is a motion picture visual effects company, founded in May 1975 by George Lucas and owned by Lucasfilm Ltd. Lucas created the company when he discovered that the special effects department at Twentieth Century Fox was shut down after he was given the green light for his production of Star Wars. 16 |

17 | 18 | -------------------------------------------------------------------------------- /animation/tooltips_delay.css: -------------------------------------------------------------------------------- 1 | /* Basic styles */ 2 | 3 | body { 4 | background-color: #2E2E33; 5 | color: #FFF; 6 | font: small Verdana, Arial, sans-serif; 7 | padding: 0 10em; 8 | } 9 | 10 | a:link, a:visited { 11 | position: relative; 12 | } 13 | 14 | a:link { 15 | color: #C0C0FF; 16 | } 17 | 18 | a:visited { 19 | color: #A0A0FF; 20 | } 21 | 22 | a:hover, a:focus, a:active { 23 | color: #F0A000; 24 | z-index: 1; 25 | } 26 | 27 | .section { 28 | background-color: #3E3E55; 29 | margin: 0.5em; 30 | padding: 0.01em 1em; 31 | } 32 | 33 | /* Tooltips (dynamic styles) */ 34 | 35 | .tooltip { 36 | display: block; 37 | font-size: smaller; 38 | left: 0; 39 | padding: 5px; 40 | position: absolute; 41 | text-decoration: none; 42 | top: 1.7em; 43 | width: 15em; 44 | } 45 | 46 | .federation .tooltip { 47 | background: #C0C0FF url(starfleet.png) top left no-repeat; 48 | color: #2E2E33; 49 | min-height: 54px; 50 | padding-left: 64px; 51 | } 52 | 53 | .klingon .tooltip { 54 | background: #BF0000 url(klingonempire.png) top left no-repeat; 55 | color: #FFF; 56 | min-height: 54px; 57 | padding-left: 64px; 58 | } -------------------------------------------------------------------------------- /forms/formvalidation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Reusable Form Validation 5 | 6 | 7 | 8 | 9 | 10 | 11 |

A Form with Client-Side Validation

12 |
13 |
14 | 17 |
18 |
19 | 22 |
23 |
24 | 25 |
26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /events/strayclickcatcher.js: -------------------------------------------------------------------------------- 1 | var strayClickCatcher = 2 | { 3 | init: function() 4 | { 5 | var links = document.getElementsByTagName("a"); 6 | 7 | if (typeof document.addEventListener != "undefined") 8 | { 9 | document.addEventListener("click", strayClickCatcher.strayClickListener, false); 10 | for (var i = 0; i < links.length; i++) 11 | { 12 | links[i].addEventListener("click", strayClickCatcher.linkClickListener, false); 13 | } 14 | } 15 | else if (typeof document.attachEvent != "undefined") 16 | { 17 | document.attachEvent("onclick", strayClickCatcher.strayClickListener); 18 | for (var i = 0; i < links.length; i++) 19 | { 20 | links[i].attachEvent("onclick", strayClickCatcher.linkClickListener); 21 | } 22 | } 23 | }, 24 | 25 | strayClickListener: function(event) 26 | { 27 | alert("Did you mean to click a link? It's that blue, underlined text."); 28 | }, 29 | 30 | linkClickListener: function(event) 31 | { 32 | if (typeof event == "undefined") 33 | { 34 | event = window.event; 35 | } 36 | 37 | if (typeof event.stopPropagation != "undefined") 38 | { 39 | event.stopPropagation(); 40 | } 41 | else 42 | { 43 | event.cancelBubble = true; 44 | } 45 | } 46 | }; 47 | 48 | Core.start(strayClickCatcher); 49 | -------------------------------------------------------------------------------- /shared/archive_styles/archive.css: -------------------------------------------------------------------------------- 1 | /* 2 | * SitePoint code archive for Build Your Own Ruby On Rails Web Applications 3 | * (C) 2006 SitePoint Pty Ltd 4 | * 5 | * For more books and articles visit http://www.sitepoint.com/ 6 | * 7 | */ 8 | html { 9 | background-color: #003366; 10 | } 11 | body { 12 | color: #143f62; 13 | background-color: #fefff8; 14 | margin: 20px; 15 | padding: 20px; 16 | font-family: sans-serif; 17 | font-size: .75em; 18 | line-height: 1.4em; 19 | } 20 | a:hover { 21 | color: #ffffff; 22 | background-color: #ff6600; 23 | text-decoration: none; 24 | } 25 | h2 a { 26 | text-decoration: none; 27 | } 28 | h1 { 29 | font-size: 1.7em; 30 | font-weight: normal; 31 | text-transform: uppercase; 32 | text-align: right; 33 | margin-bottom: 6px; 34 | } 35 | h2 { 36 | color: #003366; 37 | font-size: 1.3em; 38 | padding: 10px 0 5px 0; 39 | margin-bottom: 10px; 40 | border-bottom: 1px solid #003366; 41 | } 42 | h3 { 43 | color: #ff3603; 44 | font-size: 1.2em; 45 | padding: 0; 46 | } 47 | ul li { 48 | font-weight: bold; 49 | } 50 | ul li a { 51 | font-weight: normal; 52 | } 53 | img { 54 | float: left; 55 | border: 0; 56 | } 57 | .subtitle { 58 | font-size: 0.8em; 59 | } 60 | ol li { 61 | margin-bottom: 5px; 62 | } 63 | code { 64 | font-size: 1.3em; 65 | } 66 | #main { 67 | background: transparent url(book-cover.png) top right no-repeat; 68 | } -------------------------------------------------------------------------------- /animation/path-based_motion3.js: -------------------------------------------------------------------------------- 1 | var SoccerBall = 2 | { 3 | init: function() 4 | { 5 | SoccerBall.frameRate = 25; 6 | SoccerBall.deceleration = 10; 7 | SoccerBall.div = document.getElementById("soccerBall"); 8 | SoccerBall.targetX = 600; 9 | SoccerBall.targetY = 150; 10 | SoccerBall.originX = parseInt(Core.getComputedStyle(SoccerBall.div, "left"), 10); 11 | SoccerBall.originY = parseInt(Core.getComputedStyle(SoccerBall.div, "top"), 10); 12 | SoccerBall.x = SoccerBall.originX; 13 | SoccerBall.y = SoccerBall.originY; 14 | 15 | SoccerBall.animate(); 16 | }, 17 | 18 | animate: function() 19 | { 20 | SoccerBall.x += (SoccerBall.targetX - SoccerBall.x) / SoccerBall.deceleration; 21 | SoccerBall.y += (SoccerBall.targetY - SoccerBall.y) / SoccerBall.deceleration; 22 | 23 | if ((SoccerBall.targetX > SoccerBall.originX && Math.round(SoccerBall.x) >= SoccerBall.targetX) || (SoccerBall.targetX < SoccerBall.originX && Math.round(SoccerBall.x) <= SoccerBall.targetX)) 24 | { 25 | SoccerBall.x = SoccerBall.targetX; 26 | SoccerBall.y = SoccerBall.targetY; 27 | } 28 | else 29 | { 30 | setTimeout(SoccerBall.animate, 1000 / SoccerBall.frameRate) 31 | } 32 | 33 | SoccerBall.div.style.left = Math.round(SoccerBall.x) + "px"; 34 | SoccerBall.div.style.top = Math.round(SoccerBall.y) + "px"; 35 | } 36 | }; 37 | 38 | Core.start(SoccerBall); -------------------------------------------------------------------------------- /ajax/weather_widget.css: -------------------------------------------------------------------------------- 1 | #weatherWidget 2 | { 3 | padding: 0 0 25px 0; 4 | background-image: url(weather_panel_bottom.gif); 5 | background-repeat: no-repeat; 6 | background-position: 0 100%; 7 | color: #FFFFFF; 8 | font-size: 95%; 9 | font-family: Helvetica, Arial, sans-serif; 10 | } 11 | 12 | #weatherWidget h2 13 | { 14 | padding: 23px 25px 25px 25px; 15 | background-image: url(weather_panel_top.gif); 16 | background-repeat: no-repeat; 17 | font-size: 135%; 18 | font-weight: normal; 19 | } 20 | 21 | #weatherWidget p 22 | { 23 | margin: 0 25px; 24 | } 25 | 26 | #weatherWidget ul 27 | { 28 | margin: 0 25px; 29 | list-style: none; 30 | } 31 | 32 | #weatherWidget li 33 | { 34 | margin: 1em 0 0 0; 35 | padding: 0 0 0 20px; 36 | background-image: url(weather_bullet.gif); 37 | background-repeat: no-repeat; 38 | background-position: 0 0.1em; 39 | } 40 | 41 | #weatherWidget a 42 | { 43 | color: #FFFFFF; 44 | } 45 | 46 | #weatherWidget a:hover 47 | { 48 | text-decoration: none; 49 | } 50 | 51 | #forecast 52 | { 53 | min-height: 81px; 54 | margin: 0 25px; 55 | padding: 0 0 0 91px; 56 | } 57 | 58 | * html #forecast 59 | { 60 | height: 81px; 61 | } 62 | 63 | #forecast.partlyCloudy 64 | { 65 | background-image: url(weather_icon_partly_cloudy.gif); 66 | background-repeat: no-repeat; 67 | } 68 | 69 | #forecast p 70 | { 71 | margin: 0; 72 | } 73 | 74 | #temperature 75 | { 76 | padding-top: 0.25em; 77 | font-size: 300%; 78 | } -------------------------------------------------------------------------------- /animation/path-based_motion2.js: -------------------------------------------------------------------------------- 1 | var SoccerBall = 2 | { 3 | init: function() 4 | { 5 | SoccerBall.frameRate = 25; 6 | SoccerBall.duration = 2; 7 | SoccerBall.div = document.getElementById("soccerBall"); 8 | SoccerBall.targetX = 600; 9 | SoccerBall.targetY = 150; 10 | SoccerBall.originX = parseInt(Core.getComputedStyle(SoccerBall.div, "left"), 10); 11 | SoccerBall.originY = parseInt(Core.getComputedStyle(SoccerBall.div, "top"), 10); 12 | SoccerBall.incrementX = (SoccerBall.targetX - SoccerBall.originX) / (SoccerBall.duration * SoccerBall.frameRate); 13 | SoccerBall.incrementY = (SoccerBall.targetY - SoccerBall.originY) / (SoccerBall.duration * SoccerBall.frameRate); 14 | SoccerBall.x = SoccerBall.originX; 15 | SoccerBall.y = SoccerBall.originY; 16 | 17 | SoccerBall.animate(); 18 | }, 19 | 20 | animate: function() 21 | { 22 | SoccerBall.x += SoccerBall.incrementX; 23 | SoccerBall.y += SoccerBall.incrementY; 24 | 25 | if ((SoccerBall.targetX > SoccerBall.originX && SoccerBall.x >= SoccerBall.targetX) || (SoccerBall.targetX < SoccerBall.originX && SoccerBall.x <= SoccerBall.targetX)) 26 | { 27 | SoccerBall.x = SoccerBall.targetX; 28 | SoccerBall.y = SoccerBall.targetY; 29 | } 30 | else 31 | { 32 | setTimeout(SoccerBall.animate, 1000 / SoccerBall.frameRate) 33 | } 34 | 35 | SoccerBall.div.style.left = Math.round(SoccerBall.x) + "px"; 36 | SoccerBall.div.style.top = Math.round(SoccerBall.y) + "px"; 37 | } 38 | }; 39 | 40 | Core.start(SoccerBall); -------------------------------------------------------------------------------- /animation/path-based_motion4.js: -------------------------------------------------------------------------------- 1 | var SoccerBall = 2 | { 3 | init: function() 4 | { 5 | 6 | SoccerBall.frameRate = 25; 7 | SoccerBall.acceleration = 2; 8 | SoccerBall.threshold = 0.5; 9 | SoccerBall.div = document.getElementById("soccerBall"); 10 | SoccerBall.targetX = 600; 11 | SoccerBall.targetY = 150; 12 | SoccerBall.originX = parseInt(Core.getComputedStyle(SoccerBall.div, "left")); 13 | SoccerBall.originY = parseInt(Core.getComputedStyle(SoccerBall.div, "top")); 14 | 15 | if (SoccerBall.targetX < SoccerBall.originX) 16 | { 17 | SoccerBall.x = SoccerBall.originX - SoccerBall.threshold; 18 | } 19 | else 20 | { 21 | SoccerBall.x = SoccerBall.originX + SoccerBall.threshold; 22 | } 23 | 24 | SoccerBall.distanceY = SoccerBall.targetY - SoccerBall.originY; 25 | 26 | SoccerBall.animate(); 27 | }, 28 | 29 | animate: function() 30 | { 31 | SoccerBall.x += (SoccerBall.x - SoccerBall.originX) / SoccerBall.acceleration; 32 | var movementRatio = (SoccerBall.x - SoccerBall.originX) / (SoccerBall.targetX - SoccerBall.originX); 33 | var y = SoccerBall.originY + SoccerBall.distanceY * movementRatio; 34 | 35 | if ((SoccerBall.targetX > SoccerBall.originX && SoccerBall.x >= SoccerBall.targetX) || (SoccerBall.targetX < SoccerBall.originX && SoccerBall.x <= SoccerBall.targetX)) 36 | { 37 | SoccerBall.x = SoccerBall.targetX; 38 | y = SoccerBall.targetY; 39 | } 40 | else 41 | { 42 | setTimeout(SoccerBall.animate, 1000 / SoccerBall.frameRate) 43 | } 44 | 45 | SoccerBall.div.style.left = Math.round(SoccerBall.x) + "px"; 46 | SoccerBall.div.style.top = Math.round(y) + "px"; 47 | } 48 | }; 49 | 50 | Core.start(SoccerBall); -------------------------------------------------------------------------------- /events/tooltips.js: -------------------------------------------------------------------------------- 1 | var Tooltips = 2 | { 3 | init: function() 4 | { 5 | var links = document.getElementsByTagName("a"); 6 | 7 | for (var i = 0; i < links.length; i++) 8 | { 9 | var title = links[i].title; 10 | 11 | if (title && title.length > 0) 12 | { 13 | Core.addEventListener(links[i], "mouseover", Tooltips.showTipListener); 14 | Core.addEventListener(links[i], "focus", Tooltips.showTipListener); 15 | Core.addEventListener(links[i], "mouseout", Tooltips.hideTipListener); 16 | Core.addEventListener(links[i], "blur", Tooltips.hideTipListener); 17 | } 18 | } 19 | }, 20 | 21 | showTip: function(link) 22 | { 23 | Tooltips.hideTip(link); 24 | 25 | var tip = document.createElement("span"); 26 | tip.className = "tooltip"; 27 | var tipText = document.createTextNode(link.title); 28 | tip.appendChild(tipText); 29 | link.appendChild(tip); 30 | 31 | link._tooltip = tip; 32 | link.title = ""; 33 | 34 | // Fix for Safari2/Opera9 repaint issue 35 | document.documentElement.style.position = "relative"; 36 | }, 37 | 38 | hideTip: function(link) 39 | { 40 | if (link._tooltip) 41 | { 42 | link.title = link._tooltip.childNodes[0].nodeValue; 43 | link.removeChild(link._tooltip); 44 | link._tooltip = null; 45 | 46 | // Fix for Safari2/Opera9 repaint issue 47 | document.documentElement.style.position = "static"; 48 | } 49 | }, 50 | 51 | showTipListener: function(event) 52 | { 53 | Tooltips.showTip(this); 54 | Core.preventDefault(event); 55 | }, 56 | 57 | hideTipListener: function(event) 58 | { 59 | Tooltips.hideTip(this); 60 | } 61 | }; 62 | 63 | Core.start(Tooltips); 64 | -------------------------------------------------------------------------------- /errors/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Simply JavaScript – code archive 5 | 6 | 7 | 8 | 9 |
SitePoint logo
10 |

Simply JavaScript

11 |

« Back

12 |
13 |

Chapter 6 – Errors

14 |
    15 |
  1. Syntax Errors 16 | 21 |
    2. 22 |
  2. Runtime Errors 23 | 28 |
    3. 29 |
  3. Logic Errors 30 | 35 |
    4. 36 |
37 |

Links

38 | 44 |
45 | 46 | -------------------------------------------------------------------------------- /animation/tooltips_delay.js: -------------------------------------------------------------------------------- 1 | var Tooltips = 2 | { 3 | init: function() 4 | { 5 | var links = document.getElementsByTagName("a"); 6 | 7 | for (var i = 0; i < links.length; i++) 8 | { 9 | var title = links[i].getAttribute("title"); 10 | 11 | if (title && title.length > 0) 12 | { 13 | Core.addEventListener(links[i], "mouseover", Tooltips.showTipListener); 14 | Core.addEventListener(links[i], "focus", Tooltips.showTipListener); 15 | Core.addEventListener(links[i], "mouseout", Tooltips.hideTipListener); 16 | Core.addEventListener(links[i], "blur", Tooltips.hideTipListener); 17 | } 18 | } 19 | }, 20 | 21 | showTip: function(link) 22 | { 23 | Tooltips.hideTip(link); 24 | 25 | var tip = document.createElement("span"); 26 | tip.className = "tooltip"; 27 | var tipText = document.createTextNode(link.getAttribute("title")); 28 | tip.appendChild(tipText); 29 | link.appendChild(tip); 30 | 31 | link._tooltip = tip; 32 | link.title = ""; 33 | 34 | // Fix for Safari2/Opera9 repaint issue 35 | document.documentElement.style.position = "relative"; 36 | }, 37 | 38 | hideTip: function(link) 39 | { 40 | if (link._tooltip) 41 | { 42 | link.title = link._tooltip.childNodes[0].nodeValue; 43 | link.removeChild(link._tooltip); 44 | link._tooltip = null; 45 | 46 | // Fix for Safari2/Opera9 repaint issue 47 | document.documentElement.style.position = "static"; 48 | } 49 | }, 50 | 51 | showTipListener: function(event) 52 | { 53 | var link = this; 54 | this._timer = setTimeout(function() 55 | { 56 | Tooltips.showTip(link); 57 | }, 500); 58 | Core.preventDefault(event); 59 | }, 60 | 61 | hideTipListener: function(event) 62 | { 63 | clearTimeout(this._timer); 64 | Tooltips.hideTip(this); 65 | } 66 | }; 67 | 68 | Core.start(Tooltips); 69 | -------------------------------------------------------------------------------- /forms/.#formvalidation.js.1.2: -------------------------------------------------------------------------------- 1 | var FormValidation = 2 | { 3 | init: function() 4 | { 5 | var forms = document.getElementsByTagName("form"); 6 | 7 | for (var i = 0; i < forms.length; i++) 8 | { 9 | Core.addEventListener(forms[i], "submit", FormValidation.submitListener); 10 | } 11 | }, 12 | 13 | rules: 14 | { 15 | required: /./, 16 | requiredNotWhitespace: /\S/, 17 | positiveInteger: /^\d*[1-9]\d*$/, 18 | positiveOrZeroInteger: /^\d+$/, 19 | integer: /^-?\d+$/, 20 | decimal: /^-?\d+(\.\d+)?$/, 21 | email: /^[\w\.\-]+@([\w\-]+\.)+[a-zA-Z]+$/, 22 | telephone: /^(\+\d+)?( |\-)?(\(?\d+\)?)?( |\-)?(\d+( |\-)?)*\d+$/ 23 | }, 24 | 25 | errors: 26 | { 27 | required: "Please fill in this required field.", 28 | requiredNotWhitespace: "Please fill in this required field.", 29 | positiveInteger: "This field may only contain a positive whole number.", 30 | positiveOrZeroInteger: "This field may only contain a non-negative whole number.", 31 | integer: "This field may only contain a whole number.", 32 | decimal: "This field may only contain a number.", 33 | email: "Please enter a valid email address into this field.", 34 | telephone: "Please enter a valid telephone number into this field." 35 | }, 36 | 37 | submitListener: function(event) 38 | { 39 | var fields = this.elements; 40 | 41 | for (var i = 0; i < fields.length; i++) 42 | { 43 | var classNames = fields[i].className.split(/\s+/); 44 | for(var c = 0; c < classNames.length; c++) 45 | { 46 | var oneClass = classNames[c]; 47 | var rule = FormValidation.rules[oneClass]; 48 | if (typeof rule != "undefined") 49 | { 50 | if (!rule.test(fields[i].value)) 51 | { 52 | fields[i].focus(); 53 | alert(FormValidation.errors[oneClass]); 54 | Core.preventDefault(event); 55 | return; 56 | } 57 | } 58 | } 59 | } 60 | } 61 | }; 62 | 63 | Core.start(FormValidation); -------------------------------------------------------------------------------- /forms/formvalidation-dom0.js: -------------------------------------------------------------------------------- 1 | var FormValidation = 2 | { 3 | init: function() 4 | { 5 | var forms = document.getElementsByTagName("form"); 6 | 7 | for (var i = 0; i < forms.length; i++) 8 | { 9 | forms[i].onsubmit = FormValidation.submitHandler; 10 | } 11 | }, 12 | 13 | rules: 14 | { 15 | required: /./, 16 | requiredNotWhitespace: /\S/, 17 | positiveInteger: /^\d*[1-9]\d*$/, 18 | positiveOrZeroInteger: /^\d+$/, 19 | integer: /^-?\d+$/, 20 | decimal: /^-?\d+(\.\d+)?$/, 21 | email: /^[\w\.\-]+@([\w\-]+\.)+[a-zA-Z]+$/, 22 | telephone: /^(\+\d+)?( |\-)?(\(?\d+\)?)?( |\-)?(\d+( |\-)?)*\d+$/ 23 | }, 24 | 25 | errors: 26 | { 27 | required: "Please fill in this required field.", 28 | requiredNotWhitespace: "Please fill in this required field.", 29 | positiveInteger: "This field may only contain a positive whole number.", 30 | positiveOrZeroInteger: "This field may only contain a non-negative whole number.", 31 | integer: "This field may only contain a whole number.", 32 | decimal: "This field may only contain a number.", 33 | email: "Please enter a valid email address into this field.", 34 | telephone: "Please enter a valid telephone number into this field." 35 | }, 36 | 37 | submitHandler: function() 38 | { 39 | var fields = this.elements; 40 | 41 | for (var i = 0; i < fields.length; i++) 42 | { 43 | var className = fields[i].className; 44 | var classRegExp = /(^| )(\S+)( |$)/g; 45 | var classResult; 46 | 47 | while (classResult = classRegExp.exec(className)) 48 | { 49 | var oneClass = classResult[2]; 50 | var rule = FormValidation.rules[oneClass]; 51 | if (typeof rule != "undefined") 52 | { 53 | if (!rule.test(fields[i].value)) 54 | { 55 | fields[i].focus(); 56 | alert(FormValidation.errors[oneClass]); 57 | return false; 58 | } 59 | } 60 | } 61 | } 62 | } 63 | }; 64 | 65 | Core.start(FormValidation); -------------------------------------------------------------------------------- /forms/formvalidation.js: -------------------------------------------------------------------------------- 1 | var FormValidation = 2 | { 3 | init: function() 4 | { 5 | var forms = document.getElementsByTagName("form"); 6 | 7 | for (var i = 0; i < forms.length; i++) 8 | { 9 | Core.addEventListener(forms[i], "submit", FormValidation.submitListener); 10 | } 11 | }, 12 | 13 | rules: 14 | { 15 | required: /./, 16 | requiredNotWhitespace: /\S/, 17 | positiveInteger: /^\d*[1-9]\d*$/, 18 | positiveOrZeroInteger: /^\d+$/, 19 | integer: /^-?\d+$/, 20 | decimal: /^-?\d+(\.\d+)?$/, 21 | email: /^[\w\.\-]+@([\w\-]+\.)+[a-zA-Z]+$/, 22 | telephone: /^(\+\d+)?( |\-)?(\(?\d+\)?)?( |\-)?(\d+( |\-)?)*\d+$/ 23 | }, 24 | 25 | errors: 26 | { 27 | required: "Please fill in this required field.", 28 | requiredNotWhitespace: "Please fill in this required field.", 29 | positiveInteger: "This field may only contain a positive whole number.", 30 | positiveOrZeroInteger: "This field may only contain a non-negative whole number.", 31 | integer: "This field may only contain a whole number.", 32 | decimal: "This field may only contain a number.", 33 | email: "Please enter a valid email address into this field.", 34 | telephone: "Please enter a valid telephone number into this field." 35 | }, 36 | 37 | submitListener: function(event) 38 | { 39 | var fields = this.elements; 40 | 41 | for (var i = 0; i < fields.length; i++) 42 | { 43 | var className = fields[i].className; 44 | var classRegExp = /(^| )(\S+)\b/g; 45 | var classResult; 46 | 47 | while (classResult = classRegExp.exec(className)) 48 | { 49 | var oneClass = classResult[2]; 50 | var rule = FormValidation.rules[oneClass]; 51 | if (typeof rule != "undefined") 52 | { 53 | if (!rule.test(fields[i].value)) 54 | { 55 | fields[i].focus(); 56 | alert(FormValidation.errors[oneClass]); 57 | Core.preventDefault(event); 58 | return; 59 | } 60 | } 61 | } 62 | } 63 | } 64 | }; 65 | 66 | Core.start(FormValidation); -------------------------------------------------------------------------------- /events/newwindow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Link Click Event Handler 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 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 | 47 | 48 | 49 | 50 | 51 |
Captains of the Enterprise
NameVessel RegistryAssumed Command
Jonathan ArcherNX-012151
Christopher PikeNCC-17012245
James T. KirkNCC-1701, NCC-1701-A2264
John HarrimanNCC-1701-B2311?
Rachel GarrettNCC-1701-C2332?
Jean-Luc PicardNCC-1701-D, NCC-1701-E2364
52 | 53 | 54 | -------------------------------------------------------------------------------- /ajax/contact_form.css: -------------------------------------------------------------------------------- 1 | form 2 | { 3 | width: 30em; 4 | } 5 | 6 | fieldset 7 | { 8 | position: relative; 9 | float: left; 10 | clear: left; 11 | width: 100%; 12 | margin: 0 0 -1em 0; 13 | padding: 0 0 1em 0; 14 | border-style: none; 15 | border-top: 1px solid #BFBAB0; 16 | border-bottom: 1px solid #BFBAB0; 17 | background-color: #F2EFE9; 18 | background-image: url(fieldset_gradient.jpg); 19 | background-repeat: repeat-x; 20 | } 21 | 22 | legend 23 | { 24 | padding: 0; 25 | color: #545351; 26 | font-weight: bold; 27 | } 28 | 29 | legend span 30 | { 31 | position: absolute; 32 | left: 0.74em; 33 | top: 0; 34 | margin-top: 0.5em; 35 | font-size: 135%; 36 | } 37 | 38 | fieldset ol 39 | { 40 | padding: 3.5em 1em 0 1em; 41 | list-style: none; 42 | } 43 | 44 | fieldset li 45 | { 46 | float: left; 47 | clear: left; 48 | width: 100%; 49 | padding-bottom: 1em; 50 | } 51 | 52 | fieldset li.checkbox 53 | { 54 | float: none; 55 | padding-left: 8em; 56 | width: auto; 57 | } 58 | 59 | label 60 | { 61 | float: left; 62 | margin-right: 1em; 63 | width: 7em; 64 | } 65 | 66 | li.checkbox label 67 | { 68 | float: none; 69 | margin: 0; 70 | width: auto; 71 | } 72 | 73 | fieldset fieldset 74 | { 75 | margin-bottom: -2.5em; 76 | border-style: none; 77 | background-color: transparent; 78 | background-image: none; 79 | } 80 | 81 | fieldset fieldset legend 82 | { 83 | margin-left: 0; 84 | color: #000000; 85 | font-weight: normal; 86 | } 87 | 88 | fieldset fieldset ol 89 | { 90 | position: relative; 91 | top: -1.4em; 92 | margin: 0 0 0 8em; 93 | padding: 0; 94 | } 95 | 96 | fieldset fieldset label 97 | { 98 | float: none; 99 | width: auto; 100 | margin-right: auto; 101 | } 102 | 103 | fieldset.submit 104 | { 105 | float: none; 106 | width: auto; 107 | border-top: 0 none #FFFFFF; 108 | padding-left: 9em; 109 | background-image: none; 110 | } 111 | 112 | #success 113 | { 114 | width: 28em; 115 | border-top: 1px solid #BFBAB0; 116 | border-bottom: 1px solid #BFBAB0; 117 | padding: 1em; 118 | background-color: #F2EFE9; 119 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Simply JavaScript – code archive 5 | 6 | 7 | 8 | 9 |
SitePoint logo
10 |

Simply JavaScript

11 |

Code Archive & Resources

12 |
13 |

Book Chapters

14 |
    15 |
  1. Chapter 1 – The Three Layers of the Web 16 |
      17 |
    • No files required for this chapter
      • 18 |
    19 |
    2. 20 |
  2. Chapter 2 – Programming with JavaScript 21 |
      22 |
    • No files required for this chapter
      • 23 |
    24 |
    3. 25 |
  3. Chapter 3 – Document Access
    4. 26 |
  4. Chapter 4 – Events
    5. 27 |
  5. Chapter 5 – Animation
    6. 28 |
  6. Chapter 6 – Form Enhancements
    7. 29 |
  7. Chapter 7 – Errors and Debugging
    8. 30 |
  8. Chapter 8 – Ajax
    9. 31 |
  9. Chapter 9 – Looking Forward 32 |
      33 |
    • No files required for this chapter
      • 34 |
    35 |
    10. 36 |
37 |

Resources

38 | 41 |

Links

42 | 48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /animation/accordion_animated.css: -------------------------------------------------------------------------------- 1 | /* Basic element styles */ 2 | 3 | body { 4 | background-color: #2E2E33; 5 | color: #FFF; 6 | font: small Verdana, Arial, sans-serif; 7 | } 8 | 9 | a:link { 10 | color: #C0C0FF; 11 | } 12 | 13 | a:visited { 14 | color: #A0A0FF; 15 | } 16 | 17 | /* Accordion styles (static) */ 18 | 19 | ul.accordion { 20 | background-color: #3E3E55; 21 | border: 1px solid #FFF; 22 | border-top: none; 23 | display: block; 24 | list-style-type: none; 25 | margin: 0; 26 | padding: 0; 27 | position: relative; /* Forces the bottom border of the h2 to display in IE */ 28 | } 29 | 30 | ul.accordion li { 31 | clear: left; 32 | } 33 | 34 | ul.accordion h2 { 35 | background-color: #DF7700; 36 | border: 1px solid #FFF; 37 | border-width: 1px 0; 38 | font-size: 1.5em; 39 | margin: 0 0 -1px; 40 | } 41 | 42 | ul.accordion h2 a:link, ul.accordion h2 a:visited { 43 | color: #fff; 44 | display: block; 45 | margin: 1px; 46 | padding: 0 0.667em; 47 | text-decoration: none; 48 | } 49 | 50 | /* Accordion styles (dynamic) */ 51 | 52 | .accordionContent { 53 | overflow: hidden; 54 | padding: 0 1em; 55 | } 56 | 57 | li.collapsed .accordionContent { 58 | position: absolute; 59 | left: -9999px; 60 | } 61 | 62 | /* Fixes Safari bug that prevents expanded content from displaying. 63 | See http://betech.virginia.edu/bugs/safari-stickyposition.html */ 64 | li.collapsed .accordionContent p { 65 | position: relative; 66 | } 67 | 68 | ul.accordion li.collapsed h2 a:hover, ul.accordion li.collapsed h2 a:focus, 69 | ul.accordion li.collapsed h2 a:active, 70 | ul.accordion li.expanded h2 a:link, ul.accordion li.expanded h2 a:visited { 71 | background-color: #F0A000; 72 | } 73 | 74 | /* Accordion content styles (static) */ 75 | 76 | ul.accordion h3 { 77 | font-size: 1.1em; 78 | line-height: 1.1; 79 | margin: 0; 80 | } 81 | 82 | ul.accordion p { 83 | display: inline; 84 | float: left; 85 | clear: left; 86 | width: 50%; 87 | margin: 1em 0 0 0; 88 | } 89 | 90 | ul.accordion div.links { 91 | margin: 1em 0 1em 50%; 92 | } 93 | 94 | div.links ul { 95 | list-style: none; 96 | margin: 1em 0 0 0; 97 | padding: 0; 98 | } 99 | 100 | div.links li { 101 | clear: none; 102 | display: inline; 103 | margin: 0 3em 0 0; 104 | } -------------------------------------------------------------------------------- /events/accordion.css: -------------------------------------------------------------------------------- 1 | /* Basic element styles */ 2 | 3 | body { 4 | background-color: #2E2E33; 5 | color: #FFF; 6 | font: small Verdana, Arial, sans-serif; 7 | } 8 | 9 | a:link { 10 | color: #C0C0FF; 11 | } 12 | 13 | a:visited { 14 | color: #A0A0FF; 15 | } 16 | 17 | /* Accordion styles (static) */ 18 | 19 | ul.accordion { 20 | background-color: #3E3E55; 21 | border: 1px solid #FFF; 22 | border-top: none; 23 | display: block; 24 | list-style-type: none; 25 | margin: 0; 26 | padding: 0 1em; 27 | position: relative; /* Forces the bottom border of the h2 to display in IE */ 28 | } 29 | 30 | ul.accordion li { 31 | clear: left; 32 | position: relative; 33 | } 34 | 35 | ul.accordion h2 { 36 | background-color: #DF7700; 37 | border: 1px solid #FFF; 38 | border-width: 1px 0; 39 | font-size: 1.5em; 40 | margin: 0 -0.667em -1px; 41 | } 42 | 43 | ul.accordion h2 a:link, ul.accordion h2 a:visited { 44 | color: #fff; 45 | display: block; 46 | margin: 1px; 47 | padding: 0 0.667em; 48 | text-decoration: none; 49 | } 50 | 51 | /* Accordion styles (dynamic) */ 52 | 53 | ul.accordion li.collapsed * { 54 | position: absolute; 55 | left: -10000px; 56 | } 57 | 58 | ul.accordion li.collapsed h2, ul.accordion li.expanded h2, 59 | ul.accordion li.collapsed h2 a:link, ul.accordion li.collapsed h2 a:visited, 60 | ul.accordion li.expanded h2 a:link, ul.accordion li.expanded h2 a:visited { 61 | position: static; 62 | } 63 | 64 | ul.accordion li.collapsed h2 a:hover, ul.accordion li.collapsed h2 a:focus, 65 | ul.accordion li.collapsed h2 a:active, 66 | ul.accordion li.expanded h2 a:link, ul.accordion li.expanded h2 a:visited { 67 | background-color: #F0A000; 68 | } 69 | 70 | /* Accordion content styles (static) */ 71 | 72 | ul.accordion h3 { 73 | font-size: 1.1em; 74 | line-height: 1.1; 75 | margin: 0; 76 | } 77 | 78 | ul.accordion p { 79 | display: inline; 80 | float: left; 81 | clear: left; 82 | width: 50%; 83 | margin: 1em 0 0 0; 84 | } 85 | 86 | ul.accordion div.links { 87 | margin: 1em 0 1em 50%; 88 | } 89 | 90 | div.links ul { 91 | list-style: none; 92 | margin: 1em 0 0 0; 93 | padding: 0; 94 | } 95 | 96 | div.links li { 97 | clear: none; 98 | display: inline; 99 | margin: 0 3em 0 0; 100 | position: static; 101 | } -------------------------------------------------------------------------------- /events/accordion.js: -------------------------------------------------------------------------------- 1 | var Accordion = 2 | { 3 | init: function() 4 | { 5 | var accordions = Core.getElementsByClass("accordion"); 6 | 7 | for (var i = 0; i < accordions.length; i++) 8 | { 9 | var folds = accordions[i].childNodes; 10 | for (var j = 0; j < folds.length; j++) 11 | { 12 | if (folds[j].nodeType == 1) 13 | { 14 | Accordion.collapse(folds[j]); 15 | var foldLinks = folds[j].getElementsByTagName("a"); 16 | var foldTitleLink = foldLinks[0]; 17 | Core.addEventListener(foldTitleLink, "click", Accordion.clickListener); 18 | 19 | for (var k = 1; k < foldLinks.length; k++) 20 | { 21 | Core.addEventListener(foldLinks[k], "focus", Accordion.focusListener); 22 | } 23 | } 24 | } 25 | 26 | if (location.hash.length > 1) 27 | { 28 | var activeFold = document.getElementById(location.hash.substring(1)); 29 | if (activeFold && activeFold.parentNode == accordions[i]) 30 | { 31 | Accordion.expand(activeFold); 32 | } 33 | } 34 | } 35 | }, 36 | 37 | collapse: function(fold) 38 | { 39 | Core.removeClass(fold, "expanded"); 40 | Core.addClass(fold, "collapsed"); 41 | }, 42 | 43 | collapseAll: function(accordion) 44 | { 45 | var folds = accordion.childNodes; 46 | for (var i = 0; i < folds.length; i++) 47 | { 48 | if (folds[i].nodeType == 1) 49 | { 50 | Accordion.collapse(folds[i]); 51 | } 52 | } 53 | }, 54 | 55 | expand: function(fold) 56 | { 57 | Accordion.collapseAll(fold.parentNode); 58 | Core.removeClass(fold, "collapsed"); 59 | Core.addClass(fold, "expanded"); 60 | }, 61 | 62 | clickListener: function(event) 63 | { 64 | var fold = this.parentNode.parentNode; 65 | if (Core.hasClass(fold, "collapsed")) 66 | { 67 | Accordion.expand(fold); 68 | } 69 | else 70 | { 71 | Accordion.collapse(fold); 72 | } 73 | Core.preventDefault(event); 74 | }, 75 | 76 | focusListener: function(event) 77 | { 78 | var element = this; 79 | while (element.parentNode) 80 | { 81 | if (Core.hasClass(element.parentNode, "accordion")) 82 | { 83 | Accordion.expand(element); 84 | return; 85 | } 86 | element = element.parentNode; 87 | } 88 | } 89 | }; 90 | 91 | Core.start(Accordion); 92 | -------------------------------------------------------------------------------- /forms/dependentfields.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Dependent Fields 5 | 6 | 7 | 8 | 9 | 10 | 11 |

Which Enterprise?

12 |
13 |
14 | Which is your favorite ship named Enterprise? 15 |
16 | 17 |
18 |
19 | 20 | 21 |
22 |
23 | 24 |
25 |
26 | 27 |
28 |
29 | 30 |
31 |
32 | 33 |
34 |
35 | 36 |
37 |
38 | 39 |
40 |
41 |
42 |
43 | 44 | 45 | -------------------------------------------------------------------------------- /animation/scriptaculous.js: -------------------------------------------------------------------------------- 1 | // script.aculo.us scriptaculous.js v1.6.5, Wed Nov 08 14:17:49 CET 2006 2 | 3 | // Copyright (c) 2005, 2006 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us) 4 | // 5 | // Permission is hereby granted, free of charge, to any person obtaining 6 | // a copy of this software and associated documentation files (the 7 | // "Software"), to deal in the Software without restriction, including 8 | // without limitation the rights to use, copy, modify, merge, publish, 9 | // distribute, sublicense, and/or sell copies of the Software, and to 10 | // permit persons to whom the Software is furnished to do so, subject to 11 | // the following conditions: 12 | // 13 | // The above copyright notice and this permission notice shall be 14 | // included in all copies or substantial portions of the Software. 15 | // 16 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | // 24 | // For details, see the script.aculo.us web site: http://script.aculo.us/ 25 | 26 | var Scriptaculous = { 27 | Version: '1.6.5', 28 | require: function(libraryName) { 29 | // inserting via DOM fails in Safari 2.0, so brute force approach 30 | document.write(''); 31 | }, 32 | load: function() { 33 | if((typeof Prototype=='undefined') || 34 | (typeof Element == 'undefined') || 35 | (typeof Element.Methods=='undefined') || 36 | parseFloat(Prototype.Version.split(".")[0] + "." + 37 | Prototype.Version.split(".")[1]) < 1.5) 38 | throw("script.aculo.us requires the Prototype JavaScript framework >= 1.5.0"); 39 | 40 | $A(document.getElementsByTagName("script")).findAll( function(s) { 41 | return (s.src && s.src.match(/scriptaculous\.js(\?.*)?$/)) 42 | }).each( function(s) { 43 | var path = s.src.replace(/scriptaculous\.js(\?.*)?$/,''); 44 | var includes = s.src.match(/\?.*load=([a-z,]*)/); 45 | (includes ? includes[1] : 'builder,effects,dragdrop,controls,slider').split(',').each( 46 | function(include) { Scriptaculous.require(path+include+'.js') }); 47 | }); 48 | } 49 | } 50 | 51 | Scriptaculous.load(); -------------------------------------------------------------------------------- /forms/dependentfields.js: -------------------------------------------------------------------------------- 1 | var DependentFields = 2 | { 3 | init: function() 4 | { 5 | var forms = document.getElementsByTagName("form"); 6 | 7 | for (var i = 0; i < forms.length; i++) 8 | { 9 | Core.addEventListener(forms[i], "change", DependentFields.changeListener); 10 | Core.addEventListener(forms[i], "click", DependentFields.clickListener); 11 | 12 | var fields = forms[i].getElementsByTagName("input"); 13 | var lastIndependentField = null; 14 | forms[i]._dependents = []; 15 | for (var j = 0; j < fields.length; j++) 16 | { 17 | if (!Core.hasClass(fields[j], "dependent")) 18 | { 19 | lastIndependentField = fields[j]; 20 | } 21 | else 22 | { 23 | if (lastIndependentField) 24 | { 25 | forms[i]._dependents[forms[i]._dependents.length] = fields[j]; 26 | fields[j]._master = lastIndependentField; 27 | } 28 | } 29 | } 30 | DependentFields.updateDependents(forms[i]); 31 | } 32 | }, 33 | 34 | disable: function(field) 35 | { 36 | field.disabled = true; 37 | Core.addClass(field, "disabled"); 38 | Core.addClass(field.parentNode, "disabled"); 39 | }, 40 | 41 | enable: function(field) 42 | { 43 | field.disabled = false; 44 | Core.removeClass(field, "disabled"); 45 | Core.removeClass(field.parentNode, "disabled"); 46 | }, 47 | 48 | updateDependents: function(form) 49 | { 50 | var dependents = form._dependents; 51 | if (!dependents) 52 | { 53 | return; 54 | } 55 | 56 | for (var i = 0; i < dependents.length; i++) 57 | { 58 | var disabled = true; 59 | var master = dependents[i]._master; 60 | 61 | if (master.type == "text" || master.type == "password") 62 | { 63 | if (master.value.length > 0) 64 | { 65 | disabled = false; 66 | } 67 | } 68 | else if (master.type == "checkbox" || master.type == "radio") 69 | { 70 | if (master.checked) 71 | { 72 | disabled = false; 73 | } 74 | } 75 | 76 | if (disabled) 77 | { 78 | DependentFields.disable(dependents[i]); 79 | } 80 | else 81 | { 82 | DependentFields.enable(dependents[i]); 83 | } 84 | } 85 | }, 86 | 87 | changeListener: function(event) 88 | { 89 | DependentFields.updateDependents(this); 90 | }, 91 | 92 | clickListener: function(event) 93 | { 94 | DependentFields.updateDependents(this); 95 | } 96 | }; 97 | 98 | Core.start(DependentFields); -------------------------------------------------------------------------------- /dom/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Simply JavaScript – code archive 5 | 6 | 7 | 8 | 9 |
SitePoint logo
10 |

Simply JavaScript

11 |

« Back

12 |
13 |

Chapter 3 – Document Acces

14 |
    15 |
  1. Core Library 16 | 19 |
    2. 20 |
  2. Changing Styles 21 | 27 |
    3. 28 |
  3. Changing Styles with Class 29 | 37 |
    4. 38 |
  4. Making Stripy Tables 39 | 48 |
    5. 49 |
50 |

Links

51 | 57 |
58 | 59 | -------------------------------------------------------------------------------- /ajax/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Simply JavaScript – code archive 5 | 6 | 7 | 8 | 9 |
SitePoint logo
10 |

Simply JavaScript

11 |

« Back

12 |
13 |

Chapter 6 – Ajax

14 |
    15 |
  1. Creating an XMLHttpRequest Object 16 | 21 |
    2. 22 |
  2. Weather Widget 23 | 38 |
    3. 39 |
  3. Seamless Form Submission with Ajax 40 | 48 |
    4. 49 |
50 |

Links

51 | 57 |
58 | 59 | -------------------------------------------------------------------------------- /ajax/contact_form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Contact Form 5 | 6 | 7 | 8 | 11 | 12 | 13 | 14 | 15 |

Contact Form

16 |
17 |
18 | 19 | Contact Form 20 | 21 |
    22 |
  1. 23 | 26 | 27 |
    2. 28 |
  2. 29 | 32 | 33 |
    3. 34 |
  3. 35 | 38 | 43 |
    4. 44 |
  4. 45 | 48 | 49 |
    5. 50 |
  5. 51 | 52 | 55 |
    6. 56 |
  6. 57 |
    58 | 59 | Respond by 60 | 61 |
      62 |
    1. 63 | 64 | 67 |
      2. 68 |
    2. 69 | 70 | 73 |
      3. 74 |
    75 |
    76 |
    7. 77 |
78 |
79 |
80 | 81 | 82 |
83 |
84 | 85 | -------------------------------------------------------------------------------- /forms/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Simply JavaScript – code archive 5 | 6 | 7 | 8 | 9 |
SitePoint logo
10 |

Simply JavaScript

11 |

« Back

12 |
13 |

Chapter 6 – Forms

14 |
    15 |
  1. Dependent Fields 16 | 22 |
    2. 23 |
  2. Cascading Menus 24 | 30 |
    3. 31 |
  3. Intercepting Form Submissions 32 | 39 |
    4. 40 |
  4. Regular Expressions 41 | 44 |
    5. 45 |
  5. Reusable Validation Script 46 | 53 |
    6. 54 |
  6. Slider 55 | 63 |
    7. 64 |
65 |

Links

66 | 72 |
73 | 74 | -------------------------------------------------------------------------------- /ajax/contact_form.js: -------------------------------------------------------------------------------- 1 | var ContactForm = 2 | { 3 | init: function() 4 | { 5 | var contactForm = document.getElementById("contactForm"); 6 | Core.addEventListener(contactForm, "submit", ContactForm.submitListener); 7 | }, 8 | submitListener: function(event) 9 | { 10 | var form = this; 11 | 12 | try 13 | { 14 | var requester = new XMLHttpRequest(); 15 | } 16 | catch (error) 17 | { 18 | try 19 | { 20 | var requester = new ActiveXObject("Microsoft.XMLHTTP"); 21 | } 22 | catch (error) 23 | { 24 | var requester = null; 25 | } 26 | } 27 | 28 | if (requester != null) 29 | { 30 | form._timer = setTimeout(function() 31 | { 32 | requester.abort(); 33 | 34 | ContactForm.writeError("The server timed out while making your request."); 35 | }, 10000); 36 | 37 | var parameters = "submitby=ajax"; 38 | var formElements = []; 39 | 40 | var textareas = form.getElementsByTagName("textarea"); 41 | 42 | for (var i = 0; i < textareas.length; i++) 43 | { 44 | formElements[formElements.length] = textareas[i]; 45 | } 46 | 47 | var selects = form.getElementsByTagName("select"); 48 | 49 | for (var i = 0; i < selects.length; i++) 50 | { 51 | formElements[formElements.length] = selects[i]; 52 | } 53 | 54 | var inputs = form.getElementsByTagName("input"); 55 | 56 | for (var i = 0; i < inputs.length; i++) 57 | { 58 | var inputType = inputs[i].getAttribute("type"); 59 | 60 | if (inputType == null || inputType == "text" || inputType == "hidden" || (typeof inputs[i].checked != "undefined" && inputs[i].checked == true)) 61 | { 62 | formElements[formElements.length] = inputs[i]; 63 | } 64 | } 65 | 66 | for (var i = 0; i < formElements.length; i++) 67 | { 68 | var elementName = formElements[i].getAttribute("name"); 69 | 70 | if (elementName != null && elementName != "") 71 | { 72 | parameters += "&" + elementName + "=" + encodeURIComponent(formElements[i].value); 73 | } 74 | } 75 | 76 | requester.open("POST", form.getAttribute("action"), true); 77 | requester.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 78 | requester.onreadystatechange = function() 79 | { 80 | clearTimeout(form._timer); 81 | 82 | if (requester.readyState == 4) 83 | { 84 | if (requester.status == 200 || requester.status == 304) 85 | { 86 | ContactForm.writeSuccess(form); 87 | } 88 | else 89 | { 90 | ContactForm.writeError("The server was unable to be contacted."); 91 | } 92 | } 93 | }; 94 | requester.send(parameters); 95 | 96 | Core.preventDefault(event); 97 | } 98 | }, 99 | writeSuccess: function(form) 100 | { 101 | var newP = document.createElement("p"); 102 | newP.setAttribute("id", "success"); 103 | newP.appendChild(document.createTextNode("Your message was submitted successfully.")); 104 | form.parentNode.replaceChild(newP, form); 105 | }, 106 | writeError: function(errorMsg) 107 | { 108 | alert(errorMsg); 109 | } 110 | }; 111 | 112 | Core.start(ContactForm); -------------------------------------------------------------------------------- /dom/stripy_tables.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Stripy Tables 6 | 8 | 9 | 10 | 11 | 12 | 13 |

14 | Stripy Tables 15 |

16 | 17 | 18 | 19 | 22 | 25 | 28 | 31 | 32 | 33 | 34 | 35 | 38 | 41 | 44 | 47 | 48 | 49 | 52 | 55 | 58 | 61 | 62 | 63 | 66 | 69 | 72 | 75 | 76 | 77 | 80 | 83 | 86 | 89 | 90 | 91 | 94 | 97 | 100 | 103 | 104 | 105 | 108 | 111 | 114 | 117 | 118 | 119 |
20 | Web Luminary 21 | 23 | Height 24 | 26 | Hobbies 27 | 29 | Digs Microformats? 30 |
36 | John Allsopp 37 | 39 | 6’1” 40 | 42 | Surf lifesaving, skateboarding, b-boying 43 | 45 | Yes 46 |
50 | Tantek Çelik 51 | 53 | 5’10” 54 | 56 | Clubbing in SF, yoga, microformats 57 | 59 | Yes 60 |
64 | Jeffrey Zeldman 65 | 67 | 5’6” 68 | 70 | Punk rock, wearing beanies, Ava 71 | 73 | No 74 |
78 | Eric Meyer 79 | 81 | 6’2” 82 | 84 | Drumming, beating up Doug Bowman, dry humor 85 | 87 | Yes 88 |
92 | Maxine Sherrin 93 | 95 | 5’6” 96 | 98 | Collecting kitsch items, arthouse cinema, karaoke 99 | 101 | No 102 |
106 | Jeremy Keith 107 | 109 | 6’0” 110 | 112 | Cooking, bouzouki, male stripping 113 | 115 | Yes 116 |
120 | 121 | -------------------------------------------------------------------------------- /forms/slider.js: -------------------------------------------------------------------------------- 1 | var Slider = 2 | { 3 | init: function() 4 | { 5 | var sliderFields = Core.getElementsByClass("slider"); 6 | 7 | for (var i = 0; i < sliderFields.length; i++) 8 | { 9 | var fromMatch = /(^| )from(\d+)( |$)/.exec(sliderFields[i].className); 10 | var from = parseInt(fromMatch[2], 10); 11 | 12 | var toMatch = /(^| )to(\d+)( |$)/.exec(sliderFields[i].className); 13 | var to = parseInt(toMatch[2], 10); 14 | 15 | var scaleMatch = /(^| )scale(\d+)( |$)/.exec(sliderFields[i].className); 16 | var scale = parseInt(scaleMatch[2], 10); 17 | 18 | var slider = document.createElement("span"); 19 | slider.id = sliderFields[i].id + "slider"; 20 | slider.className = "sliderControl"; 21 | 22 | var track = document.createElement("span"); 23 | track.id = sliderFields[i].id + "track"; 24 | track.className = "sliderTrack"; 25 | 26 | var thumb = document.createElement("span"); 27 | thumb.id = sliderFields[i].id + "thumb"; 28 | thumb.className = "sliderThumb"; 29 | thumb._input = sliderFields[i]; 30 | thumb._from = from; 31 | thumb._to = to; 32 | thumb._scale = scale; 33 | 34 | sliderFields[i]._thumb = thumb; 35 | 36 | slider.appendChild(track); 37 | slider.appendChild(thumb); 38 | sliderFields[i].parentNode.replaceChild(slider, sliderFields[i]); 39 | slider.appendChild(sliderFields[i]); 40 | 41 | var value = parseInt(sliderFields[i].value, 10); 42 | thumb.style.left = ((value - from) * scale) + "px"; 43 | 44 | Core.addEventListener(sliderFields[i], "change", Slider.changeListener); 45 | Core.addEventListener(thumb, "mousedown", Slider.mousedownListener); 46 | } 47 | }, 48 | 49 | changeListener: function(event) 50 | { 51 | var thumb = this._thumb; 52 | var value = parseInt(this.value, 10); 53 | 54 | if (value < thumb._from) 55 | { 56 | value = thumb._from; 57 | } 58 | else if (value > thumb._to) 59 | { 60 | value = thumb._to; 61 | } 62 | 63 | thumb.style.left = ((value - thumb._from) * thumb._scale) + "px"; 64 | this.value = value; 65 | }, 66 | 67 | mousedownListener: function(event) 68 | { 69 | this._valueorigin = parseInt(this.style.left, 10) / this._scale - this._from; 70 | this._dragorigin = event.clientX; 71 | document._currentThumb = this; 72 | 73 | Core.addEventListener(document, "mousemove", Slider.mousemoveListener); 74 | Core.addEventListener(document, "mouseup", Slider.mouseupListener); 75 | Core.preventDefault(event); 76 | }, 77 | 78 | mousemoveListener: function(event) 79 | { 80 | var thumb = document._currentThumb; 81 | var value = thumb._valueorigin + (event.clientX - thumb._dragorigin) / thumb._scale; 82 | 83 | if (value < thumb._from) 84 | { 85 | value = thumb._from; 86 | } 87 | else if (value > thumb._to) 88 | { 89 | value = thumb._to; 90 | } 91 | 92 | thumb.style.left = ((value - thumb._from) * thumb._scale) + "px"; 93 | thumb._input.value = value; 94 | 95 | Core.preventDefault(event); 96 | }, 97 | 98 | mouseupListener: function(event) 99 | { 100 | document._currentThumb = null; 101 | Core.removeEventListener(document, "mousemove", Slider.mousemoveListener); 102 | Core.removeEventListener(document, "mouseup", Slider.mouseupListener); 103 | } 104 | }; 105 | 106 | Core.start(Slider); -------------------------------------------------------------------------------- /forms/cascadingmenu.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Cascading Menus 5 | 6 | 7 | 8 | 9 | 10 | 11 |

Classic Crews

12 |
13 |
14 | 15 | 68 |
69 |
70 |
71 | 72 | 73 | -------------------------------------------------------------------------------- /events/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Simply JavaScript – code archive 5 | 6 | 7 | 8 | 9 |
SitePoint logo
10 |

Simply JavaScript

11 |

« Back

12 |
13 |

Chapter 4 – Events

14 |
    15 |
  1. Event Handlers 16 | 21 |
    2. 22 |
  2. Default Actions 23 | 28 |
    3. 29 |
  3. The this Keyword 30 | 35 |
    4. 36 |
  4. Event Listeners 37 | 42 |
    5. 43 |
  5. Default Actions 44 | 49 |
    6. 50 |
  6. Event Propagation 51 | 56 |
    7. 57 |
  7. Rich Tooltips 58 | 67 |
    8. 68 |
  8. Accordion 69 | 76 |
    9. 77 |
78 |

Links

79 | 85 |
86 | 87 | -------------------------------------------------------------------------------- /events/accordion.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Accordion 5 | 6 | 7 | 10 | 11 | 12 | 13 | 14 |

Captains of the Enterprise

15 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /forms/cascadingmenu.js: -------------------------------------------------------------------------------- 1 | var CascadingMenu = 2 | { 3 | init: function() 4 | { 5 | var menus = Core.getElementsByClass("cascading"); 6 | 7 | for (var i = 0; i < menus.length; i++) 8 | { 9 | CascadingMenu.convertLabelToFieldset(menus[i]); 10 | var masterMenu = CascadingMenu.extractMasterMenu(menus[i]); 11 | CascadingMenu.createLabelFromTitle(masterMenu); 12 | CascadingMenu.createLabelFromTitle(menus[i]); 13 | 14 | CascadingMenu.updateSlaveMenu(masterMenu); 15 | Core.addEventListener(masterMenu, "change", CascadingMenu.changeListener); 16 | } 17 | }, 18 | 19 | convertLabelToFieldset: function(menu) 20 | { 21 | var menuId = menu.id; 22 | var labels = document.getElementsByTagName("label"); 23 | 24 | for (var i = 0; i < labels.length; i++) 25 | { 26 | if (labels[i].htmlFor == menuId) 27 | { 28 | var label = labels[i]; 29 | label.parentNode.removeChild(label); 30 | 31 | var legend = document.createElement("legend"); 32 | while (label.hasChildNodes()) 33 | { 34 | legend.appendChild(label.firstChild); 35 | } 36 | 37 | var fieldset = document.createElement("fieldset"); 38 | fieldset.appendChild(legend); 39 | 40 | menu.parentNode.replaceChild(fieldset, menu); 41 | fieldset.appendChild(menu); 42 | 43 | return; 44 | } 45 | } 46 | }, 47 | 48 | extractMasterMenu: function(menu) 49 | { 50 | var masterMenu = document.createElement("select"); 51 | masterMenu.id = menu.id + "master"; 52 | masterMenu.setAttribute("name", masterMenu.id); 53 | masterMenu.setAttribute("title", menu.getAttribute("title")); 54 | masterMenu._slave = menu; 55 | 56 | while (menu.hasChildNodes()) 57 | { 58 | var optgroup = menu.firstChild; 59 | if (optgroup.nodeType == 1) 60 | { 61 | var masterOption = document.createElement("option"); 62 | masterOption.appendChild(document.createTextNode(optgroup.getAttribute("label"))); 63 | masterMenu.appendChild(masterOption); 64 | 65 | var slaveOptions = []; 66 | while (optgroup.hasChildNodes()) 67 | { 68 | var option = optgroup.firstChild; 69 | slaveOptions[slaveOptions.length] = option; 70 | optgroup.removeChild(option); 71 | } 72 | masterOption._slaveOptions = slaveOptions; 73 | 74 | menu.setAttribute("title", optgroup.getAttribute("title")); 75 | } 76 | menu.removeChild(optgroup); 77 | } 78 | 79 | menu.parentNode.insertBefore(masterMenu, menu); 80 | 81 | return masterMenu; 82 | }, 83 | 84 | createLabelFromTitle: function(menu) 85 | { 86 | var title = menu.getAttribute("title"); 87 | menu.setAttribute("title", ""); 88 | 89 | var label = document.createElement("label"); 90 | label.htmlFor = menu.id; 91 | label.appendChild(document.createTextNode(title)); 92 | 93 | menu.parentNode.insertBefore(label, menu); 94 | }, 95 | 96 | updateSlaveMenu: function(masterMenu) 97 | { 98 | var selectedOption = masterMenu.options[masterMenu.selectedIndex]; 99 | 100 | while (masterMenu._slave.hasChildNodes()) 101 | { 102 | masterMenu._slave.removeChild(masterMenu._slave.firstChild); 103 | } 104 | 105 | for (var i = 0; i < selectedOption._slaveOptions.length; i++) 106 | { 107 | masterMenu._slave.appendChild(selectedOption._slaveOptions[i]); 108 | } 109 | masterMenu._slave.selectedIndex = 0; 110 | }, 111 | 112 | changeListener: function(event) 113 | { 114 | CascadingMenu.updateSlaveMenu(this); 115 | } 116 | }; 117 | 118 | Core.start(CascadingMenu); -------------------------------------------------------------------------------- /ajax/weather_widget.js: -------------------------------------------------------------------------------- 1 | var WeatherWidget = 2 | { 3 | init: function() 4 | { 5 | var weatherWidget = document.getElementById("weatherWidget"); 6 | var anchors = weatherWidget.getElementsByTagName("a"); 7 | 8 | for (var i = 0; i < anchors.length; i++) 9 | { 10 | Core.addEventListener(anchors[i], "click", WeatherWidget.clickListener); 11 | } 12 | }, 13 | clickListener: function(event) 14 | { 15 | try 16 | { 17 | var requester = new XMLHttpRequest(); 18 | } 19 | catch (error) 20 | { 21 | try 22 | { 23 | var requester = new ActiveXObject("Microsoft.XMLHTTP"); 24 | } 25 | catch (error) 26 | { 27 | var requester = null; 28 | } 29 | } 30 | 31 | if (requester != null) 32 | { 33 | var widgetLink = this; 34 | widgetLink._timer = setTimeout(function() 35 | { 36 | requester.abort(); 37 | 38 | WeatherWidget.writeError("The server timed out while making your request."); 39 | }, 10000); 40 | 41 | var city = this.firstChild.nodeValue; 42 | 43 | requester.open("GET", "ajax_weather.php?city=" + encodeURIComponent(city), true); 44 | requester.onreadystatechange = function() 45 | { 46 | if (requester.readyState == 4) 47 | { 48 | clearTimeout(widgetLink._timer); 49 | 50 | if (requester.status == 200 || requester.status == 304) 51 | { 52 | WeatherWidget.writeUpdate(requester.responseXML); 53 | } 54 | else 55 | { 56 | WeatherWidget.writeError("The server was unable to be contacted."); 57 | } 58 | } 59 | }; 60 | requester.send(null); 61 | 62 | Core.preventDefault(event); 63 | } 64 | }, 65 | writeUpdate: function(responseXML) 66 | { 67 | var nameNode = responseXML.getElementsByTagName("name")[0]; 68 | var nameTextNode = nameNode.firstChild; 69 | var name = nameTextNode.nodeValue; 70 | 71 | var temperatureNode = responseXML.getElementsByTagName("temperature")[0]; 72 | var temperatureTextNode = temperatureNode.firstChild; 73 | var temperature = temperatureTextNode.nodeValue; 74 | 75 | var descriptionNode = responseXML.getElementsByTagName("description")[0]; 76 | var descriptionTextNode = descriptionNode.firstChild; 77 | var description = descriptionTextNode.nodeValue; 78 | 79 | var descriptionClassNode = responseXML.getElementsByTagName("description_class")[0]; 80 | var descriptionClassTextNode = descriptionClassNode.firstChild; 81 | var descriptionClass = descriptionClassTextNode.nodeValue; 82 | 83 | var weatherWidget = document.getElementById("weatherWidget"); 84 | while (weatherWidget.hasChildNodes()) 85 | { 86 | weatherWidget.removeChild(weatherWidget.firstChild); 87 | } 88 | 89 | var h2 = document.createElement("h2"); 90 | h2.appendChild(document.createTextNode(name + " Weather")); 91 | weatherWidget.appendChild(h2); 92 | 93 | var div = document.createElement("div"); 94 | div.setAttribute("id", "forecast"); 95 | div.className = descriptionClass; 96 | weatherWidget.appendChild(div); 97 | 98 | var paragraph = document.createElement("p"); 99 | paragraph.setAttribute("id", "temperature"); 100 | paragraph.appendChild(document.createTextNode(temperature + "\u00B0C")); 101 | div.appendChild(paragraph); 102 | 103 | var paragraph2 = document.createElement("p"); 104 | paragraph2.appendChild(document.createTextNode(description)); 105 | div.appendChild(paragraph2); 106 | }, 107 | writeError: function(errorMsg) 108 | { 109 | alert(errorMsg); 110 | } 111 | }; 112 | 113 | Core.start(WeatherWidget); -------------------------------------------------------------------------------- /animation/accordion_animated.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Accordion 5 | 6 | 7 | 10 | 11 | 12 | 13 | 14 |

Captains of the Enterprise

15 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /events/tooltips.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Rich Tooltips 5 | 6 | 7 | 10 | 11 | 12 | 13 | 14 |

Famous Kaptains

15 |

From Wikipedia, the free encyclopedia

16 |
17 |

James T. Kirk

18 |

James Tiberius Kirk 21 | (2233 - 2293/2371), played by William Shatner, is the leading character in the 22 | original Star Trek TV series and the films based on it. Captain Kirk commanded 23 | the starship Enterprise 24 | (NCC-1701 27 | and later 28 | NCC-1701-A).

31 |

Kirk's adventures and tactics are legendary in the Alpha and Beta Quadrants 32 | and continue to be cited well into the 24th century. He had a relaxed and 33 | confident style of command, but didn't suffer fools gladly. As Captain Benjamin 34 | Sisko said later about the iconic commander, he had "quite the reputation as a 35 | ladies' man". Kirk's record with Starfleet's Department of Temporal 36 | Investigations was unrivaled, with seventeen infractions. He ordered the 37 | Enterprise into multiple blatant violations of the 38 | Prime Directive.

39 |
40 |
41 |

Kang

42 |

Kang is a 45 | character from the fictional Star Trek universe. He was played by Michael 46 | Ansara, and was one of three Klingons from the original series to also appear 47 | in the Star Trek: Deep Space Nine episode "Blood Oath".

48 |
49 |
50 |

Koloth

51 |

Koloth, played by William 54 | Campbell, is a character in the fictional Star Trek universe who appears in 55 | the original series episode "The Trouble with Tribbles", the animated series 56 | episode "More Tribbles, More Troubles", and the Star Trek: Deep Space Nine 57 | episode "Blood Oath".

58 |
59 |
60 |

Kor

61 |

Kor (Qor in 64 | Klingon) is a character from the fictional Star Trek universe. He was the 65 | first Klingon to be shown on television, played by John Colicos (first 66 | appearing in "Errand of Mercy"), and one of three original series Klingons to 67 | also appear on Star Trek: Deep Space Nine.

68 |
69 | 70 | 71 | -------------------------------------------------------------------------------- /animation/tooltips_delay.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Rich Tooltips (Delayed) 5 | 6 | 7 | 10 | 11 | 12 | 13 | 14 |

Famous Kaptains

15 |

From Wikipedia, the free encyclopedia

16 |
17 |

James T. Kirk

18 |

James Tiberius Kirk 21 | (2233 - 2293/2371), played by William Shatner, is the leading character in the 22 | original Star Trek TV series and the films based on it. Captain Kirk commanded 23 | the starship Enterprise 24 | (NCC-1701 27 | and later 28 | NCC-1701-A).

31 |

Kirk's adventures and tactics are legendary in the Alpha and Beta Quadrants 32 | and continue to be cited well into the 24th century. He had a relaxed and 33 | confident style of command, but didn't suffer fools gladly. As Captain Benjamin 34 | Sisko said later about the iconic commander, he had "quite the reputation as a 35 | ladies' man". Kirk's record with Starfleet's Department of Temporal 36 | Investigations was unrivaled, with seventeen infractions. He ordered the 37 | Enterprise into multiple blatant violations of the 38 | Prime Directive.

39 |
40 |
41 |

Kang

42 |

Kang is a 45 | character from the fictional Star Trek universe. He was played by Michael 46 | Ansara, and was one of three Klingons from the original series to also appear 47 | in the Star Trek: Deep Space Nine episode "Blood Oath".

48 |
49 |
50 |

Koloth

51 |

Koloth, played by William 54 | Campbell, is a character in the fictional Star Trek universe who appears in 55 | the original series episode "The Trouble with Tribbles", the animated series 56 | episode "More Tribbles, More Troubles", and the Star Trek: Deep Space Nine 57 | episode "Blood Oath".

58 |
59 |
60 |

Kor

61 |

Kor (Qor in 64 | Klingon) is a character from the fictional Star Trek universe. He was the 65 | first Klingon to be shown on television, played by John Colicos (first 66 | appearing in "Errand of Mercy"), and one of three original series Klingons to 67 | also appear on Star Trek: Deep Space Nine.

68 |
69 | 70 | 71 | -------------------------------------------------------------------------------- /animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Simply JavaScript – code archive 5 | 6 | 7 | 8 | 9 |
SitePoint logo
10 |

Simply JavaScript

11 |

« Back

12 |
13 |

Chapter 5 – Animation

14 |
    15 |
  1. Stopping the Timer 16 | 22 |
    2. 23 |
  2. Revisiting Rich Tooltips 24 | 33 |
    3. 34 |
  3. Old-school Animation in a New-school Style 35 | 43 |
    4. 44 |
  4. Path-based Motion 45 | 61 |
    5. 62 |
  5. Revisiting the Accordion Control 63 | 70 |
    6. 71 |
  6. script.aculo.us 72 | 80 | 81 |
82 |

Links

83 | 89 |
90 | 91 | -------------------------------------------------------------------------------- /animation/accordion_animated.js: -------------------------------------------------------------------------------- 1 | var Accordion = 2 | { 3 | init: function() 4 | { 5 | Accordion.frameRate = 25; 6 | Accordion.duration = 0.5; 7 | 8 | var accordions = Core.getElementsByClass("accordion"); 9 | 10 | for (var i = 0; i < accordions.length; i++) 11 | { 12 | var folds = accordions[i].childNodes; 13 | for (var j = 0; j < folds.length; j++) 14 | { 15 | if (folds[j].nodeType == 1) 16 | { 17 | var accordionContent = document.createElement("div"); 18 | accordionContent.className = "accordionContent"; 19 | 20 | for (var k = 0; k < folds[j].childNodes.length; k++) 21 | { 22 | if (folds[j].childNodes[k].nodeName.toLowerCase() != "h2") 23 | { 24 | accordionContent.appendChild(folds[j].childNodes[k]); 25 | k--; 26 | } 27 | } 28 | 29 | folds[j].appendChild(accordionContent); 30 | folds[j]._accordionContent = accordionContent; 31 | 32 | Accordion.collapse(folds[j]); 33 | var foldLinks = folds[j].getElementsByTagName("a"); 34 | var foldTitleLink = foldLinks[0]; 35 | Core.addEventListener(foldTitleLink, "click", Accordion.clickListener); 36 | 37 | for (var k = 1; k < foldLinks.length; k++) 38 | { 39 | Core.addEventListener(foldLinks[k], "focus", Accordion.focusListener); 40 | } 41 | } 42 | } 43 | 44 | if (location.hash.length > 1) 45 | { 46 | var activeFold = document.getElementById(location.hash.substring(1)); 47 | if (activeFold && activeFold.parentNode == accordions[i]) 48 | { 49 | Accordion.expand(activeFold); 50 | } 51 | } 52 | } 53 | }, 54 | 55 | collapse: function(fold) 56 | { 57 | var content = fold._accordionContent; 58 | content._height = parseInt(content.style.height, 10); 59 | content._increment = content._height / (Accordion.frameRate * Accordion.duration); 60 | 61 | if (Core.hasClass(fold, "expanded")) 62 | { 63 | clearTimeout(content._timer); 64 | Accordion.collapseAnimate(content); 65 | } 66 | else 67 | { 68 | Core.addClass(fold, "collapsed"); 69 | } 70 | }, 71 | 72 | collapseAnimate: function(content) 73 | { 74 | var newHeight = content._height - content._increment; 75 | 76 | if (newHeight < 0) 77 | { 78 | newHeight = 0; 79 | Core.removeClass(content.parentNode, "expanded"); 80 | Core.addClass(content.parentNode, "collapsed"); 81 | } 82 | else 83 | { 84 | content._timer = setTimeout(function() 85 | { 86 | Accordion.collapseAnimate(content); 87 | }, 1000 / Accordion.frameRate); 88 | } 89 | 90 | content._height = newHeight; 91 | content.style.height = Math.round(newHeight) + "px"; 92 | }, 93 | 94 | collapseAll: function(accordion) 95 | { 96 | var folds = accordion.childNodes; 97 | for (var i = 0; i < folds.length; i++) 98 | { 99 | if (folds[i].nodeType == 1) 100 | { 101 | Accordion.collapse(folds[i]); 102 | } 103 | } 104 | }, 105 | 106 | expand: function(fold) 107 | { 108 | var content = fold._accordionContent; 109 | 110 | Accordion.collapseAll(fold.parentNode); 111 | 112 | if (!Core.hasClass(fold, "expanded")) 113 | { 114 | content.style.height = "0"; 115 | content._height = 0; 116 | Core.removeClass(fold, "collapsed"); 117 | Core.addClass(fold, "expanded"); 118 | content._increment = content.scrollHeight / (Accordion.frameRate * Accordion.duration); 119 | Accordion.expandAnimate(content); 120 | } 121 | }, 122 | 123 | expandAnimate: function(content) 124 | { 125 | var newHeight = content._height + content._increment; 126 | 127 | if (newHeight > content.scrollHeight) 128 | { 129 | newHeight = content.scrollHeight; 130 | } 131 | else 132 | { 133 | content._timer = setTimeout(function() 134 | { 135 | Accordion.expandAnimate(content); 136 | }, 1000 / Accordion.frameRate); 137 | } 138 | 139 | content._height = newHeight; 140 | content.style.height = Math.round(newHeight) + "px"; 141 | content.scrollTop = 0; 142 | }, 143 | 144 | clickListener: function(event) 145 | { 146 | var fold = this.parentNode.parentNode; 147 | if (Core.hasClass(fold, "collapsed")) 148 | { 149 | Accordion.expand(fold); 150 | } 151 | else 152 | { 153 | Accordion.collapse(fold); 154 | } 155 | Core.preventDefault(event); 156 | }, 157 | 158 | focusListener: function(event) 159 | { 160 | var element = this; 161 | while (element.parentNode) 162 | { 163 | if (element.parentNode.className == "accordion") 164 | { 165 | Accordion.expand(element); 166 | return; 167 | } 168 | element = element.parentNode; 169 | } 170 | } 171 | }; 172 | 173 | Core.start(Accordion); 174 | -------------------------------------------------------------------------------- /ajax/core.js: -------------------------------------------------------------------------------- 1 | var Core = {}; 2 | 3 | // W3C DOM 2 Events model 4 | if (document.addEventListener) 5 | { 6 | Core.addEventListener = function(target, type, listener) 7 | { 8 | target.addEventListener(type, listener, false); 9 | }; 10 | 11 | Core.removeEventListener = function(target, type, listener) 12 | { 13 | target.removeEventListener(type, listener, false); 14 | }; 15 | 16 | Core.preventDefault = function(event) 17 | { 18 | event.preventDefault(); 19 | }; 20 | 21 | Core.stopPropagation = function(event) 22 | { 23 | event.stopPropagation(); 24 | }; 25 | } 26 | // Internet Explorer Events model 27 | else if (document.attachEvent) 28 | { 29 | Core.addEventListener = function(target, type, listener) 30 | { 31 | // prevent adding the same listener twice, since DOM 2 Events ignores 32 | // duplicates like this 33 | if (Core._findListener(target, type, listener) != -1) return; 34 | 35 | // listener2 calls listener as a method of target in one of two ways, 36 | // depending on what this version of IE supports, and passes it the global 37 | // event object as an argument 38 | var listener2 = function() 39 | { 40 | var event = window.event; 41 | 42 | if (Function.prototype.call) 43 | { 44 | listener.call(target, event); 45 | } 46 | else 47 | { 48 | target._currentListener = listener; 49 | target._currentListener(event) 50 | target._currentListener = null; 51 | } 52 | }; 53 | 54 | // add listener2 using IE's attachEvent method 55 | target.attachEvent("on" + type, listener2); 56 | 57 | // create an object describing this listener so we can clean it up later 58 | var listenerRecord = 59 | { 60 | target: target, 61 | type: type, 62 | listener: listener, 63 | listener2: listener2 64 | }; 65 | 66 | // get a reference to the window object containing target 67 | var targetDocument = target.document || target; 68 | var targetWindow = targetDocument.parentWindow; 69 | 70 | // create a unique ID for this listener 71 | var listenerId = "l" + Core._listenerCounter++; 72 | 73 | // store a record of this listener in the window object 74 | if (!targetWindow._allListeners) targetWindow._allListeners = {}; 75 | targetWindow._allListeners[listenerId] = listenerRecord; 76 | 77 | // store this listener's ID in target 78 | if (!target._listeners) target._listeners = []; 79 | target._listeners[target._listeners.length] = listenerId; 80 | 81 | // set up Core._removeAllListeners to clean up all listeners on unload 82 | if (!targetWindow._unloadListenerAdded) 83 | { 84 | targetWindow._unloadListenerAdded = true; 85 | targetWindow.attachEvent("onunload", Core._removeAllListeners); 86 | } 87 | }; 88 | 89 | Core.removeEventListener = function(target, type, listener) 90 | { 91 | // find out if the listener was actually added to target 92 | var listenerIndex = Core._findListener(target, type, listener); 93 | if (listenerIndex == -1) return; 94 | 95 | // get a reference to the window object containing target 96 | var targetDocument = target.document || target; 97 | var targetWindow = targetDocument.parentWindow; 98 | 99 | // obtain the record of the listener from the window object 100 | var listenerId = target._listeners[listenerIndex]; 101 | var listenerRecord = targetWindow._allListeners[listenerId]; 102 | 103 | // remove the listener, and remove its ID from target 104 | target.detachEvent("on" + type, listenerRecord.listener2); 105 | target._listeners.splice(listenerIndex, 1); 106 | 107 | // remove the record of the listener from the window object 108 | delete targetWindow._allListeners[listenerId]; 109 | }; 110 | 111 | Core.preventDefault = function(event) 112 | { 113 | event.returnValue = false; 114 | }; 115 | 116 | Core.stopPropagation = function(event) 117 | { 118 | event.cancelBubble = true; 119 | }; 120 | 121 | Core._findListener = function(target, type, listener) 122 | { 123 | // get the array of listener IDs added to target 124 | var listeners = target._listeners; 125 | if (!listeners) return -1; 126 | 127 | // get a reference to the window object containing target 128 | var targetDocument = target.document || target; 129 | var targetWindow = targetDocument.parentWindow; 130 | 131 | // searching backward (to speed up onunload processing), find the listener 132 | for (var i = listeners.length - 1; i >= 0; i--) 133 | { 134 | // get the listener's ID from target 135 | var listenerId = listeners[i]; 136 | 137 | // get the record of the listener from the window object 138 | var listenerRecord = targetWindow._allListeners[listenerId]; 139 | 140 | // compare type and listener with the retrieved record 141 | if (listenerRecord.type == type && listenerRecord.listener == listener) 142 | { 143 | return i; 144 | } 145 | } 146 | return -1; 147 | }; 148 | 149 | Core._removeAllListeners = function() 150 | { 151 | var targetWindow = this; 152 | 153 | for (id in targetWindow._allListeners) 154 | { 155 | var listenerRecord = targetWindow._allListeners[id]; 156 | listenerRecord.target.detachEvent( 157 | "on" + listenerRecord.type, listenerRecord.listener2); 158 | delete targetWindow._allListeners[id]; 159 | } 160 | }; 161 | 162 | Core._listenerCounter = 0; 163 | } 164 | 165 | Core.addClass = function(target, theClass) 166 | { 167 | if (!Core.hasClass(target, theClass)) 168 | { 169 | if (target.className == "") 170 | { 171 | target.className = theClass; 172 | } 173 | else 174 | { 175 | target.className += " " + theClass; 176 | } 177 | } 178 | }; 179 | 180 | Core.getElementsByClass = function(theClass) 181 | { 182 | var elementArray = []; 183 | 184 | if (typeof document.all != "undefined") 185 | { 186 | elementArray = document.all; 187 | } 188 | else 189 | { 190 | elementArray = document.getElementsByTagName("*"); 191 | } 192 | 193 | var matchedArray = []; 194 | var pattern = new RegExp("(^| )" + theClass + "( |$)"); 195 | 196 | for (var i = 0; i < elementArray.length; i++) 197 | { 198 | if (pattern.test(elementArray[i].className)) 199 | { 200 | matchedArray[matchedArray.length] = elementArray[i]; 201 | } 202 | } 203 | 204 | return matchedArray; 205 | }; 206 | 207 | Core.hasClass = function(target, theClass) 208 | { 209 | var pattern = new RegExp("(^| )" + theClass + "( |$)"); 210 | 211 | if (pattern.test(target.className)) 212 | { 213 | return true; 214 | } 215 | 216 | return false; 217 | }; 218 | 219 | Core.removeClass = function(target, theClass) 220 | { 221 | var pattern = new RegExp("(^| )" + theClass + "( |$)"); 222 | 223 | target.className = target.className.replace(pattern, "$1"); 224 | target.className = target.className.replace(/ $/, ""); 225 | }; 226 | 227 | Core.getComputedStyle = function(element, styleProperty) 228 | { 229 | var computedStyle = null; 230 | 231 | if (typeof element.currentStyle != "undefined") 232 | { 233 | computedStyle = element.currentStyle; 234 | } 235 | else 236 | { 237 | computedStyle = document.defaultView.getComputedStyle(element, null); 238 | } 239 | 240 | return computedStyle[styleProperty]; 241 | }; 242 | 243 | Core.start = function(runnable) 244 | { 245 | Core.addEventListener(window, "load", runnable.init); 246 | }; 247 | -------------------------------------------------------------------------------- /dom/core.js: -------------------------------------------------------------------------------- 1 | var Core = {}; 2 | 3 | // W3C DOM 2 Events model 4 | if (document.addEventListener) 5 | { 6 | Core.addEventListener = function(target, type, listener) 7 | { 8 | target.addEventListener(type, listener, false); 9 | }; 10 | 11 | Core.removeEventListener = function(target, type, listener) 12 | { 13 | target.removeEventListener(type, listener, false); 14 | }; 15 | 16 | Core.preventDefault = function(event) 17 | { 18 | event.preventDefault(); 19 | }; 20 | 21 | Core.stopPropagation = function(event) 22 | { 23 | event.stopPropagation(); 24 | }; 25 | } 26 | // Internet Explorer Events model 27 | else if (document.attachEvent) 28 | { 29 | Core.addEventListener = function(target, type, listener) 30 | { 31 | // prevent adding the same listener twice, since DOM 2 Events ignores 32 | // duplicates like this 33 | if (Core._findListener(target, type, listener) != -1) return; 34 | 35 | // listener2 calls listener as a method of target in one of two ways, 36 | // depending on what this version of IE supports, and passes it the global 37 | // event object as an argument 38 | var listener2 = function() 39 | { 40 | var event = window.event; 41 | 42 | if (Function.prototype.call) 43 | { 44 | listener.call(target, event); 45 | } 46 | else 47 | { 48 | target._currentListener = listener; 49 | target._currentListener(event) 50 | target._currentListener = null; 51 | } 52 | }; 53 | 54 | // add listener2 using IE's attachEvent method 55 | target.attachEvent("on" + type, listener2); 56 | 57 | // create an object describing this listener so we can clean it up later 58 | var listenerRecord = 59 | { 60 | target: target, 61 | type: type, 62 | listener: listener, 63 | listener2: listener2 64 | }; 65 | 66 | // get a reference to the window object containing target 67 | var targetDocument = target.document || target; 68 | var targetWindow = targetDocument.parentWindow; 69 | 70 | // create a unique ID for this listener 71 | var listenerId = "l" + Core._listenerCounter++; 72 | 73 | // store a record of this listener in the window object 74 | if (!targetWindow._allListeners) targetWindow._allListeners = {}; 75 | targetWindow._allListeners[listenerId] = listenerRecord; 76 | 77 | // store this listener's ID in target 78 | if (!target._listeners) target._listeners = []; 79 | target._listeners[target._listeners.length] = listenerId; 80 | 81 | // set up Core._removeAllListeners to clean up all listeners on unload 82 | if (!targetWindow._unloadListenerAdded) 83 | { 84 | targetWindow._unloadListenerAdded = true; 85 | targetWindow.attachEvent("onunload", Core._removeAllListeners); 86 | } 87 | }; 88 | 89 | Core.removeEventListener = function(target, type, listener) 90 | { 91 | // find out if the listener was actually added to target 92 | var listenerIndex = Core._findListener(target, type, listener); 93 | if (listenerIndex == -1) return; 94 | 95 | // get a reference to the window object containing target 96 | var targetDocument = target.document || target; 97 | var targetWindow = targetDocument.parentWindow; 98 | 99 | // obtain the record of the listener from the window object 100 | var listenerId = target._listeners[listenerIndex]; 101 | var listenerRecord = targetWindow._allListeners[listenerId]; 102 | 103 | // remove the listener, and remove its ID from target 104 | target.detachEvent("on" + type, listenerRecord.listener2); 105 | target._listeners.splice(listenerIndex, 1); 106 | 107 | // remove the record of the listener from the window object 108 | delete targetWindow._allListeners[listenerId]; 109 | }; 110 | 111 | Core.preventDefault = function(event) 112 | { 113 | event.returnValue = false; 114 | }; 115 | 116 | Core.stopPropagation = function(event) 117 | { 118 | event.cancelBubble = true; 119 | }; 120 | 121 | Core._findListener = function(target, type, listener) 122 | { 123 | // get the array of listener IDs added to target 124 | var listeners = target._listeners; 125 | if (!listeners) return -1; 126 | 127 | // get a reference to the window object containing target 128 | var targetDocument = target.document || target; 129 | var targetWindow = targetDocument.parentWindow; 130 | 131 | // searching backward (to speed up onunload processing), find the listener 132 | for (var i = listeners.length - 1; i >= 0; i--) 133 | { 134 | // get the listener's ID from target 135 | var listenerId = listeners[i]; 136 | 137 | // get the record of the listener from the window object 138 | var listenerRecord = targetWindow._allListeners[listenerId]; 139 | 140 | // compare type and listener with the retrieved record 141 | if (listenerRecord.type == type && listenerRecord.listener == listener) 142 | { 143 | return i; 144 | } 145 | } 146 | return -1; 147 | }; 148 | 149 | Core._removeAllListeners = function() 150 | { 151 | var targetWindow = this; 152 | 153 | for (id in targetWindow._allListeners) 154 | { 155 | var listenerRecord = targetWindow._allListeners[id]; 156 | listenerRecord.target.detachEvent( 157 | "on" + listenerRecord.type, listenerRecord.listener2); 158 | delete targetWindow._allListeners[id]; 159 | } 160 | }; 161 | 162 | Core._listenerCounter = 0; 163 | } 164 | 165 | Core.addClass = function(target, theClass) 166 | { 167 | if (!Core.hasClass(target, theClass)) 168 | { 169 | if (target.className == "") 170 | { 171 | target.className = theClass; 172 | } 173 | else 174 | { 175 | target.className += " " + theClass; 176 | } 177 | } 178 | }; 179 | 180 | Core.getElementsByClass = function(theClass) 181 | { 182 | var elementArray = []; 183 | 184 | if (typeof document.all != "undefined") 185 | { 186 | elementArray = document.all; 187 | } 188 | else 189 | { 190 | elementArray = document.getElementsByTagName("*"); 191 | } 192 | 193 | var matchedArray = []; 194 | var pattern = new RegExp("(^| )" + theClass + "( |$)"); 195 | 196 | for (var i = 0; i < elementArray.length; i++) 197 | { 198 | if (pattern.test(elementArray[i].className)) 199 | { 200 | matchedArray[matchedArray.length] = elementArray[i]; 201 | } 202 | } 203 | 204 | return matchedArray; 205 | }; 206 | 207 | Core.hasClass = function(target, theClass) 208 | { 209 | var pattern = new RegExp("(^| )" + theClass + "( |$)"); 210 | 211 | if (pattern.test(target.className)) 212 | { 213 | return true; 214 | } 215 | 216 | return false; 217 | }; 218 | 219 | Core.removeClass = function(target, theClass) 220 | { 221 | var pattern = new RegExp("(^| )" + theClass + "( |$)"); 222 | 223 | target.className = target.className.replace(pattern, "$1"); 224 | target.className = target.className.replace(/ $/, ""); 225 | }; 226 | 227 | Core.getComputedStyle = function(element, styleProperty) 228 | { 229 | var computedStyle = null; 230 | 231 | if (typeof element.currentStyle != "undefined") 232 | { 233 | computedStyle = element.currentStyle; 234 | } 235 | else 236 | { 237 | computedStyle = document.defaultView.getComputedStyle(element, null); 238 | } 239 | 240 | return computedStyle[styleProperty]; 241 | }; 242 | 243 | Core.start = function(runnable) 244 | { 245 | Core.addEventListener(window, "load", runnable.init); 246 | }; 247 | -------------------------------------------------------------------------------- /errors/core.js: -------------------------------------------------------------------------------- 1 | var Core = {}; 2 | 3 | // W3C DOM 2 Events model 4 | if (document.addEventListener) 5 | { 6 | Core.addEventListener = function(target, type, listener) 7 | { 8 | target.addEventListener(type, listener, false); 9 | }; 10 | 11 | Core.removeEventListener = function(target, type, listener) 12 | { 13 | target.removeEventListener(type, listener, false); 14 | }; 15 | 16 | Core.preventDefault = function(event) 17 | { 18 | event.preventDefault(); 19 | }; 20 | 21 | Core.stopPropagation = function(event) 22 | { 23 | event.stopPropagation(); 24 | }; 25 | } 26 | // Internet Explorer Events model 27 | else if (document.attachEvent) 28 | { 29 | Core.addEventListener = function(target, type, listener) 30 | { 31 | // prevent adding the same listener twice, since DOM 2 Events ignores 32 | // duplicates like this 33 | if (Core._findListener(target, type, listener) != -1) return; 34 | 35 | // listener2 calls listener as a method of target in one of two ways, 36 | // depending on what this version of IE supports, and passes it the global 37 | // event object as an argument 38 | var listener2 = function() 39 | { 40 | var event = window.event; 41 | 42 | if (Function.prototype.call) 43 | { 44 | listener.call(target, event); 45 | } 46 | else 47 | { 48 | target._currentListener = listener; 49 | target._currentListener(event) 50 | target._currentListener = null; 51 | } 52 | }; 53 | 54 | // add listener2 using IE's attachEvent method 55 | target.attachEvent("on" + type, listener2); 56 | 57 | // create an object describing this listener so we can clean it up later 58 | var listenerRecord = 59 | { 60 | target: target, 61 | type: type, 62 | listener: listener, 63 | listener2: listener2 64 | }; 65 | 66 | // get a reference to the window object containing target 67 | var targetDocument = target.document || target; 68 | var targetWindow = targetDocument.parentWindow; 69 | 70 | // create a unique ID for this listener 71 | var listenerId = "l" + Core._listenerCounter++; 72 | 73 | // store a record of this listener in the window object 74 | if (!targetWindow._allListeners) targetWindow._allListeners = {}; 75 | targetWindow._allListeners[listenerId] = listenerRecord; 76 | 77 | // store this listener's ID in target 78 | if (!target._listeners) target._listeners = []; 79 | target._listeners[target._listeners.length] = listenerId; 80 | 81 | // set up Core._removeAllListeners to clean up all listeners on unload 82 | if (!targetWindow._unloadListenerAdded) 83 | { 84 | targetWindow._unloadListenerAdded = true; 85 | targetWindow.attachEvent("onunload", Core._removeAllListeners); 86 | } 87 | }; 88 | 89 | Core.removeEventListener = function(target, type, listener) 90 | { 91 | // find out if the listener was actually added to target 92 | var listenerIndex = Core._findListener(target, type, listener); 93 | if (listenerIndex == -1) return; 94 | 95 | // get a reference to the window object containing target 96 | var targetDocument = target.document || target; 97 | var targetWindow = targetDocument.parentWindow; 98 | 99 | // obtain the record of the listener from the window object 100 | var listenerId = target._listeners[listenerIndex]; 101 | var listenerRecord = targetWindow._allListeners[listenerId]; 102 | 103 | // remove the listener, and remove its ID from target 104 | target.detachEvent("on" + type, listenerRecord.listener2); 105 | target._listeners.splice(listenerIndex, 1); 106 | 107 | // remove the record of the listener from the window object 108 | delete targetWindow._allListeners[listenerId]; 109 | }; 110 | 111 | Core.preventDefault = function(event) 112 | { 113 | event.returnValue = false; 114 | }; 115 | 116 | Core.stopPropagation = function(event) 117 | { 118 | event.cancelBubble = true; 119 | }; 120 | 121 | Core._findListener = function(target, type, listener) 122 | { 123 | // get the array of listener IDs added to target 124 | var listeners = target._listeners; 125 | if (!listeners) return -1; 126 | 127 | // get a reference to the window object containing target 128 | var targetDocument = target.document || target; 129 | var targetWindow = targetDocument.parentWindow; 130 | 131 | // searching backward (to speed up onunload processing), find the listener 132 | for (var i = listeners.length - 1; i >= 0; i--) 133 | { 134 | // get the listener's ID from target 135 | var listenerId = listeners[i]; 136 | 137 | // get the record of the listener from the window object 138 | var listenerRecord = targetWindow._allListeners[listenerId]; 139 | 140 | // compare type and listener with the retrieved record 141 | if (listenerRecord.type == type && listenerRecord.listener == listener) 142 | { 143 | return i; 144 | } 145 | } 146 | return -1; 147 | }; 148 | 149 | Core._removeAllListeners = function() 150 | { 151 | var targetWindow = this; 152 | 153 | for (id in targetWindow._allListeners) 154 | { 155 | var listenerRecord = targetWindow._allListeners[id]; 156 | listenerRecord.target.detachEvent( 157 | "on" + listenerRecord.type, listenerRecord.listener2); 158 | delete targetWindow._allListeners[id]; 159 | } 160 | }; 161 | 162 | Core._listenerCounter = 0; 163 | } 164 | 165 | Core.addClass = function(target, theClass) 166 | { 167 | if (!Core.hasClass(target, theClass)) 168 | { 169 | if (target.className == "") 170 | { 171 | target.className = theClass; 172 | } 173 | else 174 | { 175 | target.className += " " + theClass; 176 | } 177 | } 178 | }; 179 | 180 | Core.getElementsByClass = function(theClass) 181 | { 182 | var elementArray = []; 183 | 184 | if (typeof document.all != "undefined") 185 | { 186 | elementArray = document.all; 187 | } 188 | else 189 | { 190 | elementArray = document.getElementsByTagName("*"); 191 | } 192 | 193 | var matchedArray = []; 194 | var pattern = new RegExp("(^| )" + theClass + "( |$)"); 195 | 196 | for (var i = 0; i < elementArray.length; i++) 197 | { 198 | if (pattern.test(elementArray[i].className)) 199 | { 200 | matchedArray[matchedArray.length] = elementArray[i]; 201 | } 202 | } 203 | 204 | return matchedArray; 205 | }; 206 | 207 | Core.hasClass = function(target, theClass) 208 | { 209 | var pattern = new RegExp("(^| )" + theClass + "( |$)"); 210 | 211 | if (pattern.test(target.className)) 212 | { 213 | return true; 214 | } 215 | 216 | return false; 217 | }; 218 | 219 | Core.removeClass = function(target, theClass) 220 | { 221 | var pattern = new RegExp("(^| )" + theClass + "( |$)"); 222 | 223 | target.className = target.className.replace(pattern, "$1"); 224 | target.className = target.className.replace(/ $/, ""); 225 | }; 226 | 227 | Core.getComputedStyle = function(element, styleProperty) 228 | { 229 | var computedStyle = null; 230 | 231 | if (typeof element.currentStyle != "undefined") 232 | { 233 | computedStyle = element.currentStyle; 234 | } 235 | else 236 | { 237 | computedStyle = document.defaultView.getComputedStyle(element, null); 238 | } 239 | 240 | return computedStyle[styleProperty]; 241 | }; 242 | 243 | Core.start = function(runnable) 244 | { 245 | Core.addEventListener(window, "load", runnable.init); 246 | }; 247 | -------------------------------------------------------------------------------- /events/core.js: -------------------------------------------------------------------------------- 1 | var Core = {}; 2 | 3 | // W3C DOM 2 Events model 4 | if (document.addEventListener) 5 | { 6 | Core.addEventListener = function(target, type, listener) 7 | { 8 | target.addEventListener(type, listener, false); 9 | }; 10 | 11 | Core.removeEventListener = function(target, type, listener) 12 | { 13 | target.removeEventListener(type, listener, false); 14 | }; 15 | 16 | Core.preventDefault = function(event) 17 | { 18 | event.preventDefault(); 19 | }; 20 | 21 | Core.stopPropagation = function(event) 22 | { 23 | event.stopPropagation(); 24 | }; 25 | } 26 | // Internet Explorer Events model 27 | else if (document.attachEvent) 28 | { 29 | Core.addEventListener = function(target, type, listener) 30 | { 31 | // prevent adding the same listener twice, since DOM 2 Events ignores 32 | // duplicates like this 33 | if (Core._findListener(target, type, listener) != -1) return; 34 | 35 | // listener2 calls listener as a method of target in one of two ways, 36 | // depending on what this version of IE supports, and passes it the global 37 | // event object as an argument 38 | var listener2 = function() 39 | { 40 | var event = window.event; 41 | 42 | if (Function.prototype.call) 43 | { 44 | listener.call(target, event); 45 | } 46 | else 47 | { 48 | target._currentListener = listener; 49 | target._currentListener(event) 50 | target._currentListener = null; 51 | } 52 | }; 53 | 54 | // add listener2 using IE's attachEvent method 55 | target.attachEvent("on" + type, listener2); 56 | 57 | // create an object describing this listener so we can clean it up later 58 | var listenerRecord = 59 | { 60 | target: target, 61 | type: type, 62 | listener: listener, 63 | listener2: listener2 64 | }; 65 | 66 | // get a reference to the window object containing target 67 | var targetDocument = target.document || target; 68 | var targetWindow = targetDocument.parentWindow; 69 | 70 | // create a unique ID for this listener 71 | var listenerId = "l" + Core._listenerCounter++; 72 | 73 | // store a record of this listener in the window object 74 | if (!targetWindow._allListeners) targetWindow._allListeners = {}; 75 | targetWindow._allListeners[listenerId] = listenerRecord; 76 | 77 | // store this listener's ID in target 78 | if (!target._listeners) target._listeners = []; 79 | target._listeners[target._listeners.length] = listenerId; 80 | 81 | // set up Core._removeAllListeners to clean up all listeners on unload 82 | if (!targetWindow._unloadListenerAdded) 83 | { 84 | targetWindow._unloadListenerAdded = true; 85 | targetWindow.attachEvent("onunload", Core._removeAllListeners); 86 | } 87 | }; 88 | 89 | Core.removeEventListener = function(target, type, listener) 90 | { 91 | // find out if the listener was actually added to target 92 | var listenerIndex = Core._findListener(target, type, listener); 93 | if (listenerIndex == -1) return; 94 | 95 | // get a reference to the window object containing target 96 | var targetDocument = target.document || target; 97 | var targetWindow = targetDocument.parentWindow; 98 | 99 | // obtain the record of the listener from the window object 100 | var listenerId = target._listeners[listenerIndex]; 101 | var listenerRecord = targetWindow._allListeners[listenerId]; 102 | 103 | // remove the listener, and remove its ID from target 104 | target.detachEvent("on" + type, listenerRecord.listener2); 105 | target._listeners.splice(listenerIndex, 1); 106 | 107 | // remove the record of the listener from the window object 108 | delete targetWindow._allListeners[listenerId]; 109 | }; 110 | 111 | Core.preventDefault = function(event) 112 | { 113 | event.returnValue = false; 114 | }; 115 | 116 | Core.stopPropagation = function(event) 117 | { 118 | event.cancelBubble = true; 119 | }; 120 | 121 | Core._findListener = function(target, type, listener) 122 | { 123 | // get the array of listener IDs added to target 124 | var listeners = target._listeners; 125 | if (!listeners) return -1; 126 | 127 | // get a reference to the window object containing target 128 | var targetDocument = target.document || target; 129 | var targetWindow = targetDocument.parentWindow; 130 | 131 | // searching backward (to speed up onunload processing), find the listener 132 | for (var i = listeners.length - 1; i >= 0; i--) 133 | { 134 | // get the listener's ID from target 135 | var listenerId = listeners[i]; 136 | 137 | // get the record of the listener from the window object 138 | var listenerRecord = targetWindow._allListeners[listenerId]; 139 | 140 | // compare type and listener with the retrieved record 141 | if (listenerRecord.type == type && listenerRecord.listener == listener) 142 | { 143 | return i; 144 | } 145 | } 146 | return -1; 147 | }; 148 | 149 | Core._removeAllListeners = function() 150 | { 151 | var targetWindow = this; 152 | 153 | for (id in targetWindow._allListeners) 154 | { 155 | var listenerRecord = targetWindow._allListeners[id]; 156 | listenerRecord.target.detachEvent( 157 | "on" + listenerRecord.type, listenerRecord.listener2); 158 | delete targetWindow._allListeners[id]; 159 | } 160 | }; 161 | 162 | Core._listenerCounter = 0; 163 | } 164 | 165 | Core.addClass = function(target, theClass) 166 | { 167 | if (!Core.hasClass(target, theClass)) 168 | { 169 | if (target.className == "") 170 | { 171 | target.className = theClass; 172 | } 173 | else 174 | { 175 | target.className += " " + theClass; 176 | } 177 | } 178 | }; 179 | 180 | Core.getElementsByClass = function(theClass) 181 | { 182 | var elementArray = []; 183 | 184 | if (typeof document.all != "undefined") 185 | { 186 | elementArray = document.all; 187 | } 188 | else 189 | { 190 | elementArray = document.getElementsByTagName("*"); 191 | } 192 | 193 | var matchedArray = []; 194 | var pattern = new RegExp("(^| )" + theClass + "( |$)"); 195 | 196 | for (var i = 0; i < elementArray.length; i++) 197 | { 198 | if (pattern.test(elementArray[i].className)) 199 | { 200 | matchedArray[matchedArray.length] = elementArray[i]; 201 | } 202 | } 203 | 204 | return matchedArray; 205 | }; 206 | 207 | Core.hasClass = function(target, theClass) 208 | { 209 | var pattern = new RegExp("(^| )" + theClass + "( |$)"); 210 | 211 | if (pattern.test(target.className)) 212 | { 213 | return true; 214 | } 215 | 216 | return false; 217 | }; 218 | 219 | Core.removeClass = function(target, theClass) 220 | { 221 | var pattern = new RegExp("(^| )" + theClass + "( |$)"); 222 | 223 | target.className = target.className.replace(pattern, "$1"); 224 | target.className = target.className.replace(/ $/, ""); 225 | }; 226 | 227 | Core.getComputedStyle = function(element, styleProperty) 228 | { 229 | var computedStyle = null; 230 | 231 | if (typeof element.currentStyle != "undefined") 232 | { 233 | computedStyle = element.currentStyle; 234 | } 235 | else 236 | { 237 | computedStyle = document.defaultView.getComputedStyle(element, null); 238 | } 239 | 240 | return computedStyle[styleProperty]; 241 | }; 242 | 243 | Core.start = function(runnable) 244 | { 245 | Core.addEventListener(window, "load", runnable.init); 246 | }; 247 | -------------------------------------------------------------------------------- /forms/core.js: -------------------------------------------------------------------------------- 1 | var Core = {}; 2 | 3 | // W3C DOM 2 Events model 4 | if (document.addEventListener) 5 | { 6 | Core.addEventListener = function(target, type, listener) 7 | { 8 | target.addEventListener(type, listener, false); 9 | }; 10 | 11 | Core.removeEventListener = function(target, type, listener) 12 | { 13 | target.removeEventListener(type, listener, false); 14 | }; 15 | 16 | Core.preventDefault = function(event) 17 | { 18 | event.preventDefault(); 19 | }; 20 | 21 | Core.stopPropagation = function(event) 22 | { 23 | event.stopPropagation(); 24 | }; 25 | } 26 | // Internet Explorer Events model 27 | else if (document.attachEvent) 28 | { 29 | Core.addEventListener = function(target, type, listener) 30 | { 31 | // prevent adding the same listener twice, since DOM 2 Events ignores 32 | // duplicates like this 33 | if (Core._findListener(target, type, listener) != -1) return; 34 | 35 | // listener2 calls listener as a method of target in one of two ways, 36 | // depending on what this version of IE supports, and passes it the global 37 | // event object as an argument 38 | var listener2 = function() 39 | { 40 | var event = window.event; 41 | 42 | if (Function.prototype.call) 43 | { 44 | listener.call(target, event); 45 | } 46 | else 47 | { 48 | target._currentListener = listener; 49 | target._currentListener(event) 50 | target._currentListener = null; 51 | } 52 | }; 53 | 54 | // add listener2 using IE's attachEvent method 55 | target.attachEvent("on" + type, listener2); 56 | 57 | // create an object describing this listener so we can clean it up later 58 | var listenerRecord = 59 | { 60 | target: target, 61 | type: type, 62 | listener: listener, 63 | listener2: listener2 64 | }; 65 | 66 | // get a reference to the window object containing target 67 | var targetDocument = target.document || target; 68 | var targetWindow = targetDocument.parentWindow; 69 | 70 | // create a unique ID for this listener 71 | var listenerId = "l" + Core._listenerCounter++; 72 | 73 | // store a record of this listener in the window object 74 | if (!targetWindow._allListeners) targetWindow._allListeners = {}; 75 | targetWindow._allListeners[listenerId] = listenerRecord; 76 | 77 | // store this listener's ID in target 78 | if (!target._listeners) target._listeners = []; 79 | target._listeners[target._listeners.length] = listenerId; 80 | 81 | // set up Core._removeAllListeners to clean up all listeners on unload 82 | if (!targetWindow._unloadListenerAdded) 83 | { 84 | targetWindow._unloadListenerAdded = true; 85 | targetWindow.attachEvent("onunload", Core._removeAllListeners); 86 | } 87 | }; 88 | 89 | Core.removeEventListener = function(target, type, listener) 90 | { 91 | // find out if the listener was actually added to target 92 | var listenerIndex = Core._findListener(target, type, listener); 93 | if (listenerIndex == -1) return; 94 | 95 | // get a reference to the window object containing target 96 | var targetDocument = target.document || target; 97 | var targetWindow = targetDocument.parentWindow; 98 | 99 | // obtain the record of the listener from the window object 100 | var listenerId = target._listeners[listenerIndex]; 101 | var listenerRecord = targetWindow._allListeners[listenerId]; 102 | 103 | // remove the listener, and remove its ID from target 104 | target.detachEvent("on" + type, listenerRecord.listener2); 105 | target._listeners.splice(listenerIndex, 1); 106 | 107 | // remove the record of the listener from the window object 108 | delete targetWindow._allListeners[listenerId]; 109 | }; 110 | 111 | Core.preventDefault = function(event) 112 | { 113 | event.returnValue = false; 114 | }; 115 | 116 | Core.stopPropagation = function(event) 117 | { 118 | event.cancelBubble = true; 119 | }; 120 | 121 | Core._findListener = function(target, type, listener) 122 | { 123 | // get the array of listener IDs added to target 124 | var listeners = target._listeners; 125 | if (!listeners) return -1; 126 | 127 | // get a reference to the window object containing target 128 | var targetDocument = target.document || target; 129 | var targetWindow = targetDocument.parentWindow; 130 | 131 | // searching backward (to speed up onunload processing), find the listener 132 | for (var i = listeners.length - 1; i >= 0; i--) 133 | { 134 | // get the listener's ID from target 135 | var listenerId = listeners[i]; 136 | 137 | // get the record of the listener from the window object 138 | var listenerRecord = targetWindow._allListeners[listenerId]; 139 | 140 | // compare type and listener with the retrieved record 141 | if (listenerRecord.type == type && listenerRecord.listener == listener) 142 | { 143 | return i; 144 | } 145 | } 146 | return -1; 147 | }; 148 | 149 | Core._removeAllListeners = function() 150 | { 151 | var targetWindow = this; 152 | 153 | for (id in targetWindow._allListeners) 154 | { 155 | var listenerRecord = targetWindow._allListeners[id]; 156 | listenerRecord.target.detachEvent( 157 | "on" + listenerRecord.type, listenerRecord.listener2); 158 | delete targetWindow._allListeners[id]; 159 | } 160 | }; 161 | 162 | Core._listenerCounter = 0; 163 | } 164 | 165 | Core.addClass = function(target, theClass) 166 | { 167 | if (!Core.hasClass(target, theClass)) 168 | { 169 | if (target.className == "") 170 | { 171 | target.className = theClass; 172 | } 173 | else 174 | { 175 | target.className += " " + theClass; 176 | } 177 | } 178 | }; 179 | 180 | Core.getElementsByClass = function(theClass) 181 | { 182 | var elementArray = []; 183 | 184 | if (typeof document.all != "undefined") 185 | { 186 | elementArray = document.all; 187 | } 188 | else 189 | { 190 | elementArray = document.getElementsByTagName("*"); 191 | } 192 | 193 | var matchedArray = []; 194 | var pattern = new RegExp("(^| )" + theClass + "( |$)"); 195 | 196 | for (var i = 0; i < elementArray.length; i++) 197 | { 198 | if (pattern.test(elementArray[i].className)) 199 | { 200 | matchedArray[matchedArray.length] = elementArray[i]; 201 | } 202 | } 203 | 204 | return matchedArray; 205 | }; 206 | 207 | Core.hasClass = function(target, theClass) 208 | { 209 | var pattern = new RegExp("(^| )" + theClass + "( |$)"); 210 | 211 | if (pattern.test(target.className)) 212 | { 213 | return true; 214 | } 215 | 216 | return false; 217 | }; 218 | 219 | Core.removeClass = function(target, theClass) 220 | { 221 | var pattern = new RegExp("(^| )" + theClass + "( |$)"); 222 | 223 | target.className = target.className.replace(pattern, "$1"); 224 | target.className = target.className.replace(/ $/, ""); 225 | }; 226 | 227 | Core.getComputedStyle = function(element, styleProperty) 228 | { 229 | var computedStyle = null; 230 | 231 | if (typeof element.currentStyle != "undefined") 232 | { 233 | computedStyle = element.currentStyle; 234 | } 235 | else 236 | { 237 | computedStyle = document.defaultView.getComputedStyle(element, null); 238 | } 239 | 240 | return computedStyle[styleProperty]; 241 | }; 242 | 243 | Core.start = function(runnable) 244 | { 245 | Core.addEventListener(window, "load", runnable.init); 246 | }; 247 | -------------------------------------------------------------------------------- /animation/core.js: -------------------------------------------------------------------------------- 1 | var Core = {}; 2 | 3 | // W3C DOM 2 Events model 4 | if (document.addEventListener) 5 | { 6 | Core.addEventListener = function(target, type, listener) 7 | { 8 | target.addEventListener(type, listener, false); 9 | }; 10 | 11 | Core.removeEventListener = function(target, type, listener) 12 | { 13 | target.removeEventListener(type, listener, false); 14 | }; 15 | 16 | Core.preventDefault = function(event) 17 | { 18 | event.preventDefault(); 19 | }; 20 | 21 | Core.stopPropagation = function(event) 22 | { 23 | event.stopPropagation(); 24 | }; 25 | } 26 | // Internet Explorer Events model 27 | else if (document.attachEvent) 28 | { 29 | Core.addEventListener = function(target, type, listener) 30 | { 31 | // prevent adding the same listener twice, since DOM 2 Events ignores 32 | // duplicates like this 33 | if (Core._findListener(target, type, listener) != -1) return; 34 | 35 | // listener2 calls listener as a method of target in one of two ways, 36 | // depending on what this version of IE supports, and passes it the global 37 | // event object as an argument 38 | var listener2 = function() 39 | { 40 | var event = window.event; 41 | 42 | if (Function.prototype.call) 43 | { 44 | listener.call(target, event); 45 | } 46 | else 47 | { 48 | target._currentListener = listener; 49 | target._currentListener(event) 50 | target._currentListener = null; 51 | } 52 | }; 53 | 54 | // add listener2 using IE's attachEvent method 55 | target.attachEvent("on" + type, listener2); 56 | 57 | // create an object describing this listener so we can clean it up later 58 | var listenerRecord = 59 | { 60 | target: target, 61 | type: type, 62 | listener: listener, 63 | listener2: listener2 64 | }; 65 | 66 | // get a reference to the window object containing target 67 | var targetDocument = target.document || target; 68 | var targetWindow = targetDocument.parentWindow; 69 | 70 | // create a unique ID for this listener 71 | var listenerId = "l" + Core._listenerCounter++; 72 | 73 | // store a record of this listener in the window object 74 | if (!targetWindow._allListeners) targetWindow._allListeners = {}; 75 | targetWindow._allListeners[listenerId] = listenerRecord; 76 | 77 | // store this listener's ID in target 78 | if (!target._listeners) target._listeners = []; 79 | target._listeners[target._listeners.length] = listenerId; 80 | 81 | // set up Core._removeAllListeners to clean up all listeners on unload 82 | if (!targetWindow._unloadListenerAdded) 83 | { 84 | targetWindow._unloadListenerAdded = true; 85 | targetWindow.attachEvent("onunload", Core._removeAllListeners); 86 | } 87 | }; 88 | 89 | Core.removeEventListener = function(target, type, listener) 90 | { 91 | // find out if the listener was actually added to target 92 | var listenerIndex = Core._findListener(target, type, listener); 93 | if (listenerIndex == -1) return; 94 | 95 | // get a reference to the window object containing target 96 | var targetDocument = target.document || target; 97 | var targetWindow = targetDocument.parentWindow; 98 | 99 | // obtain the record of the listener from the window object 100 | var listenerId = target._listeners[listenerIndex]; 101 | var listenerRecord = targetWindow._allListeners[listenerId]; 102 | 103 | // remove the listener, and remove its ID from target 104 | target.detachEvent("on" + type, listenerRecord.listener2); 105 | target._listeners.splice(listenerIndex, 1); 106 | 107 | // remove the record of the listener from the window object 108 | delete targetWindow._allListeners[listenerId]; 109 | }; 110 | 111 | Core.preventDefault = function(event) 112 | { 113 | event.returnValue = false; 114 | }; 115 | 116 | Core.stopPropagation = function(event) 117 | { 118 | event.cancelBubble = true; 119 | }; 120 | 121 | Core._findListener = function(target, type, listener) 122 | { 123 | // get the array of listener IDs added to target 124 | var listeners = target._listeners; 125 | if (!listeners) return -1; 126 | 127 | // get a reference to the window object containing target 128 | var targetDocument = target.document || target; 129 | var targetWindow = targetDocument.parentWindow; 130 | 131 | // searching backward (to speed up onunload processing), find the listener 132 | for (var i = listeners.length - 1; i >= 0; i--) 133 | { 134 | // get the listener's ID from target 135 | var listenerId = listeners[i]; 136 | 137 | // get the record of the listener from the window object 138 | var listenerRecord = targetWindow._allListeners[listenerId]; 139 | 140 | // compare type and listener with the retrieved record 141 | if (listenerRecord.type == type && listenerRecord.listener == listener) 142 | { 143 | return i; 144 | } 145 | } 146 | return -1; 147 | }; 148 | 149 | Core._removeAllListeners = function() 150 | { 151 | var targetWindow = this; 152 | 153 | for (id in targetWindow._allListeners) 154 | { 155 | var listenerRecord = targetWindow._allListeners[id]; 156 | listenerRecord.target.detachEvent( 157 | "on" + listenerRecord.type, listenerRecord.listener2); 158 | delete targetWindow._allListeners[id]; 159 | } 160 | }; 161 | 162 | Core._listenerCounter = 0; 163 | } 164 | 165 | Core.addClass = function(target, theClass) 166 | { 167 | if (!Core.hasClass(target, theClass)) 168 | { 169 | if (target.className == "") 170 | { 171 | target.className = theClass; 172 | } 173 | else 174 | { 175 | target.className += " " + theClass; 176 | } 177 | } 178 | }; 179 | 180 | Core.getElementsByClass = function(theClass) 181 | { 182 | var elementArray = []; 183 | 184 | if (typeof document.all != "undefined") 185 | { 186 | elementArray = document.all; 187 | } 188 | else 189 | { 190 | elementArray = document.getElementsByTagName("*"); 191 | } 192 | 193 | var matchedArray = []; 194 | var pattern = new RegExp("(^| )" + theClass + "( |$)"); 195 | 196 | for (var i = 0; i < elementArray.length; i++) 197 | { 198 | if (pattern.test(elementArray[i].className)) 199 | { 200 | matchedArray[matchedArray.length] = elementArray[i]; 201 | } 202 | } 203 | 204 | return matchedArray; 205 | }; 206 | 207 | Core.hasClass = function(target, theClass) 208 | { 209 | var pattern = new RegExp("(^| )" + theClass + "( |$)"); 210 | 211 | if (pattern.test(target.className)) 212 | { 213 | return true; 214 | } 215 | 216 | return false; 217 | }; 218 | 219 | Core.removeClass = function(target, theClass) 220 | { 221 | var pattern = new RegExp("(^| )" + theClass + "( |$)"); 222 | 223 | target.className = target.className.replace(pattern, "$1"); 224 | target.className = target.className.replace(/ $/, ""); 225 | }; 226 | 227 | Core.getComputedStyle = function(element, styleProperty) 228 | { 229 | var computedStyle = null; 230 | 231 | if (typeof element.currentStyle != "undefined") 232 | { 233 | computedStyle = element.currentStyle; 234 | } 235 | else 236 | { 237 | computedStyle = document.defaultView.getComputedStyle(element, null); 238 | } 239 | 240 | return computedStyle[styleProperty]; 241 | }; 242 | 243 | Core.start = function(runnable) 244 | { 245 | Core.addEventListener(window, "load", runnable.init); 246 | }; 247 | --------------------------------------------------------------------------------