Skip to content

Instantly share code, notes, and snippets.

@psd

psd/controls.html

Created December 16, 2009 11:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save psd/257752 to your computer and use it in GitHub Desktop.
Save psd/257752 to your computer and use it in GitHub Desktop.
Download ZIP
Slideshow Controls
Raw
controls.html
<html>
<head>
<title>Slideshow Controls</title>
<style type="text/css">
body {
background-color: #FFF;
}
.tv {
border: 2px solid black;
width: 40em;
height: 19.5em;
padding: 0 auto;
}
.display {
background-color: #333;
border: none;
height: 15em;
margin: 0.5em;
width:
}
.slide {
border: 1px solid 000;
background-color: #DDDDDD;
height: 100%;
width: 100%;
}
.controls {
float: left;
background-color: #000;
border: none;
border-right: 0.2em solid #000;
width: 39em;
margin: 0 0.5em;
color: #888;
font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
padding: 0;
text-align: center;
overflow: hidden;
height: 3em;
}
.controls a,
.controls a:visited {
color: #888;
text-decoration: none;
border: none;
}
.controls a:active,
.controls a:hover {
color: #fff;
border: none;
}
.controls a:focus {
color: #fff;
border: none;
-moz-outline: none;
text-decoration: none;
outline: none;
}
.knob {
float: left;
margin: 0;
border: 2px solid #111;
background-color: #000;
color: #FFF;
font-family: Helvetica, Arial, sans-serif;
font-size: 1em;
font-weight: normal;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
text-align: center;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
}
.contents {
float: left;
font-size: 0.8em;
padding: 0.4em 1em 0;
font-weight: lighter;
}
.contents .spacer {
padding-left: 0.3em;
}
.squeeze {
letter-spacing: -3px;
}
.help div {
font-size: 2em;
font-weight: bolder;
color: #000;
background-color: #888;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
}
.help a:active div,
.help a:hover div {
background-color: #fff;
}
.fullscreen {
float: right;
background-color: #000;
margin-top: 0.2em;
}
.fullscreen div {
border: 1px solid #888;
width: 1em;
height: 1em;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.fullscreen div div {
text-indent: -300px;
overflow: hidden;
background-color: #888;
border: none;
border-right: 1px solid #DDD;
border-bottom: 1px solid #DDD;
display: block;
float: left;
width: 50%;
height: 50%;
}
.fullscreen a:hover div {
background-color: #888;
}
.fullscreen a:active div {
background-color: #fff;
}
.progress {
float: left;
width: 100%;
margin: 0.5em 1em 0.5em 0;
#border-bottom: 3px solid #333;
height: 0.5em;
font-size: 0.19em;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
overflow: hidden;
}
.progress a,
.progress a:visited {
color: #333;
background-color: #333;
font-face: bolder;
}
.progress a.current,
.progress a:visited.current,
.progress a:hover.current,
.progress a:active.current {
color: #fff;
background-color: #fff;
}
.progress a:hover {
background-color: #888;
color: #888;
}
.progress a:active {
background-color: #fff;
}
</style>
</head>
<body>
<div class="tv">
<div class="display">
<div class="slide"></div>
</div>
<div class="controls">
<div class="controls-top">
<div class="knob squeeze"><a href="#first" title="first slide">|&#x25c4;</a></div>
<div class="knob"><a href="#previous" title="previous slide">&#x25c4;</a></div>
<div class="knob help"><a href="#help" title="Help"><div>?</div></a></div>
<div class="knob"><a href="#next" title="next slide">&#x25ba;</a></div>
<div class="knob squeeze"><a href="#next" title="last slide">&#x25ba;|</a></div>
<div class="contents"><a href="#contents" title="table of contents"><span class="current">3</span><span class="spacer">/</span><span class="total">34</span></a></div>
<div class="knob fullscreen"><a href="#fullscreen" title="fullscreen"><div><div>F</div></div></a></div>
</div>
<!-- I think this will be JavaScript driven by the TiddlyWiki MainMenu -->
<div class="progress">
<a href="#slide1" title="slide number 1">slide number 1</a>
<a href="#slide2" title="slide number 2">slide number 2</a>
<a href="#slide3" title="slide number 3" class="current">slide number 3</a>
<a href="#slide4" title="slide number 4">slide number 4</a>
<a href="#slide5" title="slide number 5">slide number 5</a>
<a href="#slide6" title="slide number 6">slide number 6</a>
<a href="#slide7" title="slide number 7">slide number 7</a>
<a href="#slide8" title="slide number 8">slide number 8</a>
<a href="#slide9" title="slide number 9">slide number 9</a>
<a href="#slide10" title="slide number 10">slide number 10</a>
<a href="#slide11" title="slide number 11">slide number 11</a>
<a href="#slide12" title="slide number 12">slide number 12</a>
<a href="#slide13" title="slide number 13">slide number 13</a>
<a href="#slide14" title="slide number 14">slide number 14</a>
<a href="#slide15" title="slide number 15">slide number 15</a>
<a href="#slide16" title="slide number 16">slide number 16</a>
<a href="#slide17" title="slide number 17">slide number 17</a>
<a href="#slide18" title="slide number 18">slide number 18</a>
<a href="#slide19" title="slide number 19">slide number 19</a>
<a href="#slide20" title="slide number 20">slide number 20</a>
<a href="#slide21" title="slide number 21">slide number 21</a>
<a href="#slide22" title="slide number 22">slide number 22</a>
<a href="#slide23" title="slide number 23">slide number 23</a>
<a href="#slide24" title="slide number 24">slide number 24</a>
<a href="#slide25" title="slide number 25">slide number 25</a>
<a href="#slide26" title="slide number 26">slide number 26</a>
<a href="#slide27" title="slide number 27">slide number 27</a>
<a href="#slide28" title="slide number 28">slide number 28</a>
<a href="#slide29" title="slide number 29">slide number 29</a>
</div>
</div>
</div>
</body>
</html>
Raw
roundels.html
<html>
<head>
<title>CSS Roundels</title>
<style type="text/css">
body {
background-color: #FFF;
}
.roundel {
float: left;
margin: 0.1em;
background-color: #333;
color: #FFF;
font-family: Helvetica, Arial, sans-serif;
font-size: 2em;
font-weight: normal;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
text-align: center;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
</style>
</head>
<body>
<div class="roundel">&#x2716;</div>
<div class="roundel">&#x2714;</div>
<div class="roundel">+</div>
<div class="roundel">&minus;</div>
<div class="roundel">i</div>
<div class="roundel">!</div>
<div class="roundel">?</div>
<div class="roundel">&#x25c4;</div>
<div class="roundel">&#x25ba;</div>
<div class="roundel">&#x2603;</div>
<div class="roundel">&#x2652;</div>
<div class="roundel">&#x2610;</div>
<div class="roundel">&#x2620;</div>
<div class="roundel">&#x2605;</div>
<div class="roundel">&#x2638;</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment