Attach a footer to the bottom of the viewport when the content is shorter than it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<style>
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
#wrap > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
#footer > .container {
padding-left: 15px;
padding-right: 15px;
}
#navBar
{
background: transparent !important;
border: none;
box-shadow: none;
-webkit-box-shadow: none;
}
.navbar
{
min-height: 20px !important;
}
code {
font-size: 80%;
}
</style>
<title>Sticky Footer Navbar Template for Bootstrap and jQWidgets</title>
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.css" rel="stylesheet">
<!-- jQWidgets CSS -->
<link href="../../jqwidgets/styles/jqx.base.css" rel="stylesheet">
<link href="../../jqwidgets/styles/jqx.bootstrap.css" rel="stylesheet">
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
</div>
</div>
<div id="footer">
<div class="container">
<div style='margin-top: 18px;' id="buttonGroup">
<button>First Button</button>
<button>Second Button</button>
<button>Third Button</button>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<!-- jQWidgets JavaScript files -->
<script src="../../jqwidgets/jqxcore.js"></script>
<script src="../../jqwidgets/jqxbuttongroup.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#buttonGroup").jqxButtonGroup({mode: "checkbox", theme: "bootstrap", height: "100%"});
});
</script>
</body>
</html>
Attach a footer to the bottom of the viewport with a fixed navbar at the top
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<style>
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
#wrap > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
#footer > .container {
padding-left: 15px;
padding-right: 15px;
}
#navBar
{
background: transparent !important;
border: none;
box-shadow: none;
-webkit-box-shadow: none;
}
.navbar
{
min-height: 20px !important;
}
code {
font-size: 80%;
}
</style>
<title>Sticky Footer Navbar Template for Bootstrap and jQWidgets</title>
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.css" rel="stylesheet">
<!-- jQWidgets CSS -->
<link href="../../jqwidgets/styles/jqx.base.css" rel="stylesheet">
<link href="../../jqwidgets/styles/jqx.bootstrap.css" rel="stylesheet">
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div style="visibility: hidden;" id="navBar" >
<ul>
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li>
<a href="#">Dropdown</a>
<ul style="width: 250px;">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li type="separator"></li>
<li>Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer with fixed navbar</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<!-- jQWidgets JavaScript files -->
<script src="../../jqwidgets/jqxcore.js"></script>
<script src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#navBar").jqxMenu({autoSizeMainItems: true, theme: "bootstrap", showTopLevelArrows: true, width: '100%'});
$("#navBar").css("visibility", "visible");
});
</script>
</body>
</html>
Build around the jumbotron with a navbar and some basic grid columns
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Jumbotron Template for Bootstrap and jQWidgets</title>
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.css" rel="stylesheet">
<!-- jQWidgets CSS -->
<link href="../../jqwidgets/styles/jqx.base.css" rel="stylesheet">
<link href="../../jqwidgets/styles/jqx.bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<style>
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<form class="navbar-form navbar-right" role="form">
<div class="form-group">
<input style='min-height: 24px; margin-left: 5px;' id="input" type="text" placeholder="Email">
</div>
<div class="form-group">
<input style='min-height: 24px; margin-left: 5px;' id="passwordInput" type="password" placeholder="Password">
</div>
<button style='margin-left: 5px;' id="button" type="submit" class="jqx-success">Sign in</button>
</form>
</div>
<!--/.navbar-collapse -->
</div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary jqx-primary btn-lg" role="button">Learn more »</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© Company 2013</p>
</footer>
</div>
<!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<!-- jQWidgets JavaScript files -->
<script src="../../jqwidgets/jqxcore.js"></script>
<script src="../../jqwidgets/jqxbuttons.js"></script>
<script src="../../jqwidgets/jqxinput.js"></script>
<script src="../../jqwidgets/jqxpasswordinput.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#input").jqxInput({ theme: "bootstrap" });
$("#passwordInput").jqxPasswordInput({ theme: "bootstrap" });
$("#button").jqxButton({ theme: "bootstrap" });
$(".btn-default").jqxButton({ theme: "bootstrap" });
$(".btn-primary").jqxButton({ theme: "bootstrap" });
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>This demo illustrates how to use jQWidgets with Bootstrap. The responsive layout is built with Bootstrap, the widgets are by jQWidgets</title>
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.css" rel="stylesheet">
<!-- jQWidgets CSS -->
<link href="../../jqwidgets/styles/jqx.base.css" rel="stylesheet">
<link href="../../jqwidgets/styles/jqx.bootstrap.css" rel="stylesheet">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxvalidator.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmaskedinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
<style type="text/css">
body, html {
height: 100%;
padding: 0px;
margin: 0px;
width: 100%;
border: none;
overflow: hidden;
}
.required {
vertical-align: baseline;
color: red;
font-size: 10px;
}
.control-label {
white-space: nowrap;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
// set jQWidgets Theme to "Bootstrap"
$.jqx.theme = "bootstrap";
// create jqxTabs widget.
$("#tabs").jqxTabs({
width: "100%", height: "100%",
initTabContent: function (tab) {
// initialize the tabs.
switch (tab) {
case 0:
$('#sendButton').jqxButton({ height: 25 });
// create jqxInput widget.
$('input').jqxInput({ height: 22, width: '100%' });
$('input').css('margin-top', '5px');
// create countries array for the Countries ComboBox.
var countries = [
{ value: "AF", label: "Afghanistan" },
{ value: "AL", label: "Albania" },
{ value: "DZ", label: "Algeria" },
{ value: "AS", label: "American Samoa" },
{ value: "AD", label: "Andorra" },
{ value: "AO", label: "Angola" },
{ value: "AI", label: "Anguilla" },
{ value: "AQ", label: "Antarctica" },
{ value: "AG", label: "Antigua and Barbuda" },
{ value: "AR", label: "Argentina" },
{ value: "AM", label: "Armenia" },
{ value: "AW", label: "Aruba" },
{ value: "AU", label: "Australia" },
{ value: "AT", label: "Austria" },
{ value: "AZ", label: "Azerbaijan" },
{ value: "BS", label: "Bahamas" },
{ value: "BH", label: "Bahrain" },
{ value: "BD", label: "Bangladesh" },
{ value: "BB", label: "Barbados" },
{ value: "BY", label: "Belarus" },
{ value: "BE", label: "Belgium" },
{ value: "BZ", label: "Belize" },
{ value: "BJ", label: "Benin" },
{ value: "BM", label: "Bermuda" },
{ value: "BT", label: "Bhutan" },
{ value: "BO", label: "Bolivia" },
{ value: "BA", label: "Bosnia and Herzegovina" },
{ value: "BW", label: "Botswana" },
{ value: "BV", label: "Bouvet Island" },
{ value: "BR", label: "Brazil" },
{ value: "BN", label: "Brunei" },
{ value: "BG", label: "Bulgaria" },
{ value: "BF", label: "Burkina Faso" },
{ value: "BI", label: "Burundi" },
{ value: "KH", label: "Cambodia" },
{ value: "CM", label: "Cameroon" },
{ value: "CA", label: "Canada" },
{ value: "CV", label: "Cape Verde" },
{ value: "KY", label: "Cayman Islands" },
{ value: "CF", label: "Central African Republic" },
{ value: "TD", label: "Chad" },
{ value: "CL", label: "Chile" },
{ value: "CN", label: "China" },
{ value: "CX", label: "Christmas Island" },
{ value: "CC", label: "Cocos (Keeling) Islands" },
{ value: "CO", label: "Columbia" },
{ value: "KM", label: "Comoros" },
{ value: "CG", label: "Congo" },
{ value: "CK", label: "Cook Islands" },
{ value: "CR", label: "Costa Rica" },
{ value: "CI", label: "Cote D'Ivorie" },
{ value: "HR", label: "Croatia (Hrvatska)" },
{ value: "CU", label: "Cuba" },
{ value: "CY", label: "Cyprus" },
{ value: "CZ", label: "Czech Republic" },
{ value: "DK", label: "Denmark" },
{ value: "DJ", label: "Djibouti" },
{ value: "DM", label: "Dominica" },
{ value: "DO", label: "Dominican Republic" },
{ value: "TP", label: "East Timor" },
{ value: "EC", label: "Ecuador" },
{ value: "EG", label: "Egypt" },
{ value: "SV", label: "El Salvador" },
{ value: "GQ", label: "Equatorial Guinea" },
{ value: "ER", label: "Eritrea" },
{ value: "EE", label: "Estonia" },
{ value: "ET", label: "Ethiopia" },
{ value: "FO", label: "Faroe Islands" },
{ value: "FJ", label: "Fiji" },
{ value: "FI", label: "Finland" },
{ value: "FR", label: "France" },
{ value: "GF", label: "French Guinea" },
{ value: "PF", label: "French Polynesia" },
{ value: "GA", label: "Gabon" },
{ value: "GM", label: "Gambia" },
{ value: "GE", label: "Georgia" },
{ value: "DE", label: "Germany" },
{ value: "GH", label: "Ghana" },
{ value: "GI", label: "Gibraltar" },
{ value: "GR", label: "Greece" },
{ value: "GL", label: "Greenland" },
{ value: "GD", label: "Grenada" },
{ value: "GP", label: "Guadeloupe" },
{ value: "GU", label: "Guam" },
{ value: "GT", label: "Guatemala" },
{ value: "GN", label: "Guinea" },
{ value: "GW", label: "Guinea-Bissau" },
{ value: "GY", label: "Guyana" },
{ value: "HT", label: "Haiti" },
{ value: "HN", label: "Honduras" },
{ value: "HK", label: "Hong Kong" },
{ value: "HU", label: "Hungary" },
{ value: "IS", label: "Iceland" },
{ value: "IN", label: "India" },
{ value: "ID", label: "Indonesia" },
{ value: "IR", label: "Iran" },
{ value: "IQ", label: "Iraq" },
{ value: "IE", label: "Ireland" },
{ value: "IL", label: "Israel" },
{ value: "IT", label: "Italy" },
{ value: "JM", label: "Jamaica" },
{ value: "JP", label: "Japan" },
{ value: "JO", label: "Jordan" },
{ value: "KZ", label: "Kazakhstan" },
{ value: "KE", label: "Kenya" },
{ value: "KI", label: "Kiribati" },
{ value: "KW", label: "Kuwait" },
{ value: "KG", label: "Kyrgyzstan" },
{ value: "LA", label: "Laos" },
{ value: "LV", label: "Latvia" },
{ value: "LB", label: "Lebanon" },
{ value: "LS", label: "Lesotho" },
{ value: "LR", label: "Liberia" },
{ value: "LY", label: "Libya" },
{ value: "LI", label: "Liechtenstein" },
{ value: "LT", label: "Lithuania" },
{ value: "LU", label: "Luxembourg" },
{ value: "MO", label: "Macau" },
{ value: "MK", label: "Macedonia" },
{ value: "MG", label: "Madagascar" },
{ value: "MW", label: "Malawi" },
{ value: "MY", label: "Malaysia" },
{ value: "MV", label: "Maldives" },
{ value: "ML", label: "Mali" },
{ value: "MT", label: "Malta" },
{ value: "MH", label: "Marshall Islands" },
{ value: "MQ", label: "Martinique" },
{ value: "MR", label: "Mauritania" },
{ value: "MU", label: "Mauritius" },
{ value: "YT", label: "Mayotte" },
{ value: "MX", label: "Mexico" },
{ value: "FM", label: "Micronesia" },
{ value: "MD", label: "Moldova" },
{ value: "MC", label: "Monaco" },
{ value: "MN", label: "Mongolia" },
{ value: "MS", label: "Montserrat" },
{ value: "MA", label: "Morocco" },
{ value: "MZ", label: "Mozambique" },
{ value: "MM", label: "Myanmar (Burma)" },
{ value: "NA", label: "Namibia" },
{ value: "NR", label: "Nauru" },
{ value: "NP", label: "Nepal" },
{ value: "NL", label: "Netherlands" },
{ value: "AN", label: "Netherlands Antilles" },
{ value: "NC", label: "New Caledonia" },
{ value: "NZ", label: "New Zealand" },
{ value: "NI", label: "Nicaragua" },
{ value: "NE", label: "Niger" },
{ value: "NG", label: "Nigeria" },
{ value: "NU", label: "Niue" },
{ value: "NF", label: "Norfolk Island" },
{ value: "KP", label: "North Korea" },
{ value: "NO", label: "Norway" },
{ value: "OM", label: "Oman" },
{ value: "PK", label: "Pakistan" },
{ value: "PW", label: "Palau" },
{ value: "PA", label: "Panama" },
{ value: "PG", label: "Papua New Guinea" },
{ value: "PY", label: "Paraguay" },
{ value: "PE", label: "Peru" },
{ value: "PH", label: "Philippines" },
{ value: "PN", label: "Pitcairn" },
{ value: "PL", label: "Poland" },
{ value: "PT", label: "Portugal" },
{ value: "PR", label: "Puerto Rico" },
{ value: "QA", label: "Qatar" },
{ value: "RE", label: "Reunion" },
{ value: "RO", label: "Romania" },
{ value: "RU", label: "Russia" },
{ value: "RW", label: "Rwanda" },
{ value: "SH", label: "Saint Helena" },
{ value: "KN", label: "Saint Kitts and Nevis" },
{ value: "LC", label: "Saint Lucia" },
{ value: "SM", label: "San Marino" },
{ value: "SA", label: "Saudi Arabia" },
{ value: "SN", label: "Senegal" },
{ value: "SC", label: "Seychelles" },
{ value: "SL", label: "Sierra Leone" },
{ value: "SG", label: "Singapore" },
{ value: "SK", label: "Slovak Republic" },
{ value: "SI", label: "Slovenia" },
{ value: "SB", label: "Solomon Islands" },
{ value: "SO", label: "Somalia" },
{ value: "ZA", label: "South Africa" },
{ value: "GS", label: "South Georgia" },
{ value: "KR", label: "South Korea" },
{ value: "ES", label: "Spain" },
{ value: "LK", label: "Sri Lanka" },
{ value: "SD", label: "Sudan" },
{ value: "SR", label: "Suriname" },
{ value: "SZ", label: "Swaziland" },
{ value: "SE", label: "Sweden" },
{ value: "CH", label: "Switzerland" },
{ value: "SY", label: "Syria" },
{ value: "TW", label: "Taiwan" },
{ value: "TJ", label: "Tajikistan" },
{ value: "TZ", label: "Tanzania" },
{ value: "TH", label: "Thailand" },
{ value: "TG", label: "Togo" },
{ value: "TK", label: "Tokelau" },
{ value: "TO", label: "Tonga" },
{ value: "TT", label: "Trinidad and Tobago" },
{ value: "TN", label: "Tunisia" },
{ value: "TR", label: "Turkey" },
{ value: "TM", label: "Turkmenistan" },
{ value: "TC", label: "Turks and Caicos Islands" },
{ value: "TV", label: "Tuvalu" },
{ value: "UG", label: "Uganda" },
{ value: "UA", label: "Ukraine" },
{ value: "AE", label: "United Arab Emirates" },
{ value: "UK", label: "United Kingdom" },
{ value: "US", label: "United States" },
{ value: "UY", label: "Uruguay" },
{ value: "UZ", label: "Uzbekistan" },
{ value: "VU", label: "Vanuatu" },
{ value: "VA", label: "Vatican City (Holy See)" },
{ value: "VE", label: "Venezuela" },
{ value: "VN", label: "Vietnam" },
{ value: "VG", label: "Virgin Islands (British)" },
{ value: "VI", label: "Virgin Islands (US)" },
{ value: "WF", label: "Wallis and Futuna Islands" },
{ value: "EH", label: "Western Sahara" },
{ value: "WS", label: "Western Samoa" },
{ value: "YE", label: "Yemen" },
{ value: "YU", label: "Yugoslavia" },
{ value: "ZM", label: "Zambia" },
{ value: "ZW", label: "Zimbabwe" }
];
// create Countries ComboBox.
$("#billingCountries").jqxComboBox({ enableBrowserBoundsDetection: true, promptText: "Select a Country:", source: countries, height: 22, width: '100%' });
// create Accept Terms Checkbox.
$("#acceptTerms").jqxCheckBox({ width: '100%' });
// create the Birth Date Calendar.
$("#birthDate").jqxDateTimeInput({ enableBrowserBoundsDetection: true, width: '100%', height: 24 });
// create the Cart Type ComboBox.
var cardTypes = [{ value: "visa", label: "Visa" }, { value: "masterCard", label: "MasterCard" }, { value: "americanExpress", label: "American Express" }, { value: "discover", label: "Discover" }];
$("#cardType").jqxComboBox({ enableBrowserBoundsDetection: true, selectedIndex: 0, autoDropDownHeight: true, promptText: "Card Type:", source: cardTypes, width: '100%', height: 22 });
var months = [
{ value: "01", label: "01 - January" },
{ value: "02", label: "02 - February" },
{ value: "03", label: "03 - March" },
{ value: "04", label: "04 - April" },
{ value: "05", label: "05 - May" },
{ value: "06", label: "06 - June" },
{ value: "07", label: "07 - July" },
{ value: "08", label: "08 - August" },
{ value: "09", label: "09 - September" },
{ value: "10", label: "10 - October" },
{ value: "11", label: "11 - November" },
{ value: "12", label: "12 - December" }
];
var years = [
{ value: "2014", label: "2014" },
{ value: "2015", label: "2015" },
{ value: "2016", label: "2016" },
{ value: "2017", label: "2017" },
{ value: "2018", label: "2018" },
{ value: "2019", label: "2019" },
{ value: "2020", label: "2020" }
];
// Create Expiration Date & Year ComboBoxes.
$("#expirationDate").jqxComboBox({ enableBrowserBoundsDetection: true, source: months, selectedIndex: 0, height: 22, width: '100%' });
$("#expirationYear").jqxComboBox({ enableBrowserBoundsDetection: true, source: years, autoDropDownHeight: true, selectedIndex: 0, height: 22, width: '100%' });
// Create the Form Validator.
$('#form').jqxValidator({
hintType: 'label',
rules: [
{ input: '#firstName', message: 'First Name is required!', action: 'keyup, blur', rule: 'required' },
{ input: '#lastName', message: 'Last Name is required!', action: 'keyup, blur', rule: 'required' },
{ input: '#billingAddress', message: 'Billing Address is required!', action: 'keyup, blur', rule: 'required' },
{ input: '#billingCity', message: 'Billing City is required!', action: 'keyup, blur', rule: 'required' },
{ input: '#billingZipCode', message: 'Zip Code is required!', action: 'keyup, blur', rule: 'required' },
{ input: '#cardNumber', message: 'Card Number is required!', action: 'keyup, blur', rule: 'required' },
{ input: '#securityCode', message: 'Security Code is required!', action: 'keyup, blur', rule: 'required' },
{ input: '#acceptTerms', message: 'You need to accept the terms!', action: 'keyup, blur', rule: 'required' }
]
});
// Validate form.
$("#sendButton").click(function () {
var validationResult = function (isValid) {
if (isValid) {
$("#form").submit();
}
}
$('#form').jqxValidator('validate', validationResult);
});
break;
case 1:
// prepare chart data as an array
var sampleData = [
{ Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
{ Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
{ Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
];
// prepare jqxChart settings
var settings = {
borderLineWidth: 0,
title: "Fitness & exercise weekly scorecard",
description: "Time spent in vigorous exercise by activity",
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 30, top: 0, right: 0, bottom: 10 },
source: sampleData,
categoryAxis:
{
text: 'Category Axis',
textRotationAngle: 0,
dataField: 'Day',
showTickMarks: true,
tickMarksInterval: 1,
tickMarksColor: '#888888',
unitInterval: 1,
showGridLines: false,
gridLinesInterval: 1,
gridLinesColor: '#888888',
axisSize: 'auto'
},
colorScheme: 'scheme05',
seriesGroups:
[
{
type: 'splinearea',
valueAxis:
{
unitInterval: 20,
minValue: 0,
maxValue: 100,
displayValueAxis: false,
description: 'Goal in minutes',
axisSize: 'auto',
tickMarksColor: '#888888'
},
series: [
{ dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 }
]
},
{
type: 'stackedcolumn',
columnsGapPercent: 100,
seriesGapPercent: 5,
valueAxis:
{
unitInterval: 20,
minValue: 0,
maxValue: 100,
displayValueAxis: true,
description: 'Time in minutes',
axisSize: 'auto',
tickMarksColor: '#888888',
gridLinesColor: '#777777'
},
series: [
{ dataField: 'Running', displayText: 'Running' },
{ dataField: 'Swimming', displayText: 'Swimming' },
{ dataField: 'Cycling', displayText: 'Cycling' }
]
}
]
};
// setup the chart
$('#chart').jqxChart(settings);
break;
case 2:
// prepare DataTable data.
var data = new Array();
var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne"];
var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth"];
var titles = ["Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager", "Sales Representative", "Sales Representative", "Inside Sales Coordinator", "Sales Representative"];
var k = 0;
for (var i = 0; i < firstNames.length; i++) {
var row = {};
row["firstname"] = firstNames[k];
row["lastname"] = lastNames[k];
row["title"] = titles[k];
data[i] = row;
k++;
}
var source =
{
localData: data,
dataType: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create DataTable.
$("#dataTable").jqxDataTable(
{
width: '100%',
height: '100%',
source: dataAdapter,
sortable: true,
columns: [
{ text: 'First Name', dataField: 'firstname', width: '30%' },
{ text: 'Last Name', dataField: 'lastname', width: '30%' },
{ text: 'Title', dataField: 'title' },
]
});
break;
}
}
});
});
</script>
<div style="border: none;" id="tabs">
<ul style="margin-left: 30px;">
<li>Billing Information</li>
<li>Fitness & Exercise</li>
<li>Employee Details</li>
</ul>
<div style="overflow-x: hidden; border: none;">
<form class="navbar-form" id="form">
<div class="form-horizontal">
<h2>Enter your Billing Information</h2>
</div>
<div class="form-horizontal col-sm-6">
<div>
<label class="col-sm-4 control-label" for="firstname">First Name</label>
<div class="col-sm-8">
<input placeholder="First Name" id="firstName" name="firstName" value="" />
</div>
</div>
<div>
<label class="col-sm-4 control-label" for="middleInitial">Middle Name</label>
<div class="col-sm-8">
<input placeholder="MI" name="middleInitial" value="" />
</div>
</div>
<div>
<label class="col-sm-4 control-label" for="lastName">Last Name</label>
<div class="col-sm-8">
<input placeholder="Last Name" id="lastName" name="lastName" value="" />
</div>
</div>
<div>
<label class="col-sm-4 control-label" for="birthDate">Birth Date</label>
<div class="col-sm-8">
<div style="margin-top: 5px;" id="birthDate" name="birthDate"></div>
</div>
</div>
</div>
<div class="form-horizontal col-sm-6">
<div>
<label class="col-sm-4 control-label" for="billingAddress">Address</label>
<div class="col-sm-8">
<input name="billingAddress" id="billingAddress" placeholder="Street Address" />
</div>
</div>
<div>
<label class="col-sm-4 control-label" for="billingCity">City</label>
<div class="col-sm-8">
<input name="billingCity" id="billingCity" placeholder="City" maxlength="15" />
</div>
</div>
<div>
<label class="col-sm-4 control-label" for="billingZipCode">Postal Code</label>
<div class="col-sm-8">
<input name="billingZipCode" id="billingZipCode" placeholder="Postal / Zip Code" maxlength="5" />
</div>
</div>
<div>
<label class="col-sm-4 control-label" for="billingCountries">Country</label>
<div class="col-sm-8">
<div style="margin-top: 5px;" id="billingCountries"></div>
</div>
</div>
</div>
<div class="form-horizontal col-sm-6">
<div>
<label class="col-sm-4 control-label" for="cardNumber">Card Number</label>
<div class="col-sm-8">
<input placeholder="Card Number" id="cardNumber" name="cardNumber" maxlength="16" />
</div>
</div>
<div>
<label class="col-sm-4 control-label" for="cardType">Card Type</label>
<div class="col-sm-8">
<div style="margin-top: 5px;" id="cardType"></div>
</div>
</div>
<div>
<label class="col-sm-4 control-label" for="expirationDate">Expiration Date</label>
<div class="col-sm-8">
<div style="margin-top: 5px;" name="expirationDate" id="expirationDate"></div>
</div>
</div>
<div>
<label class="col-sm-4 control-label" for="expirationYear">Expiration Year</label>
<div class="col-sm-8">
<div style="margin-top: 5px;" name="expirationYear" id="expirationYear"></div>
</div>
</div>
<div>
<label class="col-sm-4 control-label" for="securityCode">Security Code</label>
<div class="col-sm-8">
<input placeholder="Security Code" id="securityCode" name="securityCode" maxlength="4" />
</div>
</div>
<div>
<div class="col-sm-4">
</div>
<div class="col-sm-6">
<div style="margin-top: 15px;" id="acceptTerms" name="acceptTerms">I agree to the Terms and Conditions</div>
</div>
<div class="col-sm-2">
</div>
</div>
<div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
<button style="margin-top: 15px;" id="sendButton" type="button">Checkout</button>
</div>
</div>
</div>
</form>
</div>
<div style="overflow: hidden; border: none;">
<div id='chart' style="width: 100%; height: 100%">
</div>
</div>
<div>
<div style="border: none;" id='dataTable'></div>
</div>
</div>
</body>
</html>