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>
Related
I am trying to use select field in materialize css. But it doesn't seems work properly
my code :
<div class="container">
<div class="row">
<div class="input-field s6">
<label >OS Version</label>
<select class="validate">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('select').material_select();
});
</script>
And in this it is rendering a select field but label is still overlapping the select field. as shown in figure:
from http://materializecss.com/forms.html i have inspected where i founf this :
<div class="select-wrapper">
<span class="caret">▼</span>
<input class="select-dropdown" readonly="true" data-activates="select-options-6162e8f3-f286-fe44-8513-ab1ff6541fb1" value="Choose your option" type="text">
<ul style="width: 358px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;" id="select-options-6162e8f3-f286-fe44-8513-ab1ff6541fb1" class="dropdown-content select-dropdown">
<li class="disabled"><span>Choose your option</span></li>
<li class=""><span>Option 1</span></li>
<li class=""><span>Option 2</span></li>
<li class=""><span>Option 3</span></li>
</ul>
<select class="initialized">
<option value="" disabled="" selected="">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
and from my code i am getting this from inspect:
<div class="select-wrapper">
<span class="select-dropdown " data-activates="select-options-fdd5c3a3-b6d7-07f2-6626-df40620c20cc">Choose your option</span>
<select class="validate initialized">
<option value="" disabled="" selected="">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
Missing UL element is rendering below all the div, which mean above my footer.. where i am going wrong?
Fiddle : https://jsfiddle.net/007zkvut/
I updated your jsfiddle because it was loading Materialize before jQuery, so $() was not defined.
Here is the link:
https://jsfiddle.net/007zkvut/7/
It is working properly, just like in their website.
However, looking at the code you posted in your question and the code in your jsfiddle, there is a difference in the placement of <label>
In my updated jsfiddle I put another select to illustrate the difference between the different <label> placements. Just make sure it is after <select>
I have fixed the issues of select drop-down.
Please check the demo.
https://jsfiddle.net/007zkvut/9/
Your demo:
https://jsfiddle.net/007zkvut/8/
$(document).ready(function() {
$('select').material_select();
});
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="input-field s6">
<select class="browser-default waves-effect waves-light btn">
<option value="" disabled="" selected="">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
I experienced this problem too because my view was autogenerating from the javascript code. I solved this by calling the select() function from a setTimeout and after the code that generates the select DOM and it worked.
setTimeout(function(){$('select').material_select();},1000);
This same trick will also work for the materialize datepicker. just do.
setTimeout(function(){$('.datepicker').pickadate();},2000)
Well you can use the following code:
<div class="input-field col s12 m6">
<select class="initialized">
<option value="" disabled="" selected="">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
and, in your javascript file you need to put the next code:
(function($){
$(function(){
$(document).ready(function() {
$('select').material_select();
});
});
})(jQuery);
and ta chan!, it works.
Place the label after the select tag. It should do the trick.
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 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
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.