<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
<a href="#step-1" type="button" class="btn btn-primary btn-circle">
<i class="glyphicon glyphicon-user"></i></a>
</div>
<div class="stepwizard-step">
<a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">
<i class="glyphicon glyphicon-heart"></i></a>
</div>
<div class="stepwizard-step">
<a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">
<i class="glyphicon glyphicon-plus"></i></a>
</div>
<div class="stepwizard-step">
<a href="#step-4" type="button" class="btn btn-default btn-circle" disabled="disabled">
<i class="glyphicon glyphicon-ok"></i></a>
</div>
</div>
</div>
<form role="form">
<div class="row setup-content" id="step-2">
<div class="col-xs-12">
<div class="col-md-12">
<h3>Business Info</h3>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Business Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Name" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">EIN (used to verify your business)</label>
<input maxlength="10" type="text" required="required" class="form-control" placeholder="12-3456789" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="subject">
Type of Business</label>
<select id="subject" name="subject" class="form-control" required="required">
<option value="na" selected="">Choose One:</option>
<option value="service">Restaurant</option>
<option value="suggestions">Shopping</option>
<option value="product">Financial</option>
<option value="product">Retail</option>
<option value="product">Online</option>
<option value="product">Other</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Website (option)</label>
<input maxlength="100" type="text" class="form-control" placeholder="URL" />
</div>
</div>
<h3>Business Location</h3>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Street Adress</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Address" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">City</label>
<input maxlength="40" type="text" required="required" class="form-control" placeholder="Enter City" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">ZIP</label>
<input maxlength="5" type="text" required="required" class="form-control" placeholder="Enter ZIP Code" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">State</label>
<input maxlength="2" type="text" required="required" class="form-control" placeholder="Enter State" />
</div>
</div>
<h3>Business Contact</h3>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Phone Number</label>
<input maxlength="14" type="text" required="required" class="form-control" placeholder="(555) 555-5555" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Email</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Email" />
</div>
</div>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
</form>
<div class="row setup-content" id="step-1">
<div class="col-xs-12">
<div class="col-md-12">
<div class="container">
<h3>Support Causes</h3>
<p>(Select at least 3)</p>
<div class="row">
<div class="col-md-12">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search Causes" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button id="expandFilter" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="expandFilter">
<form class="form-horizontal" role="form">
<div class="form-group row">
<label for="filter" class="col-xs-10 col-xs-offset-1">Category</label>
<div class="col-xs-10 col-xs-offset-1">
<select class="form-control">
<option value="0" selected>All Categories</option>
<option value="1">Health</option>
<option value="2">Animal</option>
<option value="3">Environmental</option>
<option value="4">International</option>
<option value="5">Education</option>
<option value="6">Arts & Culture</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="contain" class="col-xs-10 col-xs-offset-1">Contains the words</label>
<div class="col-xs-9 col-xs-offset-1">
<input class="form-control" type="text" />
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" id="searchBtn" aria-hidden="true"></span></button>
</div>
</div>
</form>
</div>
</div>
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
<ul class="listrap">
<li class="col-md-6">
<div class="listrap-toggle">
<span></span>
<img src="http://lorempixel.com/60/60/people/?v=1" class="img-circle" />
</div>
<strong>Special Olympics</strong>
</li>
<li class="col-md-6">
<div class="listrap-toggle">
<span></span>
<img src="http://lorempixel.com/60/60/people/?v=2" class="img-circle" />
</div>
<strong>Lymphoma Leukemia Society</strong>
</li>
<li class="col-md-6">
<div class="listrap-toggle">
<span></span>
<img src="http://lorempixel.com/60/60/people/?v=3" class="img-circle" />
</div>
<strong>Ames Animal Shelter</strong>
</li>
<li class="col-md-6">
<div class="listrap-toggle">
<span></span>
<img src="http://lorempixel.com/60/60/people/?v=4" class="img-circle" />
</div>
<strong>American Cancer Society</strong>
</li>
<li class="col-md-6">
<div class="listrap-toggle">
<span></span>
<img src="http://lorempixel.com/60/60/people/?v=5" class="img-circle" />
</div>
<strong>St. Jude Children's Hospital</strong>
</li>
</ul>
</div>
</div>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
<form role="form">
<div class="row setup-content" id="step-4">
<div class="col-xs-12">
<div class="col-md-12">
<h3>Join Givingest</h3>
<div class="form-group">
</div>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</form>
</div>
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700);
body{
margin:40px;
font-family: 'Roboto', sans-serif;
}
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
background: #888;
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 50px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 3px;
background-color: #BDC3C7;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.stepwizard-step p {
margin-top:10px;
}
.btn-success .glyphicon {
color: #fff;
font-size: 40px;
}
.btn-circle {
width: 100px;
height: 100px;
text-align: center;
padding: 25px 25px;
font-size: 40px;
line-height: 1.428571429;
border-radius: 50px;
}
/*
// Listrap v1.0, by Gustavo Gondim (http://github.com/ggondim)
// Licenced under MIT License
// For updates, improvements and issues, see https://github.com/inosoftbr/listrap
*/
.listrap {
list-style-type: none;
margin: 0;
padding: 0;
cursor: default;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.listrap li {
margin: 0;
padding: 10px;
}
.listrap li.active, .listrap li:hover {
background-color: #d9edf7;
}
.listrap strong {
margin-left: 10px;
}
.listrap .listrap-toggle {
display: inline-block;
width: 60px;
height: 60px;
}
.listrap .listrap-toggle span {
background-color: #428bca;
opacity: 0.8;
z-index: 100;
width: 60px;
height: 60px;
display: none;
position: absolute;
border-radius: 50%;
text-align: center;
line-height: 60px;
vertical-align: middle;
color: #ffffff;
}
.listrap .listrap-toggle span:before {
font-family: 'Glyphicons Halflings';
content: "\e013";
}
.listrap li.active .listrap-toggle span {
display: block;
}
}
.dropdown.dropdown-lg .dropdown-menu {
margin-top: -1px;
padding: 6px 20px;
}
.input-group-btn .btn-group {
display: flex !important;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-group .form-control:last-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
@media screen and (min-width: 768px) {
#adv-search {
width: 500px;
}
.dropdown.dropdown-lg {
position: static !important;
}
.dropdown.dropdown-lg .dropdown-menu {
min-width: 500px;
}
}
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
console.log(curInputs[i].validity);
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-primary').trigger('click');
});
// Listrap v1.0, by Gustavo Gondim (http://github.com/ggondim)
// Licenced under MIT License
// For updates, improvements and issues, see https://github.com/inosoftbr/listrap
jQuery.fn.extend({
listrap: function () {
var listrap = this;
listrap.getSelection = function () {
var selection = new Array();
listrap.children("li.active").each(function (ix, el) {
selection.push($(el)[0]);
});
return selection;
}
var toggle = "li .listrap-toggle ";
var selectionChanged = function() {
$(this).parent().parent().toggleClass("active");
listrap.trigger("selection-changed", [listrap.getSelection()]);
}
$(listrap).find(toggle + "img").on("click", selectionChanged);
$(listrap).find(toggle + "span").on("click", selectionChanged);
return listrap;
}
});
$(document).ready(function () {
$(".listrap").listrap().on("selection-changed", function (event, selection) {
console.log(selection);
});
});
