final_x) {
14 | xpos--;
15 | }
16 | if (ypos < final_y) {
17 | ypos++;
18 | }
19 | if (ypos > final_y) {
20 | ypos--;
21 | }
22 | elem.style.left = xpos + "px";
23 | elem.style.top = ypos + "px";
24 | var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
25 | movement = setTimeout(repeat,interval);
26 | }
--------------------------------------------------------------------------------
/chapter09/story/story.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 |
6 | Man bites dog
7 |
8 |
9 |
10 |
11 |
12 | Hold the front page
13 | This first paragraph leads you in.
14 | Now you get the nitty-gritty of the story.
15 | The most important information is delivered first.
16 | Extra! Extra!
17 | Further developments are unfolding.
18 | You can read all about it here.
19 |
20 |
--------------------------------------------------------------------------------
/chapter06/image_gallery/01/gallery.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Image Gallery
6 |
7 |
8 |
9 | Snapshots
10 |
24 | 
25 | Choose an image.
26 |
27 |
28 |
--------------------------------------------------------------------------------
/chapter10/slideshow/scripts/moveElement.js:
--------------------------------------------------------------------------------
1 | function moveElement(elementID,final_x,final_y,interval) {
2 | if (!document.getElementById) return false;
3 | if (!document.getElementById(elementID)) return false;
4 | var elem = document.getElementById(elementID);
5 | if (elem.movement) {
6 | clearTimeout(elem.movement);
7 | }
8 | var xpos = parseInt(elem.style.left);
9 | var ypos = parseInt(elem.style.top);
10 |
11 | if (xpos == final_x && ypos == final_y) {
12 | return true;
13 | }
14 | if (xpos < final_x) {
15 | xpos++;
16 | }
17 | if (xpos > final_x) {
18 | xpos--;
19 | }
20 | if (ypos < final_y) {
21 | ypos++;
22 | }
23 | if (ypos > final_y) {
24 | ypos--;
25 | }
26 | elem.style.left = xpos + "px";
27 | elem.style.top = ypos + "px";
28 | var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
29 | elem.movement = setTimeout(repeat,interval);
30 | }
--------------------------------------------------------------------------------
/chapter12/domsters/submit.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Jay Skript And The Domsters: Contact the band
6 |
7 |
8 |
9 |
10 |
11 | 
12 |
21 |
22 |
23 | Thanks!
24 | Thanks for contacting us. We'll get back to you as soon as we can.
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/chapter11/3. video custom controls/player.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | My Video
6 |
7 |
8 |
9 |
10 |
21 |
Snapshots
10 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/chapter10/slideshow2/list.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Web Design
6 |
9 |
11 |
13 |
15 |
17 |
18 |
19 | Web Design
20 | These are the things you should know.
21 |
22 | -
23 | Structure
24 |
25 | -
26 | Presentation
27 |
28 | -
29 | Behavior
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/chapter04/image_gallery/03/gallery.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Image Gallery
6 |
7 |
8 |
9 | Snapshots
10 |
24 |
25 | Choose an image.
26 |
27 |
28 |
--------------------------------------------------------------------------------
/chapter10/slideshow/list.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Web Design
6 |
9 |
11 |
13 |
15 |
16 |
17 | Web Design
18 | These are the things you should know.
19 |
20 | -
21 | Structure
22 |
23 | -
24 | Presentation
25 |
26 | -
27 | Behavior
28 |
29 |
30 |
31 |
32 |
Snapshots
11 |
25 |
26 | Choose an image.
27 |
28 |
29 |
--------------------------------------------------------------------------------
/chapter03/test.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Shopping list
6 |
27 |
28 |
29 | What to buy
30 | Don't forget to buy this stuff.
31 | This is just a test
32 |
33 | - A tin of beans
34 | - Cheese
35 | - Milk
36 |
37 |
46 |
47 |
--------------------------------------------------------------------------------
/chapter07/image_gallery/02/gallery.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Image Gallery
6 |
7 |
8 |
9 |
10 | Snapshots
11 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/chapter07/image_gallery/03/gallery.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Image Gallery
6 |
7 |
8 |
9 |
10 | Snapshots
11 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/chapter12/domsters/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Jay Skript And The Domsters
6 |
7 |
8 |
9 |
10 |
11 |
12 |
21 |
22 |
23 | Welcome
24 | Welcome to the official website of Jay Skript and the Domsters. Here, you can learn more about the band, view photos of the band, find out about tour dates and get in touch with the band.
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/chapter07/image_gallery/04/gallery.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Image Gallery
6 |
7 |
8 |
9 |
10 | Snapshots
11 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/chapter09/itinerary/itinerary.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Cities
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | Itinerary
15 |
16 |
17 | | When |
18 | Where |
19 |
20 |
21 |
22 |
23 | | June 9th |
24 | Portland, OR |
25 |
26 |
27 | | June 10th |
28 | Seattle, WA |
29 |
30 |
31 | | June 12th |
32 | Sacramento, CA |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/chapter11/4. forms/examples.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Text and Email Input Types
6 |
7 |
8 |
9 |
35 |
36 |
--------------------------------------------------------------------------------
/chapter10/slideshow2/scripts/prepareSlideshow.js:
--------------------------------------------------------------------------------
1 | function prepareSlideshow() {
2 | // Make sure the browser understands the DOM methods
3 | if (!document.getElementsByTagName) return false;
4 | if (!document.getElementById) return false;
5 | // Make sure the elements exist
6 | if (!document.getElementById("linklist")) return false;
7 | var slideshow = document.createElement("div");
8 | slideshow.setAttribute("id","slideshow");
9 | var preview = document.createElement("img");
10 | preview.setAttribute("src","topics.gif");
11 | preview.setAttribute("alt","building blocks of web design");
12 | preview.setAttribute("id","preview");
13 | slideshow.appendChild(preview);
14 | var list = document.getElementById("linklist");
15 | insertAfter(slideshow,list);
16 | // Get all the links in the list
17 | var links = list.getElementsByTagName("a");
18 | // Attach the animation behavior to the mouseover event
19 | links[0].onmouseover = function() {
20 | moveElement("preview",-100,0,10);
21 | }
22 | links[1].onmouseover = function() {
23 | moveElement("preview",-200,0,10);
24 | }
25 | links[2].onmouseover = function() {
26 | moveElement("preview",-300,0,10);
27 | }
28 | }
29 | addLoadEvent(prepareSlideshow);
--------------------------------------------------------------------------------
/chapter08/abbreviations/explanation.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Explaining the Document Object Model
6 |
7 |
8 |
9 |
10 |
11 | What is the Document Object Model?
12 |
13 | The W3C defines
14 | the DOM as:
15 |
16 |
17 |
18 | A platform- and language-neutral interface that will allow programs
19 | and scripts to dynamically access and update the
20 | content, structure and style of documents.
21 |
22 |
23 |
24 | It is an API
25 | that can be used to navigate
26 | HTML and XML
27 | documents.
28 |
29 |
30 |
--------------------------------------------------------------------------------
/chapter06/image_gallery/02/gallery.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Image Gallery
6 |
7 |
8 |
9 |
10 | Snapshots
11 |
33 |
34 | Choose an image.
35 |
36 |
37 |
--------------------------------------------------------------------------------
/chapter06/image_gallery/03/gallery.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Image Gallery
6 |
7 |
8 |
9 |
10 | Snapshots
11 |
33 |
34 | Choose an image.
35 |
36 |
37 |
--------------------------------------------------------------------------------
/chapter07/image_gallery/01/gallery.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Image Gallery
6 |
7 |
8 |
9 |
10 | Snapshots
11 |
33 |
34 | Choose an image.
35 |
36 |
37 |
--------------------------------------------------------------------------------
/chapter10/slideshow2/scripts/moveElement.js:
--------------------------------------------------------------------------------
1 | function moveElement(elementID,final_x,final_y,interval) {
2 | if (!document.getElementById) return false;
3 | if (!document.getElementById(elementID)) return false;
4 | var elem = document.getElementById(elementID);
5 | if (elem.movement) {
6 | clearTimeout(elem.movement);
7 | }
8 | if (!elem.style.left) {
9 | elem.style.left = "0px";
10 | }
11 | if (!elem.style.top) {
12 | elem.style.top = "0px";
13 | }
14 | var xpos = parseInt(elem.style.left);
15 | var ypos = parseInt(elem.style.top);
16 | if (xpos == final_x && ypos == final_y) {
17 | return true;
18 | }
19 | if (xpos < final_x) {
20 | var dist = Math.ceil((final_x - xpos)/10);
21 | xpos = xpos + dist;
22 | }
23 | if (xpos > final_x) {
24 | var dist = Math.ceil((xpos - final_x)/10);
25 | xpos = xpos - dist;
26 | }
27 | if (ypos < final_y) {
28 | var dist = Math.ceil((final_y - ypos)/10);
29 | ypos = ypos + dist;
30 | }
31 | if (ypos > final_y) {
32 | var dist = Math.ceil((ypos - final_y)/10);
33 | ypos = ypos - dist;
34 | }
35 | elem.style.left = xpos + "px";
36 | elem.style.top = ypos + "px";
37 | var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
38 | elem.movement = setTimeout(repeat,interval);
39 | }
--------------------------------------------------------------------------------
/chapter08/accesskeys/scripts/displayCitations.js:
--------------------------------------------------------------------------------
1 | function displayCitations() {
2 | if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
3 | // get all the blockquotes
4 | var quotes = document.getElementsByTagName("blockquote");
5 | // loop through all the blockquotes
6 | for (var i=0; i
2 |
3 |
4 |
5 | Explaining the Document Object Model
6 |
7 |
8 |
9 |
10 |
11 |
12 | What is the Document Object Model?
13 |
14 | The W3C defines
15 | the DOM as:
16 |
17 |
18 |
19 | A platform- and language-neutral interface that will allow programs
20 | and scripts to dynamically access and update the
21 | content, structure and style of documents.
22 |
23 |
24 |
25 | It is an API
26 | that can be used to navigate
27 | HTML and XML
28 | documents.
29 |
30 |
31 |
--------------------------------------------------------------------------------
/chapter11/2. canvas grayscale image/scripts/grayscale.js:
--------------------------------------------------------------------------------
1 | function convertToGS(img) {
2 | // For good measure return if canvas isn't supported.
3 | if (!Modernizr.canvas) return;
4 |
5 | // Store the original color version.
6 | img.color = img.src;
7 |
8 | // Create a grayscale version.
9 | img.grayscale = createGSCanvas(img);
10 |
11 | // Swap the images on mouseover/out
12 | img.onmouseover = function() {
13 | this.src = this.color;
14 | }
15 | img.onmouseout = function() {
16 | this.src = this.grayscale;
17 | }
18 |
19 | img.onmouseout();
20 | }
21 |
22 | function createGSCanvas(img) {
23 |
24 | var canvas=document.createElement("canvas");
25 | canvas.width=img.width;
26 | canvas.height=img.height;
27 | var ctx=canvas.getContext("2d");
28 | ctx.drawImage(img,0,0);
29 |
30 | // Note: getImageData will only work for images
31 | // on the same domain as the script.
32 | var c = ctx.getImageData(0, 0, img.width, img.height);
33 | for (i=0; i
2 |
3 |
4 |
5 | Jay Skript And The Domsters: Contact the band
6 |
7 |
8 |
9 |
10 |
11 |
12 |
21 |
22 |
23 | Contact the band
24 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/chapter11/3. video custom controls/scripts/player.js:
--------------------------------------------------------------------------------
1 | (function() {
2 |
3 | function createVideoControls() {
4 | var vids = document.getElementsByTagName('video');
5 | for (var i = 0 ; i < vids.length ; i++) {
6 | addControls( vids[i] );
7 | }
8 | }
9 |
10 | function addControls( vid ) {
11 |
12 | vid.removeAttribute('controls');
13 |
14 |
15 | vid.height = vid.videoHeight;
16 | vid.width = vid.videoWidth;
17 | vid.parentNode.style.height = vid.videoHeight + 'px';
18 | vid.parentNode.style.width = vid.videoWidth + 'px';
19 |
20 | var controls = document.createElement('div');
21 | controls.setAttribute('class','controls');
22 |
23 | var play = document.createElement('button');
24 | play.setAttribute('title','Play');
25 | play.innerHTML = '►';
26 |
27 | controls.appendChild(play);
28 |
29 | vid.parentNode.insertBefore(controls, vid);
30 |
31 | play.onclick = function () {
32 | if (vid.ended) {
33 | vid.currentTime = 0;
34 | }
35 | if (vid.paused) {
36 | vid.play();
37 | } else {
38 | vid.pause();
39 | }
40 | };
41 |
42 | vid.addEventListener('play', function () {
43 | play.innerHTML = '▐▐';
44 | play.setAttribute('paused', true);
45 | }, false);
46 |
47 | vid.addEventListener('pause', function () {
48 | play.removeAttribute('paused');
49 | play.innerHTML = '►';
50 | }, false);
51 |
52 | vid.addEventListener('ended', function () {
53 | vid.pause();
54 | }, false);
55 | }
56 |
57 | window.onload = function() {
58 | createVideoControls();
59 | }
60 |
61 | })()
62 |
--------------------------------------------------------------------------------
/chapter12/domsters/template.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Jay Skript And The Domsters
6 |
7 |
8 |
9 |
10 |
11 |
12 |
21 |
22 |
23 | Lorem Ipsum Dolor
24 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
25 | Nullam iaculis vestibulum turpis. Pellentesque mattis rutrum
26 | nibh. Quisque orci orci, euismod sit amet, sollicitudin et,
27 | ullamcorper at, lorem.
28 | Pellentesque habitant morbi tristique senectus et netus
29 | et malesuada fames ac turpis egestas.
30 | Ut lectus. Mauris eu sapien non enim dapibus imperdiet.
31 | Sed eu mauris sed pede mollis commodo.
32 | Fusce eget est. Sed ullamcorper enim nec est.
33 | Cras dui felis, porta vitae, faucibus laoreet, sollicitudin eget,
34 | enim. Nulla auctor. Fusce interdum diam ac eros.
35 | Mauris egestas. Fusce in elit et sem aliquet pretium.
36 | Donec nunc erat, sodales ac, facilisis a, molestie eu, massa.
37 | Aenean nec justo eu neque malesuada aliquet.
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/chapter10/test.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Animation
6 |
56 |
57 |
58 | Whee!
59 |
60 |
61 |
--------------------------------------------------------------------------------
/chapter08/accesskeys/explanation.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Explaining the Document Object Model
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
18 | What is the Document Object Model?
19 |
20 | The W3C defines
21 | the DOM as:
22 |
23 |
24 |
25 | A platform- and language-neutral interface that will allow programs
26 | and scripts to dynamically access and update the
27 | content, structure and style of documents.
28 |
29 |
30 |
31 | It is an API
32 | that can be used to navigate
33 | HTML and XML
34 | documents.
35 |
36 |
37 |
--------------------------------------------------------------------------------
/chapter08/accesskeys/scripts/displayAccesskeys.js:
--------------------------------------------------------------------------------
1 | function displayAccesskeys() {
2 | if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
3 | // get all the links in the document
4 | var links = document.getElementsByTagName("a");
5 | // create an array to store the accesskeys
6 | var akeys = new Array();
7 | // loop through the links
8 | for (var i=0; i
2 |
3 |
4 |
5 | Jay Skript And The Domsters: Photos
6 |
7 |
8 |
9 |
10 |
11 |
12 |
21 |
22 |
23 | Photos of the band
24 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/chapter12/domsters/styles/color.css:
--------------------------------------------------------------------------------
1 | body {
2 | color: #fb5;
3 | background-color: #334;
4 | }
5 | a:link {
6 | color: #445;
7 | background-color: #eb6;
8 | }
9 | a:visited {
10 | color: #345;
11 | background-color: #eb6;
12 | }
13 | a:hover {
14 | color: #667;
15 | background-color: #fb5;
16 | }
17 | a:active {
18 | color: #778;
19 | background-color: #ec8;
20 | }
21 | header {
22 | color: #ec8;
23 | background-color: #334;
24 | border-color: #667;
25 | }
26 | header nav {
27 | color: #455;
28 | background-color: #789;
29 | border-color: #667;
30 | }
31 | article {
32 | color: #223;
33 | background-color: #edc;
34 | border-color: #667;
35 | }
36 | header nav ul {
37 | border-color: #99a;
38 | }
39 | header nav a:link,header nav a:visited {
40 | color: #eef;
41 | background-color: transparent;
42 | border-color: #99a;
43 | }
44 | header nav a:hover {
45 | color: #445;
46 | background-color: #eb6;
47 | }
48 | header nav a:active {
49 | color: #667;
50 | background-color: #ec8;
51 | }
52 | article img {
53 | border-color: #ba9;
54 | outline-color: #dcb;
55 | }
56 | #imagegallery a {
57 | background-color: transparent;
58 | }
59 |
60 |
61 |
62 |
63 |
64 | header nav a.here:link,
65 | header nav a.here:visited,
66 | header nav a.here:hover,
67 | header nav a.here:active {
68 | color: #eef;
69 | background-color: #799;
70 | }
71 |
72 |
73 |
74 | th {
75 | color: #edc;
76 | background-color: #455;
77 | }
78 | tr td {
79 | color: #223;
80 | background-color: #eb6;
81 | }
82 | tr.odd td {
83 | color: #223;
84 | background-color: #ec8;
85 | }
86 | tr.highlight td {
87 | color: #223;
88 | background-color: #cba;
89 | }
90 |
91 |
92 |
93 |
94 |
95 | input.placeholder {
96 | color: grey;
97 | }
98 |
--------------------------------------------------------------------------------
/chapter12/domsters/live.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Jay Skript And The Domsters: Tour dates
6 |
7 |
8 |
9 |
10 |
11 |
12 |
21 |
22 |
23 | Tour dates
24 |
25 |
26 |
27 | | Date |
28 | City |
29 | Venue |
30 |
31 |
32 |
33 |
34 | | June 9th |
35 | Portland, OR |
36 | Crystal Ballroom |
37 |
38 |
39 | | June 10th |
40 | Seattle, WA |
41 | Crocodile Cafe |
42 |
43 |
44 | | June 12th |
45 | Sacramento, CA |
46 | Torch Club |
47 |
48 |
49 | | June 17th |
50 | Austin, TX |
51 | Speakeasy |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
--------------------------------------------------------------------------------
/chapter08/abbreviations/scripts/displayAbbreviations.js:
--------------------------------------------------------------------------------
1 | function displayAbbreviations() {
2 | if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
3 | // get all the abbreviations
4 | var abbreviations = document.getElementsByTagName("abbr");
5 | if (abbreviations.length < 1) return false;
6 | var defs = new Array();
7 | // loop through the abbreviations
8 | for (var i=0; i
2 |
3 |
4 |
53 |
--------------------------------------------------------------------------------
/chapter12/domsters/about.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Jay Skript And The Domsters: About the band
6 |
7 |
8 |
9 |
10 |
11 |
12 |
21 |
22 |
23 | About the band
24 |
30 |
31 | Jay Skript
32 | Jay Skript is going to rock your world!
33 | Together with his compatriots The Domsters,
34 | Jay is set for world domination. Just you wait and see.
35 | Jay Skript has been on the scene since the mid nineties.
36 | His talent hasn't always been recognized or fully appreciated.
37 | In the early days, he was often unfavorably compared to bigger,
38 | similarly-named artists. That's all in the past now.
39 |
40 |
41 | The Domsters
42 | The Domsters have been around, in one form or another,
43 | for almost as long. It's only in the past few years that The Domsters
44 | have settled down to their current, stable line-up.
45 | Now they're a rock-solid bunch: methodical and dependable.
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/chapter07/image_gallery/03/scripts/showPic.js:
--------------------------------------------------------------------------------
1 | function showPic(whichpic) {
2 | if (!document.getElementById("placeholder")) return true;
3 | var source = whichpic.getAttribute("href");
4 | var placeholder = document.getElementById("placeholder");
5 | placeholder.setAttribute("src",source);
6 | if (!document.getElementById("description")) return false;
7 | if (whichpic.getAttribute("title")) {
8 | var text = whichpic.getAttribute("title");
9 | } else {
10 | var text = "";
11 | }
12 | var description = document.getElementById("description");
13 | if (description.firstChild.nodeType == 3) {
14 | description.firstChild.nodeValue = text;
15 | }
16 | return false;
17 | }
18 |
19 | function prepareGallery() {
20 | if (!document.getElementsByTagName) return false;
21 | if (!document.getElementById) return false;
22 | if (!document.getElementById("imagegallery")) return false;
23 | var gallery = document.getElementById("imagegallery");
24 | var links = gallery.getElementsByTagName("a");
25 | for ( var i=0; i < links.length; i++) {
26 | links[i].onclick = function() {
27 | return showPic(this);
28 | }
29 | links[i].onkeypress = links[i].onclick;
30 | }
31 | }
32 |
33 | function addLoadEvent(func) {
34 | var oldonload = window.onload;
35 | if (typeof window.onload != 'function') {
36 | window.onload = func;
37 | } else {
38 | window.onload = function() {
39 | oldonload();
40 | func();
41 | }
42 | }
43 | }
44 |
45 | function preparePlaceholder() {
46 | if (!document.createElement) return false;
47 | if (!document.createTextNode) return false;
48 | var placeholder = document.createElement("img");
49 | placeholder.setAttribute("id","placeholder");
50 | placeholder.setAttribute("src","images/placeholder.gif");
51 | placeholder.setAttribute("alt","my image gallery");
52 | var description = document.createElement("p");
53 | description.setAttribute("id","description");
54 | var desctext = document.createTextNode("Choose an image");
55 | description.appendChild(desctext);
56 | var gallery = document.getElementById("imagegallery");
57 | gallery.parentNode.insertBefore(placeholder,gallery);
58 | gallery.parentNode.insertBefore(description,gallery);
59 | }
60 |
61 | addLoadEvent(preparePlaceholder);
62 | addLoadEvent(prepareGallery);
--------------------------------------------------------------------------------
/chapter07/image_gallery/02/scripts/showPic.js:
--------------------------------------------------------------------------------
1 | function showPic(whichpic) {
2 | if (!document.getElementById("placeholder")) return true;
3 | var source = whichpic.getAttribute("href");
4 | var placeholder = document.getElementById("placeholder");
5 | placeholder.setAttribute("src",source);
6 | if (!document.getElementById("description")) return false;
7 | if (whichpic.getAttribute("title")) {
8 | var text = whichpic.getAttribute("title");
9 | } else {
10 | var text = "";
11 | }
12 | var description = document.getElementById("description");
13 | if (description.firstChild.nodeType == 3) {
14 | description.firstChild.nodeValue = text;
15 | }
16 | return false;
17 | }
18 |
19 | function prepareGallery() {
20 | if (!document.getElementsByTagName) return false;
21 | if (!document.getElementById) return false;
22 | if (!document.getElementById("imagegallery")) return false;
23 | var gallery = document.getElementById("imagegallery");
24 | var links = gallery.getElementsByTagName("a");
25 | for ( var i=0; i < links.length; i++) {
26 | links[i].onclick = function() {
27 | return showPic(this);
28 | }
29 | links[i].onkeypress = links[i].onclick;
30 | }
31 | }
32 |
33 | function addLoadEvent(func) {
34 | var oldonload = window.onload;
35 | if (typeof window.onload != 'function') {
36 | window.onload = func;
37 | } else {
38 | window.onload = function() {
39 | oldonload();
40 | func();
41 | }
42 | }
43 | }
44 |
45 | function preparePlaceholder() {
46 | if (!document.createElement) return false;
47 | if (!document.createTextNode) return false;
48 | var placeholder = document.createElement("img");
49 | placeholder.setAttribute("id","placeholder");
50 | placeholder.setAttribute("src","images/placeholder.gif");
51 | placeholder.setAttribute("alt","my image gallery");
52 | var description = document.createElement("p");
53 | description.setAttribute("id","description");
54 | var desctext = document.createTextNode("Choose an image");
55 | description.appendChild(desctext);
56 | var gallery = document.getElementById("imagegallery");
57 | document.getElementsByTagName("body")[0].appendChild(placeholder);
58 | document.getElementsByTagName("body")[0].appendChild(description);
59 | }
60 |
61 | addLoadEvent(preparePlaceholder);
62 | addLoadEvent(prepareGallery);
--------------------------------------------------------------------------------
/chapter07/image_gallery/04/scripts/showPic.js:
--------------------------------------------------------------------------------
1 | function addLoadEvent(func) {
2 | var oldonload = window.onload;
3 | if (typeof window.onload != 'function') {
4 | window.onload = func;
5 | } else {
6 | window.onload = function() {
7 | oldonload();
8 | func();
9 | }
10 | }
11 | }
12 |
13 | function insertAfter(newElement,targetElement) {
14 | var parent = targetElement.parentNode;
15 | if (parent.lastChild == targetElement) {
16 | parent.appendChild(newElement);
17 | } else {
18 | parent.insertBefore(newElement,targetElement.nextSibling);
19 | }
20 | }
21 |
22 | function preparePlaceholder() {
23 | if (!document.createElement) return false;
24 | if (!document.createTextNode) return false;
25 | if (!document.getElementById) return false;
26 | if (!document.getElementById("imagegallery")) return false;
27 | var placeholder = document.createElement("img");
28 | placeholder.setAttribute("id","placeholder");
29 | placeholder.setAttribute("src","images/placeholder.gif");
30 | placeholder.setAttribute("alt","my image gallery");
31 | var description = document.createElement("p");
32 | description.setAttribute("id","description");
33 | var desctext = document.createTextNode("Choose an image");
34 | description.appendChild(desctext);
35 | var gallery = document.getElementById("imagegallery");
36 | insertAfter(placeholder,gallery);
37 | insertAfter(description,placeholder);
38 | }
39 |
40 | function prepareGallery() {
41 | if (!document.getElementsByTagName) return false;
42 | if (!document.getElementById) return false;
43 | if (!document.getElementById("imagegallery")) return false;
44 | var gallery = document.getElementById("imagegallery");
45 | var links = gallery.getElementsByTagName("a");
46 | for ( var i=0; i < links.length; i++) {
47 | links[i].onclick = function() {
48 | return showPic(this);
49 | }
50 | links[i].onkeypress = links[i].onclick;
51 | }
52 | }
53 |
54 | function showPic(whichpic) {
55 | if (!document.getElementById("placeholder")) return true;
56 | var source = whichpic.getAttribute("href");
57 | var placeholder = document.getElementById("placeholder");
58 | placeholder.setAttribute("src",source);
59 | if (!document.getElementById("description")) return false;
60 | if (whichpic.getAttribute("title")) {
61 | var text = whichpic.getAttribute("title");
62 | } else {
63 | var text = "";
64 | }
65 | var description = document.getElementById("description");
66 | if (description.firstChild.nodeType == 3) {
67 | description.firstChild.nodeValue = text;
68 | }
69 | return false;
70 | }
71 |
72 | addLoadEvent(preparePlaceholder);
73 | addLoadEvent(prepareGallery);
--------------------------------------------------------------------------------
/chapter12/domsters/styles/layout.css:
--------------------------------------------------------------------------------
1 | section, header, article, nav {
2 | display: block;
3 | }
4 |
5 | * {
6 | padding: 0;
7 | margin: 0;
8 | }
9 |
10 | body {
11 | margin: 1em 10%;
12 | background-image: url(../images/background.gif);
13 | background-attachment: fixed;
14 | background-position: top left;
15 | background-repeat: repeat-x;
16 | max-width: 80em;
17 | }
18 | header {
19 | background-image: url(../images/guitarist.gif);
20 | background-repeat: no-repeat;
21 | background-position: bottom right;
22 | border-width: .1em;
23 | border-style: solid;
24 | border-bottom-width: 0;
25 | }
26 | header nav {
27 | background-image: url(../images/header navbar.gif);
28 | background-position: bottom left;
29 | background-repeat: repeat-x;
30 | border-width: .1em;
31 | border-style: solid;
32 | border-bottom-width: 0;
33 | border-top-width: 0;
34 | padding-left: 10%;
35 | }
36 | header nav ul {
37 | width: 100%;
38 | overflow: hidden;
39 | border-left-width: .1em;
40 | border-left-style: solid;
41 | }
42 | header nav li {
43 | display: inline;
44 | }
45 | header nav li a {
46 | display: block;
47 | float: left;
48 | padding: .5em 2em;
49 | border-right: .1em solid;
50 | }
51 | article {
52 | border-width: .1em;
53 | border-style: solid;
54 | border-top-width: 0;
55 | padding: 2em 10%;
56 | line-height: 1.8em;
57 | }
58 | article img {
59 | border-width: .1em;
60 | border-style: solid;
61 | outline-width: .1em;
62 | outline-style: solid;
63 | }
64 |
65 |
66 |
67 |
68 |
69 | #about header {
70 | background-image: url(../images/lineup.gif);
71 | }
72 | #photos header {
73 | background-image: url(../images/basshead.gif);
74 | }
75 | #live header {
76 | background-image: url(../images/bassist.gif);
77 | }
78 | #contact header {
79 | background-image: url(../images/drummer.gif);
80 | }
81 |
82 | #slideshow {
83 | width: 150px;
84 | height: 150px;
85 | position: relative;
86 | overflow: hidden;
87 | }
88 | #preview {
89 | position: absolute;
90 | border-width: 0;
91 | outline-width: 0;
92 | }
93 |
94 | #frame {
95 | position: absolute;
96 | top: 0;
97 | left: 0;
98 | z-index: 99;
99 | border-width: 0;
100 | outline-width: 0;
101 | }
102 |
103 |
104 | #imagegallery li {
105 | display: inline;
106 | }
107 |
108 |
109 | td {
110 | padding: .5em 3em;
111 | }
112 |
113 |
114 | dl {
115 | overflow: hidden;
116 | }
117 | dt {
118 | float: left;
119 | }
120 | dd {
121 | float: left;
122 | }
123 |
124 |
125 | label {
126 | display: block;
127 | }
128 | fieldset {
129 | border: 0;
130 | }
131 |
132 |
133 |
134 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | DOM Scripting: Web Design with JavaScript and the Document Object Model
6 |
7 |
8 |
9 |
10 |
11 |
12 |
16 |
17 |
Code Examples
18 |
19 |
20 | A brief history of JavaScript
JavaScript Syntax
The Document Object Model
23 |
24 | - Test:
alert title attribute
25 |
26 | A JavaScript image gallery
28 |
34 | Best Practices
36 |
37 | - Example: unobtrusive popup window
38 |
39 | Image Gallery Revisited
41 |
46 | Creating markup on the fly
48 |
49 | - Test:
document.write inline
50 | - Test:
document.write external
51 | - Test:
alert innerHTML
52 | - Test: updating
innerHTML
53 | - Test:
alert node info
54 | - Test:
createElement
55 | - Test:
createTextNode
56 | - Test:
appendChild
57 | - Test: documentFragments
58 | - Test: documentFragments
59 |
60 | Enhancing content
62 |
67 | CSS-DOM
69 |
70 | - Example:
alert changed style info
71 | - Itinerary: striped table
72 | - Story: styling first paragraphs
73 |
74 | Animated Slideshow
76 |
82 | Putting it all together
84 |
91 | The Future of DOM Scripting
94 |
95 |
Oops, there was an error. Sorry.
';
431 | }
432 | } else {
433 | thetarget.innerHTML = '' + request.statusText + '
';
434 | }
435 | }
436 | };
437 |
438 | request.send(data);
439 |
440 | return true;
441 | };
442 |
443 |
444 |
445 |
446 |
447 | function loadEvents() {
448 | // home
449 | prepareSlideshow();
450 | // about
451 | prepareInternalnav();
452 | // photos
453 | preparePlaceholder();
454 | prepareGallery();
455 | // live
456 | stripeTables();
457 | highlightRows();
458 | displayAbbreviations();
459 | // contact
460 | focusLabels();
461 | prepareForms();
462 | }
463 |
464 | // Load events
465 | addLoadEvent(highlightPage);
466 | addLoadEvent(loadEvents);
467 |
468 |
--------------------------------------------------------------------------------
10 |
11 |
12 |
--------------------------------------------------------------------------------
/chapter11/1. canvas simple/canvas.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |