Big Collection

1. in regular item, soft code the zip code and store for dist level case
2. There’s nothing that says that complexity has to be a requirement for developing web
applications.
3. CSS selectors represent an equally powerful concept,
but are tuned for use within HTML pages, are a bit more concise, and are generally
considered easier to understand.
4. there’s no need to loop over the array of elements. It’s all done for us behind the scenes!
5. jQuery supports not only the selectors that you have already come to know
and love
6. doing so could result in a large, clunky mass of code that contains little-used features
that merely serve to gum up the works!
7. which limits the application of the selector to the desired portion of the DOM.
8. Unfortunately, that selector
would grab all links because they all descend from a list element.
9. The results will be as shown in figure 2.3.
10. What about an “attribute ends with” selector? Coming right up:
11. Even though the CSS selectors we’ve examined so far are incredibly powerful, let’s
discuss ways of squeezing even more power out of jQuery’s selectors.
12. But there may be times when
13. This method allows us to filter the wrapped set in ways that are difficult or impossible
to express with a selector expression by resorting to programmatic filtering of the
wrapped set items.
14. For such situations, the filter() method can be employed, as follows
15. At this point you may be asking
16. without seeming like we’re trying to influence their decision.
17. toggle()takes care of swapping the displayed state on our behalf.
18. Does this arise when there are local resources that are perhaps reaching thresholds?
19. And remember, if there’s something that jQuery
doesn’t provide, we’ve seen that it’s easy to extend jQuery by leveraging its existing
features.
20. As the software application evolves components can be swapped out for new
implementations without affecting the components in layer above or below.
21. There may be times when you use Java technology primarily because you want to get the advantages

of the Java programming language.
22. As a whole, Java technology leans heavily in the direction of networks, but the Java programming

language is quite general-purpose.
23. The Web Server may be down, too busy, or experiencing other problems preventing it from

responding to requests. You may wish to try again at a later time.
24. Because Java enforces strict type rules at run- time, you are not able to directly manipulate

memory in ways that can accidentally corrupt it.
25. As a result, you can't ever create certain kinds of bugs in Java programs that regularly harass

C++ programmers and hamper their productivity.
26. You can be more productive in Java primarily because you don't have to chase down memory

corruption bugs.
27. And in a world consisting of the kind of distributed systems encouraged by Java's architecture,

with code and objects flying over the network from one virtual machine to another, developers

basically lose all control over which virtual machine implementations their programs will run on.
28. Ultimately, whether or not performance will be a problem for you, and how you would go about

dealing with that problem, depends on what exactly you are trying to do.
29. For large programs, obfuscation can make the code that comes out of the decompiler so cryptic as

to require nearly the same effort to steal your work as would be required by a statically-linked

executable.
30. Class loaders and security managers are complicated enough that the mere act of customization can

potentially produce errors that open up security holes.
31. The detach method takes the selected element(s) out, but holds on to it so that it can be

reattached later.
32. You’ve got the two buttons set up.
33. The diagram below should help you think it out.
34. The last method narrows down the selected elements to just the last one.
35. In Chapter 3, you saw how to use the each method to loop through elements.
36. We can use it again here to loop through all the meat elements in the $m array and
put them back where they were. But to do that, we’ll need to check out a bit more
about how the each method works.
37. We’re using the after method here, but you can use any jQuery method to do stuff to an array of

elements.
38. I get the other filter methods, but slice still confuses the heck out of me. Can you give me a

more in-depth explanation of it?
39. To reference the current element, you use this but wrap it with the jQuery shortcut: $(this).
40. That way, the each function knows when it’s done processing.
41. If each didn’t have an index variable, it wouldn’t know which function to work on and it wouldn’t

be able to stop.
42. Now Alexandra can focus on cooking up some tasty new menu items instead of worrying about the

website.
43. You can add to, replace, and remove things from the DOM at will.
44. When in doubt, look at the previous two pages for guidance. We’ve done a few for you.
45. Now that we have the Monster Mashup laid out visually, let’s set up the
rest of the user interface section called for in the blueprint.
46. Set the headclix variable to whatever it was before plus one.
47. Notice how each function inside the click is structured in a similar way with minor
variations? This might be a good case for reuse.
48. Next up is the lightning effect. Let’s review what the blueprint calls for before
trying to make the effect work.
49. As cool as the animate method is, it has some limits.
50. The animate Method Up Close
51. Match each chunk of custom animation code to what it does when it runs.
52. we have to think about what their current positions are and how we want them to
change relative to what their positions were the last time animate changed them.
53. how jQuery can use them to create custom lists and objects as well as loop through those lists

