jQuery UI Selectmenu Widget Testing (latest)

https://github.com/fnagel/jquery-ui/wiki/Selectmenu Selectmenu CSS and JS files are cached via my own server. Please use only for testing!

HTML

<link rel="stylesheet" href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.core.css">
<link rel="stylesheet" href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.theme.css">
<link rel="stylesheet" href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.selectmenu.css">
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.core.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.widget.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.position.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.selectmenu.js"></script>
<form action="#">
    <p>The width of this select should be always 50% of window width minus 20 pixels:</p>
    <fieldset>
        <select name="speedA" id="speedA">
            <option value="Slower">Slower</option>
            <option value="Slow" selected="selected">Slow</option>
            <option value="Medium">Medium</option>
            <option value="Fast">Fast</option>
            <option value="Faster">Faster</option>
        </select>
    </fieldset>
    <p>Try to resize the window. The select doesn't resize.</p>
    <p id="width"></p>
</form>

CSS

/* demo styles */
body {font-size: 62.5%; font-family:"Verdana",sans-serif; }
fieldset { border:0; }  
label,select,.ui-select-menu { float: left; margin-right: 10px; }
select { width: 200px; }    
.wrap span.ui-selectmenu-item-header,
.wrap ul.ui-selectmenu-menu li a { text-decoration: underline !important; }

JavaScript

$(function(){            
    var select = $("select#speedA").selectmenu({
        width: window.innerWidth * 0.5 - 20
    });
    $(window).resize(function () {
        var width = window.innerWidth * 0.5 - 20;
        select.selectmenu({
            width: width
        });
        $("#width").text("Select width should become: " + width + " pixels.");
    });
});