wboykinm/index.html

## index.html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Timeout for scrollzoom</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/darkly/bootstrap.min.css" rel="stylesheet">
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
<style>
  #map { height:250px; width:100%; }
  .col-centered{
    float: none;
    margin: 0 auto;
  }
  .outline {
    border: #FFD4A5 solid 3px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
</style>
</head>
<body>

<div class="container">
  <div class="jumbotron col-lg-6 col-centered">
    <h1>Scrolla Rocknrolla</h1>
    <p class="lead">A long-scrolling blog post with a map in it. Scrollwheel zoom messes up the UX, so add a timer to enable scrollwheel zoom 3 seconds after the user hovers over the map, with a focus animation to indicate it's active.</p>
  </div>

  <div class="row">
    <div class="col-lg-6 col-centered">
      <h4>Shoreditch</h4>
      <p>Cray taxidermy American Apparel selfies readymade meh. Ennui hoodie squid Schlitz Carles try-hard. Bespoke 3 wolf moon cred, meditation narwhal mumblecore quinoa seitan. Salvia retro forage, master cleanse health goth flexitarian deep v Portland yr wayfarers plaid. Occupy forage four loko banjo. Sartorial tilde banjo, Vice hella Brooklyn health goth photo booth stumptown kale chips Wes Anderson vinyl Bushwick before they sold out. Tote bag artisan roof party sartorial lo-fi.</p>
    </div>
  </div>
  <hr>
  <div class="row">
    <div class="timer dark" id='map'></div>
  </div>
  <hr>
  <div class="row">
    <div class="col-lg-6 col-centered">
      <h4>Trust fund</h4>
      <p>Crucifix sustainable normcore, Pinterest High Life DIY yr tattooed Williamsburg gastropub direct trade single-origin coffee skateboard Truffaut. You probably haven't heard of them put a bird on it banjo leggings, viral ennui sartorial brunch lomo irony. Cray asymmetrical shabby chic, sriracha post-ironic Williamsburg freegan meggings quinoa selfies. Wolf Godard Blue Bottle, irony fixie swag pork belly slow-carb fap artisan. Asymmetrical retro salvia mlkshk Godard street art bitters Bushwick, XOXO fixie Williamsburg forage ethical sartorial. Shabby chic meh Wes Anderson, PBR&B scenester cornhole lo-fi gastropub farm-to-table chillwave. Selfies semiotics biodiesel squid cardigan swag, Godard authentic.</p>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6 col-centered">
      <h4>Quaint</h4>
      <p>Try-hard narwhal sartorial Marfa selvage, photo booth fashion axe health goth Neutra Carles four loko. Mlkshk DIY mustache health goth, Wes Anderson small batch Shoreditch cred you probably haven't heard of them narwhal. Try-hard Blue Bottle lomo Portland, quinoa 3 wolf moon master cleanse. Wes Anderson DIY health goth, master cleanse dreamcatcher jean shorts Tonx McSweeney's crucifix ethical fap Vice. American Apparel normcore scenester, cray Helvetica synth hella McSweeney's before they sold out swag. Selfies squid photo booth, banh mi ugh 90's artisan next level. Salvia chia quinoa Helvetica cred single-origin coffee. Keytar pickled ethical, Tumblr cliche kitsch cold-pressed taxidermy chia vinyl cray. Scenester stumptown viral vegan swag, sartorial Portland pug VHS church-key. Bushwick literally pop-up lomo messenger bag butcher. Typewriter keytar direct trade, cray fanny pack Brooklyn plaid Blue Bottle Tonx. Try-hard chillwave whatever cardigan church-key ethical. Art party Blue Bottle tofu, Echo Park leggings freegan dreamcatcher lo-fi Cosby sweater Kickstarter PBR&B Austin whatever gentrify. Flannel fap cliche fanny pack slow-carb, master cleanse cardigan cold-pressed.</p>
    </div>
  </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
  L.mapbox.accessToken = 'pk.eyJ1IjoibGFuZHBsYW5uZXIiLCJhIjoicUtlZGgwYyJ9.UFYz8MD4lI4kIzk9bjGFvg';
  var map = L.mapbox.map('map', 'landplanner.ghfcid9o', {
    zoomControl: false
  }).setView([41.0252, 28.9950], 11);

  // Disable scroll zoom handler
  map.scrollWheelZoom.disable();
  var timer;

  // Silently enables scrollwheel zoom 3 seconds after a user hovers over the map
  $('.timer').one('mouseover', function() {
    timer = setTimeout(function(){
      map.scrollWheelZoom.enable();
      new L.Control.Zoom({ position: 'topright' }).addTo(map);
      $('.timer').addClass('outline');
    }, 3000);
  });

</script>

</body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Timeout for scrollzoom</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/darkly/bootstrap.min.css" rel="stylesheet">
	<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
	<style>
	#map { height:250px; width:100%; }
	.col-centered{
	float: none;
	margin: 0 auto;
	}
	.outline {
	border: #FFD4A5 solid 3px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	}
	</style>
	</head>
	<body>

	<div class="container">
	<div class="jumbotron col-lg-6 col-centered">
	<h1>Scrolla Rocknrolla</h1>
	<p class="lead">A long-scrolling blog post with a map in it. Scrollwheel zoom messes up the UX, so add a timer to enable scrollwheel zoom 3 seconds after the user hovers over the map, with a focus animation to indicate it's active.</p>
	</div>

	<div class="row">
	<div class="col-lg-6 col-centered">
	<h4>Shoreditch</h4>
	<p>Cray taxidermy American Apparel selfies readymade meh. Ennui hoodie squid Schlitz Carles try-hard. Bespoke 3 wolf moon cred, meditation narwhal mumblecore quinoa seitan. Salvia retro forage, master cleanse health goth flexitarian deep v Portland yr wayfarers plaid. Occupy forage four loko banjo. Sartorial tilde banjo, Vice hella Brooklyn health goth photo booth stumptown kale chips Wes Anderson vinyl Bushwick before they sold out. Tote bag artisan roof party sartorial lo-fi.</p>
	</div>
	</div>
	<hr>
	<div class="row">
	<div class="timer dark" id='map'></div>
	</div>
	<hr>
	<div class="row">
	<div class="col-lg-6 col-centered">
	<h4>Trust fund</h4>
	<p>Crucifix sustainable normcore, Pinterest High Life DIY yr tattooed Williamsburg gastropub direct trade single-origin coffee skateboard Truffaut. You probably haven't heard of them put a bird on it banjo leggings, viral ennui sartorial brunch lomo irony. Cray asymmetrical shabby chic, sriracha post-ironic Williamsburg freegan meggings quinoa selfies. Wolf Godard Blue Bottle, irony fixie swag pork belly slow-carb fap artisan. Asymmetrical retro salvia mlkshk Godard street art bitters Bushwick, XOXO fixie Williamsburg forage ethical sartorial. Shabby chic meh Wes Anderson, PBR&B scenester cornhole lo-fi gastropub farm-to-table chillwave. Selfies semiotics biodiesel squid cardigan swag, Godard authentic.</p>
	</div>
	</div>
	<div class="row">
	<div class="col-lg-6 col-centered">
	<h4>Quaint</h4>
	<p>Try-hard narwhal sartorial Marfa selvage, photo booth fashion axe health goth Neutra Carles four loko. Mlkshk DIY mustache health goth, Wes Anderson small batch Shoreditch cred you probably haven't heard of them narwhal. Try-hard Blue Bottle lomo Portland, quinoa 3 wolf moon master cleanse. Wes Anderson DIY health goth, master cleanse dreamcatcher jean shorts Tonx McSweeney's crucifix ethical fap Vice. American Apparel normcore scenester, cray Helvetica synth hella McSweeney's before they sold out swag. Selfies squid photo booth, banh mi ugh 90's artisan next level. Salvia chia quinoa Helvetica cred single-origin coffee. Keytar pickled ethical, Tumblr cliche kitsch cold-pressed taxidermy chia vinyl cray. Scenester stumptown viral vegan swag, sartorial Portland pug VHS church-key. Bushwick literally pop-up lomo messenger bag butcher. Typewriter keytar direct trade, cray fanny pack Brooklyn plaid Blue Bottle Tonx. Try-hard chillwave whatever cardigan church-key ethical. Art party Blue Bottle tofu, Echo Park leggings freegan dreamcatcher lo-fi Cosby sweater Kickstarter PBR&B Austin whatever gentrify. Flannel fap cliche fanny pack slow-carb, master cleanse cardigan cold-pressed.</p>
	</div>
	</div>
	</div>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script>
	L.mapbox.accessToken = 'pk.eyJ1IjoibGFuZHBsYW5uZXIiLCJhIjoicUtlZGgwYyJ9.UFYz8MD4lI4kIzk9bjGFvg';
	var map = L.mapbox.map('map', 'landplanner.ghfcid9o', {
	zoomControl: false
	}).setView([41.0252, 28.9950], 11);

	// Disable scroll zoom handler
	map.scrollWheelZoom.disable();
	var timer;

	// Silently enables scrollwheel zoom 3 seconds after a user hovers over the map
	$('.timer').one('mouseover', function() {
	timer = setTimeout(function(){
	map.scrollWheelZoom.enable();
	new L.Control.Zoom({ position: 'topright' }).addTo(map);
	$('.timer').addClass('outline');
	}, 3000);
	});

	</script>

	</body>
	</html>