I have three buttons ADD, SPILLAGE, and SPOILAGE.
How do I show only the Add container when I press the Add Button and hide the Add Container if I press Spillage button?
Here's my snippet
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#add">Add</button>
<button type="button" class="btn btn-warning" data-toggle="collapse" data-target="#spoiled">Spoiled</button>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#spilled">Spilled</button>
<div id="add" class="collapse"><br/>
<select name="IngID" id="IngID" class="form-control select2" data-placeholder="Select Ingredients"><option value="" disabled selected hidden></option>
</div>
<div id="spoiled" class="collapse"><br/>
<select name="IngID" id="IngID" class="form-control select2" data-placeholder="Select Ingredients"><option value="" disabled selected hidden></option>
</div>
<div id="spilled" class="collapse"><br/>
<select name="IngID" id="IngID" class="form-control select2" data-placeholder="Select Ingredients"><option value="" disabled selected hidden></option>
</div>
Use the data-target to show the desired div
$('.collapse').hide();
$(".btn").click(function() {
$('.collapse').hide();
var $thisdata = $(this).attr('data-target');
console.log($thisdata)
$($thisdata).show()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#add">Add</button>
<button type="button" class="btn btn-warning" data-toggle="collapse" data-target="#spoiled">Spoiled</button>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#spilled">Spilled</button>
<div id="add" class="collapse"><br/> add
<select name="IngID" id="IngID" class="form-control select2" data-placeholder="Select Ingredients"><option value="" disabled selected hidden></option>
</select>
</div>
<div id="spoiled" class="collapse"><br/> spoiled
<select name="IngID" id="IngID" class="form-control select2" data-placeholder="Select Ingredients"><option value="" disabled selected hidden></option>
</select>
</div>
<div id="spilled" class="collapse"><br/> spilled
<select name="IngID" id="IngID" class="form-control select2" data-placeholder="Select Ingredients"><option value="" disabled selected hidden></option>
</select>
</div>
Use this code:
<!DOCTYPE html>
<html>
<head>
<style>
.main_div{text-align:center; background: #00C492; padding:20px; width: 400px;}
.inner_div{background: #fff; margin-top:20px; height: 100px;}
.buttons a{font-size: 16px;}
.buttons a:hover{cursor:pointer; font-size: 16px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
$('#showdiv1').click(function() {
$('div[id^=div]').hide();
$('#div1').show();
});
$('#showdiv2').click(function() {
$('div[id^=div]').hide();
$('#div2').show();
});
$('#showdiv3').click(function() {
$('div[id^=div]').hide();
$('#div3').show();
});
$('#showdiv4').click(function() {
$('div[id^=div]').hide();
$('#div4').show();
});
})
</script>
</head>
<body>
<div class="main_div">
<div class="buttons">
<a class="button" id="showdiv1">Menu 1</a> | <a class="button" id="showdiv2">Menu 2</a> | <a class="button" id="showdiv3">Menu 3</a> | <a class="button" id="showdiv4">Menu 4</a>
</div>
<div class="inner_div">
<div id="div1" style="display:none;">Hello, I'm Container one</div>
<div id="div2" style="display:none;">Hello, I'm Container two</div>
<div id="div3" style="display:none;">Hello, I'm Container three</div>
<div id="div4" style="display:none;">Hello, I'm Container four</div>
</div>
</div>
</body>
</html>
Remove online jquery link and add local file path.
Related
I had tried to make wizard modal. Before going to second modal the first modal form fields should be validated I tried to make this using jQuery.
I tried to make text box color red when fields are not entered and it turns gray if data is entered into the fields. When I click on save it's going to modalTwo, before going to modal two it should check the mandatory fields.
When i do click on save text, the form should be validated. I mean every input fields should be filled mandatory.
$("#modalOne").modal("show");
$('.modalEditBtn').click(function() {
if ($('.modalEdit').is('[readonly]')) { //checks if it is already on readonly mode
$('.modalEdit').prop('readonly', false); //turns the readonly off
} else { //else we do other things
var school = document.getElementById('sslc').value;
if (school == "") {
document.getElementById('sslc').style.borderColor = "red";
return false;
} else {
document.getElementById('sslc').style.borderColor = "#cccccc";
}
$('.modalEdit').prop('readonly', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<!-- Modal One -->
<div class="modal" id="modalOne">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-body">
<button type="button" class="close" data-dismiss="modal">
<font color="black">
<a href="#" style="color: darkred">
<span style="color: darkred;">×</span>
</a>
</font>
</button>
<label class=" col-sm-4">Edit <span class="text">
<a class="modalEditBtn" data-dismiss="modal" data-toggle="modal" data-target="#modalTwo">Save</a>
</span></label> <br />
<div class="container">
<div class="row">
<div class="col-md">
<div class="form-body">
<br />
<table class="table table-responsive">
<tbody>
<tr>
<td class="outside scrollable-menu" style="border-style: none; border-bottom-style: none;">
<select id="sslc" class="form-control" oninput="this.className = ''">
<option hidden value="">10th</option>
<option value="a">10th</option>
<option value="b">12th</option>
<option value="a">Degree</option>
<option value="b">Masters</option>
<option value="b">Cetificate</option>
</select>
</td>
<td class="outside scrollable-menu" style="border-style: none; border-bottom-style: none;">
<select id="inputStream" class="form-control modalEdit">
<option hidden value="">Degree</option>
<option value="ar">BCA</option>
<option value="cm">BSc</option>
<option value="sc">BBA</option>
</select>
</td>
</tr>
<tr>
<td class="outside" style="border-style: none; border-bottom-style: none;">Stream
<select id="inputStream" class="form-control" required oninvalid="this.setCustomValidity('Stream Required')" oninput="this.setCustomValidity('')">
<option hidden value="">Stream</option>
<option value="ar">Arts</option>
<option value="cm">Commerce</option>
<option value="sc">Science</option>
</select>
</td>
<td class="outside" style="border-style: none; border-bottom-style: none;">Institution
<select id="inputStream" class="form-control" required oninvalid="this.setCustomValidity('Stream Required')" oninput="this.setCustomValidity('')">
<option hidden value="">Institution</option>
<option value="ar">VTU</option>
<option value="cm">Anna</option>
<option value="sc">Bangalore</option>
</select>
</td>
<td class="outside" style="border-style: none; border-bottom-style: none;">Yr of Passing <input type="date" class="form-control" id="resizedTextbox" placeholder="Yr of Passing" />
</td>
</tr>
<tr>
<td class="outside" style="border-style: none; border-bottom-style: none;">State
<select id="inputState" class="form-control" required oninvalid="this.setCustomValidity('State Required')" oninput="this.setCustomValidity('')">
<option hidden value="">State</option>
<option value="is">Karnataka</option>
</select>
</td>
<td class="outside" style="border-style: none; border-bottom-style: none;">Country
<select id="inputCountry" class="form-control" required oninvalid="this.setCustomValidity('Country Required')" oninput="this.setCustomValidity('')">
<option hidden value="">Country</option>
<option value="is">India</option>
<option value="is">US</option>
</select>
</td>
<td class="outside" style="border-style: none; border-bottom-style: none;"><br>
<input type="file" size="80"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Two -->
<div class="modal" id="modalTwo" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="alert alert-info" style="width: 99%; margin-bottom: 2px;">
<br>
<center>Do you want add another record</center>
<br>
<center>
<button type="button" class="btn btn-warning" data-dismiss="modal" data-toggle="modal" data-target="#modalOne" style="background-color: lightblue; border-color: #edf1ed;">Yes</button>
<button type="button" class="btn btn-success " data-dismiss="modal" data-toggle="modal" data-target="#modalThree" style="background-color: lightblue; border-color: #edf1ed;">No</button>
<br />
</center>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Two -->
<div class="modal" id="modalThree" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<center>
<div class="alert alert-info" style="width: 95%; margin-bottom: 2px;">
<center>NN records saved</center>
<br>
<button type="button" class="btn btn-warning" data-dismiss="modal" data-toggle="modal" data-target="close" style="background-color: lightblue; border-color: #edf1ed;">Ok</button>
<br />
</center>
</div>
</div>
</div>
</div>
Using the bootstrap multi-select.js for selecting multiple options from the select box. I have tried, when i click on the button multiple options not selecting. below is my code:
// bootstrap multiselect box
$(document).ready(function() {
$('#ddlPermission').multiselect({
buttonWidth : '100%',
maxHeight : 100,
includeSelectAllOption : true,
dropRight : true
});
$(".clickbutton").click(function(){
$('.multiselect').val(['A','B']);
});
});
function myFunction() {
var allVal=$("#ddlPermission").val();
alert(allVal);
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<link href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<input class="form-control btn-primary clickbutton" type="button" name="select" id="select" value="Click">
</div>
</div>
<br>
<select id="ddlPermission" class="multiselect" multiple="multiple" name="permission_ddl">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<input type="submit" name="btnSubmit" id="btnSubmit" onclick="myFunction()" class="button active" value="Submit">
</div>
You need to apply the selection to the dropdown's id instead of the class then refresh the multiselect.
$('#ddlPermission').val(['A','B']);
$('#ddlPermission').multiselect("refresh");
// bootstrap multiselect box
$(document).ready(function() {
$('#ddlPermission').multiselect({
buttonWidth : '100%',
maxHeight : 100,
includeSelectAllOption : true,
dropRight : true
});
$(".clickbutton").click(function(){
$('#ddlPermission').val(['A','B']);
$('#ddlPermission').multiselect("refresh");
});
});
function myFunction() {
var allVal=$("#ddlPermission").val();
alert(allVal);
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<input class="form-control btn-primary clickbutton" type="button" name="select" id="select" value="Click">
</div>
</div>
<br>
<select id="ddlPermission" class="multiselect" multiple="multiple" name="permission_ddl">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<input type="submit" name="btnSubmit" id="btnSubmit" onclick="myFunction()" class="button active" value="Submit">
</div>
The problem I am dealing with is to delegate an event in case of a click. The html modal snippet is:
<div id="addQues" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Input Fields</h4>
</div>
<input type="hidden" id="optCount" name="optCount" value="<?php echo $optCounter?>">
<div class="modal-body">
<input name="quesText" id="quesText" type="text" class="form-control" placeholder="Question Text" style="height: 200px" autofocus>
<select name="quesType" id="quesType" class="form-control" style="width: 100px">
<option value="Single Choice" id="SC" name="SC">Single Choice</option>
<option value="Multiple Choice" id="MC" name="MC">Multiple Choice</option>
<option value="Plain Text" id="TXT" name="TXT">Plain Text</option>
<option value="Image based" id="ÌMG" name="IMG">Image based</option>
<option value="Video Based" id="VID" name="VID">Video Based</option>
<option value="Conjoint" id="CNG" name="CNG">Conjoint</option>
</select>
<div id="optList" name="optList">
<div style="display:flex; vertical-align:top;" class="cooldiv">
<input name="optionNum_<?php echo $optCounter?>" id="optionNum_<?php echo $optCounter?>" type="text" class="form-control" placeholder="Option No." style="width: 100px" autofocus>
<input name="optionText_<?php echo $optCounter?>" id="optionText_<?php echo $optCounter?>" type="text" class="form-control" placeholder="Option Text" autofocus>
<button type="button" class="deleteMe">X</button>
<button type="button" class="addNext">+</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
And the jquery code is:
$(".deleteMe").on("click",".cooldiv",function(){
$(this).closest("div").remove();
var optCount = parseInt($("#optCount").val());
optCount = optCount-1;
alert(optCount)
$("#optCount").val(optCount);
});
$(".addNext").on("click",".cooldiv",function(){
var optCount = parseInt($("#optCount").val());
optCount = optCount+1;
$("#optList").append('<div style="display:flex; vertical-align:top;" class="cooldiv"><input name="optionNum_'+optCount+'" id="optionNum_'+optCount+'" type="text" class="form-control" placeholder="Option No." style="width: 100px" autofocus><input name="optionText_'+optCount+'" id="optionText_'+optCount+'" type="text" class="form-control" placeholder="Option Text" autofocus><button type="button" class="deleteMe">X</button><button type="button" class="addNext">+</button></div>');
$("#optCount").val(optCount);
alert(optCount)
});
So, basically I want to add or remove options (add/remove class cooldiv) when the + or x buttons are clicked. But it's not happening this way.
UPDATE:
The complete code is this:
<?php require "login/loginheader.php";
$questionCounter = 1;
$optCounter = 1;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/main.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="login/js/jquery-2.2.4.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="login/js/bootstrap.js"></script>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addQues">Input Question No. <?php echo $questionCounter ?></button>
<!-- Modal -->
<div id="addQues" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Input Fields</h4>
</div>
<input type="hidden" id="optCount" name="optCount" value="<?php echo $optCounter?>">
<div class="modal-body">
<input name="quesText" id="quesText" type="text" class="form-control" placeholder="Question Text" style="height: 200px" autofocus>
<select name="quesType" id="quesType" class="form-control" style="width: 100px">
<option value="Single Choice" id="SC" name="SC">Single Choice</option>
<option value="Multiple Choice" id="MC" name="MC">Multiple Choice</option>
<option value="Plain Text" id="TXT" name="TXT">Plain Text</option>
<option value="Image based" id="ÌMG" name="IMG">Image based</option>
<option value="Video Based" id="VID" name="VID">Video Based</option>
<option value="Conjoint" id="CNG" name="CNG">Conjoint</option>
</select>
<div id="optList" name="optList">
<div style="display:flex; vertical-align:top;" class="cooldiv">
<input name="optionNum_<?php echo $optCounter?>" id="optionNum_<?php echo $optCounter?>" type="text" class="form-control" placeholder="Option No." style="width: 100px" autofocus>
<input name="optionText_<?php echo $optCounter?>" id="optionText_<?php echo $optCounter?>" type="text" class="form-control" placeholder="Option Text" autofocus>
<button type="button" class="deleteMe">X</button>
<button type="button" class="addNext">+</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="form-signin">
<div class="alert alert-success">You have been <strong>successfully logged in</strong>.</div>
Logout
</div>
</div> <!-- /container -->
</body>
</html>
<script>
$(".deleteMe").on("click",'.cooldiv',function(){
$(this).closest("div").remove();
var optCount = parseInt($("#optCount").val());
optCount = optCount-1;
alert(optCount)
$("#optCount").val(optCount);
});
$(".addNext").on("click",'.cooldiv',function(){
var optCount = parseInt($("#optCount").val());
optCount = optCount+1;
$("#optList").append('<div style="display:flex; vertical-align:top;" class="cooldiv"><input name="optionNum_'+optCount+'" id="optionNum_'+optCount+'" type="text" class="form-control" placeholder="Option No." style="width: 100px" autofocus><input name="optionText_'+optCount+'" id="optionText_'+optCount+'" type="text" class="form-control" placeholder="Option Text" autofocus><button type="button" class="deleteMe">X</button><button type="button" class="addNext">+</button></div>');
$("#optCount").val(optCount);
alert(optCount)
});
</script>
When I click on Input Question No. 1/2..., a modal opens up with option # and option text in it. I want when the button + or x is clicked, another option field with option # and option text adds or the same gets removed. Without delegation, it won't happen, but using delegation like this, it's not even working.
The problem is not related to even delegation, but to wrong usage of events and dynamic elements.
You should use
$("#optList").on("click",'.deleteMe',function(){
and
$("#optList").on("click",'.addNext',function(){
Because the #optList element exists all the time, and the new elements that you add dynamically are .deleteMe and .addNext.
Here is the jsfiddle that should work as you expected:
https://jsfiddle.net/ev6kajjf/7/
(note that you still have problems there with the value of optCount. I'm not sure why it has i to start with: <input type="hidden" id="optCount" name="optCount" value="i">).
opts is an array ["1","2"]. The select options are not selected. The dropdown is a bootstrap multiselection plugin. What am I missing here?
var data = {};
data.action = "get-form-data";
data["account-id"] = localStorage.getItem("account-id");
ajax('post', 'php/enablers.php', data, formDataSuccess);
function formDataSuccess(data) {
data = JSON.parse(data);
$("#min-rating").val(data.MinRating);
debugger;
var opts = data.AcceptedMedia.split(",");
$.each(opts, function(inx,val){
$('#accepted-media option[value=' + val + ']').attr('selected', true);
})
$("#special-instructions").val(data.SpecialInstructions);
}
HTML
<html lang="en">
<head>
<title>Writer's Tryst - Enablers Form</title>
<link type="text/css" href="css/enablers.css" rel="stylesheet" />
<link rel="stylesheet" href="css/bootstrap-multiselect.css">
<link rel="stylesheet" href="css/jquery.rateyo.min.css">
<style>
select {
padding-bottom: 8px;
}
</style>
</head>
<body>
<div class="container center_div">
<img id="img-enablers" src="#" alt="images" />
<form id = "form-enablers" class="form-horizontal well">
<h1>Enablers</h1>
<p>
<label for="form-type" class="fixed50">Form:</label>
<select id="form-type" name="form-type[]" class="btn btn-outline" multiple="multiple" required>
</select>
</p>
<p>
<label for="genres" class="fixed50">Genres:</label>
<select id="genres" name="genres[]" multiple="multiple" required>
</select><br/>
</p>
<p>For an explanation of the genres shown here, see <a target="_blank" href="https://en.wikipedia.org/wiki/List_of_genres">List of genres</a><br/></p>
<p>
<label for="accepted-media" class="fixed50">Accepted Media:</label>
<select id="accepted-media" name="accepted-media[]" multiple="multiple" required>
<option value='1'>Mail</option>
<option value='2'>PDF File</option>
</select><br/>
</p>
<label for="min-rating" class="fixed50">Minimum Rating:</label>
<div id="min-rating"></div>
<p> <label for="special-instructions" class="fixed50">Special Instructions:</label>
<textarea id ="special-instructions" name="special-instructions"></textarea>
</p>
<p class="thumbnail">For a limited time, enablers can use this site for <span style="color: #f00; font-weight:bold">FREE</span>. We reserve the right to change this policy without notice.</p>
<p id="recaptcha-elements"></p>
<div class="form-group">
<button type="submit" id="enablers-search" class="btn btn-success btn-lg btn-block glyphicon glyphicon-search"> Search</button>
</div>
<input id="userid" name="userid" type="hidden" />
</form>
</div>
<form id="writers-list">
<p id="manuscript-request">To request a manuscript, click the checkbox beneath the thumbs-up icon.</p>
<div id="table-list"></div>
<div id="main" class="content"></div>
</form>
<script src="js/bootstrap-multiselect.js"></script>
<script src="js/jquery.rateyo.js"></script>
<script src="js/enablers.js"></script>
<script src="js/recaptcha.js"></script>
</body>
</html>
Since val() of <select multiple> is array... it is simpler to just set the <select> value instead of looping the options
$('#accepted-media').val(opts)
DEMO
I'm trying to make my web app look pretty, so I want to use Bootstrap. Here's a screenshot of the current site:
Notice these two lists: "Search results" and "Selected" - they are scrollable and have fixed height (35% of window height).
How do I make absolutely the same scrollable list with fixed (in percents) height with Bootstrap? (Everything except these lists works fine with Bootstrap.)
Current "old" version:
<body>
<div id="map-canvas"></div>
<div id="over-map-canvas">
<div id="div-type-select">
<select id="select-type-select">
<option value="genotyping">Genotyping</option>
<option value="full genomes">Full genomes</option>
<option value="mtDNA">mtDNA</option>
<option value="Y-chromosome">Y-chromosome</option>
</select>
</div>
<input type="text" id="search" placeholder="Search">
<script>
document.getElementById('search').addEventListener('keypress', function(event) {
if (event.keyCode == 13) {
event.preventDefault();
search();
}
});
</script>
<div id="div-age-input">
Age (years before present):
<input type="text" id="age-from" placeholder="0">
<script>
$('#age-from').on("input", function() {
$( "#slider-range" ).slider('values', 0, $( "#age-from" ).val());
});
</script>
<input type="text" id="age-to" placeholder="80000">
<script>
$('#age-to').on("input", function() {
$( "#slider-range" ).slider('values', 1, $( "#age-to" ).val());
});
</script>
</div>
<div id="slider-range"></div><br>
<div id="div-label-found-list>"><b>Search results:</b><br></div>
<div id="div-sample-list"><ol id="ol-found-sample-list" type="1"></ol></div>
<div id="div-found-menu">Select all</div>
<div id="div-label-selected-list>"><b>Selected:</b><br></div>
<div id="div-sample-list-2"><ol id="ol-selected-sample-list" type="1"></ol></div>
<div id="div-selected-menu">
Populations
Clear
</div>
<div id="div-analysis-menu">
PCA
ALDER
</div>
</div>
</body>
And a "new" version:
<body>
<div id="map-canvas" class="col-md-9"></div>
<div id="menu" class="col-md-3">
<br>
<select id="select-type-select" class="form-control">
<option value="genotyping">Genotyping</option>
<option value="full genomes">Full genomes</option>
<option value="mtDNA">mtDNA</option>
<option value="Y-chromosome">Y-chromosome</option>
</select>
<br>
<div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Search">
<script>
document.getElementById('search').addEventListener('keypress', function(event) {
if (event.keyCode == 13) {
event.preventDefault();
search();
}
});
</script>
</div>
<h5 class="bold">Search results:</h5>
<ul id="ol-found-sample-list" class="scrollable-list"></ul>
<br>
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="submit" id="like" class="btn btn-default">PCA</button>
</div>
<div class="btn-group">
<button type="submit" id="nope" class="btn btn-default">ALDER</button>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
this could be as simple as:
#menu {
display:flex;
}
#menu .grow {
flex-grow:1;
}
<div id="menu" class="col-md-3">
<div>
<select id="select-type-select" class="form-control">
<option value="genotyping">Genotyping</option>
<option value="full genomes">Full genomes</option>
<option value="mtDNA">mtDNA</option>
<option value="Y-chromosome">Y-chromosome</option>
</select>
<div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Search">
<script>
document.getElementById('search').addEventListener('keypress', function(event) {
if (event.keyCode == 13) {
event.preventDefault();
search();
}
});
</script>
</div>
</div>
<div class="grow">
<h5 class="bold">Search results:</h5>
<ul id="ol-found-sample-list" class="scrollable-list">
</ul>
</div>
<div class="grow">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="submit" id="like" class="btn btn-default">PCA</button>
</div>
<div class="btn-group">
<button type="submit" id="nope" class="btn btn-default">ALDER</button>
</div>
</div>
</div>
</div>
a guide to flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
and use autoprefixer or something like this to also support prefixed and old syntax:
https://github.com/postcss/autoprefixer