I'm looking to use select-chosen for my select dropdown as it has both a search feature and a flat UI which matches the UI of what I'm working on. (So trying to stay away from 'select2', 'chosen-select', etc.)
Link to example page
When I inspect the element in Chrome to see how it works I find:
<select id="example-chosen" name="example-chosen" class="select-chosen" style="width: 250px; display: none;">
I also find that it seems to depend on: 'bootstrap.min', 'main' and 'plugins' css/js all of which are imported into my project.
However when I try to put this into practice I get nothing. Disabling 'display:none' returns:
I think I'm right in saying that the 'display: none' is there because bootstrap generates a new dropdown requiring me to 'hide' my hard-coded one. Surely then, the select-chosen is not being generated?
To clarify, I'm trying to recreate the dropdown shown in the example link on my own page.
Here is a snippet of the code I'm using:
<select name="user" id="user-select" class="select-chosen" style="display:none;"><option>admin</option><option>user</option></select>
Can anyone see where I'm going wrong?
Working fiddle.
The example in your page use the jQuery plugin chosen and the css of bootstrap so it will be bootstrap-chosen, you have just to define your select as usual and add chosen class to it then init the plugin using $('.chosen').chosen();, check the example bellow.
HTML :
<select class="form-control chosen" data-placeholder="Choose an option please">
<option value=""></option>
<option value="1" >Option 1</option>
<option value="2" >Option 2</option>
</select>
JS :
$('.chosen').chosen();
Hope this helps.
$('.chosen').chosen();
select.form-control + .chosen-container.chosen-container-single .chosen-single {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
vertical-align: middle;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
background-image:none;
}
select.form-control + .chosen-container.chosen-container-single .chosen-single div {
top:4px;
color:#000;
}
select.form-control + .chosen-container .chosen-drop {
background-color: #FFF;
border: 1px solid #CCC;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
margin: 2px 0 0;
}
select.form-control + .chosen-container .chosen-search input[type=text] {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
vertical-align: middle;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
background-image:none;
}
select.form-control + .chosen-container .chosen-results {
margin: 2px 0 0;
padding: 5px 0;
font-size: 14px;
list-style: none;
background-color: #fff;
margin-bottom: 5px;
}
select.form-control + .chosen-container .chosen-results li ,
select.form-control + .chosen-container .chosen-results li.active-result {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333;
white-space: nowrap;
background-image:none;
}
select.form-control + .chosen-container .chosen-results li:hover,
select.form-control + .chosen-container .chosen-results li.active-result:hover,
select.form-control + .chosen-container .chosen-results li.highlighted
{
color: #FFF;
text-decoration: none;
background-color: #428BCA;
background-image:none;
}
select.form-control + .chosen-container-multi .chosen-choices {
display: block;
width: 100%;
min-height: 34px;
padding: 6px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
vertical-align: middle;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
background-image:none;
}
select.form-control + .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
height:auto;
padding:5px 0;
}
select.form-control + .chosen-container-multi .chosen-choices li.search-choice {
background-image: none;
padding: 3px 24px 3px 5px;
margin: 0 6px 0 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 4px;
color: #333;
background-color: #FFF;
border-color: #CCC;
}
select.form-control + .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
top:8px;
right:6px;
}
select.form-control + .chosen-container-multi.chosen-container-active .chosen-choices,
select.form-control + .chosen-container.chosen-container-single.chosen-container-active .chosen-single,
select.form-control + .chosen-container .chosen-search input[type=text]:focus{
border-color: #66AFE9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6);
}
select.form-control + .chosen-container-multi .chosen-results li.result-selected{
display: list-item;
color: #ccc;
cursor: default;
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<select class="form-control chosen" data-placeholder="Choose an option please">
<option value=""></option>
<option value="1" >Option 1</option>
<option value="2" >Option 2</option>
</select>
Related
I'm using jQuery multiselect, that can be found here: http://loudev.com/#home
I want to hide the options of an optgroup when clicked. I have fooled around with this in the jsfiddle, but I can't hide an option if it has been added back to the opgroup. Also, once an option is selected is still shows if an optgroup is hidden. Is there a way to achieve hidden optgroup options?
HTML:
<body>
<select id="optgroup" multiple="multiple">
<optgroup label="OptOne">
<option value="elem1">Elem 1</option>
<option value="elem2">Elem 2</option>
<option value="elem3">Elem 3</option>
</optgroup>
<optgroup label="OptTwo">
<option value="elem4">Elem 4</option>
<option value="elem5">Elem 5</option>
</optgroup>
<optgroup label="OptThree">
<option value="elem6">Elem 6</option>
<option value="elem7">Elem 7</option>
</optgroup>
</select>
</body>
JS:
$('#optgroup').multiSelect({
selectableOptgroup: false,
afterSelect: function (values, text) {
_self = this;
// if there are more than 6 elements selected
if (this.$element.val().length > 4) {
// disable all selectable elements
var selectables = this.$container.find('.ms-elem-selectable');
selectables.addClass(_self.options.disabledClass);
// disable all <option>
var options = _self.$element.find('option');
options.prop('disabled', true);
}
},
afterDeselect: function (values, text) {
_self = this;
// if there are less than 6 elements selected
if (this.$element.val() && this.$element.val().length < 4) {
// enable all selectable elements
var selectables = this.$container.find('.ms-elem-selectable');
selectables.removeClass(_self.options.disabledClass);
// enable all <option>
var options = _self.$element.find('option');
options.prop('disabled', false);
}
}
});
$("body").on('click', '.ms-optgroup-label', function () {
$(this).siblings().toggle();
})
CSS:
.ms-container{
background: transparent url('../img/switch.png') no-repeat 50% 50%;
width: 76.5vh;
}
.ms-container:after{
content: ".";
display: block;
height: 0;
line-height: 0;
font-size: 0;
clear: both;
min-height: 0;
visibility: hidden;
}
.ms-container .ms-selectable, .ms-container .ms-selection{
background: #fff;
color: #555555;
float: left;
width: 45%;
}
.ms-container .ms-selection{
float: right;
}
.ms-container .ms-list{
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
position: relative;
height: 30vh;
padding: 0;
overflow-y: auto;
}
.ms-container .ms-list.ms-focus{
border-color: rgba(82, 168, 236, 0.8);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
outline: 0;
outline: thin dotted \9;
}
.ms-container ul{
margin: 0;
list-style-type: none;
padding: 0;
}
.ms-container .ms-optgroup-container{
width: 100%;
}
.ms-container .ms-optgroup-label{
margin: 0;
padding: 5px 0px 0px 5px;
color: #3a6f91;
font-weight: 700;
}
.ms-container .ms-selectable li.ms-elem-selectable,
.ms-container .ms-selection li.ms-elem-selection{
border-bottom: 1px #eee solid;
padding: 2px 10px;
color: #555;
font-size: 14px;
}
.ms-container .ms-selectable li.ms-hover,
.ms-container .ms-selection li.ms-hover{
cursor: pointer;
color: #fff;
text-decoration: none;
background-color: #08c;
}
.ms-container .ms-selectable li.disabled,
.ms-container .ms-selection li.disabled{
background-color: #eee;
color: #aaa;
cursor: text;
}
I am new to CSS and developing a simple template which will be showed inside an Android Browser. Basically my template only has two elements, an error message, and a button (should be placed at footer).
I have read a few posts at stackoverflow. People suggest to use
position:fixed;
bottom: 0;
to place an element at footer. However, when I added this my button css, it seems my button was just placed right below the error message instead of at the footer. Anyone has any ideas why?
.fulfill-application-button{
display: inline-block;
width: 100%;
zoom: 1;
margin: 0;
text-align: center;
cursor: pointer;
border: 1px solid #bbb;
overflow: visible;
font: bold 25px arial, helvetica, sans-serif;
text-decoration: none;
white-space: nowrap;
color: #555;
background-color: #ddd;
transition: background-color .2s ease-out;
background-clip: padding-box;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, .3),
0 2px 2px -1px rgba(0, 0, 0, .5),
0 1px 0 rgba(255, 255, 255, .3) inset;
text-shadow: 0 1px 0 rgba(255,255,255, .9);
}
.fulfill-application-button:hover{
background-color: #eee;
color: #555;
}
.fulfill-application-button:active{
background: #e9e9e9;
position: relative;
top: 1px;
text-shadow: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}
.fulfill-application-button.color{
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.fulfill-application-button.ok{
position: relative;
bottom: 0;
padding: 10px 90px;
background-color: #c43c35;
border-color: #c43c35;
}
.fulfill-application-button.ok:hover{
background-color: #ee5f5b;
}
.fulfill-application-button.ok:active{
background: #c43c35;
}
html,body
{
padding: 15px;
height: 100%;
background-color: black;
}
div.error-message{
color: white;
line-height: 120%;
padding-top: 20%;
font-size:30px;
}
</style>
<body>
<div class ="error-message">
${error}
</div>
<button id="ok" type="button" class="color ok fulfill-application-button">
OK
</button>
</body>
Change position: relative; to position: fixed; from class .fulfill-application-button.ok
Code :
.fulfill-application-button.ok{
position: fixed;
bottom: 0;
padding: 10px 90px;
background-color: #c43c35;
border-color: #c43c35;
}
Note : You can give right and left for the same, if you want.
My css is listed below, followed by the html.
I am not currently aware of a method to centralize the buttons within the below detailed "box/inner-box" s. The flex display seems to be stacking the buttons vertically (though, honestly, I am not certain as to how), but, no matter what I try, and I have tried most searchable recommendations, I cannot seem to locate the column of buttons to the centre of the page, beneath the 'my name' . Does anyone know how I might centralize the buttons or if there is a much simpler method for accomplishing a similar aesthetic? I am open to all solutions. Thank you in advance!
html, body {
height: 100%;
background: #ffffff;
overflow: hidden;
color: #000000;
font-family: 'Raleway';
font-size: 18px;
}
h1 {
font-weight: 200;
margin-bottom: 0.5em;
text-align: center;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: #ffffff;
width: 90%;
max-width: 1920px;
padding: 5px;
border: 2px solid #000000;
}
.box .box-inner {
position: relative;
border: 2px solid #000000;
padding: 40px;
}
.btn {
box-sizing: border-box;
appearance: none;
background-color: transparent;
border: 2px solid #000000;
border-radius: 0.6em;
color: #000000;
cursor: pointer;
font-size: 18px;
font-weight: 400;
line-height: 1;
margin: 12px;
padding: 1.2em 1.5em;
display: flex;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 400;
}
.btn:hover, .btn:focus {
color: #000000;
outline: 0;
}
.me {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.me:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.cv {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.cv:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rd {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rd:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.av {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.av:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rr {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rr:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
<body>
<div class='box'>
<div class='box-inner'>
<h1>myname</h1>
<button class="btn me">me</button>
<button class="btn cv">cv</button>
<button class="btn rd">rd</button>
<button class="btn av">av</button>
<button class="btn rr">rr</button>
</div>
</div>
</body>
I know you already have multiple answers. However the way you use flex is not correct. It should be added into the parent div box-inner
display:flex;
align-items:center; //align item center
flex-direction:column; //direction to column
html, body {
height: 100%;
background: #ffffff;
overflow: hidden;
color: #000000;
font-family: 'Raleway';
font-size: 18px;
}
h1 {
font-weight: 200;
margin-bottom: 0.5em;
text-align: center;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: #ffffff;
width: 90%;
max-width: 1920px;
padding: 5px;
border: 2px solid #000000;
}
.box .box-inner {
position: relative;
border: 2px solid #000000;
padding: 40px;
display:flex;
align-items:center;
flex-direction:column;
}
.btn {
box-sizing: border-box;
appearance: none;
background-color: transparent;
border: 2px solid #000000;
border-radius: 0.6em;
color: #000000;
cursor: pointer;
font-size: 18px;
font-weight: 400;
line-height: 1;
margin: 12px;
padding: 1.2em 1.5em;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 400;
}
.btn:hover, .btn:focus {
color: #000000;
outline: 0;
}
.me {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.me:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.cv {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.cv:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rd {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rd:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.av {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.av:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rr {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rr:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
<body>
<div class='box'>
<div class='box-inner'>
<h1>myname</h1>
<button class="btn me">me</button>
<button class="btn cv">cv</button>
<button class="btn rd">rd</button>
<button class="btn av">av</button>
<button class="btn rr">rr</button>
</div>
</div>
</body>
Check out this code: you need to have a margin: 0 auto, and add text-align:center.
html, body {
height: 100%;
background: #ffffff;
overflow: hidden;
color: #000000;
font-family: 'Raleway';
font-size: 18px;
}
h1 {
font-weight: 200;
margin-bottom: 0.5em;
text-align: center;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: #ffffff;
width: 90%;
max-width: 1920px;
padding: 5px;
border: 2px solid #000000;
}
.box .box-inner {
position: relative;
border: 2px solid #000000;
padding: 40px;
}
.btn {
box-sizing: border-box;
display: block;
margin: 0 auto;
appearance: none;
background-color: transparent;
border: 2px solid #000000;
border-radius: 0.6em;
color: #000000;
cursor: pointer;
font-size: 18px;
font-weight: 400;
line-height: 1;
padding: 1.2em 1.5em;
display: flex;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 400;
}
.btn:hover, .btn:focus {
color: #000000;
outline: 0;
}
.me {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.me:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.cv {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.cv:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rd {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rd:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.av {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.av:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rr {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rr:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
Simply add below CSS
.box
{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100%;
}
.box .btn {
display: block;
margin: 0 auto;
}
and modify you HTML too
<body>
<div class="box">
<h1>myname</h1>
<button class="btn me">me</button>
<button class="btn cv">cv</button>
<button class="btn rd">rd</button>
<button class="btn av">av</button>
<button class="btn rr">rr</button>
</div>
</body>
this will place buttons in center of page, both horizontally and vertically.
check out this code: you need to have a margin 0 auto, and add text-align:center
html, body {
height: 100%;
background: #ffffff;
overflow: hidden;
color: #000000;
font-family: 'Raleway';
font-size: 18px;
}
h1 {
font-weight: 200;
margin-bottom: 0.5em;
text-align: center;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background-color: #ffffff;
width: 90%;
max-width: 1920px;
padding: 5px;
border: 2px solid #000000;
}
.box .box-inner {
position: relative;
border: 2px solid #000000;
padding: 40px;
}
.btn {
box-sizing: border-box;
display: block;
margin: 0 auto;
appearance: none;
background-color: transparent;
border: 2px solid #000000;
border-radius: 0.6em;
color: #000000;
cursor: pointer;
font-size: 18px;
font-weight: 400;
line-height: 1;
padding: 1.2em 1.5em;
display: flex;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 400;
}
.btn:hover, .btn:focus {
color: #000000;
outline: 0;
}
.me {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.me:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.cv {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.cv:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rd {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rd:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.av {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.av:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
.rr {
border-radius: 0;
border-color: #000000;
transition: all 150ms ease-in-out;
}
.rr:hover {
box-shadow: 0 0 10px 0 #000000 inset, 0 0 10px 4px #000000;
}
<body>
<div class='box'>
<div class='box-inner'>
<h1>myname</h1>
<button class="btn me">me</button>
<button class="btn cv">cv</button>
<button class="btn rd">rd</button>
<button class="btn av">av</button>
<button class="btn rr">rr</button>
</div>
</div>
</body>
I've come across the following code online for a nice button that when clicked appears to be pressed.
I'd like to add a transition with the button appearing pressed on hover not on click.
How can I do this?
/**
* AddToCalendar Icon Style
* http://addtocalendar.com
*/
/* Base */
.addtocalendar var{
display: none;
}
.addtocalendar {
position: relative;
display: inline-block;
background: transparent!important;
}
.atcb-link {
display: block;
outline: none!important;
cursor: pointer;
}
.atcb-link:focus~ul,
.atcb-link:active~ul,
.atcb-list:hover{
visibility:visible;
}
.atcb-list {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
width: 170px;
z-index: 900;
}
.atcb-list,
.atcb-item
{
list-style: none;
margin: 0;
padding: 0;
background: #fff;
}
.atcb-item {
float: none;
text-align: left;
}
.atcb-item-link
{
text-decoration: none;
outline: none;
display: block;
}
.atcb-item.hover,
.atcb-item:hover {
position: relative;
z-index: 900;
cursor: pointer;
text-decoration: none;
outline: none;
}
/* Orange */
.atc-style-glow-orange .atcb-list{
margin: 10px 0px 0px 0px;
padding: 0;
color: #fff;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
border-radius: 4px;
}
.atc-style-glow-orange .atcb-link
{
position: relative;
color: rgba(255,255,255,1);
text-decoration: none;
background-color: rgba(219,87,5,1);
font-size: 1em;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 12px rgba(0,0,0,.7);
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 12px rgba(0,0,0,.7);
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 12px rgba(0,0,0,.7);
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
.atc-style-glow-orange .atcb-link:active {
-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
position: relative;
top: 6px;
}
.atc-style-glow-orange .atcb-link,
.atc-style-glow-orange .atcb-link:hover,
.atc-style-glow-orange .atcb-link:active,
.atc-style-glow-orange .atcb-link:focus
{
color: #fff;
font-family: "Verdana";
font-size: 14px;
text-decoration: none;
outline: none;
padding: 7px 25px;
}
.atc-style-glow-orange .atcb-list {
width: 170px;
border: 1px solid #fff;
border: 1px solid rgb(186,186,186);
border-radius: 2px;
box-shadow: 0 0 5px #AAA;
}
.atc-style-glow-orange .atcb-list,
.atc-style-glow-orange .atcb-item
{
background: #fff;
color: #000;
}
.atc-style-glow-orange .atcb-item,
.atc-style-glow-orange .atcb-item-link
{
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}
.atc-style-glow-orange .atcb-item-link,
.atc-style-glow-orange .atcb-item-link:hover,
.atc-style-glow-orange .atcb-item-link:active,
.atc-style-glow-orange .atcb-item-link:focus
{
color: #000;
font-family: "Verdana";
font-size: 14px;
text-decoration: none;
outline: none;
padding: 5px 15px;
}
.atc-style-glow-orange .atcb-item-link:hover,
.atc-style-glow-orange .atcb-item-link:active,
.atc-style-glow-orange .atcb-item-link:focus
{
color: #fff;
background: rgba(219,87,5,1);
}
.atc-style-glow-orange .atcb-item.hover,
.atc-style-glow-orange .atcb-item:hover {
background: rgba(250,203,175,1);
}
<span class="addtocalendar atc-style-glow-orange" id="atc_btn_orange" data-on-button-click="atcButtonClick" data-on-calendar-click="atcCalendarClick">
<a class="atcb-link">Add to Calendar</a>
</span>
</div>
Provide hover to the class which you need like,
.classname:hover{
background-color:#FF0000;
}
Change this:
.atc-style-glow-orange .atcb-link:active {
to this:
.atc-style-glow-orange .atcb-link:hover {
Here is the JSFiddle demo
Greetings fellow stackoverflow members,
I am having some major issues trying to get my custom scrollbar to work in conjunction with ajax based tabs. Any help would be greatly appreciated. I have most of it complete and working, and I'll provide a demo of what I currently have with the code below and in the demo.
Here is the Demo: http://jsfiddle.net/54RLc/
As you will note in the demo above, the first tab works as intended - simply hover the icon in the upper left hand corner of the container to view the drop down menu tabs - but any tab after that, the custom scrollbar doesn't seem to want to apply itself. Any help would be greatly appreciated!
HTML:
<div id="extended_container" class="shadow_effect">
<h2>Divisions</h2>
<ul id="options">
<li>
<ul>
<li>All
</li>
<li>Latest
</li>
<li>Featured
</li>
<li>Most Popular
</li>
</ul>
</li>
</ul>
<div id="division_all_wrapper" class="modern-skin">
<div id="division_all" class="navcontent">
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
</div>
</div>
<div id="division_latest_wrapper" class="modern-skin">
<div id="division_latest" class="navcontent" style="display: none;">
<div class="holder_box">
<p>Testing</p>
</div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
</div>
</div>
<div id="division_featured_wrapper" class="modern-skin">
<div id="division_featured" class="navcontent" style="display: none;">
<div class="holder_box">
<p>Gamelll</p>
</div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
</div>
</div>
<div id="division_popular_wrapper" class="modern-skin">
<div id="division_popular" class="navcontent" style="display: none;">
<div class="holder_box">
<p>Play</p>
</div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
<div class="holder_box"></div>
</div>
</div>
</div>
CSS:
.scrollable {
position: relative;
}
.scrollable:focus {
outline: 0;
}
.scrollable .viewport {
position: relative;
overflow: hidden;
}
.scrollable .viewport .overview {
position: absolute;
}
.scrollable .scroll-bar {
display: none;
}
.scrollable .scroll-bar.vertical {
height: 100%;
position: absolute;
right: 3px;
z-index: 9999;
}
.scrollable .scroll-bar .thumb {
position: absolute;
}
.scrollable .scroll-bar.vertical .thumb {
width: 100%;
min-height: 10px;
}
.not-selectable {
-moz-user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* ===== Start of 'Modern skin for Custom Scrollbar' ===== */
.scrollable.modern-skin {
padding-right: 16px;
}
.scrollable.modern-skin .scroll-bar {
padding-bottom: 4px;
border: 1px solid #151515;
border-radius: 6px;
-moz-box-shadow: inset 0 0 5px #555, inset 0.125em 0 0.42em 0.125em #111;
-webkit-box-shadow: inset 0 0 5px #555, inset 0.125em 0 0.42em 0.125em #111;
box-shadow: inset 0 0 5px #555, inset 0.125em 0 0.42em 0.125em #111;
}
.scrollable.modern-skin .scroll-bar .thumb {
background-color: #95aabf;
border: 1px solid #151515;
border-radius: 4px;
}
.scrollable.modern-skin .scroll-bar.vertical .thumb {
width: 6px;
margin: 1px 0 0 1px;
background: -moz-linear-gradient(left, #95aabf 0%, #515D69 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #95aabf), color-stop(100%, #515D69));
background: -webkit-linear-gradient(left, #95aabf 0%, #515D69 100%);
background: -o-linear-gradient(left, #95aabf 0%, #515D69 100%);
background: -ms-linear-gradient(left, #95aabf 0%, #515D69 100%);
background: linear-gradient(to right, #95aabf 0%, #515D69 100%);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient( startColorstr='#95aabf', endColorstr='#515D69',GradientType=1 )";
-moz-box-shadow: inset 0.05em 0 0.3em -0.05em #111;
-webkit-box-shadow: inset 0.05em 0 0.3em -0.05em #111;
box-shadow: inset 0.05em 0 0.3em -0.05em #111;
}
.scrollable.modern-skin .scroll-bar.vertical {
width: 10px;
max-height: 290px !important;
}
#extended_container {
width: 304px;
height: 335px;
margin: 10px 16px;
float: left;
display: inline;
background: #222;
border: 1px solid #000;
-moz-border-radius: 6px 6px 0 0;
-webkit-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
position: relative;
top: 40px;
left: 5px;
}
#extended_container h2 {
width: 304px;
height: 27px;
padding: 3px 0 0 0;
margin: 0;
background-color: #444;
background: -moz-linear-gradient(#444, #191919);
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#191919));
background: -webkit-linear-gradient(#444, #191919);
background: -o-linear-gradient(#444, #191919);
border-top: 2px solid #616161;
border-bottom: 1px solid #111;
-moz-border-radius: 6px 6px 0 0;
-webkit-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
float: left;
color: #BBB;
text-align: center;
text-shadow: 1px 1px #222, -1px -1px #000;
}
#options, #options ul {
padding: 0;
margin: 0;
list-style: none;
}
#options {
width: 23px;
height: 18px;
padding: 3px;
background: url(../images/Icons/menu-icon.png) no-repeat 5px 1px;
border-top: 1px solid #616161;
border-radius: 4px;
-moz-box-shadow: inset 0 -0.05em 0.2em 0.05em #111;
-webkit-box-shadow: inset 0 -0.05em 0.2em 0.05em #111;
box-shadow: inset 0 -0.05em 0.2em 0.05em #111;
float: left;
position: relative;
top: -29px;
left: 4px;
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#options:hover, #options.active {
background: url(../images/Icons/menu-icon.png) rgba(0, 0, 0, 0.15) no-repeat 5px 1px;
border-top: 1px solid #494949;
-moz-box-shadow: inset 0 0.1em 0.4em 0.1em #111;
-webkit-box-shadow: inset 0 0.1em 0.4em 0.1em #111;
box-shadow: inset 0 0.1em 0.4em 0.1em #111;
}
#options {
zoom: 1;
}
#options li {
position: relative;
}
#options ul {
width: 150px;
background-color: #444;
background: -moz-linear-gradient(#444, #191919);
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#191919));
background: -webkit-linear-gradient(#444, #191919);
background: -o-linear-gradient(#444, #191919);
border: 1px solid #111;
border-radius: 6px;
-moz-box-shadow: 2px 2px 2px #151515, inset 0 -0.1em 0.4em 0.1em #111;
-webkit-box-shadow: 2px 2px 2px #151515, inset 0 -0.1em 0.4em 0.1em #111;
box-shadow: 2px 2px 2px #151515, inset 0 -0.1em 0.4em 0.1em #111;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
opacity: 0;
visibility: hidden;
position: relative;
top: 21px;
left: -14px;
z-index: 9999;
}
#options li:hover > ul {
margin: 0;
opacity: 1;
visibility: visible;
}
#options ul li {
display: block;
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #616161;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #616161;
box-shadow: 0 1px 0 #111, 0 2px 0 #616161;
}
#options ul li a {
width: 130px;
padding: 10px;
display: block;
white-space: nowrap;
float: none;
color: #999;
font: 12px Arial, Helvetica, sans-serif;
font-style: bold;
text-shadow: 1px 1px #222, -1px -1px #000;
}
#options ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#options ul li a:hover, #options ul li a.active {
background-color: #515D69;
background: -moz-linear-gradient(#515D69, #050D14);
background: -webkit-gradient(linear, left top, left bottom, from(#515D69), to(#050D14));
background: -webkit-linear-gradient(#515D69, #050D14);
background: -o-linear-gradient(#515D69, #050D14);
-moz-box-shadow: inset 0 -0.1em 0.4em 0.1em #111;
-webkit-box-shadow: inset 0 -0.1em 0.4em 0.1em #111;
box-shadow: inset 0 -0.1em 0.4em 0.1em #111;
color: #FFF;
text-shadow: 1px 1px #2D363F, -1px -1px #000;
}
#options ul li:first-child > a {
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
#options ul li:first-child > a:after {
content:'';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #343536;
position: absolute;
top: -6px;
left: 19px;
}
#options ul ul li:first-child a:after {
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #515D69;
top: 50%;
left: -6px;
}
#options ul li:first-child a:hover:after {
border-bottom-color: #515D69;
}
#options ul li:last-child > a {
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
#division_all_wrapper, #division_latest_wrapper, #division_featured_wrapper, #division_popular_wrapper {
width: 304px;
height: 299px;
position: absolute;
top: 36px;
overflow: hidden;
background: pink;
}
.navcontent {
width: 304px;
float: left;
position: relative;
z-index: 9997;
background: blue;
}
.holder_box {
width: 286px;
height: 100px;
padding: 0;
margin: 5px 8px 10px 8px;
border: 1px solid #111;
}
JS/AJAX:
Cannot provide all the JS/AJAX that is required unfortunately due to the body of this post exceeding 30000 characters...however, full JS/AJAX is provided in the demo link.
Most custom scrollbar scripts don't work immediately for hidden content.
A couple of scripts such as Tiny Scrollbar and Malihu's Custom Scrollbar offer update function that will solve this kind of issue.
I just had a brief look at the github site for the custom scrollbar script that you're using and it doesn't seem to have update function.