I'd like to make something of this kind where you can select the fore and background and make it display together. : https://www.control4.com/solutions/products/switches
I do understand some things could be missing and I have tried to look around. I'd appreciate any help. Many thanks.
<div class="foreground">
<h4>Button Colour</h4>
<select onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);">
<option value="switch/button/white.png" selected>White</option>
<option value="switch/button/snowwhite.png">Snow White</option>
<option value="switch/button/biscuit.png">Biscuit</option>
<option value="switch/button/lightalmond.png">Light Almond</option>
<option value="switch/button/brown.png">Brown</option>
<option value="switch/button/black.png">Black</option>
<option value="switch/button/midnightblack.png">Midnight Black</option>
<option value="switch/button/aluminum.png">Aluminum</option>
</select>
</div>
<br>
<div class="background">
<h4>Faceplate Colour</h4>
<select onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);">
<option value="switch/faceplate/white.png" selected>White</option>
<option value="switch/faceplate/snowwhite.png">Snow White</option>
<option value="switch/faceplate/biscuit.png">Biscuit</option>
<option value="switch/faceplate/lightalmond.png">Light Almond</option>
<option value="switch/faceplate/brown.png">Brown</option>
<option value="switch/faceplate/black.png">Black</option>
<option value="switch/faceplate/midnightblack.png">Midnight Black</option>
<option value="switch/faceplate/aluminum.png">Aluminum</option>
<option value="switch/faceplate/satinnickle.png">Satin Nickel</option>
<option value="switch/faceplate/bronze.png">Venetian Bronze</option>
<option value="switch/faceplate/stainlesssteel.png">Stainless Steel</option>
</select>
</div>
<!-- style -->
<style type="text/css">
.background {
position:absolute;
z-index:1;
left:125px;
top:125px;
float: right;
}
.foreground {
position:absolute;
z-index:auto;
float: left;
}
#switch{
position: relative;
}
</style>
If you notice, those images are png and of same dimensions with perfectly positioned switch and background. so displaying one div inside another will overlap it perfectly as the snippet below
Something with jQuery, should get you going....
$(document).ready(function() {
$('#switchSel').change(function() {
var switchPic = $('.switch');
switchPic.removeClass();
switchPic.addClass('switch ' + $(this).val());
})
})
.back {
background: url(https://www.control4.com/files/large/805347005e9b7ee87d4da29d56c9fa44.png);
height: 575px;
width: 361px;
display: inline-block;
}
.brown {
background: url(https://www.control4.com/files/large/61ba4092e170c22c3806a930ca7924f5.png);
height: 575px;
width: 361px;
}
.black {
background: url(https://www.control4.com/files/large/251e9a5ac63b46f4acf8b09dbc5e17b7.png);
height: 575px;
width: 361px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="switchSel">
<option value="black">black</option>
<option value="brown">brown</option>
</select>
</div>
<div class="switch black">
<div class="back">
</div>
</div>
Related
So, I,m new to html and trying to make a plot with html and js. But I can't seem to place the element properly. Here's the piece of code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#figurecontainer {
margin: 0px;
width: 960px;
height: 800px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.scatterlayer .trace:last-child path {
pointer-events: all;
}
</style>
<title>My Plotter</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<input style="float:left; width:20%; " type="file" id="input">
<div style="float:left; width:20%;" id="status" ><p>Load Data to plot</p></div>
<input style="display: none ; width: 100px" id="saveMe" type="button" value="SaveData">
<div >
<p style="float: left; width: 100px">X column</p>
<p >Y column</p>
</div>
<div>
<select style="width:100px" id="xcolumn">
<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>
</select>
<select style="width:100px" id="ycolumn">
<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>
</select>
</div>
<div id="figurecontainer"></div>
<script>
// some js
</script>
</body>
</html>
I want the first three element on 1st row, then "X column" and "Y column" in next and finally the two dropdown box on 3rd row alined with the Column names. How can I do that?
EDIT: The fiure blocks others elements.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html {
box-sizing: border-box;
}
body {
float: left;
width: 100%;
}
.row {
float: left;
width: 100%;
}
input[type=file] {
display: inline-block;
margin-right: 15px;
}
#status {
display: inline-block;
margin-right: 15px;
}
.saveMe {
display: inline-block;
}
</style>
<title>My Plotter</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div class="row">
<input type="file" id="input">
<div id="status" >Load Data to plot</div>
<input id="saveMe" type="submit" value="SaveData">
</div>
<div class="row">
<p style="float: left; width: 100px">X column</p>
<p >Y column</p>
</div>
<div class="row">
<select style="width:100px" id="xcolumn">
<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>
</select>
<select style="width:100px" id="ycolumn">
<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>
</select>
</div>
<div id="figurecontainer"></div>
<script>
var layout = {
autosize: true,
showlegend: false,
margin: {
t: 20,
r: 10,
b: 30,
l: 30,
pad: 0
},
xaxis: {
range: [0, 8],
fixedrange: false,
layer: 'below traces'
},
yaxis: {
range: [0, 51],
fixedrange: false,
layer: 'below traces'
},
font: {size: 16}
};
var breakpoints = {
x: [1, 8],
y: [5, 30],
type: 'scatter',
cliponaxis: false,
mode: 'markers',
marker: {
size: 5,
symbol: "circle-open-dot",
color: '#b00',
line: {
width: 2
}
},
hoverinfo: 'x+y'
};
var figurecontainer = document.getElementById("figurecontainer");
Plotly.plot(figurecontainer, [breakpoints], layout);
</script>
Your code has a mixed types of positioning elements that is why your web-page was not structured correctly, but for beginners it is ok. I changed your code a little bit and here is the final html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html {
box-sizing: border-box;
}
body {
float: left;
width: 100%;
}
.row {
float: left;
width: 100%;
}
input[type=file] {
display: inline-block;
margin-right: 15px;
}
#status {
display: inline-block;
margin-right: 15px;
}
.saveMe {
display: inline-block;
}
</style>
<title>My Plotter</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div class="row">
<input type="file" id="input">
<div id="status" >Load Data to plot</div>
<input id="saveMe" type="submit" value="SaveData">
</div>
<div class="row">
<p style="float: left; width: 100px">X column</p>
<p >Y column</p>
</div>
<div class="row">
<select style="width:100px" id="xcolumn">
<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>
</select>
<select style="width:100px" id="ycolumn">
<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>
</select>
</div>
<div id="figurecontainer"></div>
<script>
// some js
</script>
</body>
</html>
Im having trouble removing the space between a centered input type="search" and a drop down select tag.
Here the html and css im using
<div id="div" align="center">
<input id="search" type="search" >
<span id="span">
<select>
<option value="all">All Catigories</option>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
</span>
</div>
div {
margin: 0;
}
input {
margin: 0;
}
select {
margin: 0;
padding-left:0;
}
Heres a JSFiddle I made
https://jsfiddle.net/ayt9q75e/1/
If I understand you properly :https://jsfiddle.net/ayt9q75e/3/
* {
padding: 0;
margin: 0;
}
div {
font-size: 0;
line-height: 0;
}
input {
display: inline-block;
<!-- begin snippet: js hide: false console: true babel: false -->
<div id="div" align="center">
<input id="search" type="search" >
<span id="span">
<select>
<option value="all">All Catigories</option>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
</span>
</div>
font-size: 14px;
line-height: 22px;
}
select {
display: inline-block;
font-size: 14px;
line-height: 22px;
}
In your current code, obviously there are line-breaks between each line.
With HTML a line-break belongs to "white-spaces", so it's rendered as a space.
You have to suppress those line-breaks to get what you want:
<div id="div" align="center">
<input id="search" type="search" ><span id="span"><select>
<option value="all">All Catigories</option><option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select></span>
</div>
Note that you don't need anything like margin: 0 any more.
Fiddle: https://jsfiddle.net/ayt9q75e/2
HTML:
<div id="div" align="center">
<input id="search" type="search"><span id="span">
<select>
<option value="all">All Catigories</option>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
</span>
</div>
CSS:
div {
margin: 0;
}
input {
margin: 0;
display: inline-block;
}
#span {
display: inline-block;
}
select {
margin: 0;
padding-left:0;
}
Important: remove the line break before <span id="span">
And I recommend to use CSS to center the div content instead of align="center"
There is a simple way add a class to the parent div and set font-size:0; this will fix your problem
div {
font-size:0;
}
I want the select options to show up when you press a button but not have the bar showing the selected option to appear inside the button.
This is what i have so far:
<!DOCTYPE html>
<html>
<body>
<button>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</button>
</body>
</html>
This is what I want it to look like, then I will place an image inside the button
<!DOCTYPE html>
<html>
<body>
<button>
<select style="display: none;">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</button>
</body>
</html>
$("#btn, .close").click(function() {
$(".select-wrapper").toggleClass("active");
});
.select-wrapper {
display: none;
position: fixed;
width: 100vw;
height: 100vw;
top: 0;
left: 0;
z-index: 10;
background: rgba(0,0,0,0.3);
}
.select-wrapper select {
font-size: 24px;
position: absolute;
left: 50vw;
transform: translateX(-50%);
}
.select-wrapper.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="image" src="http://lorempixel.com/120/60/" id="btn">
<div class="select-wrapper">
<input type="button" value="close" class="close">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
I encountered similar problem that the dev refused to just use list due to some backend issue.
found a simple cheat to make the select tag show all the options, that look like a dropdown, and then I just toggle the whole select tag. Not exactly what you asking for, but looks like it.
$("#btn, .selector").click(function() {
$(".select-wrapper").toggleClass("active");
});
.select-wrapper{
display: none;
}
.select-wrapper.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
add variable:
<br>
<input type="button" value="add" id="btn">
<div class="select-wrapper">
<select size="4" class="selector">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
</div>
</body>
Here's my code:
<div class="row">
<div class="col-md-12 table">
<div class="middle">Title XPTO</div>
<div class="middle">Display:</div>
<select class="form-control">
<option label="10" selected="selected" value="10">10</option>
<option label="25" value="25">25</option>
<option label="50" value="50">50</option>
</select>
</div>
</div>
CSS:
.table {
display: table !important;
}
.middle {
display: table-cell !important;
vertical-align: middle;
}
DEMO: https://jsfiddle.net/jkf2L49e/
I want to put the text "Display:" nearest to the select element. And the select must be right (position) as possible. What is the best way to do this and make it responsive?
You should also make the <select> part of the table layout too, so just wrap it with another <div>. The markup would be like this:
<div class="col-md-12 table">
<div class="left">Title XPTO</div>
<div class="middle">Display:</div>
<div class="right">
<select class="form-control">
<option label="10" selected="selected" value="10">10</option>
<option label="25" value="25">25</option>
<option label="50" value="50">50</option>
</select>
</div>
</div>
To align the text to the right, you can simply use text-align:right in the middle cell. The CSS would be like this (with tweaks that asked in the comments below).
.table {
display: table;
}
.table > div {
display: table-cell;
vertical-align: middle;
white-space: nowrap;
}
.table .middle {
text-align: right;
width: 100%;
}
.table select {
width: auto;
}
Updated demo - https://jsfiddle.net/jkf2L49e/4/
Try this complete code:
.table {
display: table !important;
}
.middle {
display: table-cell !important;
vertical-align: middle;
}
.text-right{
text-align:right;
}
Now add this class to the div that contains the text "Display"
<div class="row">
<div class="col-md-12 table">
<div class="middle">Title XPTO</div>
<div class="middle text-right">Display:</div>
<select class="form-control">
<option label="10" selected="selected" value="10">10</option>
<option label="25" value="25">25</option>
<option label="50" value="50">50</option>
</select>
</div>
Try following complete code. It would be best solutions.
<html>
.wrapper
{
width:100%;
}
.leftdiv{
width: 90%;
float:left;
}
.rightdiv{
width:8%;
float:right;
}
Title XPTO
<div class="rightdiv">Display:
<select>
<option label="10" selected="selected" value="10">10</option>
<option label="25" value="25">25</option>
<option label="50" value="50">50</option>
</select>
</div>
</div>
Mark answer as right answer if helpful to you.
I'm practising making a form and I would like to position the form elements on the left in the centre of their row sort of how it would automatically be done with a table. Here is some jsFiddle for what i've been attempting so far.
How do I vertically centre the label element for a form?
Give label same height as input filed have & give line-height to your label. Like this:
.element label {
float: left;
font-weight: 700;
height: 30px;
line-height: 30px;
width: 156px;
}
You could use jQuery and setup the position after the elements are loaded. Minor adjustments to HTML (assign IDs):
<div class="element">
<label id="feedback">Feedback: </label>
<select multiple="multiple" name="feedback" size="4" id="selectbox">
<option value="">Option1</option>
<option value="">Option1</option>
<option value="">Option2</option>
<option value="">Option3</option>
<option value="">Option4</option>
<option value="">Option5</option>
</select>
</div>
Javascript:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function(){
var ht = $("#selectbox").height();
var ht2 = $("#feedback").height();
ht = $("#selectbox").offset().top + (ht-ht2) / 2;
$("#feedback").offset({ top: ht });
});
</script>
Strictly CSS (ID assignment on the label)
<div class="element">
<label id="feedback">Feedback: </label>
<select multiple="multiple" name="feedback" size="4">
<option value="">Option1</option>
<option value="">Option1</option>
<option value="">Option2</option>
<option value="">Option3</option>
<option value="">Option4</option>
<option value="">Option5</option>
</select>
</div>
And the CSS:
.element select {
height: 200px;
}
.element label#feedback {
margin-top: 85px;
}