How to alter the vertical positioning of a floating table of contents box

**Scott Blanchard** · Jan 24, 2013 13:14

On this page > http://canvas.clickbump.com/awards-honors/

I have a "table of contents" box which allows the user to toggle sections of the page into view based on the appearance of a couple of anchors in the markup.

I'm looking for ideas on how I can alter the box position so that it appears as if it were floated to the right of the current anchor that its linked to.

for example, when you click on the "Anchor 2" link, the page scrolls to the position where that anchor exists ("Heading Two"). I would like the box to move so that its now floated to the right of "Heading Two" instead of its default position at page load.

I'm thinking that this will probably require jQuery to do an append onto the currently active anchor, but I want to be sure there's no way to do it with CSS first.

**Paul O'B** · Jan 24, 2013 15:56

Hi,

If you don't mind duplicating the links you can use :target to activate each set that is in the target area.

e.g.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul {
	list-style:none;
	margin:0;
	padding:0
}
.test {
	width:400px;
	border:1px solid #000;
	margin:10px 0 20px;
	position:relative;
}
.floater {
	position:absolute;
	top:0;
	left:-999em;
	width:200px;
	background:blue;
	color:#fff;
	padding:10px;
	border:1px solid #000;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5);
	-moz-transition: left 1s;
	-webkit-transition: left 1s;
	-o-transition:left 1s;
		transition: left 1s;
}
.floater a {
	color:#fff;
	text-decoration:none
}
#test1 .floater { left:105% }
.test:target ul.floater {left:105% }
.test:target{background:red}

</style>
</head>

<body>
<div id="test1" class="test">
		<h2>Test 1</h2>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<ul class="floater">
				<li><a href="#test2">Go to test 2</a></li>
				<li><a href="#test3">Go to test 3</a></li>
				<li><a href="#test4">Go to test 4</a></li>
		</ul>
</div>
<div id="test2" class="test">
		<h2>Test 2</h2>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<ul class="floater">
				<li><a href="#test1">Go to test 1</a></li>
				<li><a href="#test3">Go to test 3</a></li>
				<li><a href="#test4">Go to test 4</a></li>
		</ul>
</div>
<div id="test3" class="test">
		<h2>Test 3</h2>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<ul class="floater">
				<li><a href="#test1">Go to test 1</a></li>
				<li><a href="#test2">Go to test 2</a></li>
				<li><a href="#test4">Go to test 4</a></li>
		</ul>
</div>
<div id="test4" class="test">
		<h2>Test 4</h2>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<p>lorem ipsum text</p>
		<ul class="floater">
				<li><a href="#test1">Go to test 1</a></li>
				<li><a href="#test2">Go to test 2</a></li>
				<li><a href="#test3">Go to test 3</a></li>
		</ul>
</div>
</body>
</html>

IE9+, Firefox, chrome etc.

That's all I could think of at the moment.

**Scott Blanchard** · Jan 24, 2013 18:24

Very interesting idea Paul. I'm leaning to jQuery's append() at the moment, but your example opens some new avenues of discovery for me. Thanks for the help!

User Tag List

Thread: How to alter the vertical positioning of a floating table of contents box

Thread Tools

Display

How to alter the vertical positioning of a floating table of contents box

Bookmarks

Bookmarks

Posting Permissions