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>
Related
I've tried a few different things to fix this, but I have
#serverselect{
color: white;
background: black;
/*TOP BAR COLOR DOJCAD is #2196f3*/
font-family: Roboto;
width: 100%;
height: 30px;
display: flex;
flex-direction: row;
align-items: center;
}
<select id="server" style= "background-color: #000000 ; color: #FFFFFF" onchange="location = this.value;">
<option value="0" selected disabled>Select A Server</option>
<option value="?server=1">1</option>
<option value="?server=2">2</option>
<option value="?server=3">3</option>
<option value="?server=4">4</option>
<option value="?server=5">5</option>
</select>
</div>
When I make the window smaller, the "banner" clutters up and makes it unusable. See linked images.
Incorrect: https://imgur.com/a/rDOOrAo
Correct: https://imgur.com/a/06VKiYF
I want to change the text colour of several options in select dropdown.
I don't care about which one is selected. I just want the user to see, when opening the dropdown menu, some options as yellow (in this example).
<select>
<option>Black</option>
<option>Black</option>
<option style="color: rgb(255, 255, 0);">Yellow</option>
</select>
This is my JSFiddle
Other solutions in Stackoverflow haven't worked for me in Chrome 59.
I also want to be able to change the colour of the options with Javascript/JQuery like so:
var option = AJS.$('<option>', {...});
option.css("color", "#2ee4ff");
I can't manage to make the colours work at all, however.
You can try this:
$("select option").each(function(){
value=$(this).val();
$(this).css("color",value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option>Black</option>
<option>Black</option>
<option>Yellow</option>
</select>
I got frustrated with the possibilities to style a select box a long time ago and created an alternative. Maybe this helps you.
It uses a ul to display the options and stores the chosen value in the div being displayed on the screen and the input tag for further processing.
$("body").on("click", ".selected", function() {
$(this).next(".options").toggleClass("open");
});
$("body").on("click", ".option", function() {
var selected = $(this).find("span").html();
$(".selected").html(selected);
$("input[name='mySelect']").val(selected);
$(".options").toggleClass("open");
});
.container {
display: flex;
flex-wrap: wrap;
width: 25%;
}
.selected {
border: thin solid darkgray;
border-radius: 5px;
background: lightgray;
display: flex;
align-items: center;
cursor: pointer;
height: 1.5em;
margin-bottom: .2em;
padding-left: .5em;
min-width: 150px;
position: relative;
}
.selected:after {
font-family: FontAwesome;
content: "\f0d7";
margin-left: 1em;
position: absolute;
right: .5em;
}
.options {
display: none;
margin: 0;
padding: 0;
}
.options.open {
display: inline-block;
}
li {
display: flex;
justify-content: flex-start;
align-items: center;
cursor: pointer;
}
li>img {
margin-right: 1em;
}
.yellow {
color: yellow;
}
.blue {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<form>
<input type="hidden" name="mySelect" value="">
<div class="selected">Select an option</div>
<ul class="options">
<li class="option yellow"><span>Option 1</span></li>
<li class="option"><span>Option 2</span></li>
<li class="option blue"><span>Option 3</span></li>
</ul>
</form>
</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 have a text input. I put a label with a red star to highlight that that input is required in the form submission.
What I did is
<html>
<head>
</script>
<style type="text/css">
input[required] + label {
color: #999;
font-family: Arial;
font-size: 17px;
position: relative;
/*left: -230px; the negative of the input width */
}
input[required] + label:after {
content:'*';
color: red;
}
/* show the placeholder when input has no content (no content = invalid) */
input[required]:invalid + label {
display: inline-block;
}
/* hide the placeholder when input has some text typed in */
input[required]:valid + label{
display: none;
}
</style>
</head>
<body>
<form name="registerForm" action="submit_page.php" method="post">
<div class="form_box">
<div class="input_box ">
<input maxlength="60" type="text" name="name" id="name" required="required" />
<label for="name">Name</label>
<div id="name-error" class="error-box"></div>
</div>
<div class="clear"></div>
</div>
</form>
</div>
</body>
It works for the text input.
I did the same thing for <select <select/>.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
#header { background-color:green; color:white; text-align:center; padding:5px;}
#background {background: url(register_background.png);}
body {
background-color: #cccccc;
}
.star { color: red;}
.button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;}
.button2:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}
select[required] + label {
color: #999;
font-family: Arial;
font-size: 17px;
position: relative;
/*left: -230px; the negative of the input width */
}
select[required] + label:after {
content:'*';
color: red;
}
/* show the placeholder when input has no content (no content = invalid) */
select[required]:invalid + label {
display: inline-block;
}
/* hide the placeholder when input has some text typed in */
select[required]:valid + label{
display: none;
}
</style>
</head>
<body>
<div id="header">
<h1>Please add your property to advertise</h1>
</div>
<div id="background">
<form name="advertiseForm" method="post">
<br /><br />
<select name="divs_states">
<option value="divsORstates" >Divisions or States</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
required="required"
<select/>
<label for="divs_states">Please select a region</label>
<div id="divs_states-error" class="error-box"></div>
</form>
</div>
</body>
</html>
But I don't see a red star. Then when I make a selection, the text doesn't disappear.
What should be is if the selection is Divisions or States, the label Please select a region together with a red star should appear. In case, I select saab, fiat, audi, the text should disappear.
How can I do that?
Thanks
EDIT:
<select name="divs_states" required="required"/>
<option value="divsORstates" >Divisions or States</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
<select/>
<label for="divs_states">Please select a region</label>
<div id="divs_states-error" class="error-box"></div>
The reason for your problem is that you're using the same selector from your input label for your select label.
You have this on both:
input[required] + label:after {
content:'*';
color: red;
}
But in your select form the HTML is different. It needs to be this instead:
select[name] + label:after {
content:'*';
color: red;
}
A little too much cut and paste, perhaps? ;-)
Also note that your closing </select> tag is incorrect, and you have required="required" misplaced in the element (ah, there it is). It should be in the opening <select> tag. In fact, consider running your code through the W3C HTML Validation Service to check for errors.
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.