Skip to content
Browse files

Added labels in front of form fields

  • Loading branch information...
1 parent 34f2d0f commit 7e5e10c177c5debf69fff1606cdb81c670d110f1 @steadicat committed Aug 12, 2009
Showing with 295 additions and 0 deletions.
  1. +14 −0 README
  2. +14 −0 autogrow.js
  3. +1 −0 css.js
  4. +1 −0 html.js
  5. +162 −0 index.html
  6. +1 −0 javascript.js
  7. +20 −0 labels.css
  8. +57 −0 labels.js
  9. BIN loader.gif
  10. +1 −0 shjs.css
  11. +4 −0 shjs.js
  12. +20 −0 tabs.js
View
14 README
@@ -0,0 +1,14 @@
+This is one of the best ways to place labels inside input fields.
+
+This version works by placing the label in front of the input field, so that the native styling of the control can be preserved. If you prefer, check the "behind" branch for labels behind the input field.
+
+The solution is based on simple HTML markup, some CSS styling, and a jQuery plugin. The license is MIT. Feedback (bugs, suggestions, compatibility reports) on Twitter: @steadicat.
+
+# Rationale
+
+Placing labels inside input fields is a new pattern that, in my user tests, yields better results. This pattern is used consistently, for example, in Facebook and throughout Apple’s products.
+
+This solution has been harshly criticised, as it is said to confuse users who expect to have to select and delete the instruction text. This is indeed often the case. However, better implementations, such as this one, solve this problem, as well as maintaining accessibility and standards-compatibility.
+
+http://attardi.org/labels
+http://twitter.com/steadicat
View
14 autogrow.js
@@ -0,0 +1,14 @@
+$('textarea').live('keyup', function() {
+ var dummy = $('<div></div>').html($(this).val().replace(/\n/g, '<br/>'));
+ dummy.css({
+ 'font-size' : $(this).css('font-size'),
+ 'font-family': $(this).css('font-family'),
+ 'width' : $(this).css('width'),
+ 'padding' : $(this).css('padding'),
+ 'line-height': $(this).css('line-height'),
+ 'overflow' : 'hidden',
+ }).insertAfter($(this));
+ if (dummy.height() > $(this).height())
+ $(this).css('height', dummy.height() + 26);
+ // dummy.remove();
+});
View
1 css.js
@@ -0,0 +1 @@
+if(!this.sh_languages){this.sh_languages={}}sh_languages.css=[[[/\/\/\//g,"sh_comment",1],[/\/\//g,"sh_comment",7],[/\/\*\*/g,"sh_comment",8],[/\/\*/g,"sh_comment",9],[/(?:\.|#)[A-Za-z0-9_]+/g,"sh_selector",-1],[/\{/g,"sh_cbracket",10,1],[/~|!|%|\^|\*|\(|\)|-|\+|=|\[|\]|\\|:|;|,|\.|\/|\?|&|<|>|\|/g,"sh_symbol",-1]],[[/$/g,null,-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",2,1],[/<!DOCTYPE/g,"sh_preproc",4,1],[/<!--/g,"sh_comment",5],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",6,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",6,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\?>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/-->/g,"sh_comment",-2],[/<!--/g,"sh_comment",5]],[[/(?:\/)?>/g,"sh_keyword",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/$/g,null,-2]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",2,1],[/<!DOCTYPE/g,"sh_preproc",4,1],[/<!--/g,"sh_comment",5],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",6,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",6,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\}/g,"sh_cbracket",-2],[/\/\/\//g,"sh_comment",1],[/\/\//g,"sh_comment",7],[/\/\*\*/g,"sh_comment",8],[/\/\*/g,"sh_comment",9],[/[A-Za-z0-9_-]+[ \t]*:/g,"sh_property",-1],[/[.%A-Za-z0-9_-]+/g,"sh_value",-1],[/#(?:[A-Za-z0-9_]+)/g,"sh_string",-1]]];
View
1 html.js
@@ -0,0 +1 @@
+if(!this.sh_languages){this.sh_languages={}}sh_languages.html=[[[/<\?xml/g,"sh_preproc",1,1],[/<!DOCTYPE/g,"sh_preproc",3,1],[/<!--/g,"sh_comment",4],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",5,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",5,1]],[[/\?>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",2]],[[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",2]],[[/-->/g,"sh_comment",-2],[/<!--/g,"sh_comment",4]],[[/(?:\/)?>/g,"sh_keyword",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",2]]];
View
162 index.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+ <head>
+
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+ <title>Labels in front of form fields (Attardi.org)</title>
+
+ <meta name="author" content="Stefano J. Attardi" />
+
+ <style type="text/css">
+
+ body { font: 14px/20px sylfaen, garamond, 'urw palladio l', georgia, serif; background: #ddd; color: #000; margin: 2em 20%; }
+ .input, h1, .tabs { font-family: helvetica, arial, sans-serif; }
+ pre { padding: 1em; font-size: 12px; font-family: inconsolata, consolas, monaco, monospace; border: 1em solid #eee; }
+ .page { clear: both; overflow: hidden; }
+ .loading { background: white url(loader.gif) no-repeat center center; min-height: 20px; }
+
+ a { text-decoration: none; color: #f33; }
+
+ h1 a { color: #999; }
+ h1 a:hover { color: #f33; }
+ .pale { color: #ccc; }
+
+ /* tabs */
+ .tabs, .tabs li { margin: 0; padding: 0; display: block; }
+ .tabs li a { padding: 5px 20px; margin: 0 2px 0 0; float: left; background: #ccc; text-align: center; }
+ .tabs li a:hover { background: #f33; color: #fff; }
+ .tabs li.active a, .page { background: #eee; cursor: default; }
+ .tabs li.active a:hover { color: #f33; }
+ .page { padding: 1em 2em; }
+
+ /* borders */
+ input, textarea, select { border: 1px solid #bbb; border-top-color: #777; border-bottom-color: #ddd; }
+
+ </style>
+ <link rel="stylesheet" type="text/css" media="screen,projection" href="labels.css" />
+ <link rel="stylesheet" type="text/css" media="screen,projection" href="shjs.css" />
+
+ </head>
+
+ <body>
+
+ <h2><a href="/">attardi.org</a></h2>
+
+ <h1>Labels <span class="pale">[</span> <a href="../labels/">behind</a> <span class="pale">|</span> in front of <span class="pale">]</span> form fields</h1>
+
+ <ul class="tabs">
+ <li><a href="#info">Info</a></li>
+ <li><a href="#demo">Demo</a></li>
+ <li><a href="#html">HTML</a></li>
+ <li><a href="#css">CSS</a></li>
+ <li><a href="#javascript">Javascript</a></li>
+ </ul>
+
+ <div class="page" id="info">
+
+ <p>This is one of the best ways to place labels inside input fields, like so:</p>
+
+ <div class="input">
+ <label for="email0">Email address</label>
+ <input type="text" id="email0" />
+ </div>
+
+ <p>This version works by placing the label <strong>in front of the input field</strong>, so that the native styling of the control can be preserved. If you prefer, the previous version places labels <a href="../labels/">behind the input field</a>.</p>
+
+ <p>The solution is based on simple HTML markup, some CSS styling, and a jQuery plugin. The license is <a href="#javascript">MIT</a>. Feedback (bugs, suggestions, compatibility reports) on Twitter: @<a href="http://twitter.com/steadicat">steadicat</a>.</p>
+
+ <p>Thanks!</p>
+
+ <h3>Rationale</h3
+
+ <p>Placing labels inside input fields is a new pattern that, in my user tests, <em>yields better results</em>. This pattern is used consistently, for example, in Facebook and throughout Apple’s products.</p>
+
+ <p>This solution has been harshly criticised, as it is said to confuse users who expect to have to select and delete the instruction text. This is indeed often the case. However, better implementations, such as this one, solve this problem, as well as maintaining accessibility and standards-compatibility.</p>
+
+ </div>
+
+ <div class="page" id="demo">
+
+ <div class="input">
+ <label for="email">Email address</label>
+ <input type="text" id="email" />
+ </div>
+
+ <div class="input">
+ <label for="password">Password</label>
+ <input type="password" id="password" />
+ </div>
+
+ <div class="input">
+ <label for="email2">Email address</label>
+ <input type="text" id="email2" value="me@example.com" />
+ </div>
+
+ <div class="input">
+ <label for="phone2">Phone number</label>
+ <input type="text" id="phone2" title="+358" value="+358" />
+ </div>
+
+ <div class="input">
+ <label for="phone">Phone number</label>
+ <input type="text" id="phone" title="+358" value="+358123456789" />
+ </div>
+
+ <div class="input">
+ <label for="country">Country</label>
+ <select id="country">
+ <option></option>
+ <option>US</option>
+ <option>Italy</option>
+ <option>Finland</option>
+ <option>The Netherlands</option>
+ </select>
+ </div>
+
+ <div class="input">
+ <label for="comment">Your comment</label>
+ <textarea id="comment" rows="3" cols="60"></textarea>
+ </div>
+
+ </div>
+
+ <pre class="sh_html loading page" id="html">
+&lt;div class="input"&gt;
+ &lt;label for="email"&gt;Email address&lt;/label&gt;
+ &lt;input type="text" id="email" title="default@example.com" /&gt;
+&lt;/div&gt;</pre>
+ <pre class="sh_css loading page" id="css"></pre>
+ <pre class="sh_javascript loading page" id="javascript"></pre>
+
+ <script src="http://www.google.com/jsapi" type="text/javascript"></script>
+ <script type="text/javascript">google.load("jquery", "1");</script>
+ <script type="text/javascript" src="shjs.js"></script>
+ <script type="text/javascript" src="css.js"></script>
+ <script type="text/javascript" src="html.js"></script>
+ <script type="text/javascript" src="javascript.js"></script>
+
+ <script type="text/javascript" src="tabs.js"></script>
+
+ <script type="text/javascript" src="labels.js"></script>
+
+ <script type="text/javascript">
+ function done() {
+ $(this).removeClass('loading');
+ sh_highlightDocument();
+ }
+ function jsDone(data) {
+ done.call($('#javascript').text(data)[0]);
+ }
+ $(function() {
+ $.get('labels.js', jsDone);
+ $('#css').load('labels.css', done);
+ });
+ </script>
+ <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
+ <script type="text/javascript">_uacct = "UA-1809956-1"; urchinTracker();</script>
+
+ </body>
+
+</html>
View
1 javascript.js
@@ -0,0 +1 @@
+if(!this.sh_languages){this.sh_languages={}}sh_languages.javascript=[[[/\/\/\//g,"sh_comment",1],[/\/\//g,"sh_comment",7],[/\/\*\*/g,"sh_comment",8],[/\/\*/g,"sh_comment",9],[/\b(?:abstract|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|final|finally|for|function|goto|if|implements|in|instanceof|interface|native|new|null|private|protected|prototype|public|return|static|super|switch|synchronized|throw|throws|this|transient|true|try|typeof|var|volatile|while|with)\b/g,"sh_keyword",-1],[/(\+\+|--|\)|\])(\s*)(\/=?(?![*\/]))/g,["sh_symbol","sh_normal","sh_symbol"],-1],[/(0x[A-Fa-f0-9]+|(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?)(\s*)(\/(?![*\/]))/g,["sh_number","sh_normal","sh_symbol"],-1],[/([A-Za-z$_][A-Za-z0-9$_]*\s*)(\/=?(?![*\/]))/g,["sh_normal","sh_symbol"],-1],[/\/(?:\\.|[^*\\\/])(?:\\.|[^\\\/])*\/[gim]*/g,"sh_regexp",-1],[/\b[+-]?(?:(?:0x[A-Fa-f0-9]+)|(?:(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?))u?(?:(?:int(?:8|16|32|64))|L)?\b/g,"sh_number",-1],[/"/g,"sh_string",10],[/'/g,"sh_string",11],[/~|!|%|\^|\*|\(|\)|-|\+|=|\[|\]|\\|:|;|,|\.|\/|\?|&|<|>|\|/g,"sh_symbol",-1],[/\{|\}/g,"sh_cbracket",-1],[/\b(?:Math|Infinity|NaN|undefined|arguments)\b/g,"sh_predef_var",-1],[/\b(?:Array|Boolean|Date|Error|EvalError|Function|Number|Object|RangeError|ReferenceError|RegExp|String|SyntaxError|TypeError|URIError|decodeURI|decodeURIComponent|encodeURI|encodeURIComponent|eval|isFinite|isNaN|parseFloat|parseInt)\b/g,"sh_predef_func",-1],[/(?:[A-Za-z]|_)[A-Za-z0-9_]*(?=[ \t]*\()/g,"sh_function",-1]],[[/$/g,null,-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",2,1],[/<!DOCTYPE/g,"sh_preproc",4,1],[/<!--/g,"sh_comment",5],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",6,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",6,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\?>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/-->/g,"sh_comment",-2],[/<!--/g,"sh_comment",5]],[[/(?:\/)?>/g,"sh_keyword",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/$/g,null,-2]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",2,1],[/<!DOCTYPE/g,"sh_preproc",4,1],[/<!--/g,"sh_comment",5],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",6,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",6,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/"/g,"sh_string",-2],[/\\./g,"sh_specialchar",-1]],[[/'/g,"sh_string",-2],[/\\./g,"sh_specialchar",-1]]];
View
20 labels.css
@@ -0,0 +1,20 @@
+label {
+ position: absolute;
+ padding: 5px;
+ margin-left: 3px;
+ color: #999;
+ z-index: 1;
+ cursor: text;
+}
+input, textarea, select {
+ z-index: 0;
+ padding: 6px;
+ margin: 0;
+}
+input, textarea, select, label {
+ font: inherit;
+}
+/* Hack to remove Safari's extra padding. Remove if you don't care about pixel-perfection. */
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+ input, textarea, select { padding: 4px; }
+}
View
57 labels.js
@@ -0,0 +1,57 @@
+/*
+
+Copyright (c) 2009 Stefano J. Attardi, http://attardi.org/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+*/
+(function($) {
+ function toggleLabel() {
+ var def = $(this).attr('title');
+ if (!$(this).val() || ($(this).val() == def)) {
+ $(this).prev('label').css('visibility', '');
+ if (def) {
+ var dummy = $('<label></label>').text(def).css('visibility','hidden').appendTo('body');
+ $(this).prev('label').css('margin-left', dummy.width() + 3 + 'px');
+ dummy.remove();
+ }
+ } else {
+ $(this).prev('label').css('visibility', 'hidden');
+ }
+ };
+
+ function resetField() {
+ var def = $(this).attr('title');
+ if (!$(this).val() || ($(this).val() == def)) {
+ $(this).val(def);
+ $(this).prev('label').css('visibility', '');
+ }
+ };
+
+ $('input, textarea').live('keyup', toggleLabel);
+ $('select').live('change', toggleLabel);
+
+ $(function() {
+ $('input, textarea').blur(resetField);
+ $('input, textarea').each(toggleLabel);
+ });
+
+})(jQuery);
+
View
BIN loader.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
1 shjs.css
@@ -0,0 +1 @@
+pre.sh_sourceCode{background-color:#fff;color:#121b28;font-weight:normal;font-style:normal;}pre.sh_sourceCode .sh_keyword{color:#0a7f6d;font-weight:bold;font-style:normal;}pre.sh_sourceCode .sh_type{color:#c42638;font-weight:bold;font-style:normal;}pre.sh_sourceCode .sh_string{color:#2b83ba;font-weight:normal;font-style:normal;}pre.sh_sourceCode .sh_regexp{color:#2b83ba;font-weight:normal;font-style:normal;}pre.sh_sourceCode .sh_specialchar{color:#a764cb;font-weight:normal;font-style:normal;}pre.sh_sourceCode .sh_comment{color:#ababab;font-weight:normal;font-style:italic;}pre.sh_sourceCode .sh_number{color:#0da344;font-weight:normal;font-style:normal;}pre.sh_sourceCode .sh_preproc{color:#620ac6;font-weight:normal;font-style:normal;}pre.sh_sourceCode .sh_symbol{color:#0000de;font-weight:normal;font-style:normal;}pre.sh_sourceCode .sh_function{color:#000;font-weight:bold;font-style:normal;}pre.sh_sourceCode .sh_cbracket{color:#0000de;font-weight:normal;font-style:normal;}pre.sh_sourceCode .sh_url{color:#2b83ba;font-weight:normal;font-style:normal;}pre.sh_sourceCode .sh_date{color:#0a7f6d;font-weight:bold;font-style:normal;}pre.sh_sourceCode .sh_time{color:#0a7f6d;font-weight:bold;font-style:normal;}pre.sh_sourceCode .sh_file{color:#0a7f6d;font-weight:bold;font-style:normal;}pre.sh_sourceCode .sh_ip{color:#2b83ba;font-weight:normal;font-style:normal;}pre.sh_sourceCode .sh_name{color:#2b83ba;font-weight:normal;font-style:normal;}pre.sh_sourceCode .sh_variable{color:#e12f76;font-weight:bold;font-style:normal;}pre.sh_sourceCode .sh_oldfile{color:#a764cb;font-weight:normal;font-style:normal;}pre.sh_sourceCode .sh_newfile{color:#2b83ba;font-weight:normal;font-style:normal;}pre.sh_sourceCode .sh_difflines{color:#0a7f6d;font-weight:bold;font-style:normal;}pre.sh_sourceCode .sh_selector{color:#e12f76;font-weight:bold;font-style:normal;}pre.sh_sourceCode .sh_property{color:#0a7f6d;font-weight:bold;font-style:normal;}pre.sh_sourceCode .sh_value{color:#2b83ba;font-weight:normal;font-style:normal;}
View
4 shjs.js
@@ -0,0 +1,4 @@
+/* Copyright (C) 2007, 2008 gnombat@users.sourceforge.net */
+/* License: http://shjs.sourceforge.net/doc/gplv3.html */
+
+if(!this.sh_languages){this.sh_languages={}}var sh_requests={};function sh_isEmailAddress(a){if(/^mailto:/.test(a)){return false}return a.indexOf("@")!==-1}function sh_setHref(b,c,d){var a=d.substring(b[c-2].pos,b[c-1].pos);if(a.length>=2&&a.charAt(0)==="<"&&a.charAt(a.length-1)===">"){a=a.substr(1,a.length-2)}if(sh_isEmailAddress(a)){a="mailto:"+a}b[c-2].node.href=a}function sh_konquerorExec(b){var a=[""];a.index=b.length;a.input=b;return a}function sh_highlightString(B,o){if(/Konqueror/.test(navigator.userAgent)){if(!o.konquered){for(var F=0;F<o.length;F++){for(var H=0;H<o[F].length;H++){var G=o[F][H][0];if(G.source==="$"){G.exec=sh_konquerorExec}}}o.konquered=true}}var N=document.createElement("a");var q=document.createElement("span");var A=[];var j=0;var n=[];var C=0;var k=null;var x=function(i,a){var p=i.length;if(p===0){return}if(!a){var Q=n.length;if(Q!==0){var r=n[Q-1];if(!r[3]){a=r[1]}}}if(k!==a){if(k){A[j++]={pos:C};if(k==="sh_url"){sh_setHref(A,j,B)}}if(a){var P;if(a==="sh_url"){P=N.cloneNode(false)}else{P=q.cloneNode(false)}P.className=a;A[j++]={node:P,pos:C}}}C+=p;k=a};var t=/\r\n|\r|\n/g;t.lastIndex=0;var d=B.length;while(C<d){var v=C;var l;var w;var h=t.exec(B);if(h===null){l=d;w=d}else{l=h.index;w=t.lastIndex}var g=B.substring(v,l);var M=[];for(;;){var I=C-v;var D;var y=n.length;if(y===0){D=0}else{D=n[y-1][2]}var O=o[D];var z=O.length;var m=M[D];if(!m){m=M[D]=[]}var E=null;var u=-1;for(var K=0;K<z;K++){var f;if(K<m.length&&(m[K]===null||I<=m[K].index)){f=m[K]}else{var c=O[K][0];c.lastIndex=I;f=c.exec(g);m[K]=f}if(f!==null&&(E===null||f.index<E.index)){E=f;u=K;if(f.index===I){break}}}if(E===null){x(g.substring(I),null);break}else{if(E.index>I){x(g.substring(I,E.index),null)}var e=O[u];var J=e[1];var b;if(J instanceof Array){for(var L=0;L<J.length;L++){b=E[L+1];x(b,J[L])}}else{b=E[0];x(b,J)}switch(e[2]){case -1:break;case -2:n.pop();break;case -3:n.length=0;break;default:n.push(e);break}}}if(k){A[j++]={pos:C};if(k==="sh_url"){sh_setHref(A,j,B)}k=null}C=w}return A}function sh_getClasses(d){var a=[];var b=d.className;if(b&&b.length>0){var e=b.split(" ");for(var c=0;c<e.length;c++){if(e[c].length>0){a.push(e[c])}}}return a}function sh_addClass(c,a){var d=sh_getClasses(c);for(var b=0;b<d.length;b++){if(a.toLowerCase()===d[b].toLowerCase()){return}}d.push(a);c.className=d.join(" ")}function sh_extractTagsFromNodeList(c,a){var f=c.length;for(var d=0;d<f;d++){var e=c.item(d);switch(e.nodeType){case 1:if(e.nodeName.toLowerCase()==="br"){var b;if(/MSIE/.test(navigator.userAgent)){b="\r"}else{b="\n"}a.text.push(b);a.pos++}else{a.tags.push({node:e.cloneNode(false),pos:a.pos});sh_extractTagsFromNodeList(e.childNodes,a);a.tags.push({pos:a.pos})}break;case 3:case 4:a.text.push(e.data);a.pos+=e.length;break}}}function sh_extractTags(c,b){var a={};a.text=[];a.tags=b;a.pos=0;sh_extractTagsFromNodeList(c.childNodes,a);return a.text.join("")}function sh_mergeTags(d,f){var a=d.length;if(a===0){return f}var c=f.length;if(c===0){return d}var i=[];var e=0;var b=0;while(e<a&&b<c){var h=d[e];var g=f[b];if(h.pos<=g.pos){i.push(h);e++}else{i.push(g);if(f[b+1].pos<=h.pos){b++;i.push(f[b]);b++}else{i.push({pos:h.pos});f[b]={node:g.node.cloneNode(false),pos:h.pos}}}}while(e<a){i.push(d[e]);e++}while(b<c){i.push(f[b]);b++}return i}function sh_insertTags(k,h){var g=document;var l=document.createDocumentFragment();var e=0;var d=k.length;var b=0;var j=h.length;var c=l;while(b<j||e<d){var i;var a;if(e<d){i=k[e];a=i.pos}else{a=j}if(a<=b){if(i.node){var f=i.node;c.appendChild(f);c=f}else{c=c.parentNode}e++}else{c.appendChild(g.createTextNode(h.substring(b,a)));b=a}}return l}function sh_highlightElement(d,g){sh_addClass(d,"sh_sourceCode");var c=[];var e=sh_extractTags(d,c);var f=sh_highlightString(e,g);var b=sh_mergeTags(c,f);var a=sh_insertTags(b,e);while(d.hasChildNodes()){d.removeChild(d.firstChild)}d.appendChild(a)}function sh_getXMLHttpRequest(){if(window.ActiveXObject){return new ActiveXObject("Msxml2.XMLHTTP")}else{if(window.XMLHttpRequest){return new XMLHttpRequest()}}throw"No XMLHttpRequest implementation available"}function sh_load(language,element,prefix,suffix){if(language in sh_requests){sh_requests[language].push(element);return}sh_requests[language]=[element];var request=sh_getXMLHttpRequest();var url=prefix+"sh_"+language+suffix;request.open("GET",url,true);request.onreadystatechange=function(){if(request.readyState===4){try{if(!request.status||request.status===200){eval(request.responseText);var elements=sh_requests[language];for(var i=0;i<elements.length;i++){sh_highlightElement(elements[i],sh_languages[language])}}else{throw"HTTP error: status "+request.status}}finally{request=null}}};request.send(null)}function sh_highlightDocument(g,k){var b=document.getElementsByTagName("pre");for(var e=0;e<b.length;e++){var f=b.item(e);var a=sh_getClasses(f);for(var c=0;c<a.length;c++){var h=a[c].toLowerCase();if(h==="sh_sourcecode"){continue}if(h.substr(0,3)==="sh_"){var d=h.substring(3);if(d in sh_languages){sh_highlightElement(f,sh_languages[d])}else{if(typeof(g)==="string"&&typeof(k)==="string"){sh_load(d,f,g,k)}else{throw'Found <pre> element with class="'+h+'", but no such language exists'}}break}}}};
View
20 tabs.js
@@ -0,0 +1,20 @@
+var defaultPage = '#info';
+
+function checkHash() {
+ $($('.tabs li.active').removeClass('active').find('a').attr('href')).css('display','none');
+ var hash = window.location.hash || defaultPage;
+ $(hash).css('display', 'block');
+ $('a[href='+hash+']').parent().addClass('active');
+}
+
+function checkHashInAMinute() {
+ setTimeout(checkHash, 0);
+}
+$('a').live('click', checkHashInAMinute);
+
+$(function() {
+ $('.page').css('display', 'none');
+ $('.page:first').css('display', 'block');
+ $('.tabs li:first').addClass('active');
+ checkHash();
+});

0 comments on commit 7e5e10c

Please sign in to comment.
Something went wrong with that request. Please try again.