Menu
I'm attempting to implement jquery-steps and for the most part it is going well. One issue I'm having is that the step tabs are not being fully responsive.
I'm doing a horizontal implementation. They resize with the window, but they do not stack as they do in your example so eventually I wind up with some very small, unreadable step tabs.
Unfortunately, all the examples on the developer site are on the same page, so trying to determine what css to use is a bit problematic.
Any help would be appreciated:
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width" />
<title>Page Title</title>
<link rel="stylesheet" href="css/normalize.css" />
<link href="css/hwr.css" rel="stylesheet" media="screen" />
<link href="Content/jquery.steps.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-2.0.3.min.js"></script>
<script src="Scripts/jquery.cookie.js"></script>
<script src="Scripts/jquery.steps.js"></script>
<script src="Scripts/jquery.validate.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/modernizr-2.6.2.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5Shiv/html5shiv.js"></script>
<script src="js/respond/respond.min.js"></script>
<![endif]-->
<script type='text/javascript'>
$(document).ready(function () {
$.validator.addMethod("postalCodeValid", function (validationPostalCode, element) {
return (this.optional(element) || validationPostalCode.startsWith("85"));
}, "You must be located in an '85' postal code to participate.");
if (typeof String.prototype.startsWith != 'function') {
String.prototype.startsWith = function (str) {
return this.slice(0, str.length) == str;
};
}
function errorPlacement(error, element) {
element.before(error);
element.popover({
content: error.text(),
placement: function () {
return (element.parents(".content").width() >= 550) ? "right" : "top";
},
trigger: "focus hover"
});
$(".popover-content", element.next(".popover")).empty().prepend(error);
}
$("#form").steps({
headerTag: "h1",
bodyTag: "fieldset",
stepsOrientation: "horizontal",
transitionEffect: $.fn.steps.transitionEffect.fade,
transitionEffectSpeed: 400,
onStepChanging: function (event, currentIndex, newIndex) {
// Always allow going backward even if the current step contains invalid fields!
if (currentIndex > newIndex) {
return true;
}
if (currentIndex == 0) {
}
// Forbid suppressing "Warning" step if the user is to young
if (newIndex === 3 && Number($("#age").val()) < 18) {
return false;
}
var form = $(this);
// Clean up if user went backward before
if (currentIndex < newIndex) {
// To remove error styles
$(".body:eq(" + newIndex + ") label.error", form).remove();
$(".body:eq(" + newIndex + ") .error", form).removeClass("error");
}
// Disable validation on fields that are disabled or hidden.
form.validate().settings.ignore = ":disabled,:hidden";
// Start validation; Prevent going forward if false
return form.valid();
},
onStepChanged: function (event, currentIndex, priorIndex) {
// Suppress (skip) "Warning" step if the user is old enough.
if (currentIndex === 2 && Number($("#age").val()) >= 18) {
$(this).steps("next");
}
// Suppress (skip) "Warning" step if the user is old enough and wants to the previous step.
if (currentIndex === 2 && priorIndex === 3) {
$(this).steps("previous");
}
},
onFinishing: function (event, currentIndex) {
var form = $(this);
// Disable validation on fields that are disabled.
// At this point it's recommended to do an overall check (mean ignoring only disabled fields)
form.validate().settings.ignore = ":disabled";
// Start validation; Prevent form submission if false
return form.valid();
},
onFinished: function (event, currentIndex) {
var form = $(this);
// Submit form input
form.submit();
}
}).validate({
errorPlacement: function (error, element) {
if (element.attr("name") == "isOfAge") {
error.insertAfter("#lblIsOfAge");
}
else {
error.insertBefore(element);
}
},
rules: {
confirm: {
equalTo: "#password"
},
isOfAge: {
equalTo: "#isOfAgeYes"
},
verifyPostalCode: {
minlength: 5,
number: true,
postalCodeValid: true
}
},
messages: {
isOfAge: "You must be at least 21 to participate."
}
})
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<form id="form" action="#">
<h1>Eligibility</h1>
<fieldset>
<legend>Eligibility Confirmation</legend>
<div style="width: 65%; font-size: larger; font-weight: bold;">
YOU MUST BE 21 OR OVER TO PARTICIPATE
</div>
<br /><br />
<label id="lblIsOfAge" style="color: red; font-size: larger; font-weight: bold;" for="isOfAge">Are you at least 21 years of age?</label>
<br />
<label><input type="radio" name="isOfAge" id="isOfAgeYes" value="yes" title="Yes" style="width: 40px;" /> Yes</label>
<label><input type="radio" name="isOfAge" id="isOfAgeNo" value="no" checked="checked" title="No" style="width: 40px;" /> No</label>
<br />
<br />
<br />
<div style="width: 65%; font-size: larger; font-weight: bold;">
Please enter the zip code of your current location.
</div>
<br />
<label for="verifyPostalCode">Current Zip Code *</label>
<input id="verifyPostalCode" name="verifyPostalCode" type="text" class="required" />
<p>(*) Mandatory</p>
</fieldset>
<h1>Profile</h1>
<fieldset>
<legend>Profile Information</legend>
<label for="name">First name *</label>
<input id="name" name="name" type="text" class="required" />
<label for="surname">Last name *</label>
<input id="surname" name="surname" type="text" class="required" />
<label for="email">Email *</label>
<input id="email" name="email" type="text" class="required email" />
<label for="address">Address</label>
<input id="address" name="address" type="text" />
<label for="age">Age (The warning step will show up if age is less than 18) *</label>
<input id="age" name="age" type="text" class="required number" />
<p>(*) Mandatory</p>
</fieldset>
<h1>Payment</h1>
<fieldset>
<legend>Payment Info & Billing Address</legend>
</fieldset>
<h1>Tickets</h1>
<fieldset>
<legend>Ticket specification</legend>
</fieldset>
<h1>Summary</h1>
<fieldset>
<legend>Purcahse Summary and Approval</legend>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
Also, in jquery.steps.css I altered this:
.wizard > .steps > ul > li
{
width: 25%;
}
to this:
.wizard > .steps > ul > li
{
width: 20%;
}
to keep the 5th step in line.
Thanks for any insights.
JP
825
The default CSS you’re using is just a good starting point (means it’s realized to work everywhere and well isolated so that you have less trouble embedding it in any kind of project – even into existing projects).
What I did on my project site (http://www.jquery-steps.com) is especially customized for my website. Anyway, I have no problem to provide you my particular CSS that makes the responsive thing happen.
In the following CSS snippet you see two groups so called media query to offer smaller devices like tablets or phones a rich user experience.
@media (max-width: 600px)
{
.wizard > .steps > ul > li
{
width: 50%;
}
.wizard > .steps a,
.wizard > .steps a:hover,
.wizard > .steps a:active
{
margin-top: 0.5em;
}
.wizard.vertical > .steps,
.wizard.vertical > .actions
{
display: block;
float: none;
width: 100%;
}
.wizard.vertical > .content
{
display: block;
float: none;
margin: 0 0.5em 0.5em;
width: auto;
}
}
@media (max-width: 480px)
{
.wizard > .steps > ul > li
{
width: 100%;
}
}
I hope this is going to help you. If not, don't hesitate to get back to me at any time.
Rafael
95
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
