Wowdown - Beautiful dropdowns

Installation

Include the Jquery Framework

<script type="text/javascript" src="/path/to/jquery.js"></script>

Add the wowdown.js

<script type="text/javascript" src="/path/to/wowdown.js"></script>

.. and the wowdown.css

<link href="/path/to/wowdown.css" rel="stylesheet" />

Usage

Create a standard HTML select as you would, with data-placeholder to give a placeholder text.

<select name="food_selector" data-placeholder="Select a food to eat">
	<option value="Ice Cream">Ice Cream</option>
	...
</select>

Initiate the plugin in your js file

$(document).ready(function(){ 

     $('select').wowdown() 

});

Output

Customizing

You are allowed to change the way the dropdown look like based on your own taste. You can find the table explaining each options after the example output to be shown below.

Add the desired options during the initialisation.

$(document).ready(function(){
     $('#myblue_dropdown').wowdown({
	    background: "#0f37a9",
		active_background:"rgb(149, 211, 255)", 
		placeholder_color: "#97bce0", 
		placeholder_active_color: "#0f37a9", 
		option_color:"#405463", 
		vertical_padding: "15px",
		horizontal_padding: "20px", 
        intense: false 
	});
});

Output

Option	Value
background	Sets the initial background of the dropdown Default: #e5e5e5
active_background	Sets the active background color when the dropdown is opened Default: #fff
placeholder_color	The initial color of the placeholder text Default: #000
placeholder_active_color	The active color of the placeholder text when the dropdown is opened Default: #000
option_color	Color of the option values Default: #000
vertical_padding	Vertical padding of the dropdown Default: 15px
horizontal_padding	Horizontal padding of the dropdown Default: 40px
intense	Intense mode Default: false

Intense Mode

Perhaps you may want to make your dropdown more intense for your users. If that's the case, then you might want to checkout the intense option

Set the intense option to true

$(document).ready(function(){
     $('#intense_dropdown').wowdown({
        ...
        intense: true // add this option
    });
});

Output

**Currently the intense animation will automatically be used if the display is below 800px (mobile devices) regardless if the option value is false

Callbacks

Additionally you may want to add callbacks to handle what happens when the user selects an option.

Add the data-callback attribute followed by your callback function.

<select name="food_selector" data-callback="my_callback" data-placeholder="Select a food to eat" >
    ...

The callback function should be placed outside $(document).ready(). The function can also access the value that was chosen by the user.
```
$(document).ready(function(){
   ...
})

function my_callback(value){
    alert("The value selected is " + value)
}
```

Output