Develop Reference

Select 2 Multi Select remove option from the dropdown after selected the option

I am using Jquery Select2 to have Multiselect with Checkbox. I want to remove the selected Item from the dropdown. I am using the below code. It is removing the item. But I am getting the gap between the Input and drop down after selecting the Item.
My codes are,
Javascript,
$('.js-select2'): {
closeOnSelect: false,
placeholder: "Placeholder",
allowHtml: true,
tags: true,
allowClear: true,
minimumResultsForSearch: -1,
}
$("select").on("select2:select", function (evt) {
var element = evt.params.data.element;
var $element = $(element);
$element.detach();
$(this).append($element);
$(this).trigger("change");
});
CSS,
.select2-container {
min-width: 100%;
}
.select2-results__option {
padding-right: 20px;
vertical-align: middle;
}
.select2-results__option:before {
content: "";
display: inline-block;
position: relative;
height: 20px;
width: 20px;
border: 2px solid #e9e9e9;
background-color: #fff;
margin-right: 20px;
vertical-align: middle;
}
.select2-container--default .select2-selection--multiple {
background-color: #FFFFFF;
border: 1px solid #CBD5DD;
border-radius: 2px;
cursor: text;
height: auto !important;
margin: 0;
min-height: 30px;
overflow: hidden;
padding: 2px;
position: relative;
width: 100%;
}
.select2-results__option[aria-selected=true] {
display: none;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: #fff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #3875d7;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
background-image: -webkit-linear-gradient(#3875d7 20%, #2a62bc 90%);
background-image: -moz-linear-gradient(#3875d7 20%, #2a62bc 90%);
background-image: -o-linear-gradient(#3875d7 20%, #2a62bc 90%);
background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
color: #fff;
}
.select2-container--default .select2-selection--multiple {
margin-bottom: 10px;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
border-radius: 4px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
border: 1px solid #5897fb;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.select2-container--default .select2-selection--multiple {
border-width: 1px;
}
.select2-container--open .select2-dropdown--below {
border-radius: 6px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.select2-selection .select2-selection--multiple:after {
content: 'hhghgh';
}
/* select with icons badges single*/
.select-icon .select2-selection__placeholder .badge {
display: none;
}
.select-icon .placeholder {
display: none;
}
.select-icon .select2-results__option:before,
.select-icon .select2-results__option[aria-selected=true]:before {
display: none !important;
/* content: "" !important; */
}
.select-icon .select2-search--dropdown {
display: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
position: relative;
margin: 3px 0 3px 5px;
padding: 3px 3px 3px 5px;
border: 1px solid #aaa;
border-radius: 3px;
background-color: #e4e4e4;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-clip: padding-box;
box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
color: #333;
line-height: 13px;
cursor: default;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
list-style: none;
width: auto !important;
}
.select2-remove-right {
float: right;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
float: right;
margin-left: 5px;
}
ul.select2-choices {
padding-right: 30px !important;
}
ul.select2-choices:after {
content: "";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
border-top: 5px solid #333;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.select2-container--default .select2-search--inline .select2-search__field{
width:initial!important;
}
.select2-dropdown {
border-radius: 0px;
background-color: white;
border: 1px solid #DDD;
box-sizing: border-box;
display: block;
position: absolute;
left: -100000px;
width: 100%;
z-index: 1051;
}
/* line 43, ../scss/_dropdown.scss */
.select2-container--open .select2-dropdown--above {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.select2-container--open .select2-dropdown--below {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.select2-container--open .select2-dropdown {
left: 0;
}
.select2-search--dropdown {
display: block;
padding: 7px;
}
.select2-search--dropdown .select2-search__field {
padding: 4px;
width: 100%;
box-sizing: border-box;
}
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.select2-search--dropdown.select2-search--hide {
display: none;
}

Try this
https://stackoverflow.com/a/56195248/4208247
OR THIS
https://select2.org/selections#clearable-selections
Clearable selections
When set to true, causes a clear button ("x" icon) to appear on the select box when a value is selected. Clicking the clear button will clear the selected value, effectively resetting the select box back to its placeholder value.
$('select').select2({
placeholder: 'This is my placeholder',
allowClear: true
});

range slider CSS issue in IE and Edge

I am creating a range slider for my site which needs to look same on all browser. I am having issue with IE and Edge now.
Issues facing with IE and Edge are:
Round slider thumb and hand pointer are not working.
border-radius:50%;
cursor: pointer;
IE adding a dividing line in slider track and border
Here is my code. I would like to know how to fix the issues.
$(function() {
$('input[type="range"]').on('input change', function() {
var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
$(this).css('background-image',
'-webkit-gradient(linear, left top, right top, ' +
'color-stop(' + val + ', orange), ' +
'color-stop(' + val + ', #C5C5C5)' +
')'
);
});
});
input[type="range"] {
-webkit-appearance: none;
-moz-apperance: none;
outline: none !important;
border-radius: 6px;
height: 8px;
width: 100%;
background-image: -webkit-gradient( linear, left top, right top, color-stop(0.15, orange), color-stop(0.15, #C5C5C5));
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
cursor: pointer;
background-color: orange;
border: 1px solid orange;
height: 20px;
width: 20px;
border-radius: 50%;
transition: 100ms;
}
input[type='range']:hover::-webkit-slider-thumb {
-webkit-appearance: none !important;
cursor: pointer;
background-color: orange;
border: 1px solid orange;
height: 25px;
width: 25px;
border-radius: 50%;
}
/*Firefox */
input[type="range"]::-moz-range-thumb {
background-color: orange;
border: 1px solid orange;
height: 20px;
width: 20px;
border-radius: 50%;
cursor: pointer;
}
input[type="range"]:hover::-moz-range-thumb {
background-color: orange;
border: 1px solid orange;
height: 25px;
width: 25px;
border-radius: 50%;
cursor: pointer;
}
input[type=range]::-moz-range-track {
background: none;
}
/*IE and Edge */
input[type=range]::-ms-thumb {
background-color: orange;
border: 1px solid orange;
height: 20px;
width: 20px;
border-radius: 50%;
cursor: hand;
}
input[type=range]::-ms-fill-upper {
background-color: #C5C5C5;
}
input[type=range]::-ms-fill-lower {
background-color: orange;
}
input[type=range]::-ms-range-track {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="1" max="100" step="1" value="15">
Fiddle:
https://jsfiddle.net/anoopcr/ssbx0anj/28/

Call a function on a div with different borders

I have a div with a class called 'ball', each edge of the div has a border (border-top, border-left etc) I want to trigger different events with JavaScript when the user clicks on a border on each border.
ex: user clicks on border-top
console.log('top')
and so on
HMTL:
.ball {
border-radius: 50%;
width: 400px;
height: 400px;
margin: auto;
background-color: red;
border-top: 20px solid green;
border-left: 20px solid blue;
border-bottom: 20px solid orange;
border-right: 20px solid purple;
}
<div class="ball"></div>
I know I can trigger events when the user clicks on the div itself, but I would like to, somehow, select these borders with Javascript.

You can simulate this by adding extra elements.
Here is an exmaple (I used jQuery for simplicty but you can easily change to JS)
$('span').click(function(){
console.log($(this).data('value'));
})
.ball {
border-radius: 50%;
width: 200px;
height: 200px;
margin: auto;
background-color: blue;
position: relative;
font-size:0;
}
span:first-child {
position: absolute;
z-index: 3;
border-radius: 50%;
background: red;
top:20px;
left:20px;
bottom: 20px;
right: 20px;
}
span:nth-child(n+2) {
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
border-radius: 50%;
background: green;
bottom: 0;
right: 0;
-webkit-clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
}
span:nth-child(3) {
transform:rotate(90deg);
background: purple;
}
span:nth-child(4) {
transform:rotate(180deg);
background: blue;
}
span:nth-child(5) {
transform:rotate(-90deg);
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ball">
<span data-value="center"></span>
<span data-value="bottom"></span>
<span data-value="left"></span>
<span data-value="top"></span>
<span data-value="right"></span>
</div>

How to create vertical tab using in css/javascript?

im creating Vertical tab element by using css and jquery, but i need to show first tab content on page load. i use following line to show first element but its not working.
$('#v-nav>div.tab-content:first-child').show();
im get Vertical tab code from below link, please refer
http://jsfiddle.net/frabiacca/7pM7h/5/
please correct this code to show first tab-content to be default/ onload.
thanks in advance.

Added a default active class to the div and styling display:block; to the .active class.
$(function() {
var items = $('#v-nav>ul>li').each(function() {
$(this).click(function() {
//remove previous class and add it to clicked tab
items.removeClass('current');
$(this).addClass('current');
//hide all content divs and show current one
$('#v-nav>div.tab-content').hide().eq(items.index($(this))).show('fast');
window.location.hash = $(this).attr('tab');
});
});
if (location.hash) {
showTab(location.hash);
}
else {
showTab("tab1");
}
function showTab(tab) {
$("#v-nav ul li:[tab*=" + tab + "]").click();
}
// Bind the event hashchange, using jquery-hashchange-plugin
$(window).hashchange(function() {
showTab(location.hash.replace("#", ""));
})
// Trigger the event hashchange on page load, using jquery-hashchange-plugin
$(window).hashchange();
});
body
{
background-color: #f7f7f7;
}
.wrapper
{
width: 960px;
margin: 0px auto;
padding-top: 20px;
min-height: 600px;
}
.wrapper h1, .wrapper h4, .wrapper p, .wrapper pre, .wrapper ul, .wrapper li
{
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
background: transparent;
}
.wrapper h1 {
vertical-align:middle;
padding-bottom:20px;
}
.wrapper li
{
outline: 0;
text-decoration: none;
-webkit-transition-property: background color;
-moz-transition-property: background color;
-o-transition-property: background color;
-ms-transition-property: background color;
transition-property: background color;
-webkit-transition-duration: 0.12s;
-moz-transition-duration: 0.12s;
-o-transition-duration: 0.12s;
-ms-transition-duration: 0.12s;
transition-duration: 0.12s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#v-nav
{
height: 100%;
margin: auto;
color: #333;
font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
}
#v-nav >ul
{
float: left;
width: 210px;
display: block;
position: relative;
top: 0;
border: 1px solid #DDD;
border-right-width: 0;
margin: auto 0 !important;
padding:0;
}
#v-nav >ul >li
{
width: 180px;
list-style-type: none;
display: block;
text-shadow: 0px 1px 1px #F2F1F0;
font-size: 1.11em;
position: relative;
border-right-width: 0;
border-bottom: 1px solid #DDD;
margin: auto;
padding: 10px 15px !important;
background: whiteSmoke; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* W3C */
}
#v-nav >ul >li.current
{
color: black;
border-right: none;
z-index: 10;
background: white !important;
position: relative;
moz-box-shadow: inset 0 0 35px 5px #fafbfd;
-webkit-box-shadow: inset 0 0 35px 5px #fafbfd;
box-shadow: inset 0 0 35px 5px #fafbfd;
}
#v-nav >ul >li.first.current
{
border-bottom: 1px solid #DDD;
}
#v-nav >ul >li.last
{
border-bottom: none;
}
#v-nav >div.tab-content
{
margin-left: 210px;
border: 1px solid #ddd;
background-color: #FFF;
min-height: 400px;
position: relative;
z-index: 9;
padding: 12px;
moz-box-shadow: inset 0 0 35px 5px #fafbfd;
-webkit-box-shadow: inset 0 0 35px 5px #fafbfd;
box-shadow: inset 0 0 35px 5px #fafbfd;
display: none;
padding: 25px;
}
#v-nav >div.tab-content.active {
display: block;
}
#v-nav >div.tab-content >h4
{
font-size: 1.2em;
color: Black;
text-shadow: 0px 1px 1px #F2F1F0;
border-bottom: 1px dotted #EEEDED;
padding-top: 5px;
padding-bottom: 5px;
}
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://benalman.com/code/projects/jquery-hashchange/jquery.ba-hashchange.js"></script>
<section id="wrapper" class="wrapper">
<h1 class="title">I servizi offerti da Evermind</h1>
<div id="v-nav">
<ul>
<li tab="tab1" class="first current">Fatti il sito</li>
<li tab="tab2">Rifatti il look</li>
<li tab="tab3">Organizzati</li>
<li tab="tab4" class="last">Parla di te</li>
</ul>
<div class="tab-content active">
<h4>Fatti il sito</h4>
</div>
<div class="tab-content">
<h4>Rifatti il look</h4>
</div>
<div class="tab-content">
<h4>Organizzati</h4>
</div>
<div class="tab-content">
<h4>Parla di te</h4>
</div>
</div>
</section>

Scrolling not working in the mobile version

I'm working on a Javascript project. I created a div with an overflow and I would scroll that div using the mouse only (without the bar). I followed this working example both on the browser and both on the mobile versions. Here is my HTML code:
<div id="wrapper">
<div id="scroller">
... divs, boxes generated by jQuery ...
</div>
</div>
And here's the CSS:
#wrapper {
margin-left: 45px;
position: absolute;
width: 900px;
overflow: hidden;
}
#scroller {
width: 100%;
height: 100px;
margin: 0px auto;
overflow: auto;
}
Now the problem is that this works on the browser but does not in the mobile (no scrolling).
EDIT:
#scroller div.line {
position: absolute;
margin-left: 2.5px;
margin-top: 39px;
border-bottom: 3px solid;
border-color: #dd4b39;
}
#scroller div.ranges {
position: absolute;
width: 90%;
text-align:left;
margin-left: 5px;
margin-top: 70px;
}
#scroller box.range {
position:absolute;
display: inline-block;
width: 30px;
height: 15px;
border-radius: 15%;
-moz-box-shadow:0px 0px 10px 1px #777777;
-webkit-box-shadow:0px 0px 10px 1px #777777;
-ms-box-shadow:0px 0px 10px 1px #777777;
-o-box-shadow:0px 0px 10px 1px #777777;
box-shadow:0px 0px 10px 1px #777777;
background-image: -ms-linear-gradient(top left, #A8A8A8 0%, #BFBFBF 100%);
background-image: -moz-linear-gradient(top left, #A8A8A8 0%, #BFBFBF 100%);
background-image: -o-linear-gradient(top left, #A8A8A8 0%, #BFBFBF 100%);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #A8A8A8), color-stop(1, #BFBFBF));
background-image: -webkit-linear-gradient(top left, #A8A8A8 0%, #BFBFBF 100%);
background-image: linear-gradient(to bottom right, #A8A8A8 0%, #BFBFBF 100%);
z-index: 2;
}
#scroller div.lrange {
position:absolute;
display: inline-block;
width: 15px;
height: 100px;
margin-top: -70px;
border-right: 1px dotted;
border-color: #dd4b39;
}
#scroller div.circle_small {
position: absolute;
cursor: pointer;
display: inline-block;
margin: 0 3px;
margin-top: 32.5px;
width: 15px;
height: 15px;
border-radius: 50%;
background: #CC3524;
background: -webkit-linear-gradient(top, #d14836, #dd4b39);
background: -moz-linear-gradient(top, #d14836, #dd4b39);
background: -ms-linear-gradient(top, #d14836, #dd4b39);
background: -o-linear-gradient(top, #d14836, #dd4b39);
background: -linear-gradient(top, #d14836, #dd4b39);
}
#scroller div.circle_big {
position: absolute;
cursor: pointer;
display: inline-block;
margin: 0px 3px;
width: 40px;
height: 40px;
margin-top: 20px;
border-radius: 50%;
background: #CC3524;
background: -webkit-linear-gradient(top, #d14836, #dd4b39);
background: -moz-linear-gradient(top, #d14836, #dd4b39);
background: -ms-linear-gradient(top, #d14836, #dd4b39);
background: -o-linear-gradient(top, #d14836, #dd4b39);
background: -linear-gradient(top, #d14836, #dd4b39);
}
#scroller div.circle_label {
cursor: pointer;
text-align: center;
font-size: 20px;
padding: 8px;
}

Might be late but still useful - i faced the same problem with scroll in mobile version of a website and found out that it's the position: absolute; that breaks it.
BUT! There is a solution - http://iscrolljs.com/
I found this very very helpful.
Basicly you just initialize the plugin on wrapper element without any changes to DOM and everything works.

by adding this style into your div tag it will solve your problem.
<div style="-webkit-overflow-scrolling: touch;overflow-y: scroll;">