JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<div id="drawer">
  Please fill in the empty fields marked with
  a <samp style="color:red">red</samp> border.
</div>

<!-- the form -->
<form action="http://jquerytools.org/demos/scrollable/wizard.htm#">

  <div id="wizard">
    <ul id="status">
      <li class="active" style="margin-left: -5px;"><p>1948</p></li>
      <li style="margin-left: 25px;"><p>1950</p></li>
      <li style="margin-left: 25px;"><p>1960</p></li>
      <li style="margin-left: 25px;"><p>1980</p></li>
      <li style="margin-left: 25px;"><p>1990</p></li>
      <li style="margin-left: 25px;"><p>2000</p></li>
    </ul>


    <div id="space" style="width:810px; background:white; height:10px;">

    </div>

    <div class="items">

      <!-- page1: question1 -->
      <div class="page">

	<h2>
	  <strong>Question 1: </strong> What is the U.S. Capital?
	  <em>Please select your answer below:</em>
	</h2>

	<ul>
	  <!-- question1 -->
	  <li class="required">
	    <label>
<div class="qselections">
<input type="radio" value="a" name="question1">a) New York<br>
<input type="radio" value="b" name="question1">b) Washington DC<br>
<input type="radio" value="c" name="question1">c) Seattle<br>
<input type="radio" value="d" name="question1">d) Portland<br>
</div>
	    </label>
	  </li>



	  <li class="clearfix">
	    <button type="button" class="next right">Proceed »</button>
	  </li>
	</ul>

      </div>


      <!-- page1: question2 -->
      <div class="page">

	<h2>
	  <strong>Question 2: </strong> Who is the current president?
	  <em>Please select your answer below:</em>
	</h2>

	<ul>
	  <!-- question1 -->
	  <li class="required">
	    <label>
<div class="qselections">
<input type="radio" value="a" name="question1">a) Barack Obama<br>
<input type="radio" value="b" name="question1">b) Bill Clinton<br>
<input type="radio" value="c" name="question1">c) George Bush<br>
<input type="radio" value="d" name="question1">d)...

CSS

[touch-action="none"]{ -ms-touch-action: none; touch-action: none; }[touch-action="pan-x"]{ -ms-touch-action: pan-x; touch-action: pan-x; }[touch-action="pan-y"]{ -ms-touch-action: pan-y; touch-action: pan-y; }[touch-action="scroll"],[touch-action="pan-x pan-y"],[touch-action="pan-y pan-x"]{ -ms-touch-action: pan-x pan-y; touch-action: pan-x pan-y; }

body {
    padding:0px;
    font-family:"Lucida Grande","bitstream vera sans","trebuchet ms",sans-serif,verdana;
}

/* get rid of those system borders being generated for A tags */
a:active {
    outline:none;
}

:focus {
    -moz-outline-style:none;
}



/* scrollable root element */
#wizard {
/*     background:#fff url(/media/img/gradient/h600.png) repeat scroll 0 0; */
/*     border:5px solid #789; */
    font-size:12px;
    height:450px;
    margin:0px auto;
    width:800px;
    overflow:hidden;
    position:relative;

    /* rounded corners for modern browsers */
/*
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
*/
}

/* scrollable items */
#wizard .items {
    width:20000em;
    clear:both;
    position:absolute;
}

/* single item */
#wizard .page {
	background: #e4e4e4;
    padding:20px 30px;
    width:730px;
    float:left;
}

/* title */
#wizard h2 {
    border-bottom:1px dotted #ccc;
    font-size:22px;
    font-weight:normal;
    margin:10px 0 0 0;
    padding-bottom:15px;
}

#wizard h2 em {
    display:block;
    font-size:14px;
    color:#666;
    font-style:normal;
    margin-top:5px;
}

/* input fields */
#wizard ul {
    padding:0px !important;
    margin:0px !important;
}

#wizard li {
    list-style-type:none;
    list-style-image:none;
    margin-bottom:25px;
}

#wizard label {
    font-size:16px;
    display:block;
}

#wizard label strong {
    color:#789;
    position:relative;
    top:-1px;
}

#wizard label em {
    font-size:11px;
    color:#666;
    font-style:normal;
}

#wizard .text {
    width:100%;
    padding:5px;
    border:1px solid #ccc;
    color:#456;
   ...

JavaScript

$(function() {
      var root = $("#wizard").scrollable();

      // some variables that we need
    var api = root.scrollable(), drawer = $("#drawer");

    // validation logic is done inside the onBeforeSeek callback
    api.onBeforeSeek(function(event, i) {

    // we are going 1 step backwards so no need for validation
    if (api.getIndex() < i) {

		         // 1. get current page
		         var page = root.find(".page").eq(api.getIndex()),

			 // 2. .. and all required fields inside the page
			 inputs = page.find(".required :input").removeClass("error"),

			 // 3. .. which are empty
			 empty = inputs.filter(function() {
			 return $(this).val().replace(/\s*/g, '') == '';
			 });

		         // if there are empty fields, then
		         if (empty.length) {

			 // slide down the drawer
			 drawer.slideDown(function()  {

			 // colored flash effect
			 drawer.css("backgroundColor", "#229");
			 setTimeout(function() { drawer.css("backgroundColor", "#fff"); }, 1000);
			 });

			 // add a CSS class name "error" for empty & required fields
			 empty.addClass("error");

			 // cancel seeking of the scrollable by returning false
			 return false;

		         // everything is good
		         } else {

			 // hide the drawer
			 drawer.slideUp();
		         }

	                 }

	                 // update status bar
	                 $("#status li").removeClass("active").eq(i).addClass("active");

                         });

                             // if tab is pressed on the next button seek to next page
    root.find("button.next").keydown(function(e) {
    if (e.keyCode == 9) {

    // seeks to next tab by executing our validation routine
    api.next();
    e.preventDefault();
    }
    });
                           });