SmartWizard

http://stackoverflow.com/questions/4049373/making-the-left-column-move-according-to-selection/4058763

by FloEdelmann

HTML

<link rel="stylesheet" href="http://www.techlaboratory.net/labs/SmartWizard/styles/style_wizard_vertical.css">
<script src="http://www.techlaboratory.net/labs/SmartWizard/js/SmartWizard.js"></script>
<div class="wiz-container" id="smartwizard">
    <ul id="wizard-anchor">
        <li><a href="#wizard-1" class="wiz-anc-current" isdone="true"><h2>Step 1</h2>
            <small>Description for step 1</small></a></li>
        <li><a href="#wizard-2" class="wiz-anc-default"><h2>Step 2</h2>
            <small>Description for step 2</small></a></li>
        <li><a href="#wizard-3" class="wiz-anc-default"><h2>Step 3</h2>
            <small>Description for step 3</small></a></li>
        <li><a href="#wizard-4" class="wiz-anc-default"><h2>Step 4</h2>
            <small>Description for step 4</small></a></li>
        <li><a href="#wizard-5" class="wiz-anc-default"><h2>Step 5</h2>
            <small>Description for step 5</small></a></li>
        <li><a href="#wizard-6" class="wiz-anc-default"><h2>Step 6</h2>
            <small>Description for step 6</small></a></li>
        <li><a href="#wizard-7" class="wiz-anc-default"><h2>Step 7</h2>
            <small>Description for step 7</small></a></li>
    </ul>
    <div class="wiz-body" id="wizard-body">
        <div id="wizard-1" style="display: block;">
            <div class="wiz-content">
                <h2>Step 1 Content</h2> 
            </div>        
            <div class="wiz-nav">
                <input type="button" value="Next &gt;" id="next" class="next btn">
            </div>          
        </div>
        <div id="wizard-2" style="display: none;">
            <div class="wiz-content">
                <h2>Step 2 Content</h2>    
            </div>  
            <div class="wiz-nav">
                <input type="button" value="&lt; Back" id="back" class="back btn">
                <input type="button" value="Next &gt;" id="next" class="next btn">            
            </div>                        
       ...

JavaScript

$('.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);
        }
    }
});