0

I hope someone could help me with this. Basically, I am using Jquery Step, "Vertical Steps Example" on http://www.jquery-steps.com/Examples

I am trying to duplicate 'next' and 'previous' buttons to sit both at the top and bottom of contents area because I have got quite a lot of texts and images in each step.

Could someone help in how to duplicate those buttons ? Example code I am using is below:

    <script>
            $(function ()
            {
                $("#wizard").steps({
                    headerTag: "h2",
                    bodyTag: "section",
                    transitionEffect: "slideLeft",
                    stepsOrientation: "vertical"
                });
            });
    </script>

    <div id="wizard">
        <h2>Title One</h2>
        <section>
            <p>Content for Title One</p>
        </section>

        <h2>Title Two</h2>
        <section>
            <p>Content for Title Two</p>
        </section>

    </div>
DHJ
  • 31
  • 4

2 Answers2

0

Try this:

$('#wizard').prepend($('#wizard .actions').clone().addClass("top-actions"));

//then add event


$('#wizard .top-actions').on("click", ".btn", function (e) {

    var $element = $(this);

    //console.log($element);

    if ($element.hasClass("prev") == true) {
        $('#wizard .actions:not(.top-actions) a[href="#previous"]').click();
    }

    if ($element.hasClass("next") == true) {
        $('#wizard .actions:not(.top-actions)  a[href="#next"]').click();
    }

});
Sindhoo Oad
  • 1,194
  • 2
  • 13
  • 29
0

I used this code to duplicate the buttons and works.

$("div.actions").insertBefore("div.content").clone().insertAfter("div.content").addClass("footer_buttons_steps");
    $("#buysteps .footer_buttons_steps a").on("click", function(){

        if( $(this).attr("href") == "#previous" ){
            $("#buysteps .actions:not('.footer_buttons_steps') a[href='#previous']").click();
        }

        if ($(this).attr("href") == "#next") {
            $("#buysteps .actions:not('.footer_buttons_steps') a[href='#next']").click();
        }            

    });