SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •