New Topic/Question
Reply
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>8 Reasons</title>
<link rel="stylesheet" href="toc.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="toc.js"></script>
</head>
<body>
<h1 id="top">7 reasons why trainers like our books</h1>
<aside></aside>
<article>
<h2>Modular book organization</h2>
<p class="first">In the first section or two of all our books, we present the core content
for the book, which includes a complete subset of usable skills. After the core
content, each section of the book is designed as an independent module. This
means that these sections don't have to be taught in sequence. As a result, you
can customize your courses by assigning just those sections that you want to
teach.</p>
<p>Whenever possible, each of the chapters is also designed as an independent
module. When this is true, you can assign just those chapters that are right
for your courses. This approach also makes the chapters better for on-the-job
reference later on.</p>
<h2>Top-down chapter design</h2>
<p class="first">Unlike many competing books and products, most chapters in our books have a
unique top-down design that moves from the simple to complex. This makes it
easier for trainees to learn. It also means that you can present the topics at
the start of a chapter to make sure everyone understands the essential details,
without presenting all of the topics in a chapter. Then, your trainees can
learn the other topics on their own or as they're needed on the job.</p>
<h2>Paired-pages format</h2>
<p class="first">If you page through one of our books, you'll see that all of the information
is presented in "paired pages." In each pair, the right page is a
figure that contains the syntax, guidelines, and examples, and the left page is
text that contains the perspective and extra explanation.</p>
<p>One benefit of this format is that it lets trainees learn at their own pace.
If, for example, you're a novice, you'll probably want to read the text on the
left as you refer to the figure on the right. But if you have experience, you
may be able to get all the information you need from the figure. Either way,
our customers tell us that they love this presentation method because it helps
them learn faster and better.</p>
<h2>Performance on the job</h2>
<p class="first">On-the-job performance is the measure of a successful course. And our
paired-pages format makes it easy for your trainees to access all the
information you've covered long after the course is over. </p>
<p>Instead of having to dig through the text or handouts, they can use the
expanded table of contents or the index to find the topic they're looking for.
Then, the figure on the righthand page will give them the details they need to
apply what they learned in your course.</p>
<p>This type of quick reference is absolutely essential when you're working
with the hundreds of classes, methods, and properties of an OO language like
Java, Visual Basic, or C#...and yet no other books offer this unique format.</p>
<h2>More practice in less time</h2>
<p class="first">The exercises for our books give trainees a chance to get valuable, hands-on
experience without wasting any time. That's because we provide the starting
code, either from our web site or the Instructor's CD, so that trainees don't
have to enter routine code that they already know.</p>
<p>Sometimes, these exercises guide the trainees through the application of
what they've just learned. Sometimes, they challenge the trainees to apply what
they've learned in new ways. And you can assign the exercises so your trainees
do them in class or on their own.</p>
<p>Incidentally, unlike other books, <i>our exercises never present new skills
or information</i>. As we see it, this is the only sensible approach to text
and exercise design. Curiously, though, the exercises in some books do present
new skills. Unfortunately, this means that (1) trainees who don't do the
exercises don't learn the new skills, and (2) there's no easy way for trainees
to find the information they need if they're having trouble since the skills
haven't been covered yet.</p>
<h2>Complete, real-world applications</h2>
<p class="first"> the first book we published in 1974 to the present, all of our books
teach by presenting complete, real-world applications that include design,
code, and all related components. These applications help your trainees get
started quickly and also help them reach new skill levels. As we see it,
studying applications like these is the best way to learn how all of the parts
of an application work together, so this is an essential part of the learning
process.</p>
<h2>Complete instructor's materials</h2>
<p class="first">If you review the instructor's materials that come with the Instructor's CD
for one of our books, you'll see that our CDs provide everything else you need
for an effective course...except the busywork. That's why you should be able to
plan and implement a course that's based on one of our books in record time.
Once that's done, our books and instructional materials will help ensure the
success of your course.</p>
</article>
</body>
</html>
Javascript / jQuery
$(document).ready(function() {
// add h2 heading to the aside
$("aside").append("<h2>Table of contents</h2>");
// wrap h2 text in <a> tags
$("article h2").wrapInner("<a></a>");
// add ids to the <a> tags
/*$("article a").each (function(index) {
var id = "heading" + (index + 1);
$(this).attr("id", id);
});
*/
$("article a").attr("id", function(index) {
var id = "heading" + (index +1);
return id;
})
// clone article <a> tags and insert them into the aside
$("article a").clone().insertAfter($("aside h2"));
// remove the id attributes from the <a> tags
$("aside a").removeAttr("id");
// add the href attributes to the <a> tags
$("aside a").attr("href", function(index) {
var href = "#heading" + (index + 1);
return href;
});
// change the CSS for the selected topic and move the TOC
$("aside a").click (function() {
// derive the id of the selected h2 element from the <a> tag
id = $(this).attr("href");
// change the styles for the selected heading
$(id).css({ "color": "blue", "font-size": "150%" });
var h2Offset = $(id).offset().top;
var asideHeight = $("aside").height();
var articleHeight = $("article").height();
if ((h2Offset + asideHeight) <= articleHeight) {
asideOffset = h2Offset;
}
else {
asideOffset = articleHeight - asideHeight;
}
$("aside").css("top", asideOffset);
$("article a[id]").not($(id)).css({ "color": "black", "font-size": "120%" });
});
$("article a[href]").click(function() {
$("aside").position();
});
$("article h2").before("<a href='#top'>Back to top</a>");
$("article a:first").remove();
$("article p:last").after("<a href='#top'>Back to top</a>");
$("p").not(".first").css("text-indent", "1.5em");
$("aside a:last").after("<br> <a href='#top'>Back to top</a>")
})
CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 81.25%;
width: 720px;
margin: 0 auto;
padding: 20px;
border: 3px solid blue;
position: relative;
}
article, aside, h1, h2, ul, p, a {
margin: 0;
padding: 0;
}
aside {
width: 240px;
float: left;
position: absolute;
}
aside a {
display: block;
font-size: 100%;
padding-bottom: .5em;
}
article {
width: 440px;
margin-left: 260px;
}
h1 {
padding-bottom: .25em;
color: blue;
}
h2 {
font-size: 120%;
padding: .5em 0 .25em;
}
p {
padding-bottom: .5em;
}
MultiQuote
| 