1

I'm trying to reconfigure the layout of the jquery-steps plugin. I suppose it's fairly simple task.. but I can't figure it myself. I would like to swap actions div and the steps div (showed in this picture). So that actions are on top and steps at the bottom.

Can anyone help me on this?

Thanks!

Jens Jarl Broe
  • 23
  • 6

1 Answers1

1

In jQuery Steps' Wizard Basic Demo, you could use jQuery to move the items in your desired order (actions, content, steps):

$(function() {
    $("#wizard > .content").appendTo("#wizard");
    $("#wizard > .steps").appendTo("#wizard");
});

UPDATE: after the latest update of jQuery Steps' website, Basic Demo was replaced with Basic Example, which is similar, but its id changed to example-basic, so you need the following code:

$(function() {
    $("#example-basic > .content").appendTo("#example-basic");
    $("#example-basic > .steps").appendTo("#example-basic");
});
Alessio Cantarella
  • 5,077
  • 3
  • 27
  • 34
  • 1
    that's great! nice and simple solution. much appreciated! – Jens Jarl Broe Jan 25 '16 at 21:51
  • @AlessioCantarella this was very helpful because I wanted my Steps section separated from the Wizard, but by any chance do you know if there is a way to specifically move the Previous button to the left side of the actions container? – Blake Rivell Feb 08 '16 at 18:45
  • 1
    @BlakeRivell of course you can do it with jQuery, e.g. in *Basic Example*: `$("#example-basic > .actions > ul").css("width", "100%"); $("#example-basic > .actions > ul > li:eq(0)").css("float", "left"); $("#example-basic > .actions > ul > li:eq(1)").css("float", "right");` – Alessio Cantarella Feb 08 '16 at 19:30
  • @AlessioCantarella thanks! The example I am really trying to replicate is the Basic Form example and for some reason I had to add .wizard to the chain like this: $("#example-form > .wizard .actions > ul > li:eq(0)").css("float", "left"); – Blake Rivell Feb 08 '16 at 19:41
  • @AlessioCantarella in regards to this actual post, I thought it was the answer to what I am currently trying to do but I don't think it is. Do you know if there is a way to move the steps away from the wizard? For example lets say I have a
    at the very top of my page, but the wizard is somewhere else on the page like in another div below. Can I output the steps into the wizSteps div instead of on top of the wizard which is the default?
     – Blake Rivell Feb 08 '16 at 19:53
  • @BlakeRivell you should provide me a JSFiddle example with your code. – Alessio Cantarella Feb 08 '16 at 20:42
  • @AlessioCantarella Here you go: https://jsfiddle.net/ypsg9fwk/ (Please see the section that says: I would like the steps to go here instead...) – Blake Rivell Feb 08 '16 at 20:59