Permalink
Browse files

Added sample and src directories

  • Loading branch information...
1 parent 1a165f7 commit 098cc7a646331eefb3a1872f910179553873a6c3 Douglas Neiner committed Aug 5, 2009
Showing with 472 additions and 0 deletions.
  1. +140 −0 sample/css/layout.css
  2. +52 −0 sample/css/reset.css
  3. +128 −0 sample/index.html
  4. +140 −0 src/jquery.infieldlabel.js
  5. +12 −0 src/jquery.infieldlabel.min.js
View
@@ -0,0 +1,140 @@
+@import 'reset.css';
+
+html {
+ background: #222;
+}
+
+body {
+ width: 460px;
+ margin: 0 auto;
+ padding: 0 0 40px 0;
+ background: #eee;
+font-family: Helvetica, Arial;
+}
+
+h1 {
+ background-color: #FC7600;
+ color: #fff;
+ font-size: 1.6em;
+ padding: 30px 20px 15px 20px;
+ margin-bottom: 20px;
+}
+
+#header {
+ padding: 0 20px;
+}
+
+.body li {
+ margin-bottom: 10px ;
+}
+
+.body p,
+#header p {
+ color: #555;
+ line-height: 160%;
+ margin-bottom: 10px;
+}
+
+.body p,
+#header small {
+ font-size: 10pt;
+ color: #777;
+ display: block;
+ line-height: 140%;
+}
+
+.body strong,
+#header strong {
+ color: #000;
+ font-weight: bold;
+}
+
+.body a,
+#header a {
+ color: #444;
+}
+
+.body a:hover,
+#header a:hover {
+ color: #000;
+}
+
+form legend {
+ color: #333;
+ padding: 0 0 20px 0;
+ text-transform: uppercase;
+}
+
+form {
+ padding: 0 20px 20px 20px;
+}
+
+form, form fieldset input, form fieldset textarea, form label {
+ font-family: Helvetica, Arial;
+ font-size: 12pt;
+}
+form p { position: relative; margin: 10px 0;}
+form p label { position: absolute; top: 0; left: 0;}
+form p br {display: none;}
+
+
+form fieldset p input,
+form fieldset p textarea {
+ display: block;
+ padding: 4px;
+ width: 400px;
+ margin: 0;
+}
+
+form fieldset p label {
+ width: 380px;
+ display: block;
+ margin: 5px 5px 5px 6px;
+ padding: 0;
+}
+
+form fieldset p textarea {
+ padding: 2px;
+ width: 404px;
+}
+
+form fieldset p textarea,
+form fieldset p input {
+ border: solid 1px #ccc;
+}
+form fieldset p label {
+ color: #777;
+}
+
+.body {
+ padding: 0 20px;
+}
+
+h2 {
+ color: #aaa;
+ font-size: 4em;
+ padding: 30px 0 10px 0 ;
+ letter-spacing: -3px;
+ font-weight: normal;
+}
+
+pre {
+ font-size: 10pt;
+ font-family: "Courier New";
+ background: #000;
+ padding: 10px 5px;
+ color: #fff;
+}
+
+tt {
+ font-family: "Courier New";
+ font-weight: bold;
+ color: #000;
+}
+
+.body ul {
+ padding: 0 0 10px 20px;
+ margin: 0 0 0 20px;
+ list-style: disc;
+ font-size: 0.8em;
+}
View
@@ -0,0 +1,52 @@
+/*
+ Written by Eric Myer
+ Source: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ font-weight: inherit;
+ font-style: inherit;
+ font-size: 100%;
+ font-family: inherit;
+ vertical-align: baseline;
+}
+
+/* remember to define focus styles! */
+:focus {
+ outline: 0;
+}
+body {
+ line-height: 1;
+ color: black;
+ background: white;
+}
+ol, ul {
+ list-style: none;
+}
+
+/* tables still need 'cellspacing="0"' in the markup */
+table {
+ border-collapse: separate;
+ border-spacing: 0;
+}
+caption, th, td {
+ text-align: left;
+ font-weight: normal;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: "";
+}
+blockquote, q {
+ quotes: "" "";
+}
View
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+
+ <title>In-Field Labels jQuery Plugin</title>
+ <link rel="stylesheet" href="css/layout.css" type="text/css" media="all" charset="utf-8" />
+
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+ <script src="../src/jquery.infieldlabel.min.js" type="text/javascript" charset="utf-8"></script>
+
+ <script type="text/javascript" charset="utf-8">
+ $(function(){ $("label").inFieldLabels(); });
+ </script>
+ <script src="/mint?" type="text/javascript" charset="utf-8"></script>
+ <!--[if lte IE 6]>
+ <style type="text/css" media="screen">
+ form label {
+ background: #fff;
+ }
+ </style>
+ <![endif]-->
+</head>
+
+<body>
+ <h1>In-Field Labels jQuery Plugin</h1>
+ <div id="header">
+ <p><strong>License:</strong> <a href="http://docs.jquery.com/License">Same as jQuery (Dual GPL + MIT)</a></p>
+ <p><strong>Author:</strong> <a href="http://pixelgraphics.us/company/">Doug Neiner</a></p>
+ <p><strong>Download:</strong> <a href="http://fuelyourcoding.com/scripts/infield/InFieldLabels.zip">InFieldLabels.zip</a></p>
+ <p><strong>Source:</strong> <a href="http://github.com/dcneiner/In-Field-Labels-jQuery-Plugin/">GitHub</a></p>
+ <p><strong>Size:</strong> Under 1KB Minified and gzipped</p>
+ <p><strong>Overview:</strong><br />
+ This is a simple plugin that turns properly formatted HTML forms into
+ forms with in-field label support. Labels fade when the field is focussed and disappear
+ when text entry begins. Clearing a field and leaving brings back the label.</p>
+ <p><strong>Browser Support:</strong><br />IE6+, WebKit Browsers (Safari, Chrome), Firefox 2+ <small>* IE6 requires a background-color be set on the label to match the background of the field.</small></p>
+ <p><strong>Know Issues:</strong><br />
+ Browser Auto-Complete can cause problems in hiding the labels. Less of an issue for Login Boxes, but much more of an issue with comment forms.</p>
+ </p>
+ </div>
+ <div class="body"><h2>Samples</h2></div>
+ <form action="index.html" method="get" accept-charset="utf-8">
+ <fieldset>
+ <legend>Comment Form</legend>
+ <p>
+ <label for="name">Name</label><br />
+ <input type="text" name="name" value="" id="name">
+ </p>
+ <p>
+ <label for="email">Email</label><br />
+ <input type="text" name="email" value="" id="email">
+ </p>
+ <p>
+ <label for="website">Website</label><br />
+ <input type="text" name="website" value="" id="website">
+ </p>
+ <p>
+ <label for="comment">Comment</label><br />
+ <textarea cols="30" rows="10" name="comment" id="comment"></textarea>
+ </p>
+ </fieldset>
+ <p><input type="submit" value="Continue &rarr;"></p>
+ </form>
+
+ <form action="index.html" method="get" accept-charset="utf-8">
+ <fieldset>
+ <legend>Login Form</legend>
+ <p>
+ <label for="username">Username</label><br />
+ <input type="text" name="username" value="" id="username">
+ </p>
+ <p>
+ <label for="password">Password</label><br />
+ <input type="password" name="password" value="" id="password">
+ </p>
+ </fieldset>
+ <p><input type="submit" value="Continue &rarr;"></p>
+ </form>
+ <div class="body">
+ <h2>Use</h2>
+ <p><strong>HTML</strong>:
+ <pre>
+&lt;p&gt;
+ &lt;label for=&quot;field_id&quot;&gt;Label Text&lt;/label&gt;&lt;br /&gt;
+ &lt;input type=&quot;text&quot; name=&quot;field_id&quot; value=&quot;&quot;
+ id=&quot;field_id&quot;&gt;
+&lt;/p&gt;</pre>
+ </p>
+ <p><strong>CSS</strong>:<br />
+ More CSS is needed to position the label nicely over the input or text area element, but since it all depends on how you have styled those elements, only the bare-bones are listed here. Keep in mind any block element can surround the label and input field. <strong>&lt;p&gt;</strong> is used as an example.
+ <pre>
+form p { position:relative }
+label { position:absolute; top:0; left:0}</pre>
+ </p>
+ <p><strong>Javascript</strong>:<br />
+ <pre>
+$(document).ready(function(){
+ $("label").inFieldLabels();
+});</pre>
+
+ </p>
+ <h2>Options</h2>
+ <p>Two options can be passed along with the method or set ahead of time for all inFieldLabel controls.</p>
+ <p>To set them ahead of time, use the following syntax:
+ <pre>
+$.inFieldLabels.defaultOptions.optionName = "";</pre>
+ </p>
+ <p>To pass them at call time, use the following syntax:
+ <pre>
+$("label").inFieldLabels({ optionName:value });</pre>
+ </p>
+ <p><tt>fadeOpacity:</tt> <strong>Value between 0.1 and 1.0.</strong><br />When a field is focussed, its label is animated to this opacity. Defaults to 0.5</p>
+ <p><tt>fadeDuration:</tt> <strong>Time in milliseconds</strong><br />When an animation occurs, it uses this setting to determine duration. Defaults to 300</p>
+ <h2>Changelog</h2>
+ <p><strong>Version 0.1</strong></p>
+ <ul>
+ <li>Initial Release</li>
+ </ul>
+ <h2>Download</h2>
+ <ul>
+ <li><strong>Source:</strong> <a href="http://github.com/dcneiner/In-Field-Labels-jQuery-Plugin/">Github</a></li>
+ <li><strong>Zip:</strong> <a href="http://fuelyourcoding.com/scripts/infield/InFieldLabels.zip">InFieldLabels.zip</a></li>
+ </ul>
+ </div>
+</body>
+</html>
Oops, something went wrong.

0 comments on commit 098cc7a

Please sign in to comment.