Skip to content

Instantly share code, notes, and snippets.

@pawelmhm

pawelmhm/dabblet.css

Created December 2, 2012 15:23
Show Gist options
  • Save pawelmhm/4189309 to your computer and use it in GitHub Desktop.
Save pawelmhm/4189309 to your computer and use it in GitHub Desktop.
Download ZIP
Dynamic content system
Raw
dabblet.css
/**
* Dynamic content system
*
*/
#container { }
#viewer {
position:relative;
border:8px red solid;
width:800px;
height:200px;
margin:auto;
overflow:hidden;}
.panel {
position:absolute;
width:800px;
height:180px;
padding:10px;
overflow:hidden;}
#panel1 {
background:orange;
top:0;
left:0;
}
#panel2 {
background:violet;
top:0px;
left:800px;}
#loadpanel2:target #holdall {
-webkit-transform: translateX(-800px);
}
#loadpanel1:target #holdall {
-webkit-transform: translateX(0);}
#holdall {
position:absolute;
width:0px;
height:0px;
background:white;
-webkit-transition:all 3s ease-out;}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<ul>
<li><a href="#loadpanel1">Load Panel 1</li>
<li><a href="#loadpanel2">Load Panel 2</li>
</ul>
<div id="container">
<div id="viewer">
<div id="loadpanel1">
<div id="loadpanel2">
<div id="holdall">
<div id="panel1" class="panel">Panel 1</div>
<div id="panel2" class="panel">Panel 2</div>
</div>
</div>
</div>
</div>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment