Initial pre-jquery-plugin commit

greenimpala · Jan 4, 2013 · c28ac9e · c28ac9e
commit c28ac9e
Show file tree

Hide file tree

Showing 3 changed files with 203 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<html>
+	<head>
+		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+		<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
+		<script src="script.js"></script>
+		<link href='http://fonts.googleapis.com/css?family=Kristi' rel='stylesheet' type='text/css'>
+		<link href="style.css" rel="stylesheet" media="screen">
+	</head>
+	<body>
+		<div class="center">
+			<h1>Signature.</h1>
+			<hr/>
+			<p>Made by <a href="http://twitter.com/st3redstripe">@st3redstripe</a></p>
+			<p>Enter your name and slide to sign...</p>
+			<br/>
+
+			<div class="container">
+				<div class="sig-container">
+					<input class="signature-input placeholder" type="text" value="" maxlength="20"/>
+					<div class="mask"></div>
+					<div class="signature-pretty"></div>
+				</div>
+				<div class="scrubber"></div>
+			</div>
+		</div>
+	</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,56 @@
+$(function () {
+	var $mask = $('.mask');
+	var $signaturePretty = $('.signature-pretty');
+	var $scrubber = $('.scrubber');
+	var $signatureInput = $('.signature-input');
+	var placeHolderText = "Enter signature..."
+
+	$signatureInput.val(placeHolderText);
+
+	function updateElems () {
+		var scrubberLocation = $scrubber.css('left').replace(/[^-\d\.]/g, '');
+		$signaturePretty.width(scrubberLocation - 40);
+		$mask.width(scrubberLocation - 20);
+
+		$('.container, .mask').toggleClass("success", (scrubberLocation === "260"));
+	}
+
+	$scrubber.draggable({
+		containment: $('.container'),
+
+		drag: updateElems,
+
+		start: function () {
+			if ($signatureInput.val() === placeHolderText) {
+				return false;
+			}
+		},
+
+		stop: function (e) {
+			var scrubberLocation = $scrubber.css('left').replace(/[^-\d\.]/g, '');
+
+			if(scrubberLocation < 260) {
+				$scrubber.animate({ left: 0 }, {
+					duration: 200,
+					step: updateElems
+				});
+			}
+		}
+	});
+
+	$signatureInput.blur(function () {
+		if (!this.value) {
+			$(this).addClass('placeholder');
+			this.value = placeHolderText;
+		}
+	});
+
+	$signatureInput.focus(function () {
+		this.value = this.value === placeHolderText ? "" : this.value;
+		$(this).removeClass('placeholder');
+	});
+
+	$signatureInput.keyup(function (e) {
+		$signaturePretty.html(this.value);
+	});
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,120 @@
+h1, p {
+	font-family: Arial, Helvetica
+}
+
+h1 {
+	margin-bottom: 4px
+}
+
+p {
+	font-size: 13px
+}
+
+hr {
+	border: 0;
+    height: 1px;
+    background: #DDDDDD;
+    width: 100%;
+}
+
+.center {
+	margin: 0px auto;
+	width: 300px;
+}
+
+.container {
+	border: 1px solid #B9B9B9;
+	position: relative;
+	width: 300px;
+	height: 40px;
+
+	-webkit-border-radius: 10px;
+	-moz-border-radius: 10px;
+	border-radius: 10px;
+
+	background-color: #FEEFB3;
+	border-color: #9F6000;
+	color: #9F6000;
+
+	transition: background-color .2s ease-in-out;
+	-moz-transition: background-color .2s ease-in-out;
+	-webkit-transition: background-color .2s ease-in-out;
+	-o-transition: background-color .2s ease-in-out;
+}
+
+.sig-container {
+	margin-right: 40px;
+	margin-left: 40px;
+	height: 100%;
+	width: 220px;
+	position: relative;
+	float: left;
+}
+
+.signature-pretty {
+	width: 0px;
+	margin-left: 8px;
+	position: absolute;
+	font-family: 'Kristi', cursive;
+	font-size: 32px;
+	overflow: hidden;
+	white-space:nowrap;
+	color: black;
+}
+
+.signature-input {
+	background-color: transparent;
+	border: 0;
+	position: absolute;
+	outline: 0;
+	padding-left: 8px; padding-right: 8px;
+	font-size: 16px;
+	width: 220px;
+	height: 100%;
+}
+
+.container.success,
+.mask.success {
+	background-color: #DFF2BF;
+	border-color: #4F8A10;
+	color: #4F8A10;
+}
+
+.signature-input.placeholder {
+	color: #9F6000;
+}
+
+.mask {
+	width: 0px;
+	position: absolute;
+	height: 100%;
+	background-color: #FEEFB3;
+
+	transition: background-color .2s ease-in-out;
+	-moz-transition: background-color .2s ease-in-out;
+	-webkit-transition: background-color .2s ease-in-out;
+	-o-transition: background-color .2s ease-in-out;
+}
+
+.scrubber {
+	text-align: center;
+	display: relative;
+	height: 36px;
+	margin: 1px;
+	width: 36px;
+	border: 1px solid #9E9E9E;
+
+	-webkit-border-radius: 10px;
+	-moz-border-radius: 10px;
+	border-radius: 10px;
+
+	background: #cccccc; /* Old browsers */
+	background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* IE10+ */
+	background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
+
+}