and objects to make your life much easier.
54. They are specific methods of the window object, and can only be called in reference to the window

object.
55. but it would be fun to see the computer mix them all up for me.
56. Let’s divide and conquer the problem by breaking it down into smaller steps.
57. Let’s start with figuring out the current position for each image strip.
58. It’s not as hard as you think.
59. Some folks would refer to this as a utility function. It does one thing and does it well.
60. Those custom functions had unintended effects, but they likely did exactly what we wrote in the

code. Let’s have a look at what we might not have thought about.
61. We need to write conditional logic to handle this situation.
62. Rewind each image strip by setting it to an absolute position of 0 px for the CSS left property.
63. That’ll double the amount of code you’ll have to write and maintain, and will slow down your
application considerably.
64. It sets each item in the clix array to be 0 as well just as it was when we loaded the page.
65. setTimeout waits a set period of time before telling a function to run.
66. setInterval runs a function repeatedly, with a certain amount of time in between.
67. Then, when the server’s done, your code can update just the part of the page that’s changed.
But you’re never waiting around. That’s the power of asynchronous requests!
68. This parameter caches the results locally. That can cut down on calls to the server.
69. Now that we know we can load the XML file into the browser, we need to pick out
the necessary text and display it on screen.
70. Luckily, jQuery supplies us with the find method, whose job it is to seek out elements
that match whatever criteria we give it.
71. The find and children methods are similar, except that the latter only travels a single level
down the DOM tree.
72. Wow, this is really starting to look good! Can we use something simpler to get the updated time

for the page though?
73. Do that before proceeding.
74. It looks like XML won’t work for what we need. What other options do you know of for Marketing to

add new runners?
75. Now that you’ve got a form in place to collect the data, how do you think we should go about

storing and retrieving it?
76. The latter will create an associative array of key/value pairs, which is still a single object

but is much more structured than the result of the simple serialize method.
77. Don’t wory about this one right now; we’ll get to it a bit later in the chapter.
78. We’re almost at the point where we can grab the data back out of the database and figure out how

to display it in our Finishers lists.
79. Well, it’s data all right, but it looks complex and confusing. Can we do anything to pretty it up

a little?
80. What “chunks” of content might live in these two sections?
81. IA is the process by which you break your website’s content into chunks and then organize
those chunks hierarchically in relation to one another in a way that’s logical.
82. Before defaulting to windows-1252 the validator also tried to read the content with the following

encoding(s), without success: UTF-8.
83. No; the browser is just reading data. It could assume it was getting English-language characters,

but what if it’s not? The character encoding takes the guesswork out of it.
84. Hey, if I’m going to validate your page, you’d better tell me up front what characters you’re

going to use!
85. And think about it, we’d want to do that for the browsers out there anyway.
86. Red was bad, green’s got to be good.
87. If you don’t tell the browser which version of HTML you are using, many browsers will use quirks

mode, which may cause inconsistent page display in various browsers.
88. DOCTYPE that expects your HTML to be fully compliant with 4.01.
89. It’s leaner, meaner, and even more tuned for compatibility with browsers on a wide range of

devices.
90. I don’t even know what that is!
91. Actually, XHTML 1.0 has been around since 2000, so it’s not as cutting edge as it sounds.
92. I don’t get it. We changed the DOCTYPE and added a couple of new attributes, but the rest of
this example is totally like HTML4.01. So, what’s the big deal?
93. The big distinction may be difficult for you to see at first glance, but the reason XML
is a good thing (and the reason the W3C and others have gone to all the trouble of creating
XHTML, when they already had HTML) is that once your pages are written in XHTML, all sorts
of things become possible that aren’t possible with HTML. (You’ll get a feel for some of those
things in just a sec).
94. By using HTML 4.01 Strict, you’re already reaping some of the benefits of XHTML.
95. However, because XHTML is XML, it has some interesting advantages beyond HTML 4.01. Let’s take a

