Permalink
Browse files

adding form html & js.

  • Loading branch information...
xmatthewx committed Oct 5, 2012
1 parent da55e57 commit d051d5622336a420d91ffafeb77154ff75b438fe
Showing with 235 additions and 3 deletions.
  1. +14 −2 css/main.css
  2. +1 −1 index.html
  3. +51 −0 js/form.js
  4. +3 −0 js/main.js
  5. +166 −0 new.html
View
@@ -238,5 +238,17 @@ body, #thecanvas {
.navbar .brand { margin-left:-5px; }
-
-
+/* ----------------------
+ forms
+*/
+
+form {
+ width:500px;
+ margin:2em auto;
+ padding:2em 20px;
+ background:rgba(255,255,255,0.4);
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+
+ }
View
@@ -35,7 +35,7 @@
<div class="container">
- <!-- Main hero unit for a primary marketing message or call to action -->
+ <!-- magic happens here -->
<div id="thecanvas" class="">
</div>
View
@@ -0,0 +1,51 @@
+
+
+$(window).load(function () {
+// all JS inside $(window).load
+
+console.log('loaded');
+
+/***
+ * forms
+ */
+
+// trigger more input for items as needed
+$('#inputI3').focus( function(){ xitem(); });
+
+function xitem(){
+ // clone the last item input field
+ var template = $("section#items .control-group").last().clone();
+ i = Number( template.find("input").attr('id').slice(6) );
+ n = i + 1;
+
+ if( n < 16 ){
+
+ template.find(".add-on").text(n);
+ template.find("input").attr('id','inputI'+ n);
+
+ $("section#items").append(template);
+
+ $('#inputI' + n).focus( function(){ xitem(); });
+ }
+
+ $('#inputI' + i ).unbind('focus'); // trigger from each only once
+
+};
+
+
+// unlock
+$('.checkbox').change( function(){
+
+// console.log( $('#test1:checked').val() );
+
+ if( $('#test1:checked').val() && !$('#test2:checked').val() && $('#test3:checked').val() ){
+ console.log('unlocked');
+ $('form button').removeAttr("disabled");
+
+ }
+
+ });
+
+
+// END $(window).load
+});
View
@@ -492,6 +492,7 @@ $('#thecanvas li a.icon-trash').click( function(){
/***
* dummy itemlist
*/
+/* ready to delete?

This comment has been minimized.

Show comment Hide comment
@xmatthewx

xmatthewx Oct 5, 2012

Owner

i think so...

@xmatthewx

xmatthewx Oct 5, 2012

Owner

i think so...

function initItems(){
// add to itemslist
@@ -517,6 +518,8 @@ function initItems(){
itemslist = itemslist.concat(addlist);
};
+*/
+
// END $(window).load
View
166 new.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <title>matrix</title>
+ <meta name="description" content="Music Mosaic">
+ <meta name="viewport" content="width=device-width">
+
+ <link rel="stylesheet" href="css/bootstrap.min.css">
+ <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
+ <link rel="stylesheet" href="css/main.css">
+
+ <script src="js/vendor/modernizr-2.6.1.min.js"></script>
+
+ </head>
+ <body>
+ <!--[if lt IE 7]>
+ <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
+ <![endif]-->
+
+ <div class="navbar navbar-fixed-top navbar-inverse">
+ <div class="navbar-inner">
+ <a class="brand" href="index.html">Emergent Matrix</a>
+ <ul class="nav filter">
+ <li><a href="#">about</a></li>
+ </ul>
+ </div>
+ </div>
+
+
+ <div class="container">
+
+ <form class="form-horizontal">
+
+ <div class="control-group">
+ <label class="control-label" for="inputTitle">Title</label>
+ <div class="controls">
+ <div class="input-prepend">
+ <span class="add-on">&#187;</span>
+ <input id="inputTitle" size="16" type="text" placeholder="The title">
+ </div>
+ </div>
+ </div>
+
+ <div class="control-group">
+ <label class="control-label" for="inputURL">URL</label>
+ <div class="controls">
+ <div class="input-prepend input-append">
+ <span class="add-on">&#187;</span>
+ <input class="span2" type="text" id="inputURL" placeholder="URL"><button class="btn" type="button">Check</button>
+ </div>
+ </div>
+ </div>
+
+ <section id="categories">
+
+ <div class="control-group">
+ <label class="control-label" for="north">Categories</label>
+ <div class="controls">
+ <div class="input-prepend">
+ <span class="add-on">1</span>
+ <input type="text" id="catNorth" placeholder="north">
+ </div>
+ </div>
+ </div>
+ <div class="control-group">
+ <div class="controls">
+ <div class="input-prepend">
+ <span class="add-on">2</span>
+ <input type="text" id="catEast" placeholder="east">
+ </div>
+ </div>
+ </div>
+ <div class="control-group">
+ <div class="controls">
+ <div class="input-prepend">
+ <span class="add-on">3</span>
+ <input type="text" id="catSouth" placeholder="south">
+ </div>
+ </div>
+ </div>
+ <div class="control-group">
+ <div class="controls">
+ <div class="input-prepend">
+ <span class="add-on">4</span>
+ <input type="text" id="catWest" placeholder="west">
+ </div>
+ </div>
+ </div>
+
+ </section>
+
+ <section id="items">
+
+ <div class="control-group">
+ <label class="control-label" for="inputI1">Items</label>
+ <div class="controls">
+ <div class="input-prepend">
+ <span class="add-on">1</span>
+ <input type="text" id="inputI1" placeholder="item name">
+ </div>
+ </div>
+ </div>
+ <div class="control-group">
+ <div class="controls">
+ <div class="input-prepend">
+ <span class="add-on">2</span>
+ <input type="text" id="inputI2" placeholder="item name">
+ </div>
+ </div>
+ </div>
+ <div class="control-group">
+ <div class="controls">
+ <div class="input-prepend">
+ <span class="add-on">3</span>
+ <input type="text" id="inputI3" placeholder="item name">
+ </div>
+ </div>
+ </div>
+
+ </section>
+
+ <div class="control-group">
+ <div class="controls">
+ <span class="help-block">Unlock this puzzle to help us avoid junk:</span>
+ <label class="checkbox inline">
+ <input type="checkbox" id="test1" value="option1"> Check
+ </label>
+ <label class="checkbox inline">
+ <input type="checkbox" id="test2" value="option2"> Don't
+ </label>
+ <label class="checkbox inline">
+ <input type="checkbox" id="test3" value="option3"> Check
+ </label>
+ </div>
+ </div>
+
+ <div class="control-group">
+ <div class="controls">
+ <button type="submit" class="btn" disabled>Create</button>
+ </div>
+ </div>
+
+
+ </form>
+
+ <!-- not in use -->
+ <div id="thecanvas" class="">
+
+ </div>
+
+ </div> <!-- /container -->
+
+
+
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
+ <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>')</script>
+
+ <script src="js/vendor/bootstrap.min.js"></script>
+ <script src="js/form.js"></script>
+ </body>
+</html>

0 comments on commit d051d56

Please sign in to comment.