[bracket plus]
Navigation
Information Summary

Memory Usage

##### 32.3%

8,6,5,9,8,4,9,3,5,9

CPU Usage

##### 140.05

4,3,5,7,12,10,4,5,11,7

Disk Usage

##### 82.02%

1,2,1,3,2,10,4,12,7

Daily Traffic

##### 62,201

3,12,7,9,2,3,4,5,2
Online Contacts

Marilyn Tarter

Clemson, CA
1 new

Belinda Connor

Fort Kent, ME

Britanny Cevallos

Shiboygan Falls, WI
3 new

Brandon Lawrence

Snohomish, WA
1 new

Andrew Wiggins

Springfield, MA

Theodore Gristen

Nashville, TN

Deborah Miner

North Shore, CA
Offline Contacts

Marilyn Tarter

Clemson, CA

Belinda Connor

Fort Kent, ME

Britanny Cevallos

Shiboygan Falls, WI

Brandon Lawrence

Snohomish, WA

Andrew Wiggins

Springfield, MA

Theodore Gristen

Nashville, TN

Deborah Miner

North Shore, CA
Recent Attachments

IMG_43445

JPG Image

1.2mb

VID_6543

MP4 Video

24.8mb

Tax_Form

Word Document

5.5mb

Getting_Started

PDF Document

12.7mb

Introduction

PDF Document

7.7mb

IMG_43420

JPG Image

2.2mb

IMG_43447

JPG Image

3.2mb

VID_6545

AVI Video

14.8mb

Secret_Document

Word Document

4.5mb

Time & Date

##

######

Events Calendar
Event Today
+ Add Event
Quick Settings

###### More Settings

Account Settings Privacy Settings

#### Form Wizards

jQuery Steps, an all-in-one wizard plugin that is extremely flexible, compact and feature-rich.

###### Basic Content Wizard

Below is an example of a basic horizontal form wizard.

### Personal Information

Try the keyboard navigation by clicking arrow left or right!

### Billing Information

Wonderful transition effects.

### Payment Details

The next and previous buttons help you to navigate through your content.

HTML Code

    <div id="wizard1">
      <h3>Personal Information</h3>
      <section>
        <p>Try the keyboard navigation by clicking arrow left or right!</p>
      </section>
      <h3>Billing Information</h3>
      <section>
        <p>Wonderful transition effects.</p>
      </section>
      <h3>Payment Details</h3>
      <section>
        <p>The next and previous buttons help you to navigate through your content.</p>
      </section>
    </div>

Javascript Code

    $('#wizard1').steps({
      headerTag: 'h3',
      bodyTag: 'section',
      autoFocus: true,
      titleTemplate: '#index# #title#'
    });

###### Basic Form Wizard with Validation

A basic form wizard with form validation using Parsley js form validation plugin.

### Personal Information

Try the keyboard navigation by clicking arrow left or right!

Firstname: *
Lastname: *

### Billing Information

Wonderful transition effects.

Email: *

### Payment Details

The next and previous buttons help you to navigate through your content.

Additional Option Code

    onStepChanging: function (event, currentIndex, newIndex) {
      if(currentIndex < newIndex) {
        // Step 1 form validation
        if(currentIndex === 0) {
          var fname = $('#firstname').parsley();
          var lname = $('#lastname').parsley();

          if(fname.isValid() && lname.isValid()) {
            return true;
          } else {
            fname.validate();
            lname.validate();
          }
        }

        // Step 2 form validation
        if(currentIndex === 1) {
          var email = $('#email').parsley();
          if(email.isValid()) {
            return true;
          } else { email.validate(); }
        }
      // Always allow step back to the previous step even if the current step is not valid.
      } else { return true; }
    }

###### Vertical Orientation Wizard

A basic content wizard with vertical orientation.

### Personal Information

Try the keyboard navigation by clicking arrow left or right!

### Billing Information

Wonderful transition effects.

### Payment Details

The next and previous buttons help you to navigate through your content.

Additional Option Code

    stepsOrientation: 1

###### Step Indicator Auto Equal Width

A basic wizard that adds a custom style to make the step indicator equal width.

### Personal Information

Try the keyboard navigation by clicking arrow left or right!

### Billing Information

Wonderful transition effects.

### Payment Details

The next and previous buttons help you to navigate through your content.

Additional Option Code

    cssClass: 'wizard step-equal-width'

###### Custom Style For Step Indicator

Below are a simple styles for step indicaator of a wizard

### Personal Information

Try the keyboard navigation by clicking arrow left or right!

### Billing Information

Wonderful transition effects.

### Payment Details

The next and previous buttons help you to navigate through your content.

Additional Option Code

    cssClass: 'wizard wizard-style-1'

### Personal Information

Try the keyboard navigation by clicking arrow left or right!

### Billing Information

Wonderful transition effects.

### Payment Details

The next and previous buttons help you to navigate through your content.

Additional Option Code

    cssClass: 'wizard wizard-style-2'

### Personal Information

Try the keyboard navigation by clicking arrow left or right!

### Billing Information

Wonderful transition effects.

### Payment Details

The next and previous buttons help you to navigate through your content.

Additional Option Code

    cssClass: 'wizard wizard-style-3'