Skip to content

Instantly share code, notes, and snippets.

@robotloveskitten

robotloveskitten/index.html

Created September 2, 2012 14:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save robotloveskitten/3599646 to your computer and use it in GitHub Desktop.
Save robotloveskitten/3599646 to your computer and use it in GitHub Desktop.
Download ZIP
Playing around with form field presentation. The javascript simply switches styles on the sections as you complete them, triggering css which modifies the presentation. This makes it easy to go back and forth, since the HTML and field values never change.
Raw
index.html
<html>
<head>
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="column">
<section id="first" class="current">
<div class="card">
<h3>Section One</h3>
<p class="description">Here is a description of this section</p>
<dl>
<dt><label>Field Label</label></dt>
<dd><input type="text" value="something"></dd>
<dt><label>Field Label</label></dt>
<dd><input type="text" value="something"></dd>
</dl>
<a href="#" class="next button blue">next section</a>
</div>
</section>
<section id="second" class="compact">
<div class="card">
<h3>Section Two</h3>
<p class="description">Here is a description of this section</p>
<dl>
<dt><label>Field Label</label></dt>
<dd><input type="text" value="something"></dd>
<dt><label>Field Label</label></dt>
<dd><input type="text" value="something"></dd>
</dl>
<a href="#" class="next button blue">next section</a>
</div>
</section>
<section id="third" class="compact">
<div class="card">
<h3>Section Three</h3>
<p class="description">Here is a description of this section</p>
<dl>
<dt><label>Field Label</label></dt>
<dd><input type="text" value="something"></dd>
<dt><label>Field Label</label></dt>
<dd><input type="text" value="something"></dd>
</dl>
<a href="#" class="next button blue">next section</a>
</div>
</section>
</div>
</body>
</html>
Raw
script.js
$(function(){
$(".next").on("click",function() {
var section = $(this).parents('section');
// mark this section as read
section
.addClass("complete")
.removeClass('current');
// disable inputs
section.find(":input").attr("disabled",true);
// find all unread sections
$(section).siblings("section:not(.complete)")
.first()
.removeClass('compact').addClass('current');
});
});
Raw
style.scss
@import "compass";
@import "compass/reset";
@import "compass/css3";
@import "compass/utilities";
$blue: #3366aa;
body {
font:normal 16px/1.5em 'Helvetica Neue',Helvetica,sans-serif;
}
.column {
list-style:none;
margin:0px auto;
padding:20px 0;
width:250px;
height:100%;
background:#eeeef5;
section {
position:relative;
float:left;
width:248px;
margin:0;
background:#eee;
padding-bottom:0px;
// animation options
-webkit-transition-property: transform, box-shadow, margin, width, height;
//-webkit-transition-property: all;
-webkit-transition-duration: 0.75s;
// we have 3 states: compact, current, and complete
&.complete {
height:auto;
background-color:#efe;
.card {
height:auto;
label {
font-size:12px;
}
input {
padding:0;
margin:0 0 .5em;
}
}
.description {
display:none;
}
.next {
display:none;
}
}
&.current {
z-index:2;
width:248px;
margin:0 -10px;
box-shadow:0 3px 6px #999;
background:#fff;
padding:0 10px 30px;
.description { display:none;}
h3 {
font-size:24px;
}
.next {
position:absolute;
bottom:10px;
right:15px;
}
}
&.compact {
background-color:#eee;
.card {
height:auto;
}
.description {
display:block;
}
dl {
display:none;
}
.next {
display:none;
}
}
}
}
.card {
padding:20px;
//height:250px;
margin:0;
h3 {
font-size:18px;
line-height:1em;
margin:0 0 .5em;
}
.description {
font-size:12px;
color:#666;
}
label {
padding-left:2px;
}
input {
border:1px solid #bbb;
font-size:16px;
padding:.3em;
@include border-radius(3px);
background:#f9f9f9;
color:#555;
&:focus {
background:#fff;
color:#222;
}
}
input:disabled {
border:none;
font-size:12px;
background:transparent;
}
}
.button {
font-size:14px;
line-height:1em;
display:inline-block;
color:#fff;
text-decoration:none;
background:-webkit-linear-gradient($blue 50%,darken($blue,7%) 50%);
padding:.5em 1em;
@include border-radius(1em, 1em);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment