We Keep Coding

How make a textarea with tags in react that have clickable dropdown

Id like to make a component in react that allows me to have a textarea with tags that can be inserted when clicked from a dropdown. Id also like this textarea to be able to mix text aswell. I have currently been trying to use tagify with react but I cant seem to figure out a way to the tagify's function that adds the tag to be accessed by the onClick that is connected to the dropdown.
Any ideas?

I believe you can get your answer in this URL of other question asked on StackOverflow https://stackoverflow.com/a/38119725/15405352
var $container = $('.container');
var $backdrop = $('.backdrop');
var $highlights = $('.highlights');
var $textarea = $('textarea');
var $toggle = $('button');
// yeah, browser sniffing sucks, but there are browser-specific quirks to handle that are not a matter of feature detection
var ua = window.navigator.userAgent.toLowerCase();
var isIE = !!ua.match(/msie|trident\/7|edge/);
var isWinPhone = ua.indexOf('windows phone') !== -1;
var isIOS = !isWinPhone && !!ua.match(/ipad|iphone|ipod/);
function applyHighlights(text) {
text = text
.replace(/\n$/g, '\n\n')
.replace(/[A-Z].*?\b/g, '<mark>$&</mark>');
if (isIE) {
// IE wraps whitespace differently in a div vs textarea, this fixes it
text = text.replace(/ /g, ' <wbr>');
}
return text;
}
function handleInput() {
var text = $textarea.val();
var highlightedText = applyHighlights(text);
$highlights.html(highlightedText);
}
function handleScroll() {
var scrollTop = $textarea.scrollTop();
$backdrop.scrollTop(scrollTop);
var scrollLeft = $textarea.scrollLeft();
$backdrop.scrollLeft(scrollLeft);
}
function fixIOS() {
// iOS adds 3px of (unremovable) padding to the left and right of a textarea, so adjust highlights div to match
$highlights.css({
'padding-left': '+=3px',
'padding-right': '+=3px'
});
}
function bindEvents() {
$textarea.on({
'input': handleInput,
'scroll': handleScroll
});
$toggle.on('click', function() {
$container.toggleClass('perspective');
});
}
if (isIOS) {
fixIOS();
}
bindEvents();
handleInput();
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 30px;
background-color: #f0f0f0;
}
.container, .backdrop, textarea {
width: 460px;
height: 180px;
}
.highlights, textarea {
padding: 10px;
font: 20px/28px 'Open Sans', sans-serif;
letter-spacing: 1px;
}
.container {
display: block;
margin: 0 auto;
transform: translateZ(0);
-webkit-text-size-adjust: none;
}
.backdrop {
position: absolute;
z-index: 1;
border: 2px solid #685972;
background-color: #fff;
overflow: auto;
pointer-events: none;
transition: transform 1s;
}
.highlights {
white-space: pre-wrap;
word-wrap: break-word;
color: transparent;
}
textarea {
display: block;
position: absolute;
z-index: 2;
margin: 0;
border: 2px solid #74637f;
border-radius: 0;
color: #444;
background-color: transparent;
overflow: auto;
resize: none;
transition: transform 1s;
}
mark {
border-radius: 3px;
color: transparent;
background-color: #b1d5e5;
}
button {
display: block;
width: 300px;
margin: 30px auto 0;
padding: 10px;
border: none;
border-radius: 6px;
color: #fff;
background-color: #74637f;
font: 18px 'Opens Sans', sans-serif;
letter-spacing: 1px;
appearance: none;
cursor: pointer;
}
.perspective .backdrop {
transform:
perspective(1500px)
translateX(-125px)
rotateY(45deg)
scale(.9);
}
.perspective textarea {
transform:
perspective(1500px)
translateX(155px)
rotateY(45deg)
scale(1.1);
}
textarea:focus, button:focus {
outline: none;
box-shadow: 0 0 0 2px #c6aada;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="backdrop">
<div class="highlights"></div>
</div>
<textarea>This demo shows how to highlight bits of text within a textarea. Alright, that's a lie. You can't actually render markup inside a textarea. However, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there. JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.</textarea>
</div>
<button>Toggle Perspective</button>
Reference- https://codepen.io/lonekorean/pen/gaLEMR for example

How to highlight checkbox pseudo element which substitutes hidden checkbox input, when it required

I have a checkbox pseudo element which substitutes hidden checkbox input, and I want to highlight it when hidden checkbox is required. Is there any css solution? What is the right way to solve problem?
https://jsfiddle.net/ht2c9sbd/3/
<form>
<div class="group-input">
<input type="checkbox" id="c_1" required hidden="">
<label for="c_1">I agree with everything.</label>
</div>
<input type="submit" value="submit" id="submit">
</form>
css:
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
height: 30px;
width: 30px;
margin: 0 14px 0 0;
cursor: pointer;
vertical-align: middle;
position: absolute;
left: 0;
top: calc(50% - 15px);
-webkit-transition: background-color 0.25s ease, border-color 0.25s ease;
transition: background-color 0.25s ease, border-color 0.25s ease;
}
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
height: 30px;
width: 30px;
border: 1px solid rgba(20, 61, 139, 0.2);
margin: 0 14px 0 0;
cursor: pointer;
vertical-align: middle;
position: relative;
top: -2px;
}
input[type="checkbox"]:checked + label::before {
background-image: url(https://image.flaticon.com/icons/png/512/447/447147.png);
background-size: 15px;
border: 1px solid rgba(20, 61, 139, 0);
background-color: rgba(20, 61, 139, 0.2);
background-position: center;
background-repeat: no-repeat;
}
here is my horrible js solution:
function checkCheckbox(e) {
if (!e.checked) {
$('head').append('<style id="invalidCheckbox">input[type="checkbox"] + label::before {border: 1px solid #ff3535; box-shadow: 0 0 2px #ff3535;}</style>');
return false;
} else {
let temp = $('head style:last');
while(temp && temp[0].id === "invalidCheckbox"){
temp.remove();
temp = $('head style:last');
}
return true;
}
}
const mycheckbox = document.getElementById('c_1');
document.getElementById("submit").addEventListener('click', function(e){
e.preventDefault();
checkCheckbox(mycheckbox);
});

Script:
const mycheckbox = document.getElementById('c_1');
document.getElementById("submit").addEventListener('click', function(e){
e.preventDefault();
if ( mycheckbox.hasAttribute('required') && !mycheckbox.checked ){
mycheckbox.className = "invalid-input"; // <-- add new class
} else {
mycheckbox.className = "";
}
});
Style (you can change style as you want) :
input[type="checkbox"].invalid-input + label::before{
background-color: red;
}
Try to update the existing DOM element instead of creating a new element in DOM because DOM manipulation is slow.
A repaint occurs when changes are made to an elements skin that changes visibly but does not affect its layout.
Create new DOM element is even more critical to performance because it involves changes that affect the layout of a portion of the page

To highlight a required checkbox:
In CSS:
/* Style (any) element with the required attribute: */
:required {
background: red;
}
/* Style input elements with the required attribute: */
input:required {
box-shadow: 1px 1px 10px rgba(200, 0, 0, 0.5);
}
/* Style focused and required element: */
input:required:focus {
border: 2px solid red;
outline: none;
}
/* Style hover and required element: */
input:required:hover {
opacity: 1;
}
In JS:
// Get the element
var req = document.getElementById("my_checkbox").required;
// Check if required
if(req.hasAttribute('required')) {
// Style it
req.style.background = "red";
}

How to call controller for the same popup?

I am using CodeIgniter.
I have two dropdowns called as status and action.
In the status drop-down, options are
Create
Pending
Verified
In action drop-down, options are
Paid
Refund
Dispute
Now, What I am doing is, When the user selects a status from the drop-down then onchage popup will display. Same onchage popup for action.
In the popup, I have a field which is message and two buttons called as submit and Cancel.
I am calling the controller on click on submit button to insert the message using AJAX. It's working for statusdrop-down but how to call the other controller for the action drop-down on click on submit button from the same popup?
I want to use the popup for action dropdown.
Any idea will be a great help.
Would you help me out in this issue?
$(function() {
$("#f_order_status, #f_order_status_confirm").change(function() {
$('#popup_verify').show();
});
});
function closePopup(obj) {
var id = $(obj).data('id');
$("#popup_verify").hide();
};
$("#o_order_status_action").on("submit", function(e) {
e.preventDefault(); //prevents form default action
var f_order_status = $('#f_order_status').val(); // get the selected value from dropdown
var f_order_status_confirm = $('#f_order_status_confirm').val(); // get the selected value from dropdown
$.ajax({ //do ajax to do update
type: "POST",
url: "<?php echo base_url('Customer_control/admin_order_verification');?>",
data: {
f_order_status: f_order_status,
f_order_status_confirm: f_order_status_confirm
},
success: function(dataReturned) {
if (dataReturned == 'true') {
location.href = baseUrl + "/Customer_control/list"
} else {
alert("There are some issue white updateing the records");
}
}
});
});
.confirmation_alert {
position: fixed;
/* Stay in place */
z-index: 9;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
-webkit-animation-name: fadeIn;
/* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s;
}
.profile_content {
position: fixed;
top: 25%;
/*transform: translateY(-50%);*/
background-color: #fefefe;
width: 100%;
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.5s;
animation-name: slideIn;
animation-duration: 0.5s;
max-width: 922px;
margin: auto;
left: 0;
right: 0;
box-shadow: 0 0 15px rgba(0, 0, 0, .3);
margin-top: -65px;
}
.profile_header {
padding: 1px 20px;
background-color: #fafafc;
color: white;
/* min-height: 58px; */
border-bottom: 1px solid #f7f7f7;
display: block;
width: 100%;
}
.profile_content.p_v_popup {
border: 2px solid #666;
}
.confirmation_alert .profile_content {
max-width: 380px;
border: 2px solid #f96e64;
}
.p_v_popup .profile_header {
background: #666;
}
.confirmation_alert .profile_header {
padding: 6px 20px;
background-color: #f96e64;
}
.profile_body {
padding: 35px 50px;
}
.profile_footer {
padding: 15px;
background-color: #fdfdfe;
color: #858585;
text-align: center;
}
/* Add Animation */
#-webkit-keyframes slideIn {
from {
top: -500px;
opacity: 0
}
to {
top: 25%;
opacity: 1
}
}
#keyframes slideIn {
from {
top: -500px;
opacity: 0
}
to {
top: 25%;
opacity: 1
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
#keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
.p_v_popup .profile_footer .submit_btn {
background: #666;
}
.confirmation_alert .profile_footer .submit_btn {
background: #f96e64;
color: #fff;
}
.confirmation_alert .profile_footer .btn_default {
padding: 5px;
display: inline-block;
outline: none;
border: none;
cursor: pointer;
text-transform: uppercase;
font-weight: 300;
min-width: 100px;
border-radius: 50px;
margin: 0 3px;
}
<select class="select_control" name="f_order_status" id="f_order_status">
<option value="" disabled selected>Select</option>
<option value="1">Create</option>
<option value="-1">Pending</option>
<option value="2">Verified</option>
</select>
<select class="select_control" name="f_order_status_confirm" id="f_order_status_confirm">
<option value="" disabled selected>Select</option>
<option value="1">Paid</option>
<option value="-1">Refund</option>
<option value="2">Dispute</option>
</select>
<div class="confirmation_alert" id="popup_verify" style="display: none;">
<div class="opacity"></div>
<form id="o_order_status_action" method="post">
<div class="profile_content p_v_popup">
<div class="profile_header clearfix">
x
<div class="profile_name_pic"> Confirmation!!! </div>
</div>
<div class="profile_body">
<div class="row">
<div class="col-md-12">
<div class="leave_reason">
<div class="form_group">
<input type="hidden" name="hidden_cust_id" id="hidden_cust_id" value="<?php echo $encryption_id;?>">
<input type="hidden" name="hidden_o_id" id="hidden_o_id" value="<?php echo $encript_o_id_id;?>">
<label>Message</label>
<textarea class="form_control" name="f_followup_message" rows="2" id="f_followup_message"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="profile_footer clearfix">
<button type="submit" class="btn_default submit_btn">Submit</button>
<button type="button" class="btn_default cancel_btn" onclick="closePopup(this)" data-id=""> Cancel</button>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>

You have to track the individual click. I have used java-script variable you could do that using data attribute on select boxes
var selectedBox = null;
$(function() {
$("#f_order_status_confirm").change(function() {
selectedBox = 2;
$('#popup_verify').show();
});
$("#f_order_status").change(function() {
selectedBox = 1;
$('#popup_verify').show();
});
});
On Ajax Part
url = "<?php echo base_url('Customer_control/admin_order_verification');?>";
if(selectedBox == 2){
url = "<?php echo base_url('Customer_control/admin_order_verification_something');?>";
}
$.ajax({ //do ajax to do update
type: "POST",
url: url,
data: {
f_order_status: f_order_status,
f_order_status_confirm: f_order_status_confirm
},

Isotope - combination buttons and UI slider not working

I am trying to get Isotope plugin to filter with both cobination buttons and a UI slider but not sure how to go about doing it.
Can any one help me to acheve this.
Here is a link to my problem code pen test case
<h1>Isotope - combination filters</h1>
<div class="filters">
<div class="ui-group">
<h3>Color</h3>
<div class="button-group js-radio-button-group" data-filter-group="color">
<button class="button is-checked" data-filter="">any</button>
<button class="button" data-filter=".red">red</button>
<button class="button" data-filter=".blue">blue</button>
<button class="button" data-filter=".yellow">yellow</button>
</div>
</div>
<div class="ui-group">
<h3>Size</h3>
<div class="button-group js-radio-button-group" data-filter-group="size">
<button class="button is-checked" data-filter="">any</button>
<button class="button" data-filter=".small">small</button>
<button class="button" data-filter=".wide">wide</button>
<button class="button" data-filter=".big">big</button>
<button class="button" data-filter=".tall">tall</button>
</div>
</div>
<div class="ui-group">
<h3>Shape</h3>
<div class="button-group js-radio-button-group" data-filter-group="shape">
<button class="button is-checked" data-filter="">any</button>
<button class="button" data-filter=".round">round</button>
<button class="button" data-filter=".square">square</button>
</div>
</div>
<div class="sliders" data-filter-group="features">
<div class="noUi-target noUi-ltr noUi-horizontal noUi-background" id="slider-range"></div>
<span class="val" id="slider-range-value"></span>
</div>
</div>
<div class="grid">
<div class="color-shape small round red">180.00</div>
<div class="color-shape small round blue">195.00</div>
<div class="color-shape small round yellow">202.00</div>
<div class="color-shape small square red">235.00</div>
<div class="color-shape small square blue">240.00</div>
<div class="color-shape small square yellow">250.00</div>
<div class="color-shape wide round red">255.00</div>
<div class="color-shape wide round blue">275.00</div>
<div class="color-shape wide round yellow">285.00</div>
<div class="color-shape wide square red">290.00</div>
<div class="color-shape wide square blue">295.00</div>
<div class="color-shape wide square yellow">300.00</div>
<div class="color-shape big round red">300.00</div>
<div class="color-shape big round blue">300.00</div>
<div class="color-shape big round yellow">300.00</div>
<div class="color-shape big square red">300.00</div>
<div class="color-shape big square blue">180.00</div>
<div class="color-shape big square yellow">180.00</div>
<div class="color-shape tall round red">180.00</div>
<div class="color-shape tall round blue">180.00</div>
<div class="color-shape tall round yellow">255.00</div>
<div class="color-shape tall square red">255.00</div>
<div class="color-shape tall square blue">255.00</div>
<div class="color-shape tall square yellow">255.00</div>
</div>
$( function() {
// filter functions
var filterFns = {
greaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) > 50.00;
},
even: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) % 2 === 0;
}
};
// init Isotope
var $container = $('.isotope').isotope({
itemSelector: '.color-shape',
filter: function() {
var isMatched = true;
var $this = $(this);
for ( var prop in filters ) {
var filter = filters[ prop ];
// use function if it matches
filter = filterFns[ filter ] || filter;
// test each filter
if ( filter ) {
isMatched = isMatched && $(this).is( filter );
}
// break if not matched
if ( !isMatched ) {
break;
}
}
return isMatched;
}
});
// store filter for each group
var filters = {};
$('#filters').on( 'click', '.button', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.attr('data-filter');
// arrange, and use filter fn
$container.isotope('arrange');
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
});
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
/* ---- button ---- */
.button {
display: inline-block;
padding: 0.5em 1.0em;
background: #EEE;
border: none;
border-radius: 7px;
background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
color: #222;
font-family: sans-serif;
font-size: 16px;
text-shadow: 0 1px white;
cursor: pointer;
}
.button:hover {
background-color: #8CF;
text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
color: #222;
}
.button:active,
.button.is-checked {
background-color: #28F;
}
.button.is-checked {
color: white;
text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}
.button:active {
box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}
/* ---- button-group ---- */
.button-group:after {
content: '';
display: block;
clear: both;
}
.button-group .button {
float: left;
border-radius: 0;
margin-left: 0;
margin-right: 1px;
}
.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }
/* ---- isotope ---- */
.grid {
background: #EEE;
max-width: 1200px;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ui group */
.ui-group {
display: inline-block;
}
.ui-group h3 {
display: inline-block;
vertical-align: top;
line-height: 32px;
margin-right: 0.2em;
font-size: 16px;
}
.ui-group .button-group {
display: inline-block;
margin-right: 20px;
}
/* color-shape */
.color-shape {
width: 70px;
height: 70px;
margin: 5px;
float: left;
}
.color-shape.round {
border-radius: 35px;
}
.color-shape.big.round {
border-radius: 75px;
}
.color-shape.red { background: red; }
.color-shape.blue { background: blue; }
.color-shape.yellow { background: yellow; }
.color-shape.wide, .color-shape.big { width: 150px; }
.color-shape.tall, .color-shape.big { height: 150px; }
/* Functional styling for range slider;
* These styles are required for noUiSlider to function.
* You don't need to change these rules to apply your design.
*/
.noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-touch-action: none;
touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-target {
position: relative;
direction: ltr;
width: 62%;
margin-left: 20px;
}
.noUi-base {
width: 100%;
height: 100%;
position: relative;
z-index: 1; /* Fix 401 */
}
.noUi-origin {
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0;
}
.noUi-handle {
position: relative;
z-index: 1;
}
.noUi-stacking .noUi-handle {
/* This class is applied to the lower origin when
its values is > 50%. */
z-index: 10;
}
.noUi-state-tap .noUi-origin {
-webkit-transition: left 0.3s, top 0.3s;
transition: left 0.3s, top 0.3s;
}
.noUi-state-drag * {
cursor: inherit !important;
}
/* Painting and performance;
* Browsers can paint handles in their own layer.
*/
.noUi-base {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/* Slider size and handle placement;
*/
.noUi-horizontal {
height: 18px;
}
.noUi-horizontal .noUi-handle {
width: 35px;
height: 26px;
left: -17px;
top: -5px;
}
.noUi-vertical {
width: 18px;
}
.noUi-vertical .noUi-handle {
width: 35px;
height: 26px;
left: -6px;
top: -5px;
}
/* Styling;
*/
.noUi-background {
background: #EEE linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.2)) repeat scroll 0% 0%;
box-shadow: inset 0 1px 1px #f0f0f0;
}
.noUi-connect {
background: #3FB8AF;
box-shadow: inset 0 0 3px rgba(51,51,51,0.45);
-webkit-transition: background 450ms;
transition: background 450ms;
}
.noUi-origin {
border-radius: 2px;
}
.noUi-target {
border-radius: 8px;
border: 1px solid #D3D3D3;
box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}
.noUi-target.noUi-connect {
box-shadow: inset 0 0 3px rgba(51,51,51,0.45), 0 3px 6px -5px #BBB;
}
/* Handles and cursors;
*/
.noUi-draggable {
cursor: w-resize;
}
.noUi-vertical .noUi-draggable {
cursor: n-resize;
}
.noUi-handle {
border-radius: 8px;
background: #7D64B1;
cursor: grab;
}
.noUi-active {
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.8) inset;
cursor: grabbing;
}
/* Handle stripes;
*/
.noUi-handle:before,
.noUi-handle:after {
content: "";
display: block;
position: absolute;
height: 14px;
width: 1px;
background: #E8E7E6;
left: 14px;
top: 6px;
}
.noUi-handle:after {
left: 19px;
}
.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
width: 14px;
height: 1px;
left: 6px;
top: 14px;
}
.noUi-vertical .noUi-handle:after {
top: 17px;
}
/* Disabled state;
*/
[disabled].noUi-connect,
[disabled] .noUi-connect {
background: #B8B8B8;
}
[disabled].noUi-origin,
[disabled] .noUi-handle {
cursor: not-allowed;
}
.val{
margin: 9px 0px 0px;
width: 8%;
display: block;
}
.color-shape{
text-indent:-9999px;
}
If any one can help it would be much appreciated.

Let’s give it a try. See my demo on CodePen
The trick is to use a filter function for Isotope. Rather than changing the filter, we can change the values used in the filter logic. For this demo, we have two values: the buttonFilter and the sliderValue. I’ve set the filter function to check if the item matches the buttonFilter AND has a text value that is greater than or equal to the sliderValue.
// external js: isotope.pkgd.js
$(document).ready( function() {
var sliderValue = 180;
// create the slider;
var rangeSlider = document.getElementById('slider-range');
noUiSlider.create(rangeSlider, {
start: [ 180 ],
range: {
'min': [ 180 ],
'max': [ 300 ]
}
});
// create the slider range value;
var rangeSliderValueElement = document.getElementById('slider-range-value');
rangeSlider.noUiSlider.on('update', function( values, handle ) {
rangeSliderValueElement.innerHTML = values[handle] + " cm";
});
// store filter for each group
var buttonFilters = {};
var buttonFilter = '*';
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.color-shape',
// use filter function
filter: function() {
var $this = $(this);
var isMinSize = parseFloat( $this.text() ) >= sliderValue;
return $this.is( buttonFilter ) && isMinSize;
}
});
$('.filters').on( 'click', '.button', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
buttonFilters[ filterGroup ] = $this.attr('data-filter');
// combine filters
buttonFilter = concatValues( buttonFilters ) || '*';
console.log( buttonFilter )
// set filter for Isotope
$grid.isotope();
});
// filter isotope on slider set
rangeSlider.noUiSlider.on( 'set', function( textValues, handle, values ) {
sliderValue = values[ handle ];
$grid.isotope();
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
});
// flatten object by concatting values
function concatValues( obj ) {
var value = '';
for ( var prop in obj ) {
value += obj[ prop ];
}
return value;
}

Create a custom select box dropdown using jQuery

I am trying to style the input[text] and ul list to function as select-option. However, my below code breaks after I selected an option. As the code below, if I select an option from a list, the value of the input[text] change but the list doesn't hide itself. If I uncomment the line in the javascript, the list will hide after I select an option, the list won't show again if I click on the input again. Could anyone help me to fix this problem? I don't know much about jquery and javascript, so I spend couple hours trying to debug but it doesn't fix at all.
$(document).ready(function() {
selecta("#a", "#b")
$("#a").click(function() {
$("#b").show();
});
});
function selecta(a, b) {
$(b + " li").click(function() {
$(b).hide();
/*$(b + " ul").hide();*/
var v = $(this).text();
$(a + " input").val(v);
});
}
.cselect {
position: relative;
}
.cselect input[type]:disabled {
background: #fff;
}
.cselect-menu {
display: none;
position: absolute;
/* top: 0px;*/
left: 0px;
width: 100%;
background: #fff;
}
.cselect-menu ul {
border: 1px solid #d6d6d6;
width: 100%;
}
.cselect-menu li {
padding: 10px 5%;
width: 90%;
}
.cselect-menu li:hover {
background: rgba(41, 128, 185, 0.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a" class="cselect">
<input type="text" disabled placeholder="Select"/>
<div id="b" class="cselect-menu">
<ul >
<li>Business</li>
<li>Hair</li>
</ul>
</div>
</div>

jsBin demo
Use event.stopPropagation(); to prevent clicks on #b propagate to the parent #a
function selecta(a, b) {
$(b + " li").click(function( event ) {
event.stopPropagation(); // HERE!
$(b).hide();
/*$(b + " ul").hide();*/
var v = $(this).text();
$(a + " input").val(v);
});
}
Frankly... I'f I wanted to use your code on multiple custom-dropdowns of yours I'd go mad with that jQuery...
Here I've simplified HTML, CSS and jQuery:
$(function() { // DOM ready
$(".cselect").each(function(){
var $input = $(this).find("input");
var $dropDown = $(this).find("ul");
$(this).on("click", function(){
$dropDown.stop().slideToggle();
});
$dropDown.on("click", "li", function(){
$input.val( $(this).text() );
});
});
});
*{margin:0; padding:0;} /* ugly reset */
.cselect {
position: relative;
}
.cselect input{
background: #fff;
}
.cselect ul{
display: none;
position: absolute;
z-index:999;
left: 0;
top: 1.2rem;
margin:0;
width: 100%;
background: #fff;
border: 1px solid #d6d6d6;
}
.cselect li {
padding: 10px 5%;
list-style:none;
}
.cselect li:hover {
background: rgba(41, 128, 185, 0.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cselect">
<input type="text" disabled placeholder="Select n1">
<ul>
<li>Business</li>
<li>Hair</li>
</ul>
</div>
<div class="cselect">
<input type="text" disabled placeholder="Select n2">
<ul>
<li>Something</li>
<li>Else</li>
</ul>
</div>