Skip to content

Instantly share code, notes, and snippets.

@sullenfish

sullenfish/twopanes.html

Created August 10, 2008 04:43
Show Gist options
  • Save sullenfish/4725 to your computer and use it in GitHub Desktop.
Save sullenfish/4725 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
twopanes.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Two Panes</title>
<style type='text/css'>
* {
font-family: arial;
}
body {
position: absolute;
margin: 4px;
padding: 4px;
height: 95%;
background-color: #ffffff;
}
div.accordionContainer {
width: 200px;
height: 100%;
margin: 2px 20px;
padding: 2px;
position: absolute;
}
div.contentContainer {
border-left: 1px solid gray;
width: 600px;
left: 240px;
height: 100%;
margin: 2px 0;
padding: 2px 2px 2px 22px;
position: absolute;
}
div.toggler {
border: 1px solid black;
height: 1.5em;
position: relative;
margin: 2px;
padding: 2px;
background-color: #c8c8c8;
}
div.summary {
border: none;
height: 2em;
position: relative;
margin: 2px;
padding: 2px;
background-color: #ffffff;
}
div.content {
position: absolute;
background-color: #ffffff;
}
</style>
<script type='text/javascript' src='/lib/js/mootools-1.2-core.js'></script>
<script type='text/javascript' src='/lib/js/mootools-1.2-more.js'></script>
<script type='text/javascript'>
function init(){
var accTwoPane = new Accordion($$('.toggler'),$$('.summary'),{
onActive: function(toggler){
var id = toggler.get('id').slice(7);
$('content'+id).fade('in');
},
onBackground: function(toggler){
var id = toggler.get('id').slice(7);
$('content'+id).fade('out');
}
});
$$('.content').fade('out');
$('content0').fade('in');
}
window.addEvent('domready', init);
</script>
</head>
<body>
<div id='accordionContainer' class='accordionContainer'>
<div id='toggler0' class='toggler'>Toggler</div>
<div id='summary0' class='summary'>Summary</div>
<div id='toggler1' class='toggler'>Toggler</div>
<div id='summary1' class='summary'>Summary</div>
<div id='toggler2' class='toggler'>Toggler</div>
<div id='summary2' class='summary'>Summary</div>
<div id='toggler3' class='toggler'>Toggler</div>
<div id='summary3' class='summary'>Summary</div>
</div>
<div id='contentContainer' class='contentContainer'>
<div id='content0' class='content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus aliquet arcu sit amet nunc. Nam vitae enim ut elit rhoncus ullamcorper. Vestibulum ultrices augue et risus. Maecenas fermentum. Donec convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam erat volutpat. Donec tempus, mauris a lacinia molestie, sem magna congue arcu, iaculis dignissim est orci eget neque. Maecenas non enim ac pede dapibus dictum. Pellentesque consequat lectus at magna. Sed in tortor. Morbi vulputate. Aenean nisl felis, accumsan eget, adipiscing non, porttitor ut, dui. Donec luctus nulla ac metus. Aenean urna. Nullam non justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus aliquet arcu sit amet nunc. Nam vitae enim ut elit rhoncus ullamcorper. Vestibulum ultrices augue et risus. Maecenas fermentum. Donec convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam erat volutpat. Donec tempus, mauris a lacinia molestie, sem magna congue arcu, iaculis dignissim est orci eget neque. Maecenas non enim ac pede dapibus dictum. Pellentesque consequat lectus at magna. Sed in tortor. Morbi vulputate. Aenean nisl felis, accumsan eget, adipiscing non, porttitor ut, dui. Donec luctus nulla ac metus. Aenean urna. Nullam non justo.</div>
<div id='content1' class='content'>Consectetuer adipiscing elit. Vivamus aliquet arcu sit amet nunc. Nam vitae enim ut elit rhoncus ullamcorper. Vestibulum ultrices augue et risus. Maecenas fermentum. Donec convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam erat volutpat. Donec tempus, mauris a lacinia molestie, sem magna congue arcu, iaculis dignissim est orci eget neque. Maecenas non enim ac pede dapibus dictum. Pellentesque consequat lectus at magna. Sed in tortor. Morbi vulputate. Aenean nisl felis, accumsan eget, adipiscing non, porttitor ut, dui. Donec luctus nulla ac metus. Aenean urna. Nullam non justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus aliquet arcu sit amet nunc. Nam vitae enim ut elit rhoncus ullamcorper. Vestibulum ultrices augue et risus. Maecenas fermentum. Donec convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam erat volutpat. Donec tempus, mauris a lacinia molestie, sem magna congue arcu, iaculis dignissim est orci eget neque. Maecenas non enim ac pede dapibus dictum. Pellentesque consequat lectus at magna. Sed in tortor. Morbi vulputate. Aenean nisl felis, accumsan eget, adipiscing non, porttitor ut, dui. Donec luctus nulla ac metus. Aenean urna. Nullam non justo.</div>
<div id='content2' class='content'>Vivamus aliquet arcu sit amet nunc. Nam vitae enim ut elit rhoncus ullamcorper. Vestibulum ultrices augue et risus. Maecenas fermentum. Donec convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam erat volutpat. Donec tempus, mauris a lacinia molestie, sem magna congue arcu, iaculis dignissim est orci eget neque. Maecenas non enim ac pede dapibus dictum. Pellentesque consequat lectus at magna. Sed in tortor. Morbi vulputate. Aenean nisl felis, accumsan eget, adipiscing non, porttitor ut, dui. Donec luctus nulla ac metus. Aenean urna. Nullam non justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus aliquet arcu sit amet nunc. Nam vitae enim ut elit rhoncus ullamcorper. Vestibulum ultrices augue et risus. Maecenas fermentum. Donec convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam erat volutpat. Donec tempus, mauris a lacinia molestie, sem magna congue arcu, iaculis dignissim est orci eget neque. Maecenas non enim ac pede dapibus dictum. Pellentesque consequat lectus at magna. Sed in tortor. Morbi vulputate. Aenean nisl felis, accumsan eget, adipiscing non, porttitor ut, dui. Donec luctus nulla ac metus. Aenean urna. Nullam non justo.</div>
<div id='content3' class='content'>Nam vitae enim ut elit rhoncus ullamcorper. Vestibulum ultrices augue et risus. Maecenas fermentum. Donec convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam erat volutpat. Donec tempus, mauris a lacinia molestie, sem magna congue arcu, iaculis dignissim est orci eget neque. Maecenas non enim ac pede dapibus dictum. Pellentesque consequat lectus at magna. Sed in tortor. Morbi vulputate. Aenean nisl felis, accumsan eget, adipiscing non, porttitor ut, dui. Donec luctus nulla ac metus. Aenean urna. Nullam non justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus aliquet arcu sit amet nunc. Nam vitae enim ut elit rhoncus ullamcorper. Vestibulum ultrices augue et risus. Maecenas fermentum. Donec convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam erat volutpat. Donec tempus, mauris a lacinia molestie, sem magna congue arcu, iaculis dignissim est orci eget neque. Maecenas non enim ac pede dapibus dictum. Pellentesque consequat lectus at magna. Sed in tortor. Morbi vulputate. Aenean nisl felis, accumsan eget, adipiscing non, porttitor ut, dui. Donec luctus nulla ac metus. Aenean urna. Nullam non justo.</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment