starlight
Navigation

Donna Seay

2 minutes ago

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring.

Samantha Francis

3 hours ago

My entire soul, like these sweet mornings of spring.

Robert Walker

5 hours ago

I should be incapable of drawing a single stroke at the present moment...

Larry Smith

Yesterday, 8:34pm

When, while the lovely valley teems with vapour around me, and the meridian sun strikes...

Donna Seay

Jan 23, 2:32am

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring.

View More Messages

Suzzeth Bungaos tagged you and 18 others in a post.

October 03, 2017 8:45am

Mellisa Brown appreciated your work The Social Network

October 02, 2017 12:44am

20+ new items added are for sale in your Sale Group

October 01, 2017 10:20pm

Julius Erving wants to connect with you on your conversation with Ronnie Mara

October 01, 2017 6:08pm

Suzzeth Bungaos tagged you and 12 others in a post.

September 27, 2017 6:45am

10+ new items added are for sale in your Sale Group

September 28, 2017 11:30pm

Mellisa Brown appreciated your work The Great Pyramid

September 26, 2017 11:01am

Julius Erving wants to connect with you on your conversation with Ronnie Mara

September 23, 2017 9:19pm

##### 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'