Interesting site, I was actually thinking of compiling something similar
myself, but more to do with either obtuse uses of $(). However, I did notice
a few things about your examples and thought I'd mention them to you. These
are merely suggestions; I won't be offended if you ignore me :)
In the 1st example, the following sentence had me scratching my head
initially: "And we want the page to be indexed by search engines." It took a
minute of me looking at the code (and then the API) to realize the
relevance. If your aim is to inform and educate the reader, I would suggest
some form of mapping the intent (or purpose) to the implementation. Being
the author of numerous help articles and walk-throughs, I've found that
comprehension is generally better when you define not only the problems, but
also define the elements of the solution that solve those parts of the
problem. I think an example would explain this better:
1) We want bodies of these articles to be hidden on page load.
2) We want to toggle the visibility of these articles by clicking on the
headers.
3) We also want to color odd and even headers differently.
4) And we want the page to be indexed by search engines.
<script type="text/javascript">
// 1) using $(document).ready(); runs the code within when the page
is loaded
$(document).ready(
function(){
// define our targets: all <li>'s in id="wrapper"
$("#wrapper > li").each(
function(index){
var obj = $(this);
obj
// narrow our elements to the headers only
.find("h2")
.css(
{
// 3) color the odd and even headers
differently
backgroundColor: index % 2 == 0 ?
"#ef0000" : "#0000ef",
cursor: "hand",
cursor: "pointer",
color: "#FFF"
}
)
// 2) assign onclick() functions to the <p>
elements
.click(
function(){
obj.find("p").toggle();
}
)
.end()
// 4) since the <p>'s are initially shown, hide
the <p>'s when
// the page loads; this allows agents
without JS support,
// like spiders, screen readers, etc., to
still see them.
.find("p").hide();
}
)
}
);
</script>
Minor note on example #2: valid XHTML requires closing <TD> tags. Browsers
will generally fix this problem for you during the page rendering process,
however remember that for XHTML that all tags must either be self-closing (
i.e. <br/>) or must have an explicit closing tag.
Minor note on all examples: language="Javascript" is deprecated; there's
no need for it.
Cheers, and I look forward to more tips!
-kenman
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
