You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
HI there,
First, thanks for this great plugin. It's really helping with the design of my site.
However, I can't get the default text to display at all.
I'm using wordpress http://scorespacemusic.com/?page_id=74
and what's weird is that the fade options are working fine. Here's my code from footer.php
/* Height and Vertical Alignment of Text /
.selectboxit-container span, .selectboxit-container .selectboxit-options a {
height: 20px; / Height of the drop down /
line-height: 20px; / Vertically positions the drop down text */
display: block;
font-color: #989EAC;
}
/* Individual Option Optgroup Header /
.selectboxit-option, .selectboxit-optgroup-header {
text-indent: 5px; / Horizontal Positioning of the select box option text */
margin: 0;
list-style-type: none;
}
/* The first Drop Down option */
.selectboxit-option-first {
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
/* The first Drop Down option optgroup */
.selectboxit-optgroup-header + .selectboxit-option-first {
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
/* The last Drop Down option */
.selectboxit-option-last {
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
/* Drop Down optgroup headers */
.selectboxit-optgroup-header {
font-weight: bold;
font-color: #989EAC;
}
/* Drop Down optgroup header hover psuedo class */
.selectboxit-optgroup-header:hover {
cursor: default;
}
/* Drop Down down arrow container /
.selectboxit-arrow-container {
/ Positions the down arrow */
width: 30px;
position: absolute;
right: 0;
}
/* Drop Down down arrow /
.selectboxit .selectboxit-arrow-container .selectboxit-arrow {
/ Horizontally centers the down arrow */
margin: 0 auto;
position: absolute;
top: 50%;
right: 0;
left: 0;
}
/* Drop Down down arrow for jQueryUI and jQuery Mobile */
.selectboxit .selectboxit-arrow-container .selectboxit-arrow.ui-icon {
top: 30%;
}
/* Drop Down individual option icon positioning */
.selectboxit-option-icon-container {
float: left;
}
/* Drop Down individual option icon positioning */
.selectboxit-option-icon-url {
width: 18px;
background-size: 18px 18px;
background-repeat: no-repeat;
height: 100%;
background-position: center;
float: left;
}
/* jQueryUI and jQuery Mobile compatability fix - Feel free to remove this style if you are not using jQuery Mobile */
.jqueryui .ui-icon {
background-color: inherit;
}
/* Another jQueryUI and jQuery Mobile compatability fix - Feel free to remove this style if you are not using jQuery Mobile */
.jqueryui .ui-icon-triangle-1-s {
background-position: -64px -16px;
}
/*
Default Theme
Note: Feel free to remove all of the CSS underneath this line if you are not using the default theme /
.selectboxit-btn {
background-color: #36393F;
color: white;
/
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x; /
/
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 5px solid #878787; /
/ padding: 5px; /
/ border-color: #e6e6e6 #e6e6e6 #bfbfbf; /
/ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); /
/ border-bottom-color: #b3b3b3; */
}
There was a bug in SelectBoxIt with how it handled the defaultText option when there was a selected attribute within one or more of the select box options. This has now been fixed and you can grab the latest v3.5.0 JS file here.
HI there,
<script type='text/javascript'> (function($) { $(".wpv-filter-form select").selectBoxIt({ defaultText:"all" , showEffect: "fadeIn", showEffectSpeed: "fast", hideEffect: "fadeOut", hideEffectSpeed: "fast", }); // Change upon selection, no submit button needed $(".wpv-filter-form select").change(function() { this.form.submit(); }); })(jQuery); </script>First, thanks for this great plugin. It's really helping with the design of my site.
However, I can't get the default text to display at all.
I'm using wordpress
http://scorespacemusic.com/?page_id=74
and what's weird is that the fade options are working fine. Here's my code from footer.php
and although it's long, I'll paste in my jquery.selectBoxIt.css in case I'm obliterating it with a rule
/*
*/
/*
Common CSS Properties
These properties will be applied to any themes that you use
*/
/* SelectBoxIt container */
.selectboxit-container {
position: relative;
display: inline-block;
vertical-align: top;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 5px;
border: 1px solid #36393F;
}
/* Styles that apply to all SelectBoxIt elements */
.selectboxit-container * {
font: 12px Trebuchet, Arial, #989EAC;
font-color: #989EAC,
/* Prevents text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
ms-user-select: none;
-o-user-select: none;
user-select: none;
outline: none;
white-space: nowrap;
}
/* Button /
.selectboxit-container .selectboxit {
width: 190px; / Width of the dropdown button */
cursor: pointer;
margin: 0;
padding-right: : 15px;
border-radius: 0px;
overflow: hidden;
display: block;
position: relative;
background: #36393F
}
/* Height and Vertical Alignment of Text /
.selectboxit-container span, .selectboxit-container .selectboxit-options a {
height: 20px; / Height of the drop down /
line-height: 20px; / Vertically positions the drop down text */
display: block;
font-color: #989EAC;
}
/* Focus pseudo selector */
.selectboxit-container .selectboxit:focus {
outline: 0;
}
/* Disabled Mouse Interaction */
.selectboxit.selectboxit-disabled, .selectboxit-options .selectboxit-disabled {
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
cursor: default;
}
/* Button Text */
.selectboxit-text {
text-indent: 5px;
overflow: hidden;
text-overflow: ellipsis;
float: left;
color: #ffffff;
}
.selectboxit .selectboxit-option-icon-container {
margin-left: 5px;
}
/* Options List /
.selectboxit-container .selectboxit-options {
-moz-box-sizing: border-box;
box-sizing: border-box;
min-width: 90%; / Minimum Width of the dropdown list box options */
*width: 90%;
margin: 0;
padding: 0;
list-style: none;
position: absolute;
overflow-x: hidden;
overflow-y: auto;
cursor: pointer;
display: none;
z-index: 9999999999999;
border-radius: 6px;
text-align: left;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background: #36393F
}
/* Individual options */
.selectboxit-option .selectboxit-option-anchor{
padding: 0 2px;
}
/* Individual Option Hover Action */
.selectboxit-option .selectboxit-option-anchor:hover {
text-decoration: none;
}
/* Individual Option Optgroup Header /
.selectboxit-option, .selectboxit-optgroup-header {
text-indent: 5px; / Horizontal Positioning of the select box option text */
margin: 0;
list-style-type: none;
}
/* The first Drop Down option */
.selectboxit-option-first {
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
/* The first Drop Down option optgroup */
.selectboxit-optgroup-header + .selectboxit-option-first {
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
/* The last Drop Down option */
.selectboxit-option-last {
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
/* Drop Down optgroup headers */
.selectboxit-optgroup-header {
font-weight: bold;
font-color: #989EAC;
}
/* Drop Down optgroup header hover psuedo class */
.selectboxit-optgroup-header:hover {
cursor: default;
}
/* Drop Down down arrow container /
.selectboxit-arrow-container {
/ Positions the down arrow */
width: 30px;
position: absolute;
right: 0;
}
/* Drop Down down arrow /
.selectboxit .selectboxit-arrow-container .selectboxit-arrow {
/ Horizontally centers the down arrow */
margin: 0 auto;
position: absolute;
top: 50%;
right: 0;
left: 0;
}
/* Drop Down down arrow for jQueryUI and jQuery Mobile */
.selectboxit .selectboxit-arrow-container .selectboxit-arrow.ui-icon {
top: 30%;
}
/* Drop Down individual option icon positioning */
.selectboxit-option-icon-container {
float: left;
}
.selectboxit-container .selectboxit-option-icon {
margin: 0;
padding: 0;
vertical-align: middle;
}
/* Drop Down individual option icon positioning */
.selectboxit-option-icon-url {
width: 18px;
background-size: 18px 18px;
background-repeat: no-repeat;
height: 100%;
background-position: center;
float: left;
}
/* jQueryUI and jQuery Mobile compatability fix - Feel free to remove this style if you are not using jQuery Mobile */
.jqueryui .ui-icon {
background-color: inherit;
}
/* Another jQueryUI and jQuery Mobile compatability fix - Feel free to remove this style if you are not using jQuery Mobile */
.jqueryui .ui-icon-triangle-1-s {
background-position: -64px -16px;
}
/*
Default Theme
Note: Feel free to remove all of the CSS underneath this line if you are not using the default theme
/
.selectboxit-btn {
background-color: #36393F;
color: white;
/
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
/
/
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 5px solid #878787;
/
/ padding: 5px; /
/ border-color: #e6e6e6 #e6e6e6 #bfbfbf; /
/ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); /
/ border-bottom-color: #b3b3b3; */
}
.selectboxit-btn.selectboxit-enabled:hover,
.selectboxit-btn.selectboxit-enabled:focus,
.selectboxit-btn.selectboxit-enabled:active {
color: #333333;
background-color: #565a62;
}
.selectboxit-btn.selectboxit-enabled:hover,
.selectboxit-btn.selectboxit-enabled:focus {
color: #333333;
background-position: 0 -15px;
}
.selectboxit-default-arrow {
width: 0;
height: 0;
border-top: 4px solid #000000;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.selectboxit-list {
background-color: #ffffff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.selectboxit-list .selectboxit-option-anchor {
color: #989EAC;
text-decoration: none;
}
.selectboxit-list > .selectboxit-focus > .selectboxit-option-anchor {
color: #ffffff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
}
.selectboxit-list > .selectboxit-disabled > .selectboxit-option-anchor {
color: #999999;
}
The text was updated successfully, but these errors were encountered: