Fonts select Preview

Fonts select Preview

by vijayweb

HTML

<form action="#" method="post">
    <select id="fontSelector" name="fontSelector">
        <option id="calibri" value="calibri">Calibri</option>
        <option value="Times New Roman">Times New Roman</option>
        <option value="Comic Sans MS">Comic Sans MS</option>
    </select>
</form>

<ul id="fontList">
    <li id="calibri" class="selected">Calibri</li>
    <li id="timesNewRoman">Times New Roman</li>
    <li id="comicSansMS">Comic Sans MS</li>
</ul>

CSS

ul {
    width: 40%;
    min-width: 10em;
    font-size: 1em;
}

ul li {
    display: none;
    padding: 0.15em;
    border: 1px solid #ccc;
    font-size: 22px;
}

ul li.selected,
ul:hover li {
    display: list-item;
}

li:hover {
    background-color: #f90;
}

#calibri {
    font-family: Calibri;
}
#timesNewRoman {
    font-family: "Times New Roman";
}
#comicSansMS {
    font-family: "Comic Sans MS";
}

JavaScript

$('#fontList li').click(
    function(){
        var chosen = $(this).index();
        $('#fontSelector option:selected')
            .removeAttr('selected');
        $('#fontSelector option')
            .eq(chosen)
            .attr('selected',true);
        $('.selected').removeClass('selected');
        $(this).addClass('selected');
    });