Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Responsive Wizard #45

Closed
wants to merge 4 commits into from

1 participant

@EAnushan
  • Made the width and height of the smart wizard responsive. It now scales depending on window size. You can optionally override this with static values using your own CSS for container height/width.

  • Enabling the next step when noForwardJumping is set. The anchor tag above the wizard functions just like the next button. User experience improvement.

EAnushan added some commits
@EAnushan EAnushan - Made the width and height of the smart wizard responsive. It now sc…
…ales depending on window size. You can optionally override this with static values using your own CSS for container height/width.

- Using border-box to accomodate responsive 100% width. Otherwise, padding overflows outside container.
- Removed unecessary overflow-x and overflow-y css since width and height autoscale.
- Added border-radius property where it was missing. Necessary for browsers that don't use moz-border-radius and webkit-border-radius.
4acafc5
@EAnushan EAnushan - Forgot to add back overflow-x and overflow-y hidden properties. Nec…
…essary for 'slideleft' transition to appear nicely.
0273fc6
@EAnushan

I chose to make the content container height: auto. Although, this causes the controls at the bottom of the wizard to fluctuate in position depending on the height of the current content.

Alternatively, I suppose we could just keep the static 300px height we used to have with overflow-y scroll. It's up to you. I prefer it this way since I can customize the height of the container myself later on, on a per wizard basis. I usually just set the height of the content pane to whatever I predict my maximum height to be.

EAnushan added some commits
@EAnushan EAnushan - Allowing one extra step when no forward jumping is enabled. This wi…
…ll enable the anchor tag above the wizard for the next step, functioning just like hitting the next button.
99ff152
@EAnushan EAnushan - Updated comments for the last commit. a59b87e
@EAnushan EAnushan closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Sep 23, 2013
  1. @EAnushan

    - Made the width and height of the smart wizard responsive. It now sc…

    EAnushan authored
    …ales depending on window size. You can optionally override this with static values using your own CSS for container height/width.
    
    - Using border-box to accomodate responsive 100% width. Otherwise, padding overflows outside container.
    - Removed unecessary overflow-x and overflow-y css since width and height autoscale.
    - Added border-radius property where it was missing. Necessary for browsers that don't use moz-border-radius and webkit-border-radius.
  2. @EAnushan

    - Forgot to add back overflow-x and overflow-y hidden properties. Nec…

    EAnushan authored
    …essary for 'slideleft' transition to appear nicely.
Commits on Sep 24, 2013
  1. @EAnushan

    - Allowing one extra step when no forward jumping is enabled. This wi…

    EAnushan authored
    …ll enable the anchor tag above the wizard for the next step, functioning just like hitting the next button.
  2. @EAnushan
This page is out of date. Refresh to see the latest.
Showing with 40 additions and 21 deletions.
  1. +2 −2 js/jquery.smartWizard.js
  2. +38 −19 styles/smart_wizard.css
View
4 js/jquery.smartWizard.js
@@ -276,8 +276,8 @@ function SmartWizard(target, options) {
}
}
if ($this.options.noForwardJumping) {
- // +2 == +1 (for index to step num) +1 (for next step)
- for (var i = $this.curStepIdx + 2; i <= $this.steps.length; i++) {
+ // +2 == +1 (for index to step num) +2 (for the step after the next)
+ for (var i = $this.curStepIdx + 3; i <= $this.steps.length; i++) {
$this.disableStep(i);
}
}
View
57 styles/smart_wizard.css
@@ -14,7 +14,7 @@
border: 0 solid #CCC;
overflow:visible;
float:left;
- width:980px;
+ width: 100%;
}
.swMain .stepContainer {
display:block;
@@ -23,7 +23,7 @@
padding:0;
border: 0 solid #CCC;
overflow-x: hidden;
- overflow-y: scroll;
+ overflow-y: hidden;
clear:both;
height:300px;
}
@@ -38,21 +38,26 @@
font: normal 12px Verdana, Arial, Helvetica, sans-serif;
color:#5A5655;
background-color:#F8F8F8;
- height:300px;
+ height: auto;
text-align:left;
overflow:visible;
z-index:88;
-webkit-border-radius: 5px;
- -moz-border-radius : 5px;
- width:968px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ width: 100%;
clear:both;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ box-sizing: border-box;
}
.swMain div.actionBar {
display:block;
position: relative;
clear:both;
- margin: 3px 0 0 0;
+ margin: 3px 0 10px 0;
border: 1px solid #CCC;
padding: 0;
color: #5A5655;
@@ -63,7 +68,8 @@
z-index:88;
-webkit-border-radius: 5px;
- -moz-border-radius : 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
left:0;
}
@@ -80,7 +86,8 @@
text-align:left;
z-index:88;
-webkit-border-radius: 5px;
- -moz-border-radius : 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
}
.swMain ul.anchor {
position: relative;
@@ -97,10 +104,14 @@
position: relative;
display:block;
margin: 0;
- padding: 0 3px;
+ padding-right: 6px;
border: 0 solid #E0E0E0;
float: left;
}
+.swMain ul.anchor li:last-child
+{
+ padding-right: 0;
+}
/* Anchor Element Style */
.swMain ul.anchor li a {
display:block;
@@ -109,11 +120,12 @@
margin: 5px 0 0 0;
padding:3px;
height:60px;
- width:230px;
+ width: auto;
text-decoration: none;
outline-style:none;
- -moz-border-radius : 5px;
+ -moz-border-radius: 5px;
-webkit-border-radius: 5px;
+ border-radius: 5px;
z-index:99;
}
.swMain ul.anchor li a .stepNumber{
@@ -195,8 +207,9 @@
outline-style:none;
background-color: #5A5655;
border: 1px solid #5A5655;
- -moz-border-radius : 5px;
- -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
}
.swMain .buttonDisabled {
color:#F8F8F8 !important;
@@ -217,8 +230,9 @@
outline-style:none;
background-color: #5A5655;
border: 1px solid #5A5655;
- -moz-border-radius : 5px;
- -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
}
.swMain .buttonFinish {
display:block;
@@ -233,8 +247,9 @@
outline-style:none;
background-color: #5A5655;
border: 1px solid #5A5655;
- -moz-border-radius : 5px;
- -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
}
/* Form Styles */
@@ -260,8 +275,9 @@
font: bold 13px Verdana, Arial, Helvetica, sans-serif;
color:#5A5655;
background: #FFF url(../images/loader.gif) no-repeat 5px;
- -moz-border-radius : 5px;
+ -moz-border-radius: 5px;
-webkit-border-radius: 5px;
+ border-radius: 5px;
z-index:998;
}
.swMain .msgBox {
@@ -274,8 +290,9 @@
background-color: #FFFFDD;
font: normal 12px Verdana, Arial, Helvetica, sans-serif;
color:#5A5655;
- -moz-border-radius : 5px;
+ -moz-border-radius: 5px;
-webkit-border-radius: 5px;
+ border-radius: 5px;
z-index:999;
min-width:200px;
}
@@ -286,6 +303,8 @@
}
.swMain .msgBox .close {
border: 1px solid #CCC;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
border-radius: 3px;
color: #CCC;
display: block;
Something went wrong with that request. Please try again.