Click here to Skip to main content
12,356,774 members (63,877 online)
Rate this:
 
Please Sign up or sign in to vote.
See more: ASP.NET
I'm asp.net 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();		
		$('#step').css('height','auto');
		
    });
	$('#step').width(stepsWidth);
	
	$('#pd').click(function(){
			$('#step').css('height','auto');
	});
	
	
	/* 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');	                
    	}else{
			name.css('list-style', 'url(../images/tick.png) inside');
	    }
	});
	
	
	
	$('.selectBox ul li').click(function(){
	    alert("abc");
//	    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');
//	    }
	});
    
 

	$('#formElem').children(':first').find('.city').focus();
	
	$('#navigation').show();
	
    $('#navigation a').bind('click',function(e){
		var $this	= $(this);
		var prev	= current;
		$this.closest('ul').find('li').removeClass('selected');
        $this.parent().addClass('selected');
						
		current = $this.parent().index() + 1;
		
        $('#steps').stop().animate({
            marginLeft: '-' + widths[current-1]* 1.027 + 'px'
        },500,function(){
					
			if(current == fieldsetCount)
				validateSteps();
 
			else
				validateStep(prev);
			$('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();	
		});
        e.preventDefault();
    });
    
    $('.next').bind('click',function(e){
        var $this	= $(this);
		var prev	= current;
		
		$('#navigation ul li.selected').next().addClass('selected');
		$('#navigation ul li.selected').prev().removeClass('selected');
        
        //$this.parent().addClass('selected');
		current = $('#navigation ul li.selected').index() + 1;				
		
		
        $('#steps').stop().animate({   marginLeft: '-' + widths[current-1]* 1.027 + 'px'  }, 500, function(){
					
			if(current == fieldsetCount)
				validateSteps();
 
			else
				validateStep(prev);
			$('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();	
		});
        e.preventDefault();
    });
    
    $('.prev').bind('click',function(e){
        var $this	= $(this);
		var prev	= current;
		
		$('#navigation ul li.selected').prev().addClass('selected');
		$('#navigation ul li.selected').next().removeClass('selected');
        
        //$this.parent().addClass('selected');
		current = $('#navigation ul li.selected').index() - 1;				
		
		
        $('#steps').stop().animate({   marginLeft: '-' + widths[current+1]* 1.027 + 'px'  }, 500, function(){
					
			if(current == fieldsetCount)
				validateSteps();
 
			else
				validateStep(prev);
			$('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();	
		});
        e.preventDefault();
    });
	
	/*
	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);
 
		$fieldset.children(':last').find(':input').keydown(function(e){
			if (e.which == 9){
				$('#navigation li:nth-child(' + (parseInt(current)+1) + ') a').click();
				/* force the blur for validation */
				$(this).blur();
				
				e.preventDefault();
			}
		});
	});
	
	/*
	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;
		}
		$('#formElem').data('errors',FormErrors);	
	}
	
	/*
	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('background-color','#FFEDEF');
				
			}
			else
				$this.css('background-color','#FFFFFF');
				//$this.css('list-style','url(images/tick.png) inside');
				
		});
		var $link = $('#navigation li:nth-child(' + parseInt(step) + ') a');
		$link.parent().find('.error,.checked').remove();
		
		var valclass = 'checked';
		if(hasError){
			error = -1;
			valclass = 'error';
		}
		$('<span class="'+valclass+'"></span>').insertAfter($link);
		
		return error;
	}
	
	/*
	if there are errors don't allow the user to submit
	*/
	$('#registerButton').bind('click',function(){
		if($('#formElem').data('errors')){
			alert('Please correct the errors in the Form');
			return false;
		}	
	});
});
Posted 3-Oct-13 0:35am
Edited 3-Oct-13 2:33am
v5

1 solution

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

Solution 1

Problem

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

Requirements

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

Issue

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.

Suggestion

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.
  Permalink  
v2
Comments
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 ,
http://tympanus.net/Tutorials/FancySlidingForm/[^]
I'm using this tutorial to make sliding form in my asp.net 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 asp.net 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?
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:22am
   
I hope you'll not update or delete any record haha LOL . Thanks .
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: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
Web01 | 2.8.160621.1 | Last Updated 3 Oct 2013
Copyright © CodeProject, 1999-2016
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