Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Add files

  • Loading branch information...
commit a2f9c36e2ae9206b279ed595f6010dde5b93f82b 1 parent 812584e
@JamyGolden JamyGolden authored
View
8 css/style-ie.css
@@ -0,0 +1,8 @@
+legend {
+ position: relative;
+ top: -30px;
+}
+
+fieldset {
+ margin: 30px 10px 0 0;
+}
View
104 css/style.css
@@ -0,0 +1,104 @@
+* {
+ margin: 0; padding: 0;
+}
+
+body {
+ font-family: Helvetica, Arial, Sans-Serif;
+ background: #2c2c2c url(../images/bg.jpg) top center no-repeat;
+}
+
+#page-wrap {
+ width: 960px;
+ margin: 40px auto;
+ overflow: hidden;
+}
+
+.hidden {
+ position:absolute;
+ left:-999em;
+ top:-999em;
+ width:1%;
+}
+
+h1 {
+ font-size: 48px;
+ letter-spacing: -1px;
+ color: white;
+ margin: 0 0 15px 0;
+ }
+ h1 span {
+ color: #1f8cc5;
+}
+
+h3 {
+ font-size: 18px;
+ letter-spacing: -1px;
+ margin: 0 0 5px 0;
+}
+
+p, label {
+ font-family: Georgia, serif;
+ font-style: italic;
+ font-size: 18px;
+ margin: 4px 0;
+}
+
+
+fieldset {
+ width: 280px;
+ padding: 15px;
+ float: left;
+ border: none;
+ margin: 0 10px 0 0;
+ }
+ fieldset#step_1 {
+ background: #b2e7ca;
+ }
+ fieldset#step_2 {
+ background: #b2d9e7;
+ }
+ fieldset#step_3 {
+ background: #e7c7b2;
+ }
+
+legend {
+ font-weight: bold;
+ font-size: 20px;
+ background: white;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ padding: 5px 10px;
+ letter-spacing: -1px;
+}
+
+option {
+ padding: 0 5px;
+}
+
+.name_wrap {
+ margin: 5px 0;
+ }
+ .name_wrap label {
+ font-size: 12px;
+ display: block;
+ width: 102px;
+ float: left;
+ }
+
+.push {
+ margin: 20px 0 0 0;
+}
+
+#special_accommodations_wrap,
+#company_name_wrap {
+ margin: 8px 0 0 0;
+}
+
+#company_name_wrap label,
+#special_accommodations_wrap label {
+ font-size: 12px;
+}
+
+#special_accommodations_wrap textarea {
+ width: 100%; height: 100px;
+}
View
BIN  images/bg.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/check.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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" xml:lang="en" lang="en">
+
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
+ <title>Seminar Registration Form with jQuery</title>
+
+ <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
+
+
+ <script src="js/jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script>
+ <script src="js/form-fun.jquery.js" type="text/javascript" charset="utf-8"></script>
+
+ <!--[if IE]>
+ <style type="text/css">
+ legend {
+ position: relative;
+ top: -30px;
+ }
+
+ fieldset {
+ margin: 30px 10px 0 0;
+ }
+ </style>
+
+ <script type="text/javascript">
+ $(function(){
+ $("#step_2 legend").css({ opacity: 0.5 });
+ $("#step_3 legend").css({ opacity: 0.5 });
+ });
+ </script>
+ <![endif]-->
+</head>
+
+
+<body>
+
+ <div id="page-wrap">
+
+ <h1>Seminar <span>Registration</span></h1>
+
+ <form action="#" method="post">
+
+ <fieldset id="step_1">
+
+ <legend>Step 1</legend>
+
+ <label for="num_attendees">
+ How many people will be attending?
+ </label>
+ <select id="num_attendees">
+ <option id="opt_0" value="0">Please Choose</option>
+ <option id="opt_1" value="1">1</option>
+ <option id="opt_2" value="2">2</option>
+ <option id="opt_3" value="3">3</option>
+ <option id="opt_4" value="4">4</option>
+ <option id="opt_5" value="5">5</option>
+ </select>
+
+ <br />
+
+ <div id="attendee_1_wrap" class="name_wrap push">
+ <h3>Please provide full names:</h3>
+
+ <label for="name_attendee_1">
+ Attendee 1 Name:
+ </label>
+ <input type="text" id="name_attendee_1" class="name_input"></input>
+ </div>
+
+ <div id="attendee_2_wrap" class="name_wrap">
+ <label for="name_attendee_2">
+ Attendee 2 Name:
+ </label>
+ <input type="text" id="name_attendee_2" class="name_input"></input>
+ </div>
+
+ <div id="attendee_3_wrap" class="name_wrap">
+ <label for="name_attendee_3">
+ Attendee 3 Name:
+ </label>
+ <input type="text" id="name_attendee_3" class="name_input"></input>
+ </div>
+
+ <div id="attendee_4_wrap" class="name_wrap">
+ <label for="name_attendee_4">
+ Attendee 4 Name:
+ </label>
+ <input type="text" id="name_attendee_4" class="name_input"></input>
+ </div>
+
+ <div id="attendee_5_wrap" class="name_wrap">
+ <label for="name_attendee_5">
+ Attendee 5 Name:
+ </label>
+ <input type="text" id="name_attendee_5" class="name_input"></input>
+ </div>
+
+ </fieldset>
+
+ <fieldset id="step_2">
+
+ <legend>Step 2</legend>
+
+ <p>
+ Would you like your company name on your badges?
+ </p>
+
+
+ <input type="radio" id="company_name_toggle_on" name="company_name_toggle_group"></input>
+ <label for="company_name_toggle_on">Yes</label>
+ &emsp;
+ <input type="radio" id="company_name_toggle_off" name="company_name_toggle_group"></input>
+ <label for="company_name_toggle_off">No</label>
+
+ <div id="company_name_wrap">
+ <label for="company_name">
+ Company Name:
+ </label>
+ <input type="text" id="company_name"></input>
+ </div>
+
+ <div class="push">
+ <p>
+ Will anyone in your group require special accommodations?
+ </p>
+
+ <input type="radio" id="special_accommodations_toggle_on" name="special_accommodations_toggle"></input>
+ <label for="special_accommodations_toggle_on">Yes</label>
+ &emsp;
+ <input type="radio" id="special_accommodations_toggle_off" name="special_accommodations_toggle"></input>
+ <label for="special_accommodations_toggle_off">No</label>
+ </div>
+ <div id="special_accommodations_wrap">
+ <label for="special_accomodations_text">
+ Please explain below:
+ </label>
+ <textarea rows="10" cols="10" id="special_accomodations_text"></textarea>
+ </div>
+
+ </fieldset>
+
+ <fieldset id="step_3">
+ <legend>Step 3</legend>
+
+ <label for="rock">
+ Are you ready to rock?
+ </label>
+ <input type="checkbox" id="rock"></input>
+
+ <input type="submit" id="submit_button" class="push" value="Complete Registration"></input>
+ </fieldset>
+
+ </form>
+
+ </div>
+
+</body>
+
+</html>
View
143 js/form-fun.jquery.js
@@ -0,0 +1,143 @@
+
+// When the DOM is ready...
+$(function(){
+
+ // Hide stuff with the JavaScript. If JS is disabled, the form will still be useable.
+ // NOTE:
+ // Sometimes using the .hide(); function isn't as ideal as it uses display: none;
+ // which has problems with some screen readers. Applying a CSS class to kick it off the
+ // screen is usually prefered, but since we will be UNhiding these as well, this works.
+ $(".name_wrap").hide();
+ $("#company_name_wrap").hide();
+ $("#special_accommodations_wrap").hide();
+
+ // Reset form elements back to default values
+ $("#submit_button").attr("disabled",true);
+ $("#num_attendees").val('Please Choose');
+ $("#step_2 input[type=radio]").each(function(){
+ this.checked = false;
+ });
+ $("#rock").each(function(){
+ this.checked = false;
+ });
+
+ // Fade out steps 2 and 3 until ready
+ $("#step_2").css({ opacity: 0.3 });
+ $("#step_3").css({ opacity: 0.3 });
+
+ $.stepTwoComplete_one = "not complete";
+ $.stepTwoComplete_two = "not complete";
+
+ // When a dropdown selection is made
+ $("#num_attendees").change(function() {
+
+ $(".name_wrap").slideUp().find("input").removeClass("active_name_field");
+
+ switch ($("#num_attendees option:selected").text()) {
+ case '1':
+ $("#attendee_1_wrap").slideDown().find("input").addClass("active_name_field");
+ break;
+ case '2':
+ $("#attendee_1_wrap").slideDown().find("input").addClass("active_name_field");
+ $("#attendee_2_wrap").slideDown().find("input").addClass("active_name_field");
+ break;
+ case '3':
+ $("#attendee_1_wrap").slideDown().find("input").addClass("active_name_field");
+ $("#attendee_2_wrap").slideDown().find("input").addClass("active_name_field");
+ $("#attendee_3_wrap").slideDown().find("input").addClass("active_name_field");
+ break;
+ case '4':
+ $("#attendee_1_wrap").slideDown().find("input").addClass("active_name_field");
+ $("#attendee_2_wrap").slideDown().find("input").addClass("active_name_field");
+ $("#attendee_3_wrap").slideDown().find("input").addClass("active_name_field");
+ $("#attendee_4_wrap").slideDown().find("input").addClass("active_name_field");
+ break;
+ case '5':
+ $("#attendee_1_wrap").slideDown().find("input").addClass("active_name_field");
+ $("#attendee_2_wrap").slideDown().find("input").addClass("active_name_field");
+ $("#attendee_3_wrap").slideDown().find("input").addClass("active_name_field");
+ $("#attendee_4_wrap").slideDown().find("input").addClass("active_name_field");
+ $("#attendee_5_wrap").slideDown().find("input").addClass("active_name_field");
+ break;
+ }
+ });
+
+ $(".name_input").blur(function(){
+
+ var all_complete = true;
+
+ $(".active_name_field").each(function(){
+ if ($(this).val() == '' ) {
+ all_complete = false;
+ };
+ });
+
+ if (all_complete) {
+ $("#step_1")
+ .animate({
+ paddingBottom: "120px"
+ })
+ .css({
+ "background-image": "url(images/check.png)",
+ "background-position": "bottom center",
+ "background-repeat": "no-repeat"
+ });
+ $("#step_2").css({
+ opacity: 1.0
+ });
+ $("#step_2 legend").css({
+ opacity: 1.0 // For dumb Internet Explorer
+ });
+ };
+ });
+
+ function stepTwoTest() {
+ if (($.stepTwoComplete_one == "complete") && ($.stepTwoComplete_two == "complete")) {
+ $("#step_2")
+ .animate({
+ paddingBottom: "120px"
+ })
+ .css({
+ "background-image": "url(images/check.png)",
+ "background-position": "bottom center",
+ "background-repeat": "no-repeat"
+ });
+ $("#step_3").css({
+ opacity: 1.0
+ });
+ $("#step_3 legend").css({
+ opacity: 1.0 // For dumb Internet Explorer
+ });
+ }
+ };
+
+ $("#step_2 input[name=company_name_toggle_group]").click(function(){
+ $.stepTwoComplete_one = "complete";
+ if ($("#company_name_toggle_on:checked").val() == 'on') {
+ $("#company_name_wrap").slideDown();
+ } else {
+ $("#company_name_wrap").slideUp();
+ };
+ stepTwoTest();
+ });
+
+ $("#step_2 input[name=special_accommodations_toggle]").click(function(){
+ $.stepTwoComplete_two = "complete";
+ if ($("#special_accommodations_toggle_on:checked").val() == 'on') {
+ $("#special_accommodations_wrap").slideDown();
+ } else {
+ $("#special_accommodations_wrap").slideUp();
+ };
+ stepTwoTest();
+ });
+
+ $("#rock").click(function(){
+ if (this.checked && $("#num_attendees option:selected").text() != 'Please Choose'
+ && $.stepTwoComplete_one == 'complete' && $.stepTwoComplete_two == 'complete') {
+ $("#submit_button").attr("disabled",false);
+ } else {
+ $("#submit_button").attr("disabled",true);
+ }
+ });
+
+});
View
3,549 js/jquery-1.2.6.js
3,549 additions, 0 deletions not shown
Please sign in to comment.
Something went wrong with that request. Please try again.