Skip to content

Instantly share code, notes, and snippets.

View leemark's full-sized avatar
:atom:
building

Mark Lee leemark

:atom:
building
View GitHub Profile
@leemark
leemark / jsbin.UmUSAJa.html
Created November 26, 2013 02:01
JavaScript convert string to number: parseInt vs. parseFloat vs. unary operator
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="JavaScript convert string to number: parseInt vs. parseFloat vs. unary op" /><meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
</body>
</html>
@leemark
leemark / Fibonacci-circles.markdown
Created December 19, 2013 06:42
A Pen by Mark Lee.
@leemark
leemark / gist:11237860
Last active November 21, 2016 17:24
prefixed CSS for slideshow example
/* http://themarklee.com/2013/10/16/simple-crossfading-slideshow-css/ */
.css-slideshow {
position: relative;
max-width: 495px;
height: 370px;
margin: 1em auto .5em auto;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
.css-slideshow figure {
var opts = {
//auto-advancing slides? accepts boolean (true/false) or object
auto : {
// speed to advance slides at. accepts number of milliseconds
speed : 2500,
// pause advancing on mouseover? accepts boolean
pauseOnHover : true
},
// show fullscreen toggle? accepts boolean
fullScreen : true,
<div class="slideshow-class-goes-here">
<figure>
<img src="path/to/img" width="100%" />
<figcaption>Caption goes here</figcaption>
</figure>
<!-- more figures here as needed -->
</div>
<script>
makeBSS('.slideshow-class-goes-here');
</script>
<div class="bss-slides num1" tabindex="1" autofocus="autofocus">
<figure>
<img src="demo/img/medium.jpg" width="100%" /><figcaption>"Medium" by <a href="https://www.flickr.com/photos/thomashawk/14586158819/">Thomas Hawk</a>.</figcaption>
</figure>
<figure>
<img src="demo/img/colorado.jpg" width="100%" /><figcaption>"Colorado" by <a href="https://www.flickr.com/photos/stuckincustoms/88370744">Trey Ratcliff</a>.</figcaption>
</figure>
<figure>
<img src="demo/img/monte-vista.jpg" width="100%" /><figcaption>"Early Morning at the Monte Vista Wildlife Refuge, Colorado" by <a href="https://www.flickr.com/photos/davesoldano/8572429635">Dave Soldano</a>.</figcaption>
</figure>
<script src="demo/js/hammer.min.js"></script><!-- for swipe support on touch interfaces -->
<script src="js/better-simple-slideshow.min.js"></script>
<script>
var opts = {
auto : {
speed : 3500,
pauseOnHover : true
},
fullScreen : false,
swipe : true
<div class="bss-slides num2" tabindex="2">
<figure>
<img src="http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg" width="100%" /><figcaption>"Snowying" by <a href="http://www.flickr.com/photos/fiddleoak/8511209344/">fiddleoak</a>.</figcaption>
</figure>
<figure>
<img src="http://themarklee.com/wp-content/uploads/2013/12/starlight.jpg" width="100%" /><figcaption>"Starlight" by <a href="http://www.flickr.com/photos/chaoticmind75/10738494123/in/set-72157626146319517">ChaoticMind75</a>.</figcaption>
</figure>
<figure>
<img src="http://themarklee.com/wp-content/uploads/2013/12/snowstorm.jpg" width="100%" /><figcaption>"Snowstorm" by <a href="http://www.flickr.com/photos/tylerbeaulawrence/8539457508/">Beaulawrence</a>.</figcaption>
</figure>