Click here to Skip to main content
12,892,320 members (45,054 online)
Rate this:
Please Sign up or sign in to vote.
See more: ASP.NET
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;
Posted 3-Oct-13 0:35am
Updated 3-Oct-13 2:33am

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1


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.
Tariq Mehmood 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.
Tadit Dash 3-Oct-13 8:13am
Okay, let me check. You want to add more tabs, right?
Tariq Mehmood 3-Oct-13 8:17am
Yes Right i want add more tabs :)
Tariq Mehmood 3-Oct-13 8:23am
i want add more tabs with form containing different fields(texbox,gridview etc ).
Tadit Dash 3-Oct-13 9:38am
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.
Tariq Mehmood 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 .
Tariq Mehmood 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.
Tadit Dash 3-Oct-13 10:30am
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.
Tariq Mehmood 3-Oct-13 10:41am
Well i Check This indeed
Tadit Dash 3-Oct-13 10:44am
Okay. Can you upload the project somewhere and give me the link?
Tariq Mehmood 3-Oct-13 10:50am
I check thats , there are some Css files Color red and 404
Not Found , this error..what mean this ??
Tadit Dash 3-Oct-13 10:55am
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.
Tariq Mehmood 3-Oct-13 11:22am
I hope you'll not update or delete any record haha LOL . Thanks .
Tadit Dash 3-Oct-13 11:26am
I can't make out...

What are the values of "Security Key:", "User Name" and "Password"?
Tariq Mehmood 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)

    Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web02 | 2.8.170424.1 | Last Updated 3 Oct 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100