When using the jquery picklist (from: https://code.google.com/p/jquery-ui-picklist/) I only get one list instead of 2 (left and right). Any ideas?
I almost copy pasted all from http://jsfiddle.net/awnry/ScX4S/
HTML code:
<html>
<head>
<title>TestSite</title>
<link href="./css/test.css" rel="stylesheet">
</head>
<body>
<script src="./scripts/jquery-1.11.0.js"></script>
<script src="./scripts/jquery.ui.widget.js"></script>
<script src="./scripts/jquery-picklist.js"></script>
<script src="./scripts/test.js"></script>
<div>
<select name="basic" id="basic" multiple="multiple">
<option value="1">Option 1</option>
<option value="2" selected="selected">Option 2</option>
<option value="3">Option 3</option>
<option value="4" selected="selected">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</body>
</html>
JS Code:
$(document).ready(function() {
$("#basic").picklist();
});
CSS Code:
body { margin: 0.5em; }
.pickList_sourceListContainer, .pickList_controlsContainer, `.pickList_targetListContainer { float: left; margin: 0.25em; }`
.pickList_controlsContainer { text-align: center; }
.pickList_controlsContainer button { display: block; width: 100%; text-align: center; }
.pickList_list { list-style-type: none; margin: 0; padding: 0; float: left; width: 150px; height: 75px; border: 1px inset #eee; overflow-y: auto; cursor: default; }
.pickList_selectedListItem { background-color: #a3c8f5; }
.pickList_listLabel { font-size: 0.9em; font-weight: bold; text-align: center; }
.pickList_clear { clear: both; }
In your code, Change
<script src="./scripts/jquery-1.11.0.js"></script>
<script src="./scripts/jquery-picklist.js"></script>
<script src="./scripts/jquery.ui.widget.js"></script>
to
<script src="./scripts/jquery-1.11.0.js"></script>
<script src="./scripts/jquery.ui.widget.js"></script>
<script src="./scripts/jquery-picklist.js"></script>
Reason : You should include reference jquery UI widget before picklist. (Check the ordering in the fiddle)
The ordering matters as picklist refers the former(jquery UI widget library) for its functionality - Reference.
Related
Desired result: https://jsfiddle.net/nstruth/t0dopzav/1/
The HTML is displaying when I select Volvo, but the JavaScript isn't running. I looked at other innerHTML JavaScript questions, but I'm confused. As you can see in this JSFiddle the units aren't populating but I can enter numbers in the input field. https://jsfiddle.net/nstruth/ksgwaqc8/8/
// In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
$("#cars2").select2();
});
//Distance Math
var units = [
['Inches', 0.025400000000000],
['Feet', 0.30480000000000000],
['Furlongs', 201.168]
];
var selectors = document.querySelectorAll('.newClass1');
for (var i = 0; i < units.length; i++) {
for (var j = 0; j < selectors.length; j++) {
var option = document.createElement('option');
option.value = units[i][1];
option.textContent = units[i][0];
selectors[j].add(option);
}
}
function calcLength1() {
var SpecialValue = document.getElementById("lengthInput1").value * document.getElementById("lengthCalc1").value / document.getElementById("lengthCalc2").value;
document.getElementById("lengthInput2").value = SpecialValue.toFixed(12);
}
function calcLength2() {
var SpecialValue = document.getElementById("lengthInput2").value * document.getElementById("lengthCalc2").value / document.getElementById("lengthCalc1").value;
document.getElementById("lengthInput1").value = SpecialValue.toFixed(12);
}
function myFunction(event) {
var x = document.getElementById("myDIV");
//here you are picking the selected option item
var y = $('select#cars2 option:selected').val();
switch (y) {
case '1':
x.innerHTML = `<p>From:</p>
<select style="float:left" id="lengthCalc1" class="js-example-basic-single select2-container newClass1" oninput="calcLength1()" onchange="calcLength1()">
</select>
<input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="lengthInput1" type="number" oninput="calcLength1()" onchange="calcLength1()" />
<p>To:</p>
<select style="float:left" id="lengthCalc2" class="js-example-basic-single select2-container newClass1" oninput="calcLength2()" onchange="calcLength2()">
</select>
<input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="lengthInput2" type="number" oninput="calcLength2()" onchange="calcLength2()" />`;
$(".js-example-basic-single").select2();
break;
case '2':
x.innerHTML = "<p>Roy!</p>";
}
}
select {
width: 150px;
}
.select2-selection--single {
height: 100px !important
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: 2px solid red;
border-radius: 5px;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion:hover {}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
body {
font-family: Arial;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<div id="myDIV">
<p>Hello</p>
</div>
<label for="cars">Choose a car:</label>
<select id="cars2" onchange="myFunction()">
<option value="0">Pick something</option>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
<script>
</script>
I solved my problem with display:none and jQuery. This fiddle shows what I did. https://jsfiddle.net/nstruth/482sgxcu/9/
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="STYLE.css">
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script> // In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
$('#cars2').select2();
$('#cars2').select2('open');
});
</script>
<style>..
select {
width: 150px;
}
</style>
</head>
<body>
<div id="myDIV"><p>Hello</p></div>
<label for="cars">Choose a car:</label>
<select id="cars2">
<option value="red">Pick something</option>
<option value="yellow">Volvo</option>
<option value="blue">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
<script>
$(function() {
$('#cars2').change(function(){
$('.colors').hide();
$('#' + $(this).val()).show();
});
});
</script>
<div id="yellow" style="display:none">
<p>From:</p>
  <select style="float:left;" id="MetricAndImperialLength1" class="js-example-basic-single select2-container newClass1 colors" oninput="Run1()" onchange="Run1()">
</select>
<input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000" id="Input1" type="number" oninput="Run1()" onchange="Run1()">
<p>To:</p>
<select style="float:left" id="MetricAndImperialLength2" class="js-example-basic-single select2-container newClass1" oninput="Run2()" onchange="Run2()">
</select>
<input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000" id="Input2" type="number" oninput="Run2()" onchange="Run2()" /></div>
<script src="mathandstuff.js"></script>
<script>
$(".js-example-basic-single").select2();
</script>
</body>
</html>
Hello as I'm finding ways to create and editable Vinyl or text editor I cant make it work, I want an output similar to this link https://www.stickermule.com/products/vinyl-lettering , I made one but with buttons and it worked but I want to apply it via combo box but it wouldn't work, can someone help me? I'm using HTML CSS and JavaScript.
Here is the code i have tried
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
p {
width: 40%;
border: 1px solid black;
padding: 10px;
font-weight: bold;
font-size: 18px;
}
button {
padding: 10px 20px;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
Select Color:
<select>
<option>Choose a Color</option>
<option id="btnRed">Red</option>
<option id="btnBlue">Blue</option>
<option id="btnGreen">Green</option>
</select>
<textarea style="width: 25%; height: 200px;"></textarea>
</div>
<script>
let btnRed = document.querySelector('#btnRed');
let btnBlue = document.querySelector('#btnBlue');
let btnGreen = document.querySelector('#btnGreen');
let content = document.querySelector('textarea');
btnRed.addEventListener('click',() => content.style.color = 'red');
btnBlue.addEventListener('click',() => content.style.color = 'blue');
btnGreen.addEventListener('click',() => content.style.color = 'green');
</script>
</body>
</html>
I developed this solution using jQuery for simplicity. When the change event of the <select> element is triggered, the value of the <option> elements is assigned to the <textarea> element whose id attribute is resultTextArea.
$( ".target" ).change(function() {
$('#resultTextArea').css('color', this.value);
});
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
Select Color:
<select class="target">
<option>Choose a Color</option>
<option id="btnRed" value="red">Red</option>
<option id="btnBlue" value="blue">Blue</option>
<option id="btnGreen" value="green">Green</option>
</select>
<textarea id="resultTextArea" style="width: 25%; height: 200px;"></textarea>
</div>
I have developed a solution using plain JavaScript in the solution below. The SetColor() method is called when the <select> element's onchange event is triggered; the value of the selected element in the <select> element is assigned to the color style of the <textarea> element.
function SetColor()
{
var value = document.getElementById("selectElement").value;
var textareaElement = document.getElementById("resultTextArea");
textareaElement.style.color = value;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
<div class="container">
Select Color:
<select id="selectElement" onchange="SetColor()">
<option>Choose a Color</option>
<option id="btnRed" value="red">Red</option>
<option id="btnBlue" value="blue">Blue</option>
<option id="btnGreen" value="green">Green</option>
</select>
<textarea id="resultTextArea" style="width: 25%; height: 200px;"></textarea>
I have a select element with options inside that will not show when in Firefox.
This should be showing 3 different options. In Chrome and Safari it works fine. I've been looking for a solution and nothing seems to work. Apparently this is a bug in Firefox. Here's the html.
.select-field {
display: inline-block;
width: 100%;
background-color: #005D5D;
border-radius: .5em;
margin: 0 auto;
}
.select-field>select {
float: left;
width: 100%;
background-color: transparent;
border: 0em;
padding: .5em;
font-size: 1em;
color: white;
background: url("./menu_arrow.svg") no-repeat 97% 50%;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
<div id="games">
<div className="select-field">
<select onChange={this.props.gameProp}>
<option value="streetfighter" label="Street Fighter">Street Fighter 5</option>
<option value="tekken" label="Tekken">Tekken 7</option>
<option value="mvci" label="Marvel vs Capcom: Infinite">Marvel vs Capcom: Infinite</option>
</select>
</div>
</div>
This works totally fine if I run in Firefox, https://jsfiddle.net/prashu421/8b1w8afr/
can you share your CSS as well?
<div id="games">
<div className="select-field">
<select onChange={this.props.gameProp}>
<option value="streetfighter" label="Street Fighter">Street Fighter 5</option>
<option value="tekken" label="Tekken">Tekken 7</option>
<option value="mvci" label="Marvel vs Capcom: Infinite">Marvel vs Capcom: Infinite</option>
</select>
</div>
</div>
I have used datalist function to list my product names, if list goes too long vertical scrolling not display in google chrome and some browsers. Is it possible to add overflow-y: scroll in css style for datalist? Used code below:
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="a"></option>
<option value="b"></option>
<option value="c"></option>
<option value="d"></option>
<option value="e"></option>
<option value="f"></option>
<option value="g"></option>
<option value="h"></option>
<option value="i"></option>
<option value="j"></option>
<option value="k"></option>
<option value="l"></option>
<option value="m"></option>
<option value="n"></option>
<option value="o"></option>
<option value="p"></option>
<option value="q"></option>
<option value="r"></option>
<option value="s"></option>
<option value="t"></option>
<option value="u"></option>
<option value="v"></option>
<option value="w"></option>
<option value="x"></option>
<option value="y"></option>
<option value="z"></option>
<option value="abc"></option>
<option value="def"></option>
<option value="ghi"></option>
<option value="jkl"></option>
<option value="mno"></option>
<option value="pqrs"></option>
<option value="tuv"> </option>
</datalist>
<input type="submit">
</form>
There is simple solution for this. Use https://github.com/b3n/datalist plugin.
Example:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="YOURBASE_JS_PATH/src/datalist.js"></script>
var maxHeight = '200px';
var openOnClick = true;
$('input[list]').datalist(maxHeight, openOnClick);
Unfortunately, No you can't use overflow-y property for datalist. You will have to write jQuery code to make it happen or at least show all possible values.
I wrote a small example for you i hope it will help you to get it done for you yourself:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#options{
display: none;
height: 300px;
text-align: center;
border: 1px solid red;
overflow-y:scroll;
}
#options>p{
margin-top: 10px;
margin-bottom: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="a"></option>
<option value="b"></option>
<option value="c"></option>
<option value="d"></option>
<option value="e"></option>
<option value="f"></option>
<option value="g"></option>
<option value="h"></option>
<option value="i"></option>
<option value="j"></option>
<option value="k"></option>
<option value="l"></option>
<option value="m"></option>
<option value="n"></option>
<option value="o"></option>
<option value="p"></option>
<option value="q"></option>
<option value="r"></option>
<option value="s"></option>
<option value="t"></option>
<option value="u"></option>
<option value="v"></option>
<option value="w"></option>
<option value="x"></option>
<option value="y"></option>
<option value="z"></option>
</datalist>
<input type="submit">
<div id="options">
</div>
</form>
<div class="med_rec"></div>
<script>
$('#browsers option').each(function(){
$('#options').append('<p>'+$(this).val()+'</p>');
})
$('#options').css({'width':$('input[name="browser"]').width()});
$('input[name="browser"]').click(function(){
$('#options').show();
});
$('input[name="browser"]').keyup(function(){
$('#options').hide();
});
$('#options p').click(function(){
$('input[name="browser"]').val($(this).text());
$('#options').hide();
})
</script>
</body>
</html>
It actually creates a second option list for you to choose from which is scrollable and if user types in input box then datalist works as expected to give suggestions.
I hope it helps
I have used ComboBox Javascript Component to fix this problem, from: https://www.zoonman.com/projects/combobox/
var no = new ComboBox('cb_identifier');
div.combobox {
font-family: Tahoma;
font-size: 12px
}
div.combobox {
position: relative;
zoom: 1
}
div.combobox div.dropdownlist {
display: none;
width: 200px;
border: solid 1px #000;
background-color: #fff;
height: 200px;
overflow: auto;
position: absolute;
top: 18px;
left: 0px;
}
div.combobox .dropdownlist a {
display: block;
text-decoration: none;
color: #000;
padding: 1px;
height: 1em;
cursor: default
}
div.combobox .dropdownlist a.light {
color: #fff;
background-color: #007
}
div.combobox .dropdownlist,
input {
font-family: Tahoma;
font-size: 12px;
}
div.combobox input {
float: left;
width: 182px;
border: solid 1px #ccc;
height: 15px
}
div.combobox span {
border: solid 1px #ccc;
background: #eee;
width: 16px;
height: 17px;
float: left;
text-align: center;
border-left: none;
cursor: default
}
<script type="text/javascript" charset="utf-8" src="https://www.zoonman.com/projects/combobox/combobox.js"></script>
<div class="combobox">
<input type="text" name="comboboxfieldname" id="cb_identifier">
<span>▼</span>
<div class="dropdownlist">
<a>Item1</a>
<a>Second Item2</a>
<a>Third Item3</a>
</div>
</div>
I spent 3 days. I tried to design step by step progress bar like below.
====(discount 10 %)======(discount 20 %)=====(discount 30 %)========
fill it dynamically how can i do that i searched on google every thing i tried to customize but not success so far.
Thanks
I've just made this to inspire you (not sure if it's what you try to do).
$(document).ready(function() {
$('#discount').on('change', function() {
$('#discount-bar').css({'width' : $(this).val() + '%'});
});
});
select {
margin-bottom: 12px;
}
.discount-bar-container {
position: relative;
width: 400px;
height: 30px;
border: 1px solid black;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.discount-bar-container .discount-bar {
position: absolute;
display: block;
height: 100%;
width: 0;
background-color: red;
transition: width 0.4s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="discount">Choose a value :</label>
<select name="discount" id="discount">
<option value="0">0%</option>
<option value="10">10%</option>
<option value="20">20%</option>
<option value="30">30%</option>
<option value="40">40%</option>
<option value="50">50%</option>
<option value="60">60%</option>
<option value="70">70%</option>
<option value="80">80%</option>
<option value="90">90%</option>
<option value="100">100%</option>
</select>
<div class="discount-bar-container">
<div class="discount-bar" id="discount-bar"></div>
</div>