Skip to content

Instantly share code, notes, and snippets.

@myneworder

myneworder/arbjoq.markdown

Created October 8, 2018 04:07
Show Gist options
  • Save myneworder/a0700c0893acaf1f0dcba9d46477c86d to your computer and use it in GitHub Desktop.
Save myneworder/a0700c0893acaf1f0dcba9d46477c86d to your computer and use it in GitHub Desktop.
Download ZIP
aRBJOQ
Raw
index.html
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
ababab
<style>
#controls-container {
color: white;
position: fixed;
top: 5px;
left: 5px;
font: 11px/1.1 "Helvetica Neue", Tahoma, Verdana;
background: rgba(0, 0, 0, 0.7);
padding: 5px;
z-index: 1000;
opacity: 0.2;
}
#controls-container:hover {
opacity: 1;
}
#controls-container input {
display: block;
}
</style>
<div id="controls-container">Font-size: <span id="font-size-value">1em</span>
<input id="font-size" type="range" min=".8" max="1.2" step=".1" value="1">
</div>
<script>
(function() {
var $body, $value, restore;
$('[data-hide]').on('click', function() {
var $message, $this;
$this = $(this);
$message = $this.parent();
restore($message);
return $message.addClass('hide');
});
$('[data-close]').on('click', function() {
var $message, $this;
$this = $(this);
$message = $this.parent();
restore($message);
return $message.addClass('hide');
});
restore = function(el) {
return el.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
return setTimeout((function() {
return el.removeClass('hide');
}), 1000);
});
};
$body = $('body');
$value = $('#font-size-value');
$('#font-size').on('change', function() {
var value;
value = this.value;
$value.html("" + value + "em");
return $body.css('font-size', "" + value + "em");
});
}).call(this);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment