Dynamic Step Process Panels

Description Implementation - way 1 Implementation - way 2
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 way 1
All you got to do is insert WordPress shortcode, with specified id (defined in admin panel). For this example looks like this:

[dspp id='example1']
Step two - implementation way 2
You can also use different way of implementation, using [dspp_old], [dspp_panel], [dspp_step] and [dspp_content] shortcodes. For this example looks like this:

[dspp_old]
[dspp_panel]
	[dspp_step href="#content1" label="1"]Description[/dspp_step]
	[dspp_step href="#content2" label="2"]Implementation - way 1[/dspp_step]
	[dspp_step href="#content3" label="3"]Implementation - way 2[/dspp_step]
	[dspp_content id="content1"]content for step 1[/dspp_content]
	[dspp_content id="content2"]content for step 2[/dspp_content]
	[dspp_content id="content3"]content for step 3[/dspp_content]
[/dspp_panel]

Description Implementation-way 1 Implementation-way 2 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 way 1
<script type="text/javascript">
var timesOpened = 0;
</script>
[dspp id='example2']
Step three - implementation way 2
[inline]
<script type="text/javascript">
var timesOpened = 0;
function customOnOpen(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>");
	}
}
</script>
[/inline]

[dspp_old id='processPanel2' icons='false' kind='freeChoice' style='orange-gray'
nextPrevButtons='false' onOpen='customOnOpen']
[dspp_panel id="processPanel2" class="panel"]
	[dspp_step href="#p2content1" class="p2Step1"]Description[/dspp_step]
	[dspp_step href="#p2content2" class="p2Step2"]Implementation - way 1[/dspp_step]
	[dspp_step href="#p2content3" class="p2Step3"]Implementation - way 2[/dspp_step]
	[dspp_step href="#p2content4" class="p2Step4"]Enjoy![/dspp_step]
	[dspp_content id="p2content1"]content for step 1[/dspp_content]
	[dspp_content id="p2content2"]content for step 2[/dspp_content]
	[dspp_content id="p2content3"]content for step 3[/dspp_content]
	[dspp_content id="p2content4"]content for step 4[/dspp_content]
[/dspp_panel]
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
[dspp id='example3']
Step three
Some content for step three
Step four
Some content for step four

Description Implementation - way 1 Implementation - way 2
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 way 1
Please enter your e-mail before you go to the third step:
e-mail:
Source code available after purchase
Step three - implementation way 2
2+3=  
Source code available after purchase
                                       
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Comments are closed.