Hi everyone,
I’m trying to implement the code found at the following url:
http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar
I followed the instructions and my form code can be found below, the css below that and the js below that again.
The image below is what I see when I preview the page:
The first problem is that there are no connectors between the boxes like in the example in the above mentioned url and secondly when I click the next button, instead of progressing to the next field set, it stays on the same field set, the number 8 box gets highlighted and the next button disappears. Below is what it looks like:
I can’t work out where I’ve gone wrong and wondered if anyone could help pinpoint the problem. If any extra information is needed, just let me know.
I’d really be grateful for any help.
Thanks in advance.
<!DOCTYPE html><html lang="en" class="no-js"><!-- InstanceBegin template="/Templates/Default.dwt" codeOutsideHTMLIsLocked="false" -->
<!--<![endif]-->
<head>
<!-- InstanceBeginEditable name="doctitle" --><title>Join - Create Account</title><!-- InstanceEndEditable --><!-- InstanceBeginEditable name="head" -->
<link rel="stylesheet" href="/_assets/css/styles.css" />
<script type="text/javascript">
$(function () {
// redirect to non-secure version of page
$("a").each(function (idx) {
var href = $(this).attr("href");
if (href.indexOf("http") == -1 && href.indexOf("https") == -1) {
href = '{module_webapps,0,i,17464 template="/_settings/site-url"}' + href;
$(this).attr("href", href);
}
});
});
</script>
<script>
$(document).ready(function() {
$('#creditCardType , #payOffline').hide();
$('.creditCard').click(function() {
$('#creditCardType').toggle();
$('#payOffline').hide();
});
$('.payPal').click(function() {
$('#creditCardType').hide();
$('#payOffline').hide();
});
$('.payOffline').click(function() {
$('#payOffline').toggle();
$('#creditCardType').hide();
});
});
</script>
<script type="text/javascript">
$(function(){
var pfull = $(".meter").data("pfull");
$(".meter").css("width",pfull)
});
</script>
<!-- InstanceEndEditable -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<link rel="shortcut icon" href="/favicon.png" />
<link rel="apple-touch-icon" href="/home_badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="/home_badge_64.png" />
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:400,300,500,700" />
<link rel="stylesheet" href="/_assets/css/normalize.css" />
<link rel="stylesheet" href="/_assets/css/foundation.css" />
<link rel="stylesheet" href="/_assets/css/styles.css" />
<script src="/_assets/js/custom.modernizr.js"></script>
<script src="/_assets/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
// Will retun 1 or 0 based on if user is logged in(1) or not logged in(0)
var _isLoggedIn = !!parseInt("{module_isloggedin}");
</script>
<!--[if IE 8]> <link rel="stylesheet" href="/_assets/css/ie8.css"> <![endif]-->
</head>
<body class="antialiased">
{module_contentholder, name="_Template - Header"}
<!-- //header.row -->
<div class="omega delta">
<div class="row">
<div class="columns large-9" role="main">
<!-- InstanceBeginEditable name="ContentArea" -->
<h1>Become a Member</h1>
<div class="row">
<div class="columns large-4">
</div>
<div class="columns large-8" style="background-color: #e4dab8;">
<div class="signup form">
<h4 style="text-align: center; color: white;">Membership Application Form</h4>
<form id="msform" name="catwebformform54637" method="post" onsubmit="return checkWholeForm54637(this)" enctype="multipart/form-data" action="/FormProcessv2.aspx?WebFormID=70776&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}">
<p style="text-align: left;"> <span class="req">*</span> Required</p>
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Account Setup </li>
<li> Personal Details </li>
<li> Home Address </li>
<li> Work Address </li>
<li> PO Box Address </li>
<li> DX Address </li>
<li> Billing Address </li>
<li> Payment Details </li>
</ul>
<fieldset class="step1">
<legend class="fs-title">Account Setup</legend>
<table class="webform" cellspacing="0" cellpadding="2" border="0">
<tbody>
<tr>
<td><label for="EmailAddress">Email Address <span class="req">*</span></label><br />
<input type="text" name="EmailAddress" id="EmailAddress" class="cat_textbox" placeholder="Email" maxlength="255" /> </td>
</tr>
<tr>
<td><label for="Password">Password <span class="req">*</span></label><br />
<input type="password" name="Password" id="Password" class="cat_textbox" maxlength="255" autocomplete="off" /></td>
</tr>
<tr>
<td><label for="PasswordConfirm">Confirm Password <span class="req">*</span></label><br />
<input type="password" name="PasswordConfirm" id="PasswordConfirm" class="cat_textbox" maxlength="255" autocomplete="off" /></td>
</tr>
<tr>
<td><input type="button" name="next" id="catwebformbutton" value="Next" class="next action-button" /></td>
</tr>
</tbody>
</table>
</fieldset>
<fieldset class="step2">
<legend class="fs-title">Personal Details</legend>
<table class="webform" cellspacing="0" cellpadding="2" border="0">
<tbody>
<tr>
<td><label for="Title">Title</label><br />
<select name="Title" id="Title" class="cat_dropdown_smaller">
<option value="913142">Dr</option>
<option value="913141">Miss</option>
<option value="913138" selected="selected">Mr</option>
<option value="913139">Mrs</option>
<option value="913140">Ms</option>
</select></td>
</tr>
<tr>
<td><label for="FirstName">First Name <span class="req">*</span></label><br />
<input type="text" name="FirstName" id="FirstName" class="cat_textbox" maxlength="255" /> </td>
</tr>
<tr>
<td><label for="CAT_Custom_329121_128444">Middle Name</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_329121_128444" id="CAT_Custom_329121_128444" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="LastName">Last Name <span class="req">*</span></label><br />
<input type="text" name="LastName" id="LastName" class="cat_textbox" maxlength="255" /> </td>
</tr>
<tr>
<td><label for="CAT_Custom_329249_128500">Profession</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_329249_128500" id="CAT_Custom_329249_128500" class="cat_textbox" /></td>
</tr>
<tr>
<td><input type="button" name="previous" id="catwebformbutton" value="Previous" class="previous action-button" /> <input type="button" name="next" id="catwebformbutton" value="Next" class="next action-button" />
</td>
</tr>
</tbody>
</table>
</fieldset>
<fieldset class="step3">
<legend class="fs-title">Home Address </legend>
<table class="webform" cellspacing="0" cellpadding="2" border="0">
<tbody>
<tr>
<td><label for="HomeAddress">Home Address </label><br />
<input type="text" name="HomeAddress" id="HomeAddress" class="cat_textbox" maxlength="500" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_329119_128443">Home Address2</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_329119_128443" id="CAT_Custom_329119_128443" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="HomeCity">City <span class="req">*</span></label><br />
<input type="text" name="HomeCity" id="HomeCity" class="cat_textbox" maxlength="255" /></td>
</tr>
<tr>
<td><label for="HomeState">State <span class="req">*</span></label><br />
<input type="text" name="HomeState" id="HomeState" class="cat_textbox" maxlength="255" /></td>
</tr>
<tr>
<td><label for="HomeZip">Zipcode/Postcode <span class="req">*</span></label><br />
<input type="text" name="HomeZip" id="HomeZip" class="cat_textbox" maxlength="255" /></td>
</tr>
<tr>
<td><label for="HomeCountry">Country <span class="req">*</span></label><br />
<select name="HomeCountry" id="HomeCountry" class="cat_dropdown">
<option value=" ">-- Select Country --</option>
<option value="AF">AFGHANISTAN</option>
<option value="AX">ALAND ISLANDS</option>
<option value="AL">ALBANIA</option>
<option value="DZ">ALGERIA</option>
<option value="AS">AMERICAN SAMOA</option>
<option value="AD">ANDORRA</option>
<option value="AO">ANGOLA</option>
</select></td>
</tr>
<tr>
<td><label for="HomePhone">Home Phone Number </label><br />
<input type="text" name="HomePhone" id="HomePhone" class="cat_textbox" maxlength="255" /></td>
</tr>
<tr>
<td><input type="button" name="previous" id="catwebformbutton" value="Previous" class="previous action-button" /> <input type="button" name="next" id="catwebformbutton" value="Next" class="next action-button" />
</td>
</tr>
</tbody>
</table>
</fieldset>
<fieldset class="step4">
<legend class="fs-title">Work Address <span class="req">*</span></legend>
<table class="webform" cellspacing="0" cellpadding="2" border="0">
<tbody>
<tr>
<td><label for="Company">Company Name</label><br />
<input type="text" name="Company" id="Company" class="cat_textbox" maxlength="255" /></td>
</tr>
<tr>
<td><label for="WorkPhone">Work Phone Number</label><br />
<input type="text" name="WorkPhone" id="WorkPhone" class="cat_textbox" maxlength="255" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_329240_128496">Work Phone Number2</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_329240_128496" id="CAT_Custom_329240_128496" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CellPhone">Mobile Phone Number <span class="req">*</span></label><br />
<input type="text" name="CellPhone" id="CellPhone" class="cat_textbox" maxlength="255" /></td>
</tr>
<tr>
<td><label for="WorkAddress">Work Address <span class="req">*</span></label><br />
<input type="text" name="WorkAddress" id="WorkAddress" class="cat_textbox" maxlength="500" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_329241_128497">Work Address2</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_329241_128497" id="CAT_Custom_329241_128497" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="WorkCity">Suburb <span class="req">*</span></label><br />
<input type="text" name="WorkCity" id="WorkCity" class="cat_textbox" maxlength="255" /></td>
</tr>
<tr>
<td><label for="WorkState">State <span class="req">*</span></label><br />
<input type="text" name="WorkState" id="WorkState" class="cat_textbox" maxlength="255" /></td>
</tr>
<tr>
<td><label for="WorkZip">Zipcode/Postcode <span class="req">*</span></label><br />
<input type="text" name="WorkZip" id="WorkZip" class="cat_textbox" maxlength="255" /></td>
</tr>
<tr>
<td><label for="WorkCountry">Country <span class="req">*</span></label><br />
<select name="WorkCountry" id="WorkCountry" class="cat_dropdown">
<option value=" ">-- Select Country --</option>
<option value="AF">AFGHANISTAN</option>
<option value="AX">ALAND ISLANDS</option>
<option value="AL">ALBANIA</option>
<option value="DZ">ALGERIA</option>
<option value="AS">AMERICAN SAMOA</option>
<option value="AD">ANDORRA</option>
<option value="AO">ANGOLA</option>
<option value="AI">ANGUILLA</option>
<option value="AQ">ANTARCTICA</option>
<option value="AG">ANTIGUA AND BARBUDA</option>
<option value="AR">ARGENTINA</option>
<option value="AM">ARMENIA</option>
</select></td>
</tr>
<tr>
<td><input type="button" name="previous" id="catwebformbutton" value="Previous" class="previous action-button" /> <input type="button" name="next" id="catwebformbutton" value="Next" class="next action-button" />
</td>
</tr>
</tbody>
</table>
</fieldset>
<fieldset class="step5">
<legend class="fs-title">PO Box Address</legend>
<table class="webform" cellspacing="0" cellpadding="2" border="0">
<tbody>
<tr>
<td><label for="CAT_Custom_329242_128498">PO Box</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_329242_128498" id="CAT_Custom_329242_128498" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_329243_128498">PO Box2</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_329243_128498" id="CAT_Custom_329243_128498" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_329244_128498">PO Box Suburb</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_329244_128498" id="CAT_Custom_329244_128498" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_329245_128498">PO Box State</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_329245_128498" id="CAT_Custom_329245_128498" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_329246_128498">PO Box Postcode</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_329246_128498" id="CAT_Custom_329246_128498" class="cat_textbox" /></td>
</tr>
<tr>
<td><input type="button" name="previous" id="catwebformbutton" value="Previous" class="previous action-button" /> <input type="button" name="next" id="catwebformbutton" value="Next" class="next action-button" />
</td>
</tr>
</tbody>
</table>
</fieldset>
<fieldset class="step6">
<legend class="fs-title">DX Address </legend>
<table class="webform" cellspacing="0" cellpadding="2" border="0">
<tbody>
<tr>
<td><label for="CAT_Custom_329247_128499">DX Address1</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_329247_128499" id="CAT_Custom_329247_128499" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_329248_128499">DX Address2</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_329248_128499" id="CAT_Custom_329248_128499" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_329250_128501">Preferred Contact Method</label><br />
<select name="CAT_Custom_329250_128501" id="CAT_Custom_329250_128501" class="cat_dropdown">
<option value=" ">-- Please select --</option>
<option value="Email">Email</option>
<option value="Home Address">Home Address</option>
<option value="Work Address">Work Address</option>
<option value="DX Address">DX Address</option>
</select></td>
</tr>
<tr>
<td><input type="button" name="previous" id="catwebformbutton" value="Previous" class="previous action-button" /> <input type="button" name="next" id="catwebformbutton" value="Next" class="next action-button" />
</td>
</tr>
</tbody>
</table>
<fieldset class="step7">
<legend class="fs-title">Billing Address </legend>
<table class="webform" cellspacing="0" cellpadding="2" border="0">
<tbody>
<tr>
<td><label for="CAT_Custom_329122_128445">Membership Type <span class="req">*</span></label><br />
<select name="CAT_Custom_329122_128445" id="CAT_Custom_329122_128445" class="cat_dropdown">
<option value=" ">-- Please select --</option>
<option value="Full Membership">Full Membership</option>
<option value="Associate Membership">Associate Membership</option>
<option value="Student Membership">Student Membership</option>
</select></td>
</tr>
<tr>
<td><label for="BillingAddress">Billing Address <span class="req">*</span></label><br />
<input type="text" name="BillingAddress" id="BillingAddress" class="cat_textbox" maxlength="500" /></td>
</tr>
<tr>
<td><label for="BillingCity">City <span class="req">*</span></label><br />
<input type="text" name="BillingCity" id="BillingCity" class="cat_textbox" maxlength="255" /></td>
</tr>
<tr>
<td><label for="BillingState">State <span class="req">*</span></label><br />
<input type="text" name="BillingState" id="BillingState" class="cat_textbox" maxlength="255" /></td>
</tr>
<tr>
<td><label for="BillingZip">Zipcode/Postcode <span class="req">*</span></label><br />
<input type="text" name="BillingZip" id="BillingZip" class="cat_textbox" maxlength="255" /></td>
</tr>
<tr>
<td><label for="BillingCountry">Country <span class="req">*</span></label><br />
<select name="BillingCountry" id="BillingCountry" class="cat_dropdown">
<option value=" ">-- Select Country --</option>
<option value="AF">AFGHANISTAN</option>
<option value="AX">ALAND ISLANDS</option>
<option value="AL">ALBANIA</option>
<option value="DZ">ALGERIA</option>
<option value="AS">AMERICAN SAMOA</option>
</select></td>
</tr>
<tr>
<td><input type="button" name="previous" id="catwebformbutton" value="Previous" class="previous action-button" /> <input type="button" name="next" id="catwebformbutton" value="Next" class="next action-button" />
</td>
</tr>
</tbody>
</table>
</fieldset>
<fieldset class="step8">
<legend class="fs-title">Payment Details</legend>
<table cellspacing="0" cellpadding="2" border="0" class="webform">
<tbody>
<tr>
<td><label>Payment Method <span class="req">*</span></label><br />
<p class="payPal close-space"><input checked="checked" type="radio" name="PaymentMethodType" id="PaymentMethodType_5" value="5" /> PayPal</p>
<p class="payOffline close-space"><input type="radio" name="PaymentMethodType" id="PaymentMethodType_3" value="3" /> Pay Offline</p>
<div id="payOffline">
<table style="margin: 0px; padding: 0px;">
<tbody>
<tr>
<td>
<p style="margin: 0px; padding: 0px;"> If you would like to pay offline, download this form.
</p>
</td>
</tr>
</tbody>
</table>
</div>
<p class="creditCard" style="margin: 0px; padding: 0px;"><input type="radio" name="PaymentMethodType" id="PaymentMethodType_1" value="1" /> Credit Card</p>
<div id="creditCardType" style="margin: 0px; padding: 0px;">
<table style="margin: 0px; padding: 0px;">
<tbody>
<tr>
<td><label for="CardName">Name on Card <span class="req">*</span></label><br />
<input type="text" name="CardName" id="CardName" class="cat_textbox" autocomplete="off" /></td>
</tr>
<tr>
<td><label for="CardNumber">Card Number <span class="req">*</span></label><br />
<input type="text" name="CardNumber" id="CardNumber" class="cat_textbox" autocomplete="off" /></td>
</tr>
<tr>
<td><label>Card Expiry <span class="req">*</span></label><br />
<select name="CardExpiryMonth" id="CardExpiryMonth" class="cat_dropdown_smaller">
<option value="01" selected="selected">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select><select name="CardExpiryYear" id="CardExpiryYear" class="cat_dropdown_smaller">
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015" selected="selected">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select></td>
</tr>
<tr>
<td><label for="CardType">Card Type <span class="req">*</span></label><br />
<select name="CardType" id="CardType" class="cat_dropdown">
<option value="1">Visa</option>
<option value="2">Mastercard</option>
</select></td>
</tr>
<tr>
<td><label for="CardCCV">CCV Number <span class="req">*</span></label><br />
<input type="text" name="CardCCV" id="CardCCV" class="cat_textbox" autocomplete="off" /></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td><label for="Amount">Amount <span class="req">*</span> <span id="constraint-300-label"></span></label>
<br />
<input type="text" name="Amount" id="Amount" class="cat_textbox" /></td>
</tr>
<tr>
<td><input type="button" name="previous" id="catwebformbutton" value="Previous" class="previous action-button" /> <input type="submit" name="Submit" id="catwebformbutton" value="Submit" class="submit action-button" />
</td>
</tr>
</tbody>
</table>
</fieldset>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>
<script type="text/javascript">
//<![CDATA[
var submitcount54637 = 0;
function checkWholeForm54637(theForm) {
var why = "";
if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name");
if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name");
if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value);
if (theForm.Password && theForm.PasswordConfirm) {
why += isEmpty(theForm.Password.value, "Password");
why += isEmpty(theForm.PasswordConfirm.value, "Confirm Password");
if (theForm.Password.value != theForm.PasswordConfirm.value) why += appendBreak("- Password and its confirmation do not match.");
if (theForm.Password.value.length < 6) why += appendBreak("- Password must be 6 characters or longer.");
}
if (theForm.HomeAddress) why += isEmpty(theForm.HomeAddress.value, "Home Address");
if (theForm.HomeCity) why += isEmpty(theForm.HomeCity.value, "Home City");
if (theForm.HomeState) why += isEmpty(theForm.HomeState.value, "Home State");
if (theForm.HomeZip) why += isEmpty(theForm.HomeZip.value, "Home Zipcode");
if (theForm.HomeCountry) why += checkDropdown(theForm.HomeCountry.value, "Home Country");
if (theForm.HomePhone) why += isEmpty(theForm.HomePhone.value, "Home Phone Number");
if (theForm.CellPhone) why += isEmpty(theForm.CellPhone.value, "Cell Phone Number");
if (theForm.WorkAddress) why += isEmpty(theForm.WorkAddress.value, "Work Address");
if (theForm.WorkCity) why += isEmpty(theForm.WorkCity.value, "Work City");
if (theForm.WorkState) why += isEmpty(theForm.WorkState.value, "Work State");
if (theForm.WorkZip) why += isEmpty(theForm.WorkZip.value, "Work Zipcode");
if (theForm.WorkCountry) why += checkDropdown(theForm.WorkCountry.value, "Work Country");
if (theForm.PaymentMethodType) why += checkSelected(theForm.PaymentMethodType, "Payment Method");
if (theForm.BillingAddress) why += isEmpty(theForm.BillingAddress.value, "Billing Address");
if (theForm.BillingCity) why += isEmpty(theForm.BillingCity.value, "Billing City");
if (theForm.BillingState) why += isEmpty(theForm.BillingState.value, "Billing State");
if (theForm.BillingZip) why += isEmpty(theForm.BillingZip.value, "");
if (theForm.BillingCountry) why += checkDropdown(theForm.BillingCountry.value, "Billing Country");
if (!theForm.PaymentMethodType || getRadioSelected(theForm.PaymentMethodType) == 1) {
if (theForm.CardName) why += isEmpty(theForm.CardName.value, "Name on Card");
if (theForm.CardNumber) why += isNumeric(theForm.CardNumber.value, "Card Number");
if (theForm.Amount) why += isCurrency(theForm.Amount.value, "Amount");
}
if (theForm.CAT_Custom_329122_128445) why += checkDropdown(theForm.CAT_Custom_329122_128445.value, "Membership Type");
if (why != "") {
alert(why);
return false;
}
if (submitcount54637 == 0) {
submitcount54637++;
theForm.submit();
return false;
} else {
alert("Form submission is in progress.");
return false;
}
}
//]]>
</script>
<!-- jQuery -->
<script src="http://thecodeplayer.com/uploads/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- jQuery easing plugin -->
<script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script>
<script src="/_assets/js/forms.js"></script>
</fieldset>
</form>
</div>
</div>
</div>
<!--<h1>Become a member</h1>
<div class="row">
<div class="columns large-4">
</body>
</html>-->
<!-- InstanceEndEditable -->
</div>
<div class="columns large-3" role="complementary">
<aside>
{module_contentholder, name="_aside - Search Form"}
{module_contentholder, name="_Form - Prayer Request"}
{module_adrotator,4868}
</aside>
</div>
</div>
<!-- //.row -->
</div>
<!-- //.omega -->
<footer role="contentinfo">
<div class="sigma">
<div class="row">
<div class="columns large-4">
{module_contentholder, name="_Template - Footer - About Us"}
</div>
<!-- //.columns.large-4 -->
<div class="columns large-4">
{module_contentholder, name="_Template - Footer - Newsletter"}
</div>
<!-- //.columns.large-4 -->
<div class="columns large-4">
{module_contentholder, name="_Template - Footer - Twitter Widget"}
</div>
<!-- //.columns.large-4 -->
</div>
<!-- //.row -->
</div>
<!-- //.sigma -->
<div class="row">
<div class="columns large-12">
{module_menu, version="2", menuId="644462", moduleTemplateGroup="Footer"}
</div>
<!-- //.columns.large-12 -->
</div>
<!-- //.row -->
</footer>
<!-- //footer -->
{module_contentholder, name="_Template - Scripts"}
<script type="text/javascript">
if (document.cookie && document.cookie.indexOf("CartID") < 1) {
document.getElementById('catCartSummary').style.display = "none";
}
</script>
</body>
<!-- InstanceEnd --></html>
/* ======= Membership Application From ======================= */
/*custom font
@import url(http://fonts.googleapis.com/css?family=Montserrat);*/
/*body {
font-family: montserrat, arial, verdana;
}*/
/*form styles*/
#msform {
width: 550px;
margin: 10px auto;
text-align: center;
position: relative;
}
#msform{padding:0 0 20px}
#msform label{display:block;text-align:left!important}
#msform label + br{display:none}
#msform fieldset.step1 {position:relative}
.columns.large-8{height:auto!important;}
#msform fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px 5px;
box-sizing: border-box;
width: 90%;
margin: 0 5%;
/*stacking fieldsets above each other*/
position: absolute;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
display: none;
}
#msform legend {
padding: 0;
margin: 0;
}
/*inputs
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}*/
/*buttons*/
#msform .action-button {
width: 100px;
background: #accdec;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #accdec;
}
/*headings*/
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #333;
margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: black;
text-transform: uppercase;
font-size: 9px;
width: 33.33%;
float: left;
position: relative;
padding-bottom: 10px;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 50px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after{
background: #accdec;
color: white;
}
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'transform': 'scale('+scale+')'});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".previous").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1-now) * 50)+"%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".submit").click(function(){
return false;
})