Click here to Skip to main content
15,307,395 members
Please Sign up or sign in to vote.
3.00/5 (1 vote)
See more:
I'm Developer and making a page .
I am use a Fancy sliding form in one page . I'm not very good in Jquery and Css code.
Fancy Sliding Form with jQuery[^]

in demo of this tutorials there are only 5 tabs,I want add 10 more tabs.Please any body give me solution.

My Jquery code is below .
$(function() {	
	var fieldsetCount = $('#formElem').children().length;
	var current 	= 1;
	var stepsWidth	= 0;
    var widths 		= new Array();
	$('#steps .step').each(function(i){
        var $step 		= $(this);
		widths[i]  		= stepsWidth;
        stepsWidth	 	+= $step.width();		
	/* All Input field  */
	$('input, textarea').blur(function(){	   
	    var name = $(this).attr('ID') + "_li"; 
	        name = $("#" + name.substring(26)); 	        
	    if($(this).val() == ""){
	        name.css('list-style', 'url(../images/cross.png) inside');	                
			name.css('list-style', 'url(../images/tick.png) inside');
	$('.selectBox ul li').click(function(){
//	    var name = $(this).attr('ID') + "_li"; 
//	        name = $("#" + name.substring(26));
//	    if($(this).val() == ""){
//	        name.css('list-style','url(../images/cross.png) inside');	                
//    	}else{
//			name.css('list-style','url(../images/tick.png) inside');
//	    }

    $('#navigation a').bind('click',function(e){
		var $this	= $(this);
		var prev	= current;
		current = $this.parent().index() + 1;
            marginLeft: '-' + widths[current-1]* 1.027 + 'px'
			if(current == fieldsetCount)

			$('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();	
        var $this	= $(this);
		var prev	= current;
		$('#navigation ul li.selected').next().addClass('selected');
		$('#navigation ul li.selected').prev().removeClass('selected');
		current = $('#navigation ul li.selected').index() + 1;				
        $('#steps').stop().animate({   marginLeft: '-' + widths[current-1]* 1.027 + 'px'  }, 500, function(){
			if(current == fieldsetCount)

			$('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();	
        var $this	= $(this);
		var prev	= current;
		$('#navigation ul li.selected').prev().addClass('selected');
		$('#navigation ul li.selected').next().removeClass('selected');
		current = $('#navigation ul li.selected').index() - 1;				
        $('#steps').stop().animate({   marginLeft: '-' + widths[current+1]* 1.027 + 'px'  }, 500, function(){
			if(current == fieldsetCount)

			$('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();	
	clicking on the tab (on the last input of each fieldset), makes the form
	slide to the next step
	$('#formElem > fieldset').each(function(){
		var $fieldset = $(this);

			if (e.which == 9){
				$('#navigation li:nth-child(' + (parseInt(current)+1) + ') a').click();
				/* force the blur for validation */
	validates errors on all the fieldsets
	records if the Form has errors in $('#formElem').data()
	function validateSteps(){
		var FormErrors = false;
		for(var i = 1; i < fieldsetCount; ++i){
			var error = validateStep(i);
			if(error == -1)
				FormErrors = true;
	validates one fieldset
	and returns -1 if errors found, or 1 if not
	function validateStep(step){
		if(step == fieldsetCount) return;
		var error = 1;
		var hasError = false;
		$('#formElem').children(':nth-child('+ parseInt(step) +')').find(':input:not(button)').each(function(){
			var $this 		= $(this);
			var valueLength = jQuery.trim($this.val()).length;
			if(valueLength == ''){
				hasError = true;
				//$this.css('list-style','url(images/tick.png) inside');
		var $link = $('#navigation li:nth-child(' + parseInt(step) + ') a');
		var valclass = 'checked';
			error = -1;
			valclass = 'error';
		$('<span class="'+valclass+'"></span>').insertAfter($link);
		return error;
	if there are errors don't allow the user to submit
			alert('Please correct the errors in the Form');
			return false;
Updated 3-Oct-13 2:33am

1 solution


Posting only a code block and expecting answers from our side is a very bad idea.


Please explain the requirement and scenario. We should know what exactly you are trying to achieve.


Next thing is - describe what you have tried to achieve the task.
If you are facing issues in the current code, then explain where exactly it is happening.


Use FireBug Console window (in FireFox) or other Developer tools of Browsers, to check all the client-side issues present in your code and try to resolve all of them.
[no name] 3-Oct-13 8:10am
I'm sorry if i could not explain well my question,Actually i'm not very good in Jquery Code and Css, I'm C# programer.
Well i try to explain what i want to do ,
Here is link of Jquery Slidng form ,[^]
I'm using this tutorial to make sliding form in my page .
as you can see there are only 5 tabs in this plugin which is sliding by click.

So now i want put 10 more extra tabs and slid those form too.
My question is: Is i need to change some thing in Jquery code OR CSS for Add extra tabs????? give me trick please.
Okay, let me check. You want to add more tabs, right?
[no name] 3-Oct-13 8:17am
Yes Right i want add more tabs :)
[no name] 3-Oct-13 8:23am
i want add more tabs with form containing different fields(texbox,gridview etc ).
Okay I found the trick. You just need to add one new fieldset and navigation li.

I have added one like that and uploaded at - Fancy Sliding Form with 6 Tabs[^]

You can download and check how it is working.
[no name] 3-Oct-13 9:55am
1 or 2 also can add but When i Add 10 then its not show form under tabs. i did this before in the way as you did. But i'm going add 10 more tabs .
[no name] 3-Oct-13 10:05am
If i edit direct index files ,its okay we can add as many as we want. But in My Application i've change the css and Jquery of this demo,I make its custom,
i really can't understand why its not showing page under Tabs by click in my Application.
If you have modified the files, then there must be some css and javaScript issues.

You can check FireBug console Window, if there are any errors or not.
[no name] 3-Oct-13 10:41am
Well i Check This indeed
Okay. Can you upload the project somewhere and give me the link?
I can't make out...

What are the values of "Security Key:", "User Name" and "Password"?
[no name] 3-Oct-13 11:22am
I hope you'll not update or delete any record haha LOL . Thanks .
[no name] 3-Oct-13 10:50am
I check thats , there are some Css files Color red and 404
Not Found , this error..what mean this ??
That means the css file path referenced on your html file can't be found.

Please cross check if they are at the right path or not.
[no name] 3-Oct-13 11:26am
ITs at right path,working well. just red many files, I think broswer issue mabye.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900