jQuery.SimpleSelect demo #1

Using the plugin's options

HTML

<link rel="stylesheet" href="http://pioul.fr/ext/jquery-simpleselect/jquery.simpleselect.2.0.0.min.css">
<script src="http://pioul.fr/ext/jquery-simpleselect/jquery.simpleselect.2.1.0.min.js"></script>
<p>This SimpleSelect's behavior has been customized using the plugin's options:</p>
<ul>
    <li><code>fadingDuration</code> was set to <code>500</code> (instead of <code>0</code> by default), making the options list appear and disappear by fading in and out over 500 milliseconds</li>
    <li><code>containerMargin</code> was set to <code>100</code> (instead of <code>5</code> by default), preventing the options list from getting any closer than 100 pixels from the window's edges</li>
    <li><code>displayContainerInside</code> was set to <code>"document"</code> (instead of <code>"window"</code> by default), allowing the options list to overflow past the window's bounds, but remaining inside the document</li>
</ul>

<label for="example-select">What's your favorite cat breed?</label>
<select id="example-select">
    <option>Persian</option>
    <option>Maine Coon</option>
    <option>Exotic</option>
    <option>Siamese</option>
    <option>Abyssinian</option>
    <option>Ragdoll</option>
    <option>Birman</option>
    <option>American Shorthair</option>
    <option>Oriental</option>
    <option>Sphynx</option>
    <option value="a">Persian</option>
    <option value="b">Maine Coon</option>
    <option value="c">Exotic</option>
    <option value="d">Siamese</option>
    <option value="e">Abyssinian</option>
    <option value="f">Ragdoll</option>
    <option value="g">Birman</option>
    <option value="h">American Shorthair</option>
    <option value="i">Oriental</option>
    <option value="j">Sphynx</option>
    <option value="k">Persian</option>
    <option value="l">Maine Coon</option>
    <option value="m">Exotic</option>
    <option value="n">Siamese</option>
    <option value="o">Abyssinian</option>
    <option value="p">Ragdoll</option>
    <option...

CSS

body {
	padding: 10px;
	margin: 0;
	background: #fff;
	font: 14px times;
	line-height: 1.5em;
	color: #3a3a3a;
}

.placeholder-text {
	margin: 40px 0;
	color: #aaa;
	font-style: italic;
}

JavaScript

$("#example-select").simpleselect({
    fadingDuration: 500,
    containerMargin: 100,
    displayContainerInside: "document"
});