I have a form that will ask for user input and it included drop down list and entry box. After user inserted the value and press on "OK", those value should be appear on my html table based on their category. The html table row will be add automatically when it detect a second value inserted by the user. Currently I have created the html form and it will automatically added when I pressed on add new header, but how can I add the row by knowing there is a new input by the user? All the value should be store in the respective column.
When user input a new value and press OK, the system will check whether the first row value is exist or not, if its exist it will display the new value (Event parameter, type of condition and Value to match) to the next row.
A form will pop up for user to enter the value
After user click on OK, all the value will store at the first row
When user add another input and click OK, a second row will automatically appear and display the second input at second column.
Another input entered by user
My html
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,500" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
body {font-family: 'Quicksand', sans-serif;}
.button {**
border-radius: 50px;
background-color: #ff9633;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 15px;
padding: 10px;
width: 80px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
margin-left:500px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 45%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #ff9633;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #ff9633;
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9633;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color:
#fa7d34;
}
</style>
</head>
<body>
<ul>
<li><div id="myBtn1">Alert Policies</div></li>
<li>Test3</li>
<li>Test4</li>
</ul>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Alert Policies</h2>
</div>
<div class="modal-body">
<p style="font-size:14px">Please select an event parameter as well as the condition type and value that apply.</p>
<!-- parameter drop down -->
<form method="post">
<label for="Parameter"> <b style="font-size:13px" > Event parameter to evaluate </b></label>
<select name="Parameter" id="Parameter" style="width:340px; font-family: 'Quicksand', sans-serif;">
<option disabled selected value>select a parameter</option>
<option value="Subject">Subject</option>
<option value="Text">Text</option>
</select>
<br><br>
<label for="Condition"> <b style="font-size:13px" > Type of condition </b></label>
<select name="Condition" id="Condition" style="width:340px; margin-left:69px; font-family: 'Quicksand', sans-serif;">
<option disabled selected value>select a condition</option>
<option value="Equals">Equals</option>
<option value="Contain">Contain</option>
<option value="NotContain">Does not contain</option>
</select>
<br><br>
<label for="valuetomatch"> <b style="font-size:13px" > Value to match</b></label>
<input type="text" id="valuetomatch" name="valuetomatch" style="width:333px; margin-left:80px; font-family: 'Quicksand', sans-serif;">
<br>
<br>
<button class="button" ><span>OK</span></button>
</form>
</div>
</div>
</div>
<form id='test' method="post">
<div class="table-responsive">
<table id="form_table" class="table table-bordered">
<tr>
<th>No</th>
<th>Event parameter to evaluate</th>
<th>Type of condition</th>
<th>Value to match</th>
</tr>
<tr class='case'>
<td><span id='snum'>1.</span></td>
<td><input class="form-control" type='text' disabled name='eventpara[]'/></td>
<td><input class="form-control" type='text' disabled name='typecondition[]'/>
<td><input class="form-control" type='text' disabled name='valuematch[]'/>
<table class="table table-bordered"></table>
</td>
</tr>
</table>
<button type="button" class='btn btn-success addmore'>+ add new Header</button> <br>
</div>
<input type="submit" name="submit" value="Submit" class="btn btn-info">
</form>
<script>
//add tablebox
$(document).ready(function(){
$(".addmore").on('click', function () {
var count = $('#form_table')[0].rows.length;
var data = "<tr class='case'><td><span id='snum" + count + "'>" + count + ".</span></td>";
data += "<td><input class='form-control' type='text' disabled name='eventpara[]'/></td><td><input class='form-control' type='text' disabled name='typecondition[]'/><td><input class='form-control' type='text' disabled name='valuematch[]'/><table class='table table-bordered'></table></td></tr>";
$('#form_table').append(data);
});
$('form#test').on('click', '.childtbl', function () {
var $titlesTable = $(this).next('table')[0];
var titlesCount = $titlesTable.rows.length + 1;
var data1 = "<tr class='case1'><td><span id='snum1" + titlesCount + "'>" + titlesCount + ".</span></td>";
data1 += "<td>Title:<input class='form-control' type='text' name='wr[]'/></td></tr>";
$($titlesTable).append(data1);
});
});
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn1");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
Add id to the modal form button
<button id="addData" class="button" ><span>OK</span></button>
Create an empty array in script
<script>
var arrayOfData = []
Add the following code in the jquery
$("#addData").on('click', function () {
const parameter = $('#Parameter').val()
const condition = $('#Condition').val()
const value = $('#valuetomatch').val()
arrayOfData.push({
parameter,
condition,
value
})
var data = `<tr><th>No</th><th>Event parameter to evaluate</th><th>Type of condition</th><th>Value to match</th></tr>`;
arrayOfData.forEach((item, index) => {
data += `<tr class='case'><td><span id='snum${index + 1}'>${index + 1}</span></td><td><input class='form-control' type='text' disabled name='eventpara[]' value="${item.parameter}"/></td><td><input class='form-control' type='text' disabled name='typecondition[]' value="${item.condition}"/><td><input class='form-control' type='text' disabled name='valuematch[]' value="${item.value}"/><table class='table table-bordered'></table></td></tr>`
})
$('#form_table').html(data);
});
I'm working on a site with a textarea / button / table in the body content.
My content is responsive enough, except for very thin displays (like mobile) in which case the table does not wrap and becomes unusable, and the button doesn't expand to fill the entire area.
(in line code element doesn't seem to be playing nice, but this jsfiddle is a better example)
https://jsfiddle.net/martinradio/b4z735tk/40/
How can I make the table more responsive so that when my window gets resized, the table has some sort of word wrap (like a scroll) similar to the textarea
button {
border: 2px solid black;
}
table, th, td {
border: 2px solid black;
background: white;
color:black;
height: 100%;
}
table {
table-layout:fixed;
width:100%;
}
<!DOCTYPE html>
<html>
<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">
<link rel='icon' href='https://cdn4.iconfinder.com/data/icons/48-bubbles/48/06.Tags-512.png' type='image/x-icon' />
<title>tagger.site</title>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- bootstrap css-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- font-awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<!-- Style -->
<style>
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
}
/*
#sidebar ul li a:hover { background: rgb(6, 255, 193); color: rgb(247, 1, 255); } `;
*/
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
.btn-info {
color: #fff;
background-color: #b81717;
border-color: #52b817;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
/*
padding: 15px 10px;
margin-right: 77px;
*/
/* background: rgb(11, 223, 212); */
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
margin-left:11px
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
/* background: #63c23e; NAVBAR BACKGROUND */
color: rgb(0, 0, 0);
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
display: inline-flex;
padding: 20px;
/* background: #6d7fcc; */
position: relative;
width: 100%;
}
#sidebar ul.components {
/* padding: 20px 0; */
/* border-bottom: 1px solid #47748b; */
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
color: pink
display: inline;
}
}
#imageModal{
z-index:3;
}
/* Sidebar expand/collapse button */
#sidebarCollapse{
position: fixed;
z-index: 2;
margin-left: 84%;
box-shadow: 0px 1px 4px 1px rgba(0 ,0, 0, .3);
border: none;
height: 40px;
width: 40px;
border-radius: 50%;
cursor: pointer;
position: absolute;
}
/* Bottom of sidebar image stuff */
.responsive {
width: 90%;
bottom:20px;
margin-left:5%;
margin-right:5%;
}
/* image footer color text center */
.sidebar-footer{
text-align: center;
font-size: 1.1rem;
/*font-family:'Consolas' */
}
/* image footer color boxes */
.colorBox {
/*float: left;*/
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
vertical-align: middle;
display: inline-block;
}
</style>
<style>
/* Style the Image Used to Trigger the Modal */
#colorImageDisplay {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#colorImageDisplay:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
<!-- Page Content -->
<div class="wrapper" class="toggled">
<!-- Sidebar -->
<nav id="sidebar" style='background: #f8f0e8; color:#000000;'>
<!-- sidenav top title -->
<div id='sidebarTop' class="sidebar-header" style='background: #513e2a'>
<!-- sidebar top title text -->
<h3 style='color: #ffffff' style='font-weight: bold; text-size:12px'><strong>asdasdr</strong></h3>
<!-- sidebar expand/collapse button -->
<button id='sidebarCollapse'>
<img src="https://img.icons8.com/ios-filled/24/000000/menu.png"/>
</button>
</div>
<!-- sidenav list of items -->
<ul class="list-unstyled components sideBarOption" style='background: #180d04; color: #ffffff;'>
<!-- about page -->
<li>
About
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content" style='background: #cec5ac;'>
<div class="col-sm-12">
<div class="col" >
<div class="row" style=' overflow: auto; margin: auto; background: #917e73; color: #ffffff'>
<div class="col" style=''>
<h1 class="widgettitle"><strong>page title</strong></h1>
</div>
<div class="w-100"></div>
<div class="col" style=''>
<a id='githubUrl' target="_blank" href='https://www.youtube.com/watch?v=0df7k__KEHw'>Github</a>
</div>
</div>
</div>
<div class="col" >
<br>
<br>
<div class="row" style=' margin: auto;'>
<!-- page main content -->
<div class="container-fluid" style='color: #000000'>
<div style="margin-top:-30px;">
<!-- discogstagger output -->
<hr>
<h3>Comma-Separated Metadata Tags:</h3>
<div class='outputDiscogstaggerBox' style='margin-left:15px;'>
<div class='row'>
<textarea class="inputbox" id="tagsBox" rows="7" cols="44" placeholder="Booker T. Jones,Priscilla Jones,Booker T & The MGs,The Mar-Keys,The Stax Staff,The Packers,The RCO All-Stars,Priscilla Coolidge,Booker T. & Priscilla,1971,France,The Wedding Song,She,The Indian Song,Sea Gull,For Priscilla,The Delta Song,Why,Mississippi Voodoo,Cool Black Dream,Sweet Child Youre Not Alone,Booker T. & Priscilla 1971,Booker T. Jones 1971,"></textarea>
<button class="btn default copyButton" style="cursor: pointer;" id='copyToClipboarad' onclick="copyToClipboard('#inputBox')" type="button">Copy</button>
<div>
<table class="fixed h-100" align="left" style="white-space:nowrap; table-layout: fixed; width: 533px; " height="100" id="adjustments">
<tbody>
<!-- Columns -->
<tr>
<th style="text-align:center; width: 6%;"><input type="checkbox" id='selectAll' checked></th>
<th style="text-align:center; width: 25%;">Tags Type</th>
<th style="text-align:center; width: 46%;">Tags</th>
</tr>
<!-- Artists -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="releaseArtistsCheckbox" id="releaseArtistsCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Release Artist(s)</td>
<td>
<div style="text-align:center;">
<input type="range" class="releaseArtistsSlider" id="releaseArtistsSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="releaseArtistsSliderValue">100%</div>
<div class='float-right' id='releaseArtistsNumber'>0 chars </div>
</div>
</td>
</tr>
<!-- Release Info -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="releaseInfoCheckbox" id="releaseInfoCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Release Info</td>
<td>
<div style="text-align:center;">
<input type="range" class="releaseInfoSlider" id="releaseInfoSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="releaseInfoSliderValue">100%</div>
<div class='float-right' id='releaseInfoNumber'>0 chars</div>
</div>
</td>
</tr>
<!-- Tracklist -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="tracklistCheckbox" id="tracklistCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Tracklist</td>
<td>
<div style="text-align:center;">
<input type="range" class="tracklistSlider" id="tracklistSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="tracklistSliderValue">100%</div>
<div class='float-right' id='tracklistNumber'>0 chars</div>
</div>
</td>
</tr>
<!-- Combinations -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="combinationsCheckbox" id="combinationsCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Combinations</td>
<td>
<div style="text-align:center;">
<input type="range" class="combinationsSlider" id="combinationsSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="combinationsSliderValue">100%</div>
<div class='float-right' id='combinationsNumber'>0 chars</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
setHoverColor();
//setColors()
async function setHoverColor(){
var sheet = document.createElement('style')
//create css style rule for on-hover tab and on hover github url
let innerHTMLHoverColorStyle = `
/* githubUrl hover */
#githubUrl:hover{
color:blue;
}
#sidebar ul li a:hover {
background: #8c743c;
color: #ffffff;
} `;
sheet.innerHTML = innerHTMLHoverColorStyle
document.head.appendChild(sheet);
}
async function setColors(){
console.log('setcolors()')
let colors = await getColors()
let imgPath = colors.imgPath
//6 possible colors:
//Vibrant
//LightVibrant
//DarkVibrant
//Muted
//LightMuted
//DarkMuted
//get high contrast colors for text
/*
let sidebarColorBackground = colors.colors['DarkVibrant']
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground = sidebarColorBackground.substring(4, sidebarColorBackground.length-1);
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground = sidebarColorBackground.split(',');
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground_hex = rgbToHex(213, 23, 36)
console.log("sidebarColorBackground_hex = ", sidebarColorBackground_hex)
let sidebarColorBackground_text = invertColor(sidebarColorBackground_hex)
console.log("sidebarColorBackground_text = ", sidebarColorBackground_text)
*/
//change color display text and set color box hex value
//make all colors visible
//document.getElementById('pageColorsText').style.display = "block";
/*
//color 1
var color1 = colors.colors['Vibrant']
var color1_hex = rgbToHex(color1)
document.getElementById("color1Hex").innerText = `Color 1: ${color1_hex}`
//color 2
var color2 = colors.colors['LightVibrant']
var color2_hex = rgbToHex(color2)
document.getElementById("color2Hex").innerText = `Color 2: ${color2_hex}`
//color 3
var color3 = colors.colors['DarkVibrant']
var color3_hex = rgbToHex(color3)
document.getElementById("color3Hex").innerText = `Color 3: ${color3_hex}`
//color 4
var color4 = colors.colors['Muted']
var color4_hex = rgbToHex(color4)
document.getElementById("color4Hex").innerText = `Color 4: ${color4_hex}`
//color 5
var color5 = colors.colors['LightMuted']
var color5_hex = rgbToHex(color5)
document.getElementById("color5Hex").innerText = `Color 5: ${color5_hex}`
//color 6
var color6 = colors.colors['DarkMuted']
var color6_hex = rgbToHex(color6)
document.getElementById("color6Hex").innerText = `Color 6: ${color6_hex}`
*/
//change display image source
//document.getElementById('colorImageDisplay').src=`${imgPath}`
//setup image modal popup
//imageModalSetup()
//change colors
var sheet = document.createElement('style')
let hoverColor = `#8c743c`;
let innerHTMLHoverColorStyle = `#sidebar ul li a:hover { background: ${hoverColor}; } `;
sheet.innerHTML = innerHTMLHoverColorStyle
document.head.appendChild(sheet);
let innerHTMLStyle = `
/* main page body background color solid
body { background: red; } */
/* sidebar_header_background_color
#sidebarTop {background: ${colors.colors['LightMuted']};} */
/* sidebar_background_color
#sidebar { background: linear-gradient(0deg, ${colors.colors['LightVibrant']}, ${colors.colors['Muted']}); } */
/* active tab color
#currentPage { background: ${colors.colors['LightVibrant']}; } */
/* main page body background color gradient
body { background: linear-gradient(2deg, color3_hex, color6_hex);} */
/* ul ul a { expanded tab background color
.sideBarOption { background: ${colors.colors['Muted']}; } */
/* sidebar hover color */
#sidebar ul li a:hover { background: ${colors.colors['DarkVibrant']}; } `;
//console.log("innerHTMLStyle = ", innerHTMLStyle)
//sheet.innerHTML = innerHTMLStyle
//document.head.appendChild(sheet);
}
function invertColor(hex) {
if (hex.indexOf('#') === 0) {
hex = hex.slice(1);
}
// convert 3-digit hex to 6-digits.
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
if (hex.length !== 6) {
throw new Error('Invalid HEX color.');
}
// invert color components
var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
// pad each with zeros and return
return '#' + padZero(r) + padZero(g) + padZero(b);
}
function padZero(str, len) {
len = len || 2;
var zeros = new Array(len).join('0');
return (zeros + str).slice(-len);
}
//rgb to hex
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(color) {
//color = string like rgb(a,b,c)
//remove string parts
color = color.substring(4, color.length-1);
//turn into arr
color = color.split(',');
return "#" + componentToHex(parseInt(color[0])) + componentToHex(parseInt(color[1])) + componentToHex(parseInt(color[2]));
}
//setup image modal popup
imageModalSetup()
async function imageModalSetup(){
// Get the modal
var modal = document.getElementById("imageModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("colorImageDisplay");
//make image visible
img.style.display = "block";
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
//captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
$('#imageModal').fadeOut(500);
}
}
$(document).ready(function () {
//refresh button
const refreshButton = document.getElementById('refreshButton');
const refreshPage = () => {
location.reload();
}
refreshButton.addEventListener('click', refreshPage)
//if clicking outside modal, close modal
$(document).click(function (e) {
console.log('close modal')
if ($(e.target).is('#imageModal')) {
$('#imageModal').fadeOut(500);
}
});
//on escape key click, close modal
$(document).keydown(function(event) {
if (event.keyCode == 27) {
$('#imageModal').fadeOut(500);
}
});
//side bar collapse event
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
//make request to colors backend
function getColors(){
return new Promise(async function (resolve, reject) {
$.ajax({
type: 'POST',
url: '/getColors',
data: {
type: "varValue",
},
}).then((data) => {
resolve(data)
}).catch((err) => {
reject(err)
});
})
}
</script>
</html>
I have edited your code here: https://jsfiddle.net/r0bny6h7/
To make the table itself responsive on smaller screens, I changed the fix width of 553px to "max-width: 553px". Essentially what this does is on larger screens, makes sure that the element does not go over 553px, but on smaller screens, it will automatically reduce in size to fit the screen.
To expand the button on smaller screens, just add a max-width (in this case, "max-width: 553px" to match the table) and "width: 100%" to ensure that it takes up the full width on smaller screens.
To make the table contents have word wrap, just add "word-wrap: break-word;" and "white-space: normal;" to the table, th, td.
Just a small note, but it was a bit difficult to navigate through your code since you mixed inline and declarative CSS styles. I would suggest sticking to one type, especially if you have styles that will be reused throughout the code (for example, you add "text-align: center" to a lot of the table contents. You can clean it up by applying it to the whole element instead, or a specific class.)
button {
border: 2px solid black;
}
table, th, td {
border: 2px solid black;
background: white;
color:black;
height: 100%;
white-space: normal;
word-wrap: break-word;
}
table {
table-layout:fixed;
width:100%;
}
<!DOCTYPE html>
<html>
<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">
<link rel='icon' href='https://cdn4.iconfinder.com/data/icons/48-bubbles/48/06.Tags-512.png' type='image/x-icon' />
<title>tagger.site</title>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- bootstrap css-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- font-awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<!-- Style -->
<style>
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
}
/*
#sidebar ul li a:hover { background: rgb(6, 255, 193); color: rgb(247, 1, 255); } `;
*/
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
.btn-info {
color: #fff;
background-color: #b81717;
border-color: #52b817;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
/*
padding: 15px 10px;
margin-right: 77px;
*/
/* background: rgb(11, 223, 212); */
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
margin-left:11px
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
/* background: #63c23e; NAVBAR BACKGROUND */
color: rgb(0, 0, 0);
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
display: inline-flex;
padding: 20px;
/* background: #6d7fcc; */
position: relative;
width: 100%;
}
#sidebar ul.components {
/* padding: 20px 0; */
/* border-bottom: 1px solid #47748b; */
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
color: pink
display: inline;
}
}
#imageModal{
z-index:3;
}
/* Sidebar expand/collapse button */
#sidebarCollapse{
position: fixed;
z-index: 2;
margin-left: 84%;
box-shadow: 0px 1px 4px 1px rgba(0 ,0, 0, .3);
border: none;
height: 40px;
width: 40px;
border-radius: 50%;
cursor: pointer;
position: absolute;
}
/* Bottom of sidebar image stuff */
.responsive {
width: 90%;
bottom:20px;
margin-left:5%;
margin-right:5%;
}
/* image footer color text center */
.sidebar-footer{
text-align: center;
font-size: 1.1rem;
/*font-family:'Consolas' */
}
/* image footer color boxes */
.colorBox {
/*float: left;*/
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
vertical-align: middle;
display: inline-block;
}
</style>
<style>
/* Style the Image Used to Trigger the Modal */
#colorImageDisplay {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#colorImageDisplay:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
<!-- Page Content -->
<div class="wrapper" class="toggled">
<!-- Sidebar -->
<nav id="sidebar" style='background: #f8f0e8; color:#000000;'>
<!-- sidenav top title -->
<div id='sidebarTop' class="sidebar-header" style='background: #513e2a'>
<!-- sidebar top title text -->
<h3 style='color: #ffffff' style='font-weight: bold; text-size:12px'><strong>asdasdr</strong></h3>
<!-- sidebar expand/collapse button -->
<button id='sidebarCollapse'>
<img src="https://img.icons8.com/ios-filled/24/000000/menu.png"/>
</button>
</div>
<!-- sidenav list of items -->
<ul class="list-unstyled components sideBarOption" style='background: #180d04; color: #ffffff;'>
<!-- about page -->
<li>
About
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content" style='background: #cec5ac;'>
<div class="col-sm-12">
<div class="col" >
<div class="row" style=' overflow: auto; margin: auto; background: #917e73; color: #ffffff'>
<div class="col" style=''>
<h1 class="widgettitle"><strong>page title</strong></h1>
</div>
<div class="w-100"></div>
<div class="col" style=''>
<a id='githubUrl' target="_blank" href='https://www.youtube.com/watch?v=0df7k__KEHw'>Github</a>
</div>
</div>
</div>
<div class="col" >
<br>
<br>
<div class="row" style=' margin: auto;'>
<!-- page main content -->
<div class="container-fluid" style='color: #000000'>
<div style="margin-top:-30px;">
<!-- discogstagger output -->
<hr>
<h3>Comma-Separated Metadata Tags:</h3>
<div class='outputDiscogstaggerBox' style='margin-left:15px;'>
<div class='row'>
<textarea class="inputbox" id="tagsBox" rows="7" cols="44" placeholder="Booker T. Jones,Priscilla Jones,Booker T & The MGs,The Mar-Keys,The Stax Staff,The Packers,The RCO All-Stars,Priscilla Coolidge,Booker T. & Priscilla,1971,France,The Wedding Song,She,The Indian Song,Sea Gull,For Priscilla,The Delta Song,Why,Mississippi Voodoo,Cool Black Dream,Sweet Child Youre Not Alone,Booker T. & Priscilla 1971,Booker T. Jones 1971,"></textarea>
<button class="btn default copyButton" style="cursor: pointer; max-width: 553px; width: 100%;" id='copyToClipboarad' onclick="copyToClipboard('#inputBox')" type="button">Copy</button>
<div>
<table class="fixed h-100" align="left" style="white-space:nowrap; table-layout: fixed; max-width: 533px;" height="100" id="adjustments">
<tbody>
<!-- Columns -->
<tr>
<th style="text-align:center; width: 6%;"><input type="checkbox" id='selectAll' checked></th>
<th style="text-align:center; width: 25%;">Tags Type</th>
<th style="text-align:center; width: 46%;">Tags</th>
</tr>
<!-- Artists -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="releaseArtistsCheckbox" id="releaseArtistsCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Release Artist(s)</td>
<td>
<div style="text-align:center;">
<input type="range" class="releaseArtistsSlider" id="releaseArtistsSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="releaseArtistsSliderValue">100%</div>
<div class='float-right' id='releaseArtistsNumber'>0 chars </div>
</div>
</td>
</tr>
<!-- Release Info -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="releaseInfoCheckbox" id="releaseInfoCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Release Info</td>
<td>
<div style="text-align:center;">
<input type="range" class="releaseInfoSlider" id="releaseInfoSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="releaseInfoSliderValue">100%</div>
<div class='float-right' id='releaseInfoNumber'>0 chars</div>
</div>
</td>
</tr>
<!-- Tracklist -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="tracklistCheckbox" id="tracklistCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Tracklist</td>
<td>
<div style="text-align:center;">
<input type="range" class="tracklistSlider" id="tracklistSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="tracklistSliderValue">100%</div>
<div class='float-right' id='tracklistNumber'>0 chars</div>
</div>
</td>
</tr>
<!-- Combinations -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="combinationsCheckbox" id="combinationsCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Combinations</td>
<td>
<div style="text-align:center;">
<input type="range" class="combinationsSlider" id="combinationsSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="combinationsSliderValue">100%</div>
<div class='float-right' id='combinationsNumber'>0 chars</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
setHoverColor();
//setColors()
async function setHoverColor(){
var sheet = document.createElement('style')
//create css style rule for on-hover tab and on hover github url
let innerHTMLHoverColorStyle = `
/* githubUrl hover */
#githubUrl:hover{
color:blue;
}
#sidebar ul li a:hover {
background: #8c743c;
color: #ffffff;
} `;
sheet.innerHTML = innerHTMLHoverColorStyle
document.head.appendChild(sheet);
}
async function setColors(){
console.log('setcolors()')
let colors = await getColors()
let imgPath = colors.imgPath
//6 possible colors:
//Vibrant
//LightVibrant
//DarkVibrant
//Muted
//LightMuted
//DarkMuted
//get high contrast colors for text
/*
let sidebarColorBackground = colors.colors['DarkVibrant']
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground = sidebarColorBackground.substring(4, sidebarColorBackground.length-1);
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground = sidebarColorBackground.split(',');
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground_hex = rgbToHex(213, 23, 36)
console.log("sidebarColorBackground_hex = ", sidebarColorBackground_hex)
let sidebarColorBackground_text = invertColor(sidebarColorBackground_hex)
console.log("sidebarColorBackground_text = ", sidebarColorBackground_text)
*/
//change color display text and set color box hex value
//make all colors visible
//document.getElementById('pageColorsText').style.display = "block";
/*
//color 1
var color1 = colors.colors['Vibrant']
var color1_hex = rgbToHex(color1)
document.getElementById("color1Hex").innerText = `Color 1: ${color1_hex}`
//color 2
var color2 = colors.colors['LightVibrant']
var color2_hex = rgbToHex(color2)
document.getElementById("color2Hex").innerText = `Color 2: ${color2_hex}`
//color 3
var color3 = colors.colors['DarkVibrant']
var color3_hex = rgbToHex(color3)
document.getElementById("color3Hex").innerText = `Color 3: ${color3_hex}`
//color 4
var color4 = colors.colors['Muted']
var color4_hex = rgbToHex(color4)
document.getElementById("color4Hex").innerText = `Color 4: ${color4_hex}`
//color 5
var color5 = colors.colors['LightMuted']
var color5_hex = rgbToHex(color5)
document.getElementById("color5Hex").innerText = `Color 5: ${color5_hex}`
//color 6
var color6 = colors.colors['DarkMuted']
var color6_hex = rgbToHex(color6)
document.getElementById("color6Hex").innerText = `Color 6: ${color6_hex}`
*/
//change display image source
//document.getElementById('colorImageDisplay').src=`${imgPath}`
//setup image modal popup
//imageModalSetup()
//change colors
var sheet = document.createElement('style')
let hoverColor = `#8c743c`;
let innerHTMLHoverColorStyle = `#sidebar ul li a:hover { background: ${hoverColor}; } `;
sheet.innerHTML = innerHTMLHoverColorStyle
document.head.appendChild(sheet);
let innerHTMLStyle = `
/* main page body background color solid
body { background: red; } */
/* sidebar_header_background_color
#sidebarTop {background: ${colors.colors['LightMuted']};} */
/* sidebar_background_color
#sidebar { background: linear-gradient(0deg, ${colors.colors['LightVibrant']}, ${colors.colors['Muted']}); } */
/* active tab color
#currentPage { background: ${colors.colors['LightVibrant']}; } */
/* main page body background color gradient
body { background: linear-gradient(2deg, color3_hex, color6_hex);} */
/* ul ul a { expanded tab background color
.sideBarOption { background: ${colors.colors['Muted']}; } */
/* sidebar hover color */
#sidebar ul li a:hover { background: ${colors.colors['DarkVibrant']}; } `;
//console.log("innerHTMLStyle = ", innerHTMLStyle)
//sheet.innerHTML = innerHTMLStyle
//document.head.appendChild(sheet);
}
function invertColor(hex) {
if (hex.indexOf('#') === 0) {
hex = hex.slice(1);
}
// convert 3-digit hex to 6-digits.
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
if (hex.length !== 6) {
throw new Error('Invalid HEX color.');
}
// invert color components
var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
// pad each with zeros and return
return '#' + padZero(r) + padZero(g) + padZero(b);
}
function padZero(str, len) {
len = len || 2;
var zeros = new Array(len).join('0');
return (zeros + str).slice(-len);
}
//rgb to hex
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(color) {
//color = string like rgb(a,b,c)
//remove string parts
color = color.substring(4, color.length-1);
//turn into arr
color = color.split(',');
return "#" + componentToHex(parseInt(color[0])) + componentToHex(parseInt(color[1])) + componentToHex(parseInt(color[2]));
}
//setup image modal popup
imageModalSetup()
async function imageModalSetup(){
// Get the modal
var modal = document.getElementById("imageModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("colorImageDisplay");
//make image visible
img.style.display = "block";
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
//captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
$('#imageModal').fadeOut(500);
}
}
$(document).ready(function () {
//refresh button
const refreshButton = document.getElementById('refreshButton');
const refreshPage = () => {
location.reload();
}
refreshButton.addEventListener('click', refreshPage)
//if clicking outside modal, close modal
$(document).click(function (e) {
console.log('close modal')
if ($(e.target).is('#imageModal')) {
$('#imageModal').fadeOut(500);
}
});
//on escape key click, close modal
$(document).keydown(function(event) {
if (event.keyCode == 27) {
$('#imageModal').fadeOut(500);
}
});
//side bar collapse event
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
//make request to colors backend
function getColors(){
return new Promise(async function (resolve, reject) {
$.ajax({
type: 'POST',
url: '/getColors',
data: {
type: "varValue",
},
}).then((data) => {
resolve(data)
}).catch((err) => {
reject(err)
});
})
}
</script>
</html>
I am making an inventory using HTML and SQLite, using PHP to connect to the server and extract data. After extracting data, I need to populate an HTML table however this is not working. When I try to do console.log in order to see what's working, it does not show up in Chrome console. :(
Please ask if the database file is needed as it is a local database file in the working folder.
body {
font-family: 'Open Sans', sans-serif;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 15px;
text-align: center;
}
table tr:nth-child(even) {
background-color: #eee;
}
table tr:nth-child(odd) {
background-color: #fff;
}
table th {
color: white;
background-color: black;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
animation: fadeEffect 1s;
}
/* Go from zero to full opacity */
#keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
/* Style buttons */
.btn {
background-color: DodgerBlue; /* Blue background */
border: none; /* Remove borders */
color: white; /* White text */
padding: 12px 16px; /* Some padding */
font-size: 16px; /* Set a font size */
cursor: pointer; /* Mouse pointer on hover */
}
/* Darker background on mouse-over */
.btn:hover {
background-color: RoyalBlue;
}
.btnadd {
background-color: DodgerBlue; /* Blue background */
border: none; /* Remove borders */
color: white; /* White text */
padding: 12px 16px; /* Some padding */
font-size: 16px; /* Set a font size */
cursor: pointer; /* Mouse pointer on hover */
}
/* Darker background on mouse-over */
.btnadd:hover {
background-color: RoyalBlue;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
<!DOCTYPE html>
<html>
<head>
<title>Inventory Server</title>
<link rel="stylesheet" a href="InventoryServer.css"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<h2 style="text-align: center">Welcome to the inventory!</h2>
<!-- Trigger/Open The Modal -->
<button class="btnadd" id="btnadd"><i class=material-icons>add_circle</i></button>
<div class="tab">
<button class="tablinks" onclick="openLocation(event, 'Kitchen')" id="defaultOpen">Kitchen</button>
<button class="tablinks" onclick="openLocation(event, 'Shed')">Shed</button>
</div>
<div id="Kitchen" class="tabcontent">
<h3>Kitchen</h3>
<table style="width: 100%">
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Unit</th>
<th>Description</th>
</tr>
<?php
$db = "inventory.db";
$handle = sqlite_open($db) or die("Could not open database");
$query = "SELECT Name,Quantity,Unit,Description FROM kitchen ";
$result = sqlite_query($handle, $query) or die("Error in query: ".sqlite_error_string(sqlite_last_error($handle)));
while($row = sqlite_fetch_array($result)) {
?>
<tr>
<td><?php echo $row['Name']?></td>
<td><?php echo $row['Quantity']?></td>
<td><?php echo $row['Unit']?></td>
<td><?php echo $row['Description']?></td>
</tr>
<?php
}
?>
<?php
sqlite_close($handle);
?>
</table>
</div>
<div id="Shed" class="tabcontent">
<h3>Shed</h3>
<table style="width: 100%">
<thead>
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Unit</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<?php
$connect = mysql_connect("inventory.db","root", "", "inventory");
if (!$connect) {
die(mysql_error());
}
$results = mysql_query("SELECT * FROM shed ");
while($row = mysql_fetch_array($results)) {
?>
<tr>
<td><?php echo $row['name']?></td>
<td><?php echo $row['quantity']?></td>
<td><?php echo $row['unit']?></td>
<td><?php echo $row['description']?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<!-- The Modal -->
<div id="btnAddForm" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2 style="text-align: center">Add New Item To Inventory</h2>
</div>
<div class="modal-body">
<form action="#" method="post" role="form" data-toggle="validator" class="form-container">
<div class="form-group margin-top-m">
<label for="name" class="control-label">Name Of Item: </label>
<input type="text" id="nameOfItem" name="nameOfItem" class="form-control" data-error="Please enter the item name!" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="quantity" class="control-label">Quantity of Item: </label>
<input type="text" id="quantityOfItem" name="quantityOfItem" class="form-control required" data-error="Please enter the quantity of the item!" required>
<div class="help-block with-errors"></div>
</div>
<div class="row">
<div class="col-md-6 mid-col">
<div class="form-group">
<label for="unitOfItem" class="control-label">Item Unit: </label>
<select name="unitOfItem" id="unitOfItem" class="form-control required" data-error="Please select a unit!" required>
<option value=""></option>
<option value="piece">piece(s)</option>
<option value="grams">g</option>
<option value="kg">kg</option>
<option value="mL">mL</option>
<option value="L">L</option>
<option value="item">item(s)</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6 mid-col">
<div class="form-group">
<label for="place" class="control-label">Select a place: </label>
<select name="place" id="place" class="form-control required" data-error="Please select the item location!" required>
<option value=""></option>
<option value="Kitchen">Kitchen</option>
<option value="Shed">Shed</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group">
<label for="descriptionOfItem" class="control-label">Item description: </label>
<input type="text" id="descriptionOfItem" name="descriptionOfItem" class="form-control required" data-error="Please enter a valid item description!" required>
<div class="help-block with-errors"></div>
</div>
<p class="margin-0"><button type="submit" class="btn btn-lg orange w-100 margin-top-s">Submit</button></p>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="require.js"></script>
<script>
// Get the modal
var modal = document.getElementById('btnAddForm');
// Get the button that opens the modal
var btn = document.getElementById("btnadd");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
document.getElementById("defaultOpen").click();
function openLocation(evt, locationName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(locationName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
I am a newbie to code and I am learning vanilla JS. I created this drawer navigation with a circle that moves from left tor right, but there is an issue. I uploaded the current state here: http://setup.industries/masquarade/
The issue that gets me stuck:
The first click on the hamburger nav icon doesn't open the drawer and the animation is switched. I suspect the problem to be in the if(open) as the open var doesn't truly capture the toggle state with open = header.style.width == '0%' After the initial bug, it works fine. A real head scratcher for me.
If you have other tips for better code, or point out my bad practices, I'd be happy to learn.
--
Edit 1: I have added the full code to this question. I am not sure how I can make the ellipse visible, i linked directly to hosted url.
// open sidenav //
function openNav() {
let header = document.getElementById("header");
let open = header.style.width == '0%'
let width = document.body.clientWidth;
var ellipse = document.getElementById("ellipse");
function moveEllipseRight() {
ellipse.animate([
// keyframes
{ transform: 'translateX(0px)' },
{ transform: 'translateX('+ width + 'px)' }
], {
// timing options
duration: 500,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
});}
function moveEllipseLeft() {
ellipse.animate([
// keyframes
{ transform: 'translateX('+ width + 'px)' },
{ transform: 'translateX(0px)' }
], {
// timing options
duration: 500,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
});}
// open sidenav //
if (open) {
header.style.width = "100%";
moveEllipseRight();
} else {
header.style.width = '0%';
moveEllipseLeft();
}
}
// if (open) {
// ellipse.classList.remove("ellipse_left");
// ellipse.classList.add("ellipse_right");
// } else {
// ellipse.classList.remove("ellipse_right");
// ellipse.classList.add("ellipse_left");
// }
// let ellipse = document.getElementById("ellipse");
// let pos = 0;
// let id = setInterval(frame, 5);
// function myMove() {
// console.log('Hello')
// var ellipse = document.getElementById("ellipse");
// var pos = -200;
// var id = setInterval(frame, 1);
// let width = document.body.clientWidth; // - $('#mydiv').width();
//
// function frame() {
// if (pos == width - 200) {
// clearInterval(id);
// } else {
// pos++;
// ellipse.style.left = pos + "px";
// }
// }
// }
// information tabs //
function openTab(evt, tab) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tab).style.display = "block";
evt.currentTarget.className += " active";
}
html, body {
max-width: 100%;
overflow-x: hidden;
}
body {
background: black;
color: white;
font-family: 'Helvetica Neue', sans-serif;
font-size: 1.2em;
line-height: 1.4em;
}
a {
color: white;
}
.clear {
clear: both; float: none; height: 40px;
}
/* Ellipse */
#ellipse {
position: absolute;
top: 120px;
z-index:99;
animation: 3s linear 0s slide 1;
left: -200px;
}
/*
.ellipse_left {left: -200px;}
.ellipse_right {right: -200px;}
*/
/* Masquarede Logo */
img.masquarade_events {
opacity: 0.3;
position: absolute;
bottom: 20px;
right: 20px;
}
img.masquarade_events:hover {
opacity: 0.9;
}
/* Content */
.content {
margin: 150px 0 0 300px;
width: 700px;
height: 400px;
}
#media screen and (max-width: 992px) {
.content {
margin: 150px 0 0 0;
width: 700px;
height: 400px;
}
}
.date {
font-weight: bold;
margin-bottom: -10px;
}
.location {
}
ul.lineup {
list-style-position: inside;
padding: 0;
list-style-type: none;
width: 100%
overflow: hidden;
margin-bottom: 100px;
}
ul.lineup li {
margin-right: 50px;
line-height: 2.5em;
float: left;
}
/* Buttons */
a.button {
margin-right: 10px;
padding: 10px 50px 10px 50px;
text-decoration: none;
border-radius: 200px;
font-size: 0.7em;
transition: 0.3s;
}
a.white {
background: white;
color: black;
}
a.white:hover {
color: white;
background: #D90E46;
}
a.black {
border: 2px white solid;
color: white;
}
a.black:hover {
border: 2px #FCF454 solid;
color: #FCF454;
}
/* Header */
header {
position: absolute;
background-color: black;
top:0;
left:0;
width: 0;
height: 100%;
z-index: 1;
}
/* Navigation */
header nav {
position: absolute;
top: 100px;
right:300px;
}
nav ul {
list-style-position: inside;
width: 400px;
padding: 0;
list-style-type: none;
font-size: 1em;
}
nav ul li{
border-bottom: 1px solid white;
padding: 10px 0 10px 0;
}
nav ul li:hover{
font-weight: bold;
padding: 10px 0 10px 10px;
}
li.active {
font-weight: bold;
}
nav ul li:first-child{
/* border-top: 1px solid white;*/
}
nav ul li a{
text-decoration: none;
}
nav ul h2{
margin-bottom: 10px;
}
.tabcontent {
display: none;
}
/* Header Icon */
img.icon {
position: absolute;
z-index: 999;
top:60px;
right:70px;
}
/* Display */
.display {
width: 400px;
height: 400px;
position: absolute;
top: 100px;
right:750px;
}
.display p {
margin:0 30px 30px 0;
}
<!doctype html>
<html lang="en">
<head>
<!-- SETUP Industries - FUNCTIONAL DESIGN -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- <link rel="shortcut icon" type="image/png" href="favicon.png"/> -->
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<link href="https://fonts.googleapis.com/css?family=Heebo:400,700,900" rel="stylesheet">
<!-- JS -->
<script src="assets/javascript.js"></script>
<title>Masquarade Classix 2019</title>
</head>
<body>
<!-- Navigation -->
<!-- Icon -->
<img onclick="openNav()"id="icon" src="http://setup.industries/masquarade/assets/icon.svg" class="icon" width="40" alt="Expand Navigation" />
<header id="header">
<nav>
<ul>
<h2>Information</h2>
<li class="tablinks" onmouseover="openTab(event, 'Tickets')">Tickets and pricing </li>
<li class="tablinks" onmouseover="openTab(event, 'Location')">Location</li>
<li class="tablinks" onmouseover="openTab(event, 'Transportation')">Transportation</li>
<li class="tablinks" onmouseover="openTab(event, 'Amenities')"><a href="#">Ameneties</li>
<li class="tablinks" onmouseover="openTab(event, 'HouseRules')">House rules</li>
<li class="tablinks" onmouseover="openTab(event, 'TermsAndConditions')">Terms and conditions</li>
<li class="tablinks" onmouseover="openTab(event, 'Contact')">Contact</li>
<li class="tablinks" onmouseover="openTab(event, 'Partners')">Partners</li>
</ul>
</nav>
<div class="display">
<div id="Tickets" class="tabcontent">
<h2>Tickets and pricing</h2>
<p>Saturday day tickets cost 45 EUR incl. service costs and 21% BTW. You can buy tickets online via the button below or at one of the resellers listed below.</p>
Buy Tickets
<br><br>
<p style="font-size:0.8em;"> <strong>Paperpoint</strong><br>
3930 Hamont-achel<br><br>
<strong>Dag en nachtwinkel </strong><br>
3900 Overpelt<br><br>
<strong>VDM bvba, Q8 tankstation</strong> <br>
Peer<br><br>
<strong>Frituur De Kromme Draai</strong> <br>
Eksel<br><br>
<strong>’t frituurke</strong> <br>
Haag 22, 3910 Achel<br></p>
</div>
<div id="Location" class="tabcontent">
<h2>Location</h2>
</div>
<div id="Transportation" class="tabcontent">
<h2>Transportation</h2>
</div>
<div id="Amenities" class="tabcontent">
<h2>Amenities</h2>
</div>
<div id="HouseRules" class="tabcontent">
<h2>House Rules</h2>
</div>
<div id="TermsAndConditions" class="tabcontent">
<h2>Terms And Conditions</h2>
</div>
<div id="Contact" class="tabcontent">
<h2>Contact</h2>
</div>
<div id="Partners" class="tabcontent">
<h2>Partners</h2>
</div>
</div>
</header>
<!-- Navigation End -->
<div class="container">
<div id="ellipse" class="ellipse_left">
<img src="assets/ellipse.svg" alt="ellipse" width="400" height="400"/>
</div>
<img class="masquarade_events" src="assets/masquarade_events.png" alt="Masquarade Events" width="125" height=""/>
<div class="content">
<p class="date">25 mei 2019</p>
<p class="location">Hennemeeuwis Neerpelt</p>
<h1>Masquarade Classix </h1>
<ul class="lineup">
<li>Nina Kraviz</li>
<li>Recondite</li>
<li>Mind Against</li>
<li>Âme</li>
<li>Vince Watson</li>
<li>Kölsch</li>
<li>Rodriguez Jr. </li>
<li></li>
</ul>
<div class="clear"></div>
Buy Tickets
More Information
</div>
</div>
</body>
</html>
The value for element.style is set by using either javascript or inline style attribute, css will not set the value for you. Therefore, if you are using a css to style the header's width, the value for header.style.width would be an empty string initially, making the expression header.style.width == '0%' to be falsy.
You can add a console.log(document.getElementById('header').style.width) to check the value yourself.
As a result, the first time you click the hamburger, the else block in the conditional will always be ran.
After the first time you click the hamburger, document.getElementById('header').style.width is now being set through javascript, so the subsequent clicks will behave as expected.
To solve the problem, you can either use an inline style attribute to style your header's width, or you can get the style using javascript with
const headerWidth = getComputedStyle(document.getElementById('header')).width;
const open = headerWidth === '0px' || headerWidth === '0%';
You had your open logic reversed. Simply changing the order of 100% / 0% fixes this.
Improvement tips:
checking the elements state by using a class instead of the actual CSS. (Adding an open class to the element when it is open, and removing it when it is not open)
By doing the above, you can move the manipulation of width to the CSS class open: header.open {width: 100%}
By using "`" and encapsulating your variables in ${} you can get rid of many "+" like so: { transform: `translateX(${width}px)` }
Can be seen in the snippet:
// open sidenav //
function openNav() {
let header = document.getElementById("header");
let open = header.className.includes('open')
let width = document.body.clientWidth;
var ellipse = document.getElementById("ellipse");
function moveEllipseRight() {
ellipse.animate([
// keyframes
{ transform: 'translateX(0)' },
{ transform: `translateX(${width}px)` }
], {
// timing options
duration: 500,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
});}
function moveEllipseLeft() {
ellipse.animate([
// keyframes
{ transform: `translateX(${width}px)` },
{ transform: 'translateX(0)' }
], {
// timing options
duration: 500,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
});}
// open sidenav //
if (open) {
moveEllipseLeft();
header.classList.remove("open");
} else {
moveEllipseRight();
header.classList.add("open");
}
}
// information tabs //
function openTab(evt, tab) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tab).style.display = "block";
evt.currentTarget.className += " active";
}
html, body {
max-width: 100%;
overflow-x: hidden;
}
body {
background: black;
color: white;
font-family: 'Helvetica Neue', sans-serif;
font-size: 1.2em;
line-height: 1.4em;
}
a {
color: white;
}
.clear {
clear: both; float: none; height: 40px;
}
/* Ellipse */
#ellipse {
position: absolute;
top: 120px;
z-index:99;
animation: 3s linear 0s slide 1;
left: -200px;
}
/*
.ellipse_left {left: -200px;}
.ellipse_right {right: -200px;}
*/
/* Masquarede Logo */
img.masquarade_events {
opacity: 0.3;
position: absolute;
bottom: 20px;
right: 20px;
}
img.masquarade_events:hover {
opacity: 0.9;
}
/* Content */
.content {
margin: 150px 0 0 300px;
width: 700px;
height: 400px;
}
#media screen and (max-width: 992px) {
.content {
margin: 150px 0 0 0;
width: 700px;
height: 400px;
}
}
.date {
font-weight: bold;
margin-bottom: -10px;
}
.location {
}
ul.lineup {
list-style-position: inside;
padding: 0;
list-style-type: none;
width: 100%
overflow: hidden;
margin-bottom: 100px;
}
ul.lineup li {
margin-right: 50px;
line-height: 2.5em;
float: left;
}
/* Buttons */
a.button {
margin-right: 10px;
padding: 10px 50px 10px 50px;
text-decoration: none;
border-radius: 200px;
font-size: 0.7em;
transition: 0.3s;
}
a.white {
background: white;
color: black;
}
a.white:hover {
color: white;
background: #D90E46;
}
a.black {
border: 2px white solid;
color: white;
}
a.black:hover {
border: 2px #FCF454 solid;
color: #FCF454;
}
/* Header */
header {
position: absolute;
background-color: black;
top:0;
left:0;
width: 0;
height: 100%;
z-index: 1;
}
/* Header animation css */
header.open {
width: 100%;
}
/* Navigation */
header nav {
position: absolute;
top: 100px;
right:300px;
}
nav ul {
list-style-position: inside;
width: 400px;
padding: 0;
list-style-type: none;
font-size: 1em;
}
nav ul li{
border-bottom: 1px solid white;
padding: 10px 0 10px 0;
}
nav ul li:hover{
font-weight: bold;
padding: 10px 0 10px 10px;
}
li.active {
font-weight: bold;
}
nav ul li:first-child{
/* border-top: 1px solid white;*/
}
nav ul li a{
text-decoration: none;
}
nav ul h2{
margin-bottom: 10px;
}
.tabcontent {
display: none;
}
/* Header Icon */
img.icon {
position: absolute;
z-index: 999;
top:60px;
right:70px;
}
/* Display */
.display {
width: 400px;
height: 400px;
position: absolute;
top: 100px;
right:750px;
}
.display p {
margin:0 30px 30px 0;
}
<!doctype html>
<html lang="en">
<head>
<!-- SETUP Industries - FUNCTIONAL DESIGN -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- <link rel="shortcut icon" type="image/png" href="favicon.png"/> -->
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<link href="https://fonts.googleapis.com/css?family=Heebo:400,700,900" rel="stylesheet">
<!-- JS -->
<script src="assets/javascript.js"></script>
<title>Masquarade Classix 2019</title>
</head>
<body>
<!-- Navigation -->
<!-- Icon -->
<img onclick="openNav()"id="icon" src="http://setup.industries/masquarade/assets/icon.svg" class="icon" width="40" alt="Expand Navigation" />
<header id="header">
<nav>
<ul>
<h2>Information</h2>
<li class="tablinks" onmouseover="openTab(event, 'Tickets')">Tickets and pricing </li>
<li class="tablinks" onmouseover="openTab(event, 'Location')">Location</li>
<li class="tablinks" onmouseover="openTab(event, 'Transportation')">Transportation</li>
<li class="tablinks" onmouseover="openTab(event, 'Amenities')"><a href="#">Ameneties</li>
<li class="tablinks" onmouseover="openTab(event, 'HouseRules')">House rules</li>
<li class="tablinks" onmouseover="openTab(event, 'TermsAndConditions')">Terms and conditions</li>
<li class="tablinks" onmouseover="openTab(event, 'Contact')">Contact</li>
<li class="tablinks" onmouseover="openTab(event, 'Partners')">Partners</li>
</ul>
</nav>
<div class="display">
<div id="Tickets" class="tabcontent">
<h2>Tickets and pricing</h2>
<p>Saturday day tickets cost 45 EUR incl. service costs and 21% BTW. You can buy tickets online via the button below or at one of the resellers listed below.</p>
Buy Tickets
<br><br>
<p style="font-size:0.8em;"> <strong>Paperpoint</strong><br>
3930 Hamont-achel<br><br>
<strong>Dag en nachtwinkel </strong><br>
3900 Overpelt<br><br>
<strong>VDM bvba, Q8 tankstation</strong> <br>
Peer<br><br>
<strong>Frituur De Kromme Draai</strong> <br>
Eksel<br><br>
<strong>’t frituurke</strong> <br>
Haag 22, 3910 Achel<br></p>
</div>
<div id="Location" class="tabcontent">
<h2>Location</h2>
</div>
<div id="Transportation" class="tabcontent">
<h2>Transportation</h2>
</div>
<div id="Amenities" class="tabcontent">
<h2>Amenities</h2>
</div>
<div id="HouseRules" class="tabcontent">
<h2>House Rules</h2>
</div>
<div id="TermsAndConditions" class="tabcontent">
<h2>Terms And Conditions</h2>
</div>
<div id="Contact" class="tabcontent">
<h2>Contact</h2>
</div>
<div id="Partners" class="tabcontent">
<h2>Partners</h2>
</div>
</div>
</header>
<!-- Navigation End -->
<div class="container">
<div id="ellipse" class="ellipse_left">
<img src="assets/ellipse.svg" alt="ellipse" width="400" height="400"/>
</div>
<img class="masquarade_events" src="assets/masquarade_events.png" alt="Masquarade Events" width="125" height=""/>
<div class="content">
<p class="date">25 mei 2019</p>
<p class="location">Hennemeeuwis Neerpelt</p>
<h1>Masquarade Classix </h1>
<ul class="lineup">
<li>Nina Kraviz</li>
<li>Recondite</li>
<li>Mind Against</li>
<li>Âme</li>
<li>Vince Watson</li>
<li>Kölsch</li>
<li>Rodriguez Jr. </li>
<li></li>
</ul>
<div class="clear"></div>
Buy Tickets
More Information
</div>
</div>
</body>
</html>
i have a view in which i have a popup modal which gets a search string and search for the details in the database.
the problem is that when i write my search string and press search button, the javascript is not triggered.
The following are my codes
<html>
<head>
<script src="~/Scripts/jquery-1.11.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.11.js"></script>
<script>
$(document).ready(function () {
$("#records_table").on("click", "tr", function () {
$(this).addClass('selected').siblings().removeClass('selected');
var usern = $(this).find('td:nth-child(1)').html();
var name = $(this).find('td:nth-child(2)').html();
var email = $(this).find('td:nth-child(3)').html();
var emails = $(this).find('td:nth-child(4)').html();
document.getElementById("1").value = usern;
document.getElementById("2").value = name;
document.getElementById("3").value = email;
document.getElementById("4").value = emails;
});
$('#openBtn').click(function (event) {
$(".rower").empty();
var search = $('#searchAttr').val();
if (search != '') {
$.getJSON('#Url.Content("~/DBTestAccPAcs/GetRecord")', { search: search }, function (FacilityData) {
$(function () {
for (var i = 0; i < FacilityData.DivID.length; i = i+4) {
$('<tr class="rower">').append(
$('<td>').text(FacilityData.DivID[i]),
$('<td>').text(FacilityData.DivID[i + 1]),
$('<td>').text(FacilityData.DivID[i + 2]),
$('<td>').text(FacilityData.DivID[i + 3])
).appendTo('#records_table');
}
});
});
}
});
});
</script>
<style>
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
/* Extra styles for the cancel button */
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}
/* Float cancel and signup buttons and add an equal width */
.cancelbtn,.signupbtn {
float: left;
width: 50%;
}
/* Add padding to container elements */
.container {
padding: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 35px;
top: 15px;
color: #000;
font-size: 40px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<input id="searchAttr" name="searchAttr" />
<button onclick="document.getElementById('id01').style.display='block'">Sign Up</button>
<input type="text" id="1" /><input type="text" id="2" /><input type="text" id="3" /><input type="text" id="4" />
<!-- Button to open the modal -->
<!-- The Modal (contains the Sign Up form) -->
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
#*<form class="modal-content animate" action="/action_page.php">*#
<div class="modal-content animate">
<div class="container">
<div class="my">
<input id="searchAttr" name="searchAttr" />
<button href="#myModal" id="openBtn" data-toggle="modal" class="btn btn-success">search</button>
</div>
<div id="result">
<div class="table-responsive" style="height:300px; overflow:auto;">
<table id="records_table" border='1' class="table table-bordered table-condensed table-hover table-responsive">
<thead>
<tr>
<th>Vendor Part Number</th>
<th>Description</th>
<th>Location Code</th>
<th>Quantity</th>
</tr>
</thead>
<tbody id="getrid"></tbody>
</table>
</div>
</div>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</div>
</div>
</div>
</body>
</html>
any help will really be appreciated.
Thanks