want to move jquery-steps pagination position out of its main container.

Question

I want to place jquery-steps next and previous button out of that #wizard means main div. I want to place it at bottom of my page. I can always take custom buttons and then add pagination functionality over there.

But is there any easy way of doing this? Means I just give id like next functionality should be assigned to this id and previous functionality should be assigned to this id?

If some body have any idea regarding this, and share with me that would be great.

Thanks.

Answer 1

I ended up taking buttons and then adding event to it. was very easy only.

    ----------events----------------
    'click #reportConfigStepsPrev':function(){
            $("#wizard").steps('previous');
          },
          'click #reportConfigStepsNext':function(){
            $("#wizard").steps('next');
          },
    ------------------------------------------------
    onStepChanged: function(event,  currentIndex, newIndex)
              {
                if(currentIndex == 0)
                {
                  $("#reportConfigStepsPrev").addClass("btn-default");
                  $("#reportConfigStepsPrev").removeClass("btn-primary");
                }
                else
                  $("#reportConfigStepsPrev").addClass("btn-primary");
                if(currentIndex == ($(".steps li").length - 1))
                {

                    $("#reportConfigStepsNext").addClass("btn-default");
                    $("#reportConfigStepsNext").removeClass("btn-primary");
                }
                else
                  $("#reportConfigStepsNext").addClass("btn-primary");

              },

-----------------html----------------------------
  <button type="button" id="reportConfigStepsPrev" class="rbtn btn-sm btn-default"><i class="fa fa-chevron-left"></i></button>
  <button type="button" id="reportConfigStepsNext" class="reportConfigNevigation btn btn-sm btn-primary"><i class="fa fa-chevron-right"></i></button>

Answer 2

Just add this line:

$("div.actions").insertBefore("div.content");

Here the documentation