Removing Previous Button on First Step jQuery Steps

Question

I'm using jQuery Steps for my site signup wizard, works awesome with the exception that on the first step I'm getting the previous button, which really makes no sense since there is no previous content.

I looked at the onInit() function in the API but there is no setting for enablePreviousButton, only enableFinishButton and enableCancelButton.

Is there a way I can remove the Previous button on the first step?

Requested code:

$("#register-form").steps({
    headerTag: "h3",
    bodyTag: "fieldset",
    autoFocus: true,
    onInit: function (event, current) {
        alert(current);
    },
    labels: {
        finish: 'Sign Up <i class="fa fa-chevron-right"></i>',
        next: 'Next <i class="fa fa-chevron-right"></i>',
        previous: '<i class="fa fa-chevron-left"></i> Previous'
    }
});

HTML:

<h3><?= $lang_wizard_account; ?></h3>
<fieldset>
    <legend><?= $lang_text_your_details; ?></legend>
    <div class="form-group">
        <label class="control-label col-sm-3" for="username"><b class="required">*</b> <?= $lang_entry_username; ?></label>
        <div class="col-sm-8">
            <input type="text" name="username" value="<?= $username; ?>" class="form-control" placeholder="<?= $lang_entry_username; ?>" autofocus id="username" required>
            <?php if ($error_username) { ?>
            <span class="help-block error"><?= $error_username; ?></span>
            <?php } ?>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-3" for="firstname"><b class="required">*</b> <?= $lang_entry_firstname; ?></label>
        <div class="col-sm-8">
            <input type="text" name="firstname" value="<?= $firstname; ?>" class="form-control" placeholder="<?= $lang_entry_firstname; ?>" id="firstname" required>
            <?php if ($error_firstname) { ?>
            <span class="help-block error"><?= $error_firstname; ?></span>
            <?php } ?>
        </div>
    </div>
    .... 
</fieldset>

Hazelton

It would help if you posted some code – Plier

code posted, not sure how that helps but there it is. – Hazelton

Obviously there's way too much html to put it in here, I'll add a single fieldset which is the content for each wizard piece. – Hazelton

I'm thinking you could hide the Previous button on page load, and the plugin will gracefully show it when you cycle to the next page, thats the solution. – Plier

So with basic jQuery as opposed to using the plugin API itself? – Hazelton

Answer 1

Ok, pretty ugly hack but it does work as expected:

$("#register-form").steps({
    headerTag: "h3",
    bodyTag: "fieldset",
    autoFocus: true,
    onInit: function (event, current) {
        $('.actions > ul > li:first-child').attr('style', 'display:none');
    },
    onStepChanged: function (event, current, next) {
        if (current > 0) {
            $('.actions > ul > li:first-child').attr('style', '');
        } else {
            $('.actions > ul > li:first-child').attr('style', 'display:none');
        }
    },
    labels: {
        finish: 'Sign Up <i class="fa fa-chevron-right"></i>',
        next: 'Next <i class="fa fa-chevron-right"></i>',
        previous: '<i class="fa fa-chevron-left"></i> Previous'
    }
});

Thanks to whitebox!

Hazelton

Sorry I didn't get back to this sooner, thats exactly what I had in mind - looks like you had to do some finagling with the jquery a bit! – Plier

Answer 2

This has the same effect, but is way less hack-y:

.wizard > .actions > ul > li.disabled {
  display: none;
}

Ancylostomiasis

@Anirudh I know it's been a while, but this would go in the *.css file you are using to style the wizard. (or in the local *.html file's style tag).. – Hern

Answer 3

This is a good solution using jQuery:

$("a[href$='next']").hide();
$("a[href$='previous']").hide();

This solution allow you to call .click() function to go next or previous, like this:

$("a[href$='next']").click();

or

$("a[href$='previous']").click();

Joycejoycelin

Answer 4

The previous solutions didn't quite work for me, but this did:

.wizard > .actions > ul > li.disabled > a {
  background: white;
}

Solitta