Size Selector Table

A little piece of UI for to choose which size you want. - Check option box on click of row - make it look nice with css

by vincentieo

HTML

<form action="paypal-size-guide.html" method="" accept-charset="utf-8">
    <table id="sizeOptions">
        <thead>File Size</thead>
        <tr class="active">
            <td>
                <input type="radio" name="size" value="Large" checked="true"> Large</input>
            </td>
            <td>3000 x 2000px</td>
            <td>&pound;20</td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="size" value="Medium"> Medium</input>
            </td>
            <td>1500 x 1000px</td>
            <td>&pound;15</td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="size" value="Small"> Small</input>
            </td>
            <td>750 x 500px</td>
            <td>&pound;10</td>
        </tr>
    </table>
</form>

<div style="margin-top: 10px;"> 
    <a href="http://www.timgodwinphotography.co.uk/gallery/albums/album0.php" target="_blank"><button>see it in action</button></a>
</div>

CSS

<style type="text/css"> #sizeOptions {
    border-collapse: collapse;
    padding: 10px;
}
#sizeOptions td {
    padding: 10px;
}

#sizeOptions tr {
    border-bottom: solid 1px #b1b1b1;
}
.hover {
    background-color: #F1F1F0;
}
.active {
    background-color: #cdcdcd;
}
.image-title {
    display:none;
}
</style>

JavaScript

$('#sizeOptions tr').click(function () {
    $(this).find('td input:radio').prop('checked', true);
    $('#sizeOptions tr').removeClass("active");
    $(this).addClass("active");
});

$('#sizeOptions tr').mouseover(function () {
    $(this).addClass("hover");
});

$('#sizeOptions tr').mouseout(function () {
    $(this).removeClass("hover");
});