Wowdown! v0.1.0

Dropdowns that make you go "Wow!"

to

Installation

  1. Include the Jquery Framework
    <script type="text/javascript" src="/path/to/jquery.js"></script>
  2. Add the wowdown.js
    <script type="text/javascript" src="/path/to/wowdown.js"></script>
  3. .. and the wowdown.css
    <link href="/path/to/wowdown.css" rel="stylesheet" />

Usage

  1. 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>
  2. 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.

  1. 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

  1. 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.

  1. 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" >
        ...
  2. 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