Dynamic Step Process Panels

1. Embedded directly in the page

Description Implementation - html Implementation - js

Step one - description

This example show the simplest way to implement Dynamic Step Process Panels.

Features:
- 3 steps (width configurable in css),
- first step selected,
- step-by-step mode,
- previous and next buttons,
- step labels,
- every step can be choosed again,
- fade effect speed 1 second,
- style green-blue

Step two - implementation html

First what you got to do is insert appropiate html code. For this example looks like this:

<div id="processPanel">
	<a href="#content1" label="1">
		Description
	</a>
	<a href="#content2" label="2">
		Implementation - html
	</a>
	<a href="#content3" label="3">
		Implementation - js
	</a>
	<div id="content1">content for step 1</div>
	<div id="content2">content for step 2</div>
	<div id="content3">content for step 3</div>
</div>

Step three - implementation js

Next (and last) step of implementation is to call the plug-in for jQuery object:

$("#processPanel").processPanel();

Description Implementation - html Implementation - js Enjoy!

Step one - description

This example show Dynamic Step Process Panels without label icons, and next previous buttons. You don't have to move step-by-step.

Features:
- 4 steps (width configurable in css),
- free choice mode,
- every step can be choosed again,
- first step selected,
- fade effect speed 1 second,
- style orange-gray,
- onOpen event implemented

Step two - implementation html

The classes p2Step1, p2Step2, p2Step3, p2Step4 are used just to specify the steps width.

<div id="processPanel2">
	<a href="#p2content1" class="p2Step1">
		Description
	</a>
	<a href="#p2content2" class="p2Step2">
		Implementation - html
	</a>
	<a href="#p2content3" class="p2Step3">
		Implementation - js
	</a>
	<a href="#p2content4" class="p2Step4">
		Enjoy!
	</a>
	<div id="p2content1">content for step 1</div>
	<div id="p2content2">content for step 2</div>
	<div id="p2content3">content for step 3</div>
	<div id="p2content4">content for step 4</div>
</div>

Step three - implementation js

var timesOpened = 0;
$("#processPanel2").processPanel({
	kind: "freeChoice",
	icons: false,
	nextPrevButtons: false,
	style: "orange-gray",
	onOpen: function(event, step, content, stepNumber){
		$(".message").remove();
		if(stepNumber==2)
		{
			timesOpened++;
			content.prepend("<div class='message'>You've opened this step " 
			+ timesOpened + " time" + (timesOpened>1 ? "s":"") + ".</div>");
		}
	}
});
});

Step four

Description Implementation Step three Step four

Step one - description

This example show Dynamic Step Process Panels without opened the first step at the begin.

Features:
- 4 steps,
- first step is not opened at the begin,
- contents opens on mouseover,
- step-by-step mode,
- fade effect speed 0,5 second,
- style blue-maroon,
- previous and next buttons,
- step labels

Step two - implementation

Available after purchase

Step three

Some content for step three

Step four

Some content for step four

Description Implementation - html Implementation - js

Step one - description

This example shows how to integrate Dynamic Step Process Panels with form.

Features:
- 3 steps (width configurable in css),
- custom form validation,
- first step selected,
- step-by-step mode,
- previous and next buttons,
- step labels,
- every step can be choosed again,
- fade effect speed 1 second,
- style blue-orange

Please enter your name before you go to the second step:
name:

Step two - implementation html

Please enter your e-mail before you go to the third step:
e-mail:

<div id="processPanel9" class="panel">
	<a href="#p9content1" label="1">
		Description
	</a>
	<a href="#p9content2" label="2">
		Implementation - html
	</a>
	<a href="#p9content3" label="3">
		Implementation - js
	</a>
	<form id="exampleForm" action="formProcessor.php" method="post">
		<fieldset id="p9content1">content for step 1</fieldset>
		<fieldset id="p9content2">content for step 2</fieldset>
		<fieldset id="p9content3">content for step 3</fieldset>
	<form/>
</div>

Step three - implementation js

2+3=

Source code available after purchase

2. Displayed as a popup - pick color scheme

3. Purchase