look at everything XHTML gets you, including some of the benefits you’re already getting out of using

HTML 4.01 Strict, through the eyes of a few people already using XHTML.
96. Even though HTML and XHTML are almost the same, there are a few small
differences, as you’ve seen.
97. which would cause mass confusion
98. That little slash on the end tells the browser it shouldn’t expect a closing tag, because the

<br/> is all there is.
99. However, some older browsers can’t recognize “/>” without a space before the slash, so, to be

backwards compatible, just put a space before your slash in “ />”.
100. But with XHTML we gotta declare our intentions. If your element is empty, let the browser know

by putting a “/” before the ending “>”.
101. That’s where the xmlns attribute comes in.
102. although there is no requirement that anything actually exist at the URL.
103. Because XHTML is meant to be backwards compatible with HTML.
104. The validator looks at your DOCTYPE declaration, which states that the document is either XHTML

Transitional or XHTML Strict, and that’s what it bases its validation on.
105. I’m certainly glad to have the opportunity to persuade you to stick with me.
106. Ah, but just wait. The number of devices that read XHTML is increasing every day. And
there are a lot of applications out there that are gearing up to use XHTML.
107. Some people just wanna make good Web sites. Why are you asking them to go through all this pain?
108. You’re forgetting a few of the downsides.
109. But as you also said, XHTML is just a hop, skip, and a jump away.
110. No problem; only paragraphs don’t have walls, so you’re going to have to settle for the

paragraph’s background-color property instead.
111. But, here’s a quick answer: CSS really is better suited for specifying style information than

XHTML.Using just a small bit of CSS, you can create fairly large effects on the style of your XHTML.
112. And your CSS rules are going to go right in here.
113. We’re selecting just the <p> element to apply this style to.
114. You can have as many rules as you want for an element.
115. What if someone added a <blockquote> to the page - would we have to then add a rule for that

too?
116. what if I want one element to be a different font? Do I have to take the font-family out of the

body and add rules for every element separately again?
117. With CSS, the most specific rule is always used.
118. If you leave out all the element names, and just use a period followed by a class name, then the

rule will apply to all members of the class.
119. Place each class name into the value of the class attribute, with a space in between each. The

ordering doesn’t matter.
120. These rules also select only paragraphs in a particular class. So they are about the same in
specificity as the p.greentea rule.
121. It’s good to look them over.
122. The selector specifies which elements the rule applies to.
123. There seems to be so many differences between browsers: fontfamily, font-size, various default

settings, and so on. How will I ever know if my design looks good on other browsers?
124. With em you don’t specify a percentage; instead you specify a scaling factor.
125. Let’s check out each part of the box and its role.
126. It seems like knowing this box stuff would be important if I were someone creating the software

for a Web browser, but how is this going to help me make better Web pages?
127. Wait a sec, it seems like we have two ways to put images on a page. Is backgroundimage a

replacement for the <img> element?
128. And the lounge in Seattle has its own tweaks in their style sheet.
129. Adding <div>s just for the sake of creating a lot of structure in your pages complicates them

with no real benefit.
130. Don’t even think about putting a floating element to the right of me.
131. This is sometimes puzzling when you first see it happen, so put it in the back of your mind for
when it occurs.
132. If more than one line is needed, the browser creates a new line, and expands the containing
block element vertically to contain the inline elements.
133. This has the advantage of providing more control over your design, but at the cost of not using

the browser width as efficiently.
134. The Web server receives the form data, and then passes it off to a Web application to be

processed.
135. But you might not have really thought about what they have to do with XHTML.
136. You submit the form by clicking on a submit button control. That’s the browser’s cue that it
needs to package up all the data and send that data off to the server.
137. I’ve got some form data I’m sending you via POST. It’s addressed to the “contest.php”

application.
138. you don’t need to know all the gory-behind-the-scenes details of what is being sent to the

server.
139. When a Web form is submitted, the form data values are paired with their corresponding
names, and all names and values are sent to the server.
140. Wouldn’t it be dreamy if this were the end of the book? If there were no bullet points
or puzzles or XHTML listings or anything else? But that’s probably just a fantasy...