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');
});
$('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");
});
$('#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');
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');
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();
});
$('#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();
$(this).blur();
e.preventDefault();
}
});
});
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);
}
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');
});
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;
}
$('#registerButton').bind('click',function(){
if($('#formElem').data('errors')){
alert('Please correct the errors in the Form');
return false;
}
});
});