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;
}
Related
I was trying to set border colour white of my tooltip's arrow key. I was able to set tooltips bottom border colour white, how can I set bottom border colour of arrow too? Here is what I tried:
.hint {
position: relative;
display: inline-block;
}
.hint:before,
.hint:after {
position: absolute;
opacity: 0;
z-index: 100;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
pointer-events: none;
}
.hint:hover:before,
.hint:hover:after {
opacity: 1;
}
.hint:before {
content: '';
position: absolute;
background: transparent;
border: 6px solid transparent;
position: absolute;
transform: translateX(-50%);
}
.hint:after {
content: attr(data-hint);
background: rgba(0, 0, 0, 0.8);
border-bottom-left-radius: 20px;
border-top-right-radius: 20px;
color: white;
padding: 8px 10px;
font-size: 16px;
font-style: italic;
white-space: nowrap;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
transform: translateX(-50%);
}
/* top mouse-icon*/
.hint--top:before {
bottom: 100%;
left: 50%;
margin: 0 0 -18px 0;
border-top-color: rgba(0, 0, 0, 0.8);
}
.hint--top:after {
bottom: 100%;
left: 50%;
margin: 0 0 -6px -10px;
}
/*arrow key*/
.hint--top:hover:before {
margin-bottom: -12px;
border-width: 12px;
/*margin-left: -56px;*/
border-color: rgba(194, 225, 245, 0);
border-top-color: rgba(0, 0, 0, 0.8);
}
.hint--top:hover:after {
margin-bottom: 12px;
border-width: 10px;
/*margin-left: -50px;*/
border-top-color: rgba(0, 0, 0, 0.8);
border-bottom: 1px solid #f0f0f0;
}
<br /><br /><br /><br />
<div class="hint hint--top" data-hint="May Peace, Mercy and Blessings of Allah be Upon You" class="intro-sub">
<a>Assalaamu 'Alaikum</a>
</div>
For clarification, I am including sample picture here. Right now I have this:
But I need something like the given image below:
I had struggled to draw triangle before, too. Almost tricks such as here and here dealing with triangles in HTML handles border. So painting borders of triangles is impossible with this kind of tricks.
One alternative is to rotate a square and hide a half. The advantage of this method is that drawing border is easy, but I didn't find super clean method to hide half of the square. So when the tooltip or the triangle have opacity less than 1, this is not a desirable method.
Maybe this is what you want. Jsfiddle.net demo is here.
.hint {
position: relative;
display: inline-block;
margin-top: 40px;
}
.hint:before,
.hint:after {
position: absolute;
opacity: 0;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
pointer-events: none;
}
.hint:hover:before,
.hint:hover:after {
opacity: 1;
}
.hint:before {
content: '';
position: absolute;
background: rgba(0, 0, 0, 1);
width: 6px;
height: 6px;
transform: translateX(-50%) rotate(45deg);
z-index: 2;
}
.hint:after {
content: attr(data-hint);
background: rgba(0, 0, 0, 1);
border-bottom-left-radius: 20px;
border-top-right-radius: 20px;
color: white;
padding: 8px 10px;
font-size: 16px;
font-style: italic;
white-space: nowrap;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
transform: translateX(-50%);
z-index: 1;
}
/* top mouse-icon*/
.hint--top:before {
bottom: 100%;
left: 50%;
margin: 0 0 -12px 0;
}
.hint--top:after {
bottom: 100%;
left: 50%;
margin: 0 0 -6px -10px;
}
/*arrow key*/
.hint--top:hover:before {
margin-bottom: 0px;
/* border-width: 2px; */
width: 24px;
height: 24px;
/* margin-left: -56px; */
border: solid white;
border-width: 0 1px 1px 0;
border-top-left-radius: 100%;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
/* border-top-color: rgba(0, 0, 0, 0.8); */
}
.hint--top:hover:after {
margin-bottom: 12px;
border-width: 10px;
/*margin-left: -50px;*/
border-top-color: rgba(0, 0, 0, 0.8);
border-bottom: 1px solid #f0f0f0;
}
<div class="hint hint--top" data-hint="May Peace, Mercy and Blessings of Allah be Upon You" class="intro-sub">
<a>Assalaamu 'Alaikum</a>
</div>
First of all your html is very strange. Adding class attribute twice on an element is pointless. Also the br are not good practice for making space.. Use margins instead or something else.
For your problem, you need another triangle with red border positioned under your black triangle. This red triangle should be bigger.
Then, the small black triangle should have a z-index bigger than your tooltip so it will cover the red border of the tooltip
I added all the new code at the beginning of the snippet. See below
You need to change a little bit the animation. But it should be easy
.border-triangle {
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 0;
position: absolute;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
opacity: 0;
transition: 0.3s ease-out;
border-top: 20px solid red;
}
.hint:hover .border-triangle {
opacity: 1;
}
.hint {
position: relative;
display: inline-block;
}
.hint:before,
.hint:after {
position: absolute;
opacity: 0;
z-index: 100;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
pointer-events: none;
}
.hint:hover:before,
.hint:hover:after {
opacity: 1;
}
.hint:before {
content: '';
position: absolute;
background: transparent;
border: 6px solid transparent;
position: absolute;
transform: translateX(-50%);
}
.hint:after {
content: attr(data-hint);
background: rgba(0, 0, 0, 1);
border-bottom-left-radius: 20px;
border-top-right-radius: 20px;
color: white;
padding: 8px 10px;
font-size: 16px;
font-style: italic;
white-space: nowrap;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
transform: translateX(-50%);
}
/* top mouse-icon*/
.hint--top:before {
bottom: 100%;
left: 50%;
margin: 0 0 -18px 0;
border-top-color: rgba(0, 0, 0, 0.8);
}
.hint--top:after {
bottom: 100%;
left: 50%;
margin: 0 0 -6px -10px;
z-index: 1;
}
/*arrow key*/
.hint--top:hover:before {
margin-bottom: -10px;
border-width: 12px;
/*margin-left: -56px;*/
border-color: rgba(194, 225, 245, 0);
border-top-color: rgba(0, 0, 0, 1);
z-index: 2;
}
.hint--top:hover:after {
margin-bottom: 12px;
border-width: 10px;
/*margin-left: -50px;*/
border-top-color: rgba(0, 0, 0, 0.8);
border-bottom: 2px solid red;
}
<br>
<br>
<br>
<div class="hint hint--top" data-hint="May Peace, Mercy and Blessings of Allah be Upon You" class="intro-sub"> <!-- intro-sub second class is usless -->
<div class="border-triangle">
</div>
<a>Assalaamu 'Alaikum</a>
</div>
I'm rather new so apologies if what I'm asking isn't exactly clear. I'm trying to build a multi-color progress bar that animates when the page loads. I have found examples similar to what I'm looking for, but the javascript/jquery is what's giving me problems. I'm not skilled in that area.
Example 1: https://codepen.io/tamak/pen/hzEer
That link shows how I want the bar to progressively extend when the page comes up and stop at certain percentages.
jQuery(document).ready(function(){
jQuery('.skillbar').each(function(){
jQuery(this).find('.skillbar-bar').animate({
width:jQuery(this).attr('data-percent')
},6000);
});
});
Example 2: http://www.cssflow.com/snippets/animated-progress-bar/demo
Is very very close to what I'm after, but I want the progress bar to function without the buttons. the colors themselves, progressing from red to green, is what I'm trying to achieve.
Thanks in advance! I know it's probably asking for a lot, but I'm hoping someone is willing to give it a try.
Maybe this will help: Bootstrap progress bar with gradient color showing proportionally on active width
As for moving the progress bar, how exactly do you want it to change? You don't need buttons to do it, but something needs to happen. Could you explain that piece in a little more detail?
You can setup click events of buttons with time interval, based on percentage.
$(document).ready(function(){
var CurrentProgress = '75%';
setTimeout(function(){
$(".label").each(function() {
if($(this).html()==CurrentProgress){
$(this).click();
}
})
},1000)
})
.container {
margin: 80px auto;
width: 640px;
text-align: center;
}
.container .progress {
margin: 0 auto;
width: 400px;
}
.progress {
padding: 4px;
background: rgba(0, 0, 0, 0.25);
border-radius: 6px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.progress-bar {
position: relative;
height: 16px;
border-radius: 4px;
-webkit-transition: 0.4s linear;
-moz-transition: 0.4s linear;
-o-transition: 0.4s linear;
transition: 0.4s linear;
-webkit-transition-property: width, background-color;
-moz-transition-property: width, background-color;
-o-transition-property: width, background-color;
transition-property: width, background-color;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}
.progress-bar:before, .progress-bar:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
}
.progress-bar:before {
bottom: 0;
background: url("../img/stripes.png") 0 0 repeat;
border-radius: 4px 4px 0 0;
}
.progress-bar:after {
z-index: 2;
bottom: 45%;
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
}
#five:checked ~ .progress > .progress-bar {
width: 5%;
background-color: #f63a0f;
}
#twentyfive:checked ~ .progress > .progress-bar {
width: 25%;
background-color: #f27011;
}
#fifty:checked ~ .progress > .progress-bar {
width: 50%;
background-color: #f2b01e;
}
#seventyfive:checked ~ .progress > .progress-bar {
width: 75%;
background-color: #f2d31b;
}
#onehundred:checked ~ .progress > .progress-bar {
width: 100%;
background-color: #86e01e;
}
.radio {
display: none;
}
.label {
display: none;
margin: 0 5px 20px;
padding: 3px 8px;
color: #aaa;
text-shadow: 0 1px black;
border-radius: 3px;
cursor: pointer;
}
.radio:checked + .label {
color: white;
background: rgba(0, 0, 0, 0.25);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<input type="radio" class="radio" name="progress" value="five" id="five" checked>
<label for="five" class="label">5%</label>
<input type="radio" class="radio" name="progress" value="twentyfive" id="twentyfive">
<label for="twentyfive" class="label">25%</label>
<input type="radio" class="radio" name="progress" value="fifty" id="fifty">
<label for="fifty" class="label">50%</label>
<input type="radio" class="radio" name="progress" value="seventyfive" id="seventyfive">
<label for="seventyfive" class="label">75%</label>
<input type="radio" class="radio" name="progress" value="onehundred" id="onehundred">
<label for="onehundred" class="label">100%</label>
<div class="progress">
<div class="progress-bar"></div>
</div>
</section>
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>
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>
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.