I am very new to code, but I was wondering what direction I should go with this code. I am going to have a drop down menu where you can pick a color and an image will be displayed in the preview box. I need each of the color1 color2 and color3 images be displayed all at the same time in the preview box. They also need to be able to change when other colors are picked. If anyone could give some sort of direction that would be awesome :) oh I also have my image set up in a sprite
Here is the code that I have so far :
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
#preview {
display: block;
width: 270px;
height: 270px;
border: 1px solid black;
}
</style>
<div id="preview">
<img id="image" src="image.png" />
</div>
<form action="" id="opts">
<label for="color1">Front Color</label>
<select name="color1" id="color1">
<option value="white" selected="">white</option>
<option value="black">black</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="gold">gold</option>
<option value="pink">pink</option>
<option value="purple">purple</option>
</select>
<br>
<label for="color2">Middle Color</label>
<select name="color2" id="color1">
<option value="white">white</option>
<option value="black">black</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="gold">gold</option>
<option value="pink">pink</option>
<option value="purple">purple</option>
</select>
<br>
<label for="color3">Back Color</label>
<select name="color3" id="color1">
<option value="white">white</option>
<option value="black">black</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="gold">gold</option>
<option value="pink">pink</option>
<option value="purple">purple</option>
</select>
</form>
<script>
function setcolor1() {
var img = document.getElementById("image");
img.src = this.value;
return false;
}
document.getElementById("color1").onchange = setcolor1;
}
</script>
I recommend that you write JS or jQuery(whichever you prefer) to change background color onhover or onclick, that way your image looks like different color a user clicks on color button. Buttons improve the UX (user-experience) and have feel much better than strolling through option list.
Also
#preview {
display: block;
width: 270px;
height: 270px;
border: 1px solid black;
}
is not good for responsive web design/development
instead you should put the following:
html
{
width:100%;
}
#preview
{
width:10.5% (this percentage may change depending on how big you want this to cover your page)
max-width:100%;
}
I think using jquery you can solve this .You have used same id for all select boxes need to change.I suggest to use the code like-
**html**
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<div id="preview">
<img id="image" src="image.png" />
</div>
<form action="" id="opts">
<label for="color1">Front Color</label>
<select name="color1" id="color1">
<option value="white" selected="">white</option>
<option value="black">black</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="gold">gold</option>
<option value="pink">pink</option>
<option value="purple">purple</option>
</select>
<br>
<label for="color3">Back Color</label>
<select name="color3" id="color3">
<option value="white">white</option>
<option value="black">black</option>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="gold">gold</option>
<option value="pink">pink</option>
<option value="purple">purple</option>
</select>
</form>
**css**
* { margin: 0; padding: 0; box-sizing: border-box; }
#preview {
display: block;
width: 270px;
height: 270px;
border: 1px solid black;
}
#image{
width:100px;
}
**jquery**
$(function(){
$('#color1').change(function()
{
var e = document.getElementById("color1");
var col = e.options[e.selectedIndex].value;
$('#preview').css('color', col);
src='a.png';
$('#preview img').attr("src", src);
});
$('#color3').change(function()
{
var e = document.getElementById("color3");
var col = e.options[e.selectedIndex].value;
$('#preview').css('background-color', col);
});
});
jsfiddle link
Related
Currently, I have a dropdown list and 1-25 values in the dropdown.
The current one is I want to make a checkbox for those values instead of choosing multiple.
Is there any way to add a checkbox for those?
var mtf = document.getElementById('affectedwaferid').selectedOptions;
var affectedwf = Array.from(mtf).map(({ value }) => value);
//alert(affectedwf);
document.getElementById("selected-result").innerHTML = affectedwf;
<div id="afwid">
<label class="control-label col-sm-4" for="affectedwaferid" style="margin-left: 1px;">Affected Wafer ID : <span id="selected-result"></span></label>
<div class="col-sm-4">
<p class="form-control-static" style="margin-top: -6px;">
<select class="form-control" id="affectedwaferid" name="affectedwaferid" multiple>
<option value="" selected > Select Quantity</option>
<?php
//echo $cbo_oorigsite;
?>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
</select>
</p>
</div>
What you want is a MultiSelect. You can implement it on your own as shown here, or you can import a library:
https://www.cssscript.com/multi-select-dropdown-picker/
Firstly, your question is not very clear.
Anyway, I think you want something like below to select the quatity.
Try below and amend as you required:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<style>
h1 {
color: green;
}
.multipleSelection {
width: 300px;
background-color: #bcc2c1;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkBoxes {
display: none;
border: 1px #8df5e4 solid;
}
#checkBoxes label {
display: block;
}
#checkBoxes label:hover {
background-color: #4f615e;
}
</style>
<body>
<form>
<div class="multipleSelection">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select Quantity</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkBoxes">
<label for="first">
<input type="checkbox" id="first" class="chb" />
1
</label>
<label for="second">
<input type="checkbox" id="second" class="chb" />
2
</label>
<label for="third">
<input type="checkbox" id="third" class="chb" />
3
</label>
<label for="fourth">
<input type="checkbox" id="fourth" class="chb" />
4
</label>
</div>
</div>
</form>
<script>
let show = true
$('.chb').change(function () {
$('.chb').prop('checked', false)
$(this).prop('checked', true)
})
function showCheckboxes() {
if (show) {
$('#checkBoxes').hide()
show = false
} else {
$('#checkBoxes').show()
show = true
}
}
</script>
</body>
</html>
I found this JSFiddle which does what I want. However, I wanted the boxes to be inline and buttons as arrows.
So I modified above fiddle into this JSFiddle.
1) However, this is not working. Can someone please help with what am I doing wrong ? I am not able to move elements from left to right and vice versa.
2) I also want the width and height of my Select boxes as fixed with no scroll bar initially. For e.g. say 6 options. However, if the number of options increases (for e.g. it becomes 10), a scroll bar should automatically appear. Can someone point me to some tutorial which shows this ?
My code:
HTML:
<div class="bloc">
<select id="list1" multiple="multiple" rows=2>
<option value=1>Option 1</option>
<option value=2>Option 2</option>
<option value=3>Option 3</option>
<option value=4>Option 4</option>
<option value=5>Option 5</option>
<option value=6>Option 6</option>
</select>
</div>
<div style="display:inline-block;">
<input id="button1" type="button" value=">>" />
<br/>
<input id="button2" type="button" value="<<" />
</div>
<div class="bloc">
<select id="list2" multiple="multiple" rows=2>
</select>
</div>
Javascript:
$(function(){
$("#button1").click(function(){
$("#list1 > option:selected").each(function(){
$(this).remove().appendTo("#list2");
});
});
$("#button2").click(function(){
$("#list2 > option:selected").each(function(){
$(this).remove().appendTo("#list1");
});
});
});
CSS:
.bloc { display:inline-block; vertical-align:top; border:solid grey 1px; width:100px;}
You are missing jQuery in your fiddle. Below your working example with just one change i.e. added jquery import.
Edited
$(function() {
$("#button1").click(function() {
$("#list1 > option:selected").each(function() {
$(this).remove().appendTo("#list2");
});
});
$("#button2").click(function() {
$("#list2 > option:selected").each(function() {
$(this).remove().appendTo("#list1");
});
});
});
.bloc {
display: inline-block;
vertical-align: top;
/*border: solid grey 1px;*/
/*width: 100px;*/
height: 80px;
}
.bloc select {
width: 100px;
height: 100%;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="bloc">
<select id="list1" multiple="multiple">
<option value=1>Option 1</option>
<option value=2>Option 2</option>
<option value=3>Option 3</option>
<option value=4>Option 4</option>
<option value=5>Option 5</option>
<option value=6>Option 6</option>
</select>
</div>
<div class="bloc">
<input id="button1" type="button" value=">>" />
<br/>
<input id="button2" type="button" value="<<" />
</div>
<div class="bloc">
<select id="list2" multiple="multiple">
</select>
</div>
I'm trying to copy a section of a webpage when a link is clicked so that the section is recreated underneath the previous section just like how this works in this image as example-
I'm doing this on google apps script and here is my code
code.gs
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('HTML')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
HTML.html
<html>
<head>
<base target="_top">
<style type="text/css">
.contentBackground {
background-color: #D8D8D8;
clear: left;
width: 60%;
margin: auto;
height: 200px display: block;
}
.uploadFile p {
text-align: center;
padding: 20px;
color: red;
}
.content p {
text-align: center;
color: red;
padding: 7px;
}
.dropDown p {
text-align: center;
padding: 40px;
margin-left: 8px;
height:;
}
.moreFiles {
text-align: center;
}
</style>
</head>
<body>
<div class="contentBackground">
<div class="uploadWrapper">
<div class="fileUpload">
<div class="uploadFile">
<p>Upload File: <span style="color:black"><input type="file" name="uploadField" /></span></p>
</div>
<div class="content">
<p>Width(Inch) <input type="text" style="width: 100px"> Height(Inch) <input type="text" style="width: 100px"> Quantity <input type="text" style="width: 100px"></p>
</div>
</div>
</div>
<div class="dropDown">
<p>
Material <select style="max-width: 10%;">
<option value="Paper">Paper</option>
<option value="Vinyl Banner">Vinyl Banner</option>
<option value="Adhesive Vinyl">Adhesive Vinyl</option>
<option value="Polygloss">Polygloss</option>
<option value="Translucent Vinyl">Translucent Vinyl</option>
<option value="Static Cling Clear">Static Cling Clear</option>
<option value="Static Cling White">Static Cling White</option>
<option value="Reverse Static Cling">Reverse Static Cling</option>
<option value="Outdoor Paper">Outdoor Paper</option>
<option value="Backlit Film">Backlit Film</option>
<option value="Foam">Foam</option>
<option value="Coroplast">Coroplast</option>
<option value="Corrugated Board">Corrugated Board</option>
<option value="Sintra">Sintra</option>
<option value="Canvas">Canvas</option>
<option value="Fabric">Fabric</option>
<option value="All Cling">All Cling</option>
</select>
Lamination <select>
<option value="None">None</option>
<option value="Matte">Matte</option>
<option value="Gloss">Gloss</option>
<option value="Lexan">Lexan</option>
<option value="Erasable">Erasable</option>
</select>
Mounting <select>
<option value="3/16" Foam">3/16" Foam</option>
<option value="3/16" Gator">3/16" Gator</option>
<option value="1/8" Sintra">1/8" Sintra</option>
<option value="24point Card">24point Card</option>
<option value="50point Card">50point Card</option>
<option value="Adhesive Back">Adhesive Back</option>
<option value="MDF">MDF</option>
<option value="Coroplast">Coroplast</option>
<option value="Masonite">Masonite</option>
<option value="020 Styrene">020 Styrene</option>
<option value="040 Styrene">040 Styrene</option>
<option value="060 Styrene">060 Styrene</option>
<option value="080 Styrene">080 Styrene</option>
<option value="Corrugated Board">Corrugated Board</option>
</select>
Ink <select>
<option value="Indoor">Indoor</option>
<option value="Outdoor">Outdoor</option>
</select>
</p>
</div>
</div>
<div class="moreFiles">
Add another file?
</div>
</body>
</html>
If you opt to use jQuery, then you can use the .clone() method.
$("#add").on("click", function () {
var $last = $(".contentBackground").last();
$last.clone().insertAfter($last);
});
JSFiddle
I have select with these options:
<select name="kategory" class="select-field">
<option disabled>ATRACTIONS
<option value="">
<option value="Castles">Castles
<option value="History">History
</select>
And I have a check-box:
Do you want to eat?<input type="checkbox" class="checkbox" name="restaurants" value="" />
after select the check-box, I need to change the select option values to:
<option disabled>Restaurants
<option value="China food">Chinas food
<option value="Pizza">Pizza
<option value="Pub">Pub
but without page refresh. How can I do that?
Mark up both select boxes but have one hidden by default and then toggle it.
$('input[name="restaurants"]').change(function() {
$('select[name="category"]').toggle();
$('select[name="food"]').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Do you want to eat? <input type="checkbox" name="restaurants" />
<select name="category">
<option value="castles">Castles</option>
<option value="history">History</option>
</select>
<select name="food" style="display: none;">
<option value="chinese">Chinese</option>
<option value="pizza">Pizza</option>
<option value="pub">Pub</option>
</select>
Here is a different approach that separates the data from the choice (not better just different).
//Generalized into a function
function getList(name) {
$('#Choice').empty().append($('#source optgroup[data-type='+name+']').clone());
}
//Pull default data from Attractions
getList('Attractions');
$('input[name=restaurants]').on('change', function() {
if($(this).is(':checked')) {
//Replace with data from Restaurants
getList('Restaurants');
} else {
//Replace with data from Attractions
getList('Attractions');
}
})
#source {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Do you want to eat?<input type="checkbox" class="checkbox" name="restaurants" value="" />
<select id='Choice'></select>
<select id='source'>
<optgroup data-type='Attractions'>
<option disabled>ATTRACTIONS</option>
<option value="Castles">Castles</option>
<option value="History">History</option>
</optgroup>
<optgroup data-type='Restaurants'>
<option disabled>Restaurants</option>
<option value="China food">Chinas food</option>
<option value="Pizza">Pizza</option>
<option value="Pub">Pub</option>
</optgroup>
</select>
You can also do this with CSS and a little bit of Javascript.
<style>
#option-switcher select { display: none; }
#option-switcher.category select[name="category"] { display: block; }
#option-switcher.food select[name="food"] { display: block; }
</style>
<div id="option-switcher" class="category">
<select name="category">
<option value="castles">Castles</option>
<option value="history">History</option>
</select>
<select name="food">
<option value="chinese">Chinese</option>
<option value="pizza">Pizza</option>
<option value="pub">Pub</option>
</select>
<div>
Do you want to eat?<input onclick="toggleSelect()" type="checkbox" class="checkbox" name="restaurants" value="" />
<script>
function toggleSelect() {
document.getElementById('option-switcher').setAttribute('class', 'food')
}
</script>
This works by using CSS to hide the second select element (because the option-switcher div has a CSS class of either "category" or "food"). The onclick() handler of the select box will simply change the CSS class of the option-switcher and the other select box will be shown.
See this JSFiddle
I have been trying to create a form that having 4 elements. One is a dropdown box of checkboxes and the other are simple checkboxes. I am trying to place them one below the other. The difficulty is when the dropdown with the checkboxes are clicked the other dropdown slide down. On closing the dropdown with the checkboxes they slide up again. I am trying to place them one below the other, so that if the dropdown with checkboxes is clicked the other simply become invisible and not slide down. when the the dropdown of checkboxes is closed the remaining dropdown simply show up. Could someone please help me on this. I am trying to emulate something like the filters on luxuryretreats.com
Below is the code.
<html>
<head>
<script type="text/javascript">
function ExposeList1() {
var showstatus = document.getElementById('ScrollCountry').style.visibility;
if (showstatus == 'hidden') {
document.getElementById('ScrollCountry').style.visibility = "visible";
document.getElementById('Scrollguests').style.visibility = "hidden";
document.getElementById('Scrollminprice').style.visibility = "hidden";
document.getElementById('Scrollmaxprice').style.visibility = "hidden";
} else {
document.getElementById('ScrollCountry').style.visibility = 'hidden';
document.getElementById('Scrollguests').style.visibility = "visible";
document.getElementById('Scrollminprice').style.visibility = "visible";
document.getElementById('Scrollmaxprice').style.visibility = "visible";
}
}
</script>
</head>
<body>
<form action="trying.php" method="post">
<img src="original1.png" onmouseover="this.src='onhover1.png'"
onmouseout="this.src='original1.png'" onclick="ExposeList1()">
<div id="ScrollCountry"
style="height: 120; width: 150px; overflow: auto; border: 2px solid orange; visibility:hidden;border-radius:10px;">
<input type="checkbox" id="scb1" name="c1" value="Mexico">Mexico<br>
<input type="checkbox" id="scb2" name="c2" value="Belize">Belize<br>
<input type="checkbox" id="scb3" name="c3" value="Jamaica">Jamaica<br>
<input type="checkbox" id="scb4" name="c4" value="Thailand">Thailand<br>
<input type="checkbox" id="scb5" name="c5" value="Turks & Caicos">Turks & Caicos<br>
</div>
<br />
<div id = "Scrollguests">
<select>
<option id="n1" value="4">2 - 4</option>
<option id="n2" value="6">4 - 6</option>
<option id="n3" value="8">6 - 8</option>
<option id = "n4" value="10">8 - 10</option>
<option id = "n5" value="30">10+</option>
</select>
</div>
<br />
<div id = "Scrollminprice">
<select>
<option id="mn1" value="200">200</option>
<option id="mn2" value="300">300</option>
<option id="mn3" value="400">400</option>
<option id = "mn4" value="500">500</option>
<option id = "mn5" value="600">600</option>
</select>
</div>
<br />
<div id = "Scrollmaxprice">
<select >
<option id = "mx1" value="600">600</option>
<option id = "mx2" value="700">700</option>
<option id = "mx3" value="800">800</option>
<option id = "mx4" value="900">900</option>
<option id = "mx5" value="1000">1000</option>
</select>
</div>
<input type="submit" />
</form>
</body>
</html>
I changed it to use display instead of visibility since it makes more sense and works better. And since the #ScrollCountry now is above the checkboxes there is no need to hide them anymore.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function ExposeList1() {
var showstatus=document.getElementById('ScrollCountry').style.display;
if (showstatus == 'none') {
document.getElementById('ScrollCountry').style.display="block";
} else {
document.getElementById('ScrollCountry').style.display='none';
}
}
</script>
<style>
fieldset{ border: 0; padding: 0; position: relative }
#ScrollCountry{
height: 120px;
width: 150px;
overflow: auto;
border: 2px solid orange;
display:none;
border-radius:10px;
position: absolute;
background: #fff;
}
</style>
</head>
<body>
<form action="trying.php" method="post">
<fieldset>
<img src="original1.png" onmouseover="this.src='onhover1.png'" onmouseout="this.src='original1.png'" onclick="ExposeList1();return false;">
<div id="ScrollCountry">
<input type="checkbox" id="scb1" name="c1" value="Mexico"><label for="scb1">Mexico</label><br>
<input type="checkbox" id="scb2" name="c2" value="Belize"><label for="scb2">Belize</label><br>
<input type="checkbox" id="scb3" name="c3" value="Jamaica"><label for="scb3">Jamaica</label><br>
<input type="checkbox" id="scb4" name="c4" value="Thailand"><label for="scb4">Thailand</label><br>
<input type="checkbox" id="scb5" name="c5" value="Turks & Caicos"><label for="scb5">Turks & Caicos</label><br>
</div>
<div id="Scrollguests">
<select>
<option id="n1" value="4">2 - 4</option>
<option id="n2" value="6">4 - 6</option>
<option id="n3" value="8">6 - 8</option>
<option id="n4" value="10">8 - 10</option>
<option id="n5" value="30">10+</option>
</select>
</div>
<div id="Scrollminprice">
<select>
<option id="mn1" value="200">200</option>
<option id="mn2" value="300">300</option>
<option id="mn3" value="400">400</option>
<option id="mn4" value="500">500</option>
<option id="mn5" value="600">600</option>
</select>
</div>
<div id="Scrollmaxprice">
<select >
<option id="mx1" value="600">600</option>
<option id="mx2" value="700">700</option>
<option id="mx3" value="800">800</option>
<option id="mx4" value="900">900</option>
<option id="mx5" value="1000">1000</option>
</select>
</div>
<input type="submit">
</fieldset>
</form>
</body>
</html>
You have to position the ScrollCountry-block element outside the normal flow of elements by adding the css-code:
position: absolute;
to it.