Skip to content

Commit 82fb9a5

Browse files
WWilkersonWWilkerson
committed
Initial commit with project files.
1 parent 8d65b68 commit 82fb9a5

File tree

5 files changed

+416
-1
lines changed

5 files changed

+416
-1
lines changed

‎README.md‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,21 @@
11
gravity-forms-fancy-select
22
==========================
33

4-
This is a wordpress plugin that allows you to implement fancy select on gravity forms select fields
4+
== Description ==
5+
This plugin is designed to give you the ability to wire up a gravity forms select field to the fancy select JQuery library found here
6+
http://code.octopuscreative.com/fancyselect/
7+
8+
To use the plugin all you have to do is give the select field that you want fancied a class of add-fancy-select.
9+
10+
**NOTICE!**
11+
This plugin comes with a stripped down version of the CSS required to render the fancy select element. These can be overridden very easily in your themes CSS. If you don\'t style it then it\'s going to look odd.
12+
13+
14+
== Installation ==
15+
To install this plugin upload it into your wp-content/plugins directory and then activate the plugin from the wordpress dashboard. After that follow the instructions in the description to get started.
16+
17+
== Frequently Asked Questions ==
18+
* How do i use the plugin?,
19+
* Go into the gravity forms editor for the select field that you want this applied to go into the advanced area and give it a class of .add-fancy-select.,
20+
* Why does the field look weird/doesn't show?,
21+
* The plugin merely gives you the functionality for fancy select, you're still responsible for styling the field on your own.,

‎fancy-select.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
(function ($) {
2+
3+
4+
var aeFancySelect = function () {
5+
6+
$('.gform_wrapper .add-fancy-select').find('select').filter(function (i) {
7+
var $theSelect = $(this);
8+
9+
$theSelect.each(function () {
10+
var elementID = this.id;
11+
$theSelect.addClass('add-fancy');
12+
$('.add-fancy').fancySelect();
13+
$('.add-fancy').trigger('update');
14+
15+
});
16+
17+
18+
});
19+
};
20+
$(document).ready(function () {
21+
aeFancySelect();
22+
$('.trigger').addClass('select-gray');
23+
$('.trigger').click(function () {
24+
$('.trigger').removeClass('select-gray');
25+
});
26+
27+
});
28+
29+
})(jQuery);

‎fancy-select.php‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<?php
2+
/*
3+
Plugin Name: Gravity Forms Fancy Select Wordpress Plugin
4+
Description: This Plugin takes the function from the fancy select jquery plugin listed here http://code.octopuscreative.com/fancyselect/ and then makes it easy to give the functionality to form in wordpress
5+
Version: 1.0
6+
Author: Able Engine/William Wilkerson
7+
Author URI: http://www.ableengine.com
8+
9+
Instructions:
10+
If you want the fancy select added to all the select fields on a given form then add the class .add-fancy-select to the form.
11+
If you would like to apply fancy select to only one Select field then give that field a class of .add-fancy-select.
12+
13+
*/
14+
15+
if (!is_admin()) {
16+
17+
add_action('init', 'fancy_select_dependencies_js');
18+
add_action('init', 'fancy_select_dependencies_css');
19+
20+
function fancy_select_dependencies_css()
21+
{
22+
$plugin_url = plugins_url(basename(dirname(__FILE__)));
23+
wp_enqueue_style('fancySelectCSS', $plugin_url . '/fancySelect.css');
24+
25+
}
26+
27+
function fancy_select_dependencies_js()
28+
{
29+
$plugin_url = plugins_url(basename(dirname(__FILE__)));
30+
wp_enqueue_script('fancySelectJS', $plugin_url . '/fancySelect.js', array('jquery'), '1.0');
31+
wp_enqueue_script('pluginJS', $plugin_url . '/fancy-select.js', array('jquery'), '1.0');
32+
}
33+
}

‎fancySelect.css‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
div.fancy-select {
2+
position: relative;
3+
color: #eeeeee;
4+
}
5+
6+
div.fancy-select.disabled {
7+
opacity: 0.5;
8+
}
9+
10+
div.fancy-select select:focus + div.trigger {
11+
box-shadow: 0 0 0 2px #4B5468;
12+
}
13+
14+
div.fancy-select select:focus + div.trigger.open {
15+
box-shadow: none;
16+
}
17+
18+
div.fancy-select div.trigger {
19+
border-radius: 4px;
20+
cursor: pointer;
21+
padding: 10px 24px 9px 9px;
22+
white-space: nowrap;
23+
overflow: hidden;
24+
text-overflow: ellipsis;
25+
position: relative;
26+
background: #99A5BE;
27+
border: 1px solid #99A5BE;
28+
border-top-color: #A5B2CB;
29+
color: #4B5468;
30+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
31+
32+
transition: all 240ms ease-out;
33+
-webkit-transition: all 240ms ease-out;
34+
-moz-transition: all 240ms ease-out;
35+
-ms-transition: all 240ms ease-out;
36+
-o-transition: all 240ms ease-out;
37+
}
38+
39+
div.fancy-select div.trigger:after {
40+
content: "";
41+
display: block;
42+
position: absolute;
43+
width: 0;
44+
height: 0;
45+
top: 20px;
46+
right: 9px;
47+
}
48+
49+
div.fancy-select div.trigger.open {
50+
}
51+
52+
div.fancy-select ul.options {
53+
list-style: none;
54+
margin: 0;
55+
position: absolute;
56+
top: 40px;
57+
left: 0;
58+
visibility: hidden;
59+
opacity: 0;
60+
z-index: 50;
61+
max-height: 200px;
62+
overflow: auto;
63+
background: #FFFFFF;
64+
border-radius: 4px;
65+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
66+
min-width: 100%;
67+
68+
transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
69+
-webkit-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
70+
-moz-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
71+
-ms-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
72+
-o-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
73+
}
74+
75+
div.fancy-select ul.options.open {
76+
visibility: visible;
77+
top: 33px;
78+
opacity: 1;
79+
80+
/* have to use a non-visibility transition to prevent this iOS issue (bug?): */
81+
/*http://stackoverflow.com/questions/10736478/css-animation-visibility-visible-works-on-chrome-and-safari-but-not-on-ios*/
82+
transition: opacity 300ms ease-out, top 300ms ease-out;
83+
-webkit-transition: opacity 300ms ease-out, top 300ms ease-out;
84+
-moz-transition: opacity 300ms ease-out, top 300ms ease-out;
85+
-ms-transition: opacity 300ms ease-out, top 300ms ease-out;
86+
-o-transition: opacity 300ms ease-out, top 300ms ease-out;
87+
}
88+
89+
div.fancy-select ul.options.overflowing {
90+
top: auto;
91+
bottom: 40px;
92+
93+
transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
94+
-webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
95+
-moz-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
96+
-ms-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
97+
-o-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
98+
}
99+
100+
div.fancy-select ul.options.overflowing.open {
101+
top: auto;
102+
bottom: 50px;
103+
104+
transition: opacity 300ms ease-out, bottom 300ms ease-out;
105+
-webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out;
106+
-moz-transition: opacity 300ms ease-out, bottom 300ms ease-out;
107+
-ms-transition: opacity 300ms ease-out, bottom 300ms ease-out;
108+
-o-transition: opacity 300ms ease-out, bottom 300ms ease-out;
109+
}
110+
111+
div.fancy-select ul.options li {
112+
padding: 8px 12px;
113+
color: #000000;
114+
cursor: pointer;
115+
white-space: nowrap;
116+
117+
transition: all 150ms ease-out;
118+
-webkit-transition: all 150ms ease-out;
119+
-moz-transition: all 150ms ease-out;
120+
-ms-transition: all 150ms ease-out;
121+
-o-transition: all 150ms ease-out;
122+
}
123+
124+
div.fancy-select ul.options li.selected {
125+
background-color: #dc5308;
126+
color: #FFFFFF;
127+
}
128+
129+
div.fancy-select ul.options li.hover {
130+
131+
}

0 commit comments

Comments
 (0)