"Application"
Bootstrap 3.0.3 Snippet by DenstonHD

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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 style="position:absolute; left:140px;">
<p align="left"><img src="http://i42.tinypic.com/2czorcz.png"></p>
</div>
<div style="position:absolute; left:490px;">
<br>
<br>
<br>
<p><strong>Please fill in the form below and if you see any questions with a (*) it MUST be filled in.</strong></p>
<p><strong>If at any point you would like help or support with your application the contact us.</strong></p>
<p><strong>Details on how to contact us can be found on our website.</strong></p>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="list-group wizard-menu">
<a class="list-group-item active step-1-menu" data-for=".step-1">
<h4 class="list-group-item-heading">1. Basic Details</h4>
<br>
</a>
<a href="#" class="list-group-item step-2-menu" data-for=".step-2">
<h4 class="list-group-item-heading">2. Your Details.</h4>
<br>
</a>
<a href="" class="list-group-item step-3-menu" data-for=".step-3">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.container {
margin-top: 1%;
}
/*Wizard*/
.list-group-item.success,
.list-group-item.success:hover,
.list-group-item.success:focus {
background-color: #1aba7b;
border-color: #7aba7b;
color: #ffffff;
}
.list-group-item.success > h4 {
color: #ffffff;
}
.list-group-item.error,
.list-group-item.error:hover,
.list-group-item.error:focus {
background-color: #d59392;
border-color: #d59392;
color: #ffffff;
}
.list-group-item.error > h4 {
color: #ffffff;
}
.btn3d {
transition:all .08s linear;
position:relative;
outline:medium none;
-moz-outline-style:none;
border:0px;
margin-right:10px;
margin-top:15px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/**
* Created by: Alexander Mahrt
* Date: 20.11.13
* Time: 03:00
*/
$(document).ready(function() {
loadDataOnReady();
loadDataOnClick();
changeSteps();
nextStep();
finishWizard(function() {
//ON FINISH EVENT
});
});
function finishWizard(onFinish) {
var wizardContent = $('.wizard-content');
var wizardButtons = $('.wizard-menu .list-group-item');
var currForm = $('.wizard-content form');
//Use document.body for dynamically loaded content listening
$(document.body).on('click', '.wizard-fin', function(event) {
var finButton = $(this);
event.preventDefault();
var currStep = parseInt($(this).attr('data-current-step'));
//Get previous elements
var nextStep = $('.step-' + (currStep + 1));
var nextMenu = $('.step-' + (currStep + 1) + '-menu');
var thisMenu = $('.step-' + currStep + '-menu');
var thisStep = $('.step-' + currStep);
//Update menu
wizardButtons.removeClass('active');
nextMenu.addClass('active');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Bootstrap Wizard
Application Login

Questions / Comments: