jquery horizontal div scroll

For potential use with survey questions

by mark47

HTML

<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
<div id="wrapper">
    <ul class="box-list">
        <li id="q1">
            <div class="qbox">
                Q1<br /><br />
                                <input type="radio" name="currentq" class="choice" value="1" /> Water<br />
                <input type="radio" name="currentq" class="choice" value="2" /> Beer<br />
                <input type="radio" name="currentq" class="choice" value="3" /> Eggnog<br />
                <input type="radio" name="currentq" class="choice" value="4" /> Smoothie<br /><br />
            <a href="#q2" class="next">Next</a>
            </div></li>
        <li id="q2">
            <div class="qbox">
            Q2
            <br /><br />
                <input type="radio" name="currentq" class="choice" value="1" /> Cereal<br />
                <input type="radio" name="currentq" class="choice" value="2" /> Toast<br />
                <input type="radio" name="currentq" class="choice" value="3" /> Eggs<br />
                <input type="radio" name="currentq" class="choice" value="4" /> Waffles<br /><br />
            <a href="#q1">Prev</a> | <a href="#q3">Next</a>
            </div>
        </li>
        <li id="q3">
            <div class="qbox">
            Q3<br /><br />
                <input type="radio" name="currentq" class="choice" value="1" /> Cereal<br />
                <input type="radio" name="currentq" class="choice" value="2" /> Toast<br />
                <input type="radio" name="currentq" class="choice" value="3" /> Eggs<br />
                <input type="radio" name="currentq" class="choice" value="4" /> Waffles<br /><br />
            <a href="#q2">Prev</a> | <a href="#q4">Next</a>
            </div>
        </li>
        <li id="q4">
            <div class="qbox">
            Q4<br /><br />
                <input type="radio" name="currentq" class="choice" value="1" /> Cereal<br />
                <input...

CSS

#wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.box-list {
    width: 300%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.box-list li {
    width: 25%;
    height: 100%;
    float: left;
    list-style: none;
    background-color: #ccc
}
.qbox {
    margin: 20px;
    padding: 10px 20px;
    background-color: #fff
}

JavaScript

$(document).ready(function() {  
    $('input.choice').change(function() {
        var goTo = "#" + $(this).closest("li").next().attr("id");
        $('#wrapper').scrollTo(goTo, 1200, {offset:-150});
    });
    $('.box-list a').click(function () { 
        $('#wrapper').scrollTo($(this).attr('href'), 1200, {offset:-150});
        return false;  
    });  
});