Question

I came across a jQuery Wizard plugin at the following URI:

http://www.techlaboratory.net/labs/SmartWizard/wizard-vertical.htm

While it serves my purpose, I am trying to achieve one small thing. If I add more than 5 steps, obviously not all steps are visible. Instead, when clicking on the next, I am trying to center the step that is selected. So for instance, if I click on Step 2, the box on the left that says Step 2 should get centered. Can someone suggest a good way to do this?

Answer 1

I’ve made a jsFiddle: http://jsfiddle.net/elektronikLexikon/xWmhh/
It works with this code:

$('.wiz-container').smartWizard();

var ul_height = 400; // default: 400
var link_height = 80; // default: 80

$("#wizard-anchor li a, .btn.next, .btn.back").click(function() {
    if($("#wizard-anchor li").length > 5) {
        var ul_top = $("#wizard-anchor").offset().top;
        var current_top = $(".wiz-anc-current").offset().top-ul_top;
        var first_top = $("#wizard-anchor li:first").offset().top;
        var last_top = $("#wizard-anchor li:last").offset().top;
        if((current_top > ul_height/2-link_height/2 && last_top > ul_height) || (current_top < ul_height/2+link_height/2 && first_top < 0)) {
            $("#wizard-anchor").animate({
                "margin-top": 160-current_top
            }, 700);
        }
    }
});

Unfortunately it does just work by clicking on the buttons, when you click on a finished step in the left column, strange things happen.