0 Replies - 688 Views - Last Post: 19 February 2013 - 08:35 PM

#1 Exceedinglife  Icon User is online

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 58
  • Joined: 01-July 12

sending my aside to the top Jquery

Posted 19 February 2013 - 08:35 PM

hello all i am trying to send my aside to the top of the page where it is in the default position when i click the "Back to top" link. I want my aside to move to the top and the coloring of the writing to go back to blue at the very top also.

<!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 &quot;paired pages.&quot; 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;
}




Is This A Good Question/Topic? 0
  • +

Page 1 of 1