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>
Related
I am working on a simple note taking app using vanilla javascript. I am trying to have the program add the note with a modal that when clicked would show the text. With what I have so far it is adding the note below the input box and along with the modal button. When I click the modal button it does nothing the first click. On the second click the text and modal button disappear.
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Note Tracker</title>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* 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 {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.success {
background-color: #ddffdd;
border-left: 6px solid #4CAF50;
}
</style>
</head>
<body>
<h1>Note Tracker Web App</h1>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<label for="iNote">Input Note:</label><br>
<br>
<textarea id="inote" name="inote" rows="4" cols="50">
</textarea>
<br>
<button type="button" id="btn" onclick="addNote()">Add Note</button>
<br><br>
<div id="noteList">
<span class="close">×</span>
</div>
<script src="scripts.js"></script>
</body>
Javascript is the below that creates the note and then add it along with the modal
function addNote(){
var item = document.getElementById("inote").value
var text = document.createTextNode(item)
var newItem = document.createElement("P")
newItem.appendChild(text)
document.getElementById("noteList").appendChild(newItem)
var x = document.createElement("BUTTON");
x.id = "someId";
//x.onclick ="modalOpen()";
x.onclick = function(){
var modal = document.getElementById("noteList");
var btn = document.getElementById("someId");
btn.onclick = function() {
modal.style.display = "none";
}
};
var t = document.createTextNode("Open Modal");
x.appendChild(t);
document.getElementById("noteList").appendChild(x);
var z = document.createElement("BR");
document.getElementById("noteList").appendChild(z);
var newElem = document.createElement("BR");
document.getElementById("noteList").appendChild(newElem);
}
on first time, you are just attach event listener of click, simply put x.onclick outside the function
Hopefully this one will help.
So we have the "note-list" to handle the list.
I create a modal element that can activate when we click on the "new note" button.
In here I play with opacity and z-index to show this modal. Can be better than this.
const newNote = document.getElementById('new-note'),
addNote = document.getElementById('add-note');
let myModal = document.getElementById('my-modal');
newNote.addEventListener('click', () => {
myModal.style.zIndex = 99;
myModal.style.opacity = 1;
});
addNote.addEventListener('click', () => {
let note = document.getElementById('note'),
noteList = document.getElementById('note-list');
if (note.value !== '') {
let _el = document.createElement('li');
_el.innerHTML = note.value;
let _a = document.createElement('a');
_a.innerHTML = 'delete';
_el.appendChild(_a);
noteList.appendChild(_el);
note.value = '';
myModal.style.zIndex = -1;
myModal.style.opacity = 0;
_a.addEventListener('click', (e) => {
e.target.parentNode.remove();
});
} else {
alert('note can not empty');
}
});
#my-modal {
width: 100%: height: 100%;
z-index: -1;
opacity: 0;
position: absolute;
background: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.modal-wrapper {
border-radius: .5rem;
background: #fff;
display: block;
padding: 1rem;
margin-top: 20%;
}
ul {
display: block;
}
#note-list li {
display: block;
margin-bottom: .5rem;
border: 1px solid #efefef;
background: #f7f7f7;
border-radius: .5rem;
position: relative;
padding: 1rem;
width: 70%;
}
#note-list li a{
position: absolute;
right: 0;
top: 0;
background: tomato;
padding: 1rem;
color: #fff;
}
.modal-wrapper * {
display: block;
margin: .5rem auto;
width: 90%;
text-align: center;
}
<h1>Note Taker App</h1>
<div class="note-wrapper">
<ul id="note-list">
</ul>
<button id="new-note">New Note</button>
</div>
<div id="my-modal">
<div class="modal-wrapper">
<label for="note">Your Note</label>
<input type="text" name="note" id="note">
<button id="add-note">add note</button>
</div>
</div>
I have a textarea/button and a table in my page body, I have my table aligned next to my textarea/button which is fine and all, but my table doesn't stretch down to fit the full height of the div, I tried setting height=100px , 100%, and 100 in my html element,
https://jsfiddle.net/martinradio/b4z735tk/32/
<!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;">
<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>
<table class="fixed" align="left" style="table-layout: fixed; width: 539px; " height="100" id="adjustments">
<tbody>
<!-- Columns -->
<tr>
<th style="text-align:center; width: 6%;"><input type="checkbox" id='selectAll' checked></th>
<th>Tags Type</th>
<th>Tags</th>
</tr>
<!-- Artists -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="releaseArtistsCheckbox" id="releaseArtistsCheckbox" checked=""
onchange="prepUpdateTagsBox()">
</td>
<td>Release Artist(s)</td>
<td>
<div>
<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>Release Info</td>
<td>
<div>
<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>Tracklist</td>
<td>
<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>
</td>
</tr>
<!-- Combinations -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="combinationsCheckbox" id="combinationsCheckbox" checked=""onchange="prepUpdateTagsBox()">
</td>
<td>Combinations</td>
<td>
<div>
<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>
<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>
How can I make my table always fit the width of the div its in? Thanks
the answer is simple first: wrap your table with a div then give your table a hight: 100% then it will work I used the class h-100 since you are using bootstrap.
ps: use this website to validate your HTML file https://validator.w3.org/
<div>
<table class="fixed h-100" align="left" style="table-layout: fixed; width: 539px; " height="100" id="adjustments">
<tbody>
<!-- Columns -->
<tr>
<th style="text-align:center; width: 6%;"><input type="checkbox" id='selectAll' checked></th>
<th>Tags Type</th>
<th>Tags</th>
</tr>
<!-- Artists -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="releaseArtistsCheckbox" id="releaseArtistsCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td>Release Artist(s)</td>
<td>
<div>
<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>Release Info</td>
<td>
<div>
<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>Tracklist</td>
<td>
<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>
</td>
</tr>
<!-- Combinations -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="combinationsCheckbox" id="combinationsCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td>Combinations</td>
<td>
<div>
<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>
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'm trying to animate a modal with a transition. I'm just looking for open it slowly but i don't understand how it works...
The modal have to be open from the center of the screen or from the screen down side.
I found this code from google :
https://codepen.io/designcouch/pen/obvKxm
But it's really too complicated for me. I can't understand how adapt it with my code...
/*Ouvrir le popup stress */
// Get the modal
var hydricstressmodal = document.getElementById('hydricstressmodal');
// Get the button that opens the modal
var stress = document.getElementById("stress");
// Get the <span> element that closes the modal
var hydricstressspan = document.getElementsByClassName("stressclose")[0];
// When the user clicks the button, open the modal
stress.onclick = function() {
hydricstressmodal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
hydricstressspan.onclick = function() {
hydricstressmodal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == hydricstressmodal) {
hydricstressmodal.style.display = "none";
}
}
/*Ouvrir le popup vegetal */
// Get the modal
var vegetalmodal = document.getElementById('vegetalmodal');
// Get the button that opens the modal
var vegetal = document.getElementById("vegetal");
// Get the <span> element that closes the modal
var vegetalspan = document.getElementsByClassName("vegetalclose")[0];
// When the user clicks the button, open the modal
vegetal.onclick = function() {
vegetalmodal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
vegetalspan.onclick = function() {
vegetalmodal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == vegetalmodal) {
vegetalmodal.style.display = "none";
}
}
#charset "UTF-8";
/* CSS Document */
body {
margin: 0;
font-size: 28px;
background-color: #00011f;
display: flex;
flex-direction: column;
margin : auto;
}
/*popup hydric stress*/
.hydricstressmodal {
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.7); /* Black w/ opacity */
}
/* stress Modal Content */
.stress-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
height: 70%;
border-radius: 30px;
overflow: scroll;
}
.popstress img{
width: 20%;
}
/* The Close Button */
.stressclose {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.stressclose:hover,
.stressclose:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/*popup Vegetal*/
.vegetalmodal {
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.8); /* Black w/ opacity */
scale
}
/* stress Modal Content */
.vegetal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
height: 70%;
border-radius: 30px;
overflow: scroll;
}
.popvegetal img{
width: 40%;
}
/* The Close Button */
.vegetalclose {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.vegetalclose:hover,
.vegetalclose:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<div id="content">
<h3>Electrophotonique Ingénierie : Nouvelle approche de l'imagerie macroscopique par effet de couronne dans le domaine de la santé et des biotechnologies.</h3>
<div id="file" action="" class = "container">
<input id = "stress" type="image" src="IMAGES/PNG/hydricstress.png" />
<div class = "text">
Stress hydrique
</div>
</div>
<!-- The hydric stress Modal -->
<div id="hydricstressmodal" class="hydricstressmodal">
<div class="stress-content">
<span class="stressclose">×</span>
<div class ="popstress" ><img src="images/png/hydricstress.png"></div>
<p>Some text in the Modal..</p>
</div>
</div>
<div id="file" action="" class = "container">
<input id = "vegetal" type="image" src="IMAGES/PNG/vegetal.png" />
<div class = "text">
Biophotonique appliquée aux végétaux
</div>
</div>
</div>
<!-- The vegetal Modal -->
<div id="vegetalmodal" class="vegetalmodal">
<div class="vegetal-content">
<span class="vegetalclose">×</span>
<div class ="popvegetal" ><img src="images/png/vegetal.png" ></div>
<p>Some text in the Modal..</p>
</div>
</div>
<div id="file" action="" class = "container">
<img src="IMAGES/PNG/pont.png" width="100%" />
<div class = "text">
Etudes des ponts photoniques
</div>
</div>
<script type="text/javascript" src="JS/sticky_navbar.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
<script src="js/button.js"></script>
A simple solution with css animations:
$('#open').click(function() {
$('#modalOverlay').show().addClass('modal-open');
});
$('#close').click(function() {
var elem = $('#modalOverlay');
elem.removeClass('modal-open');
setTimeout(function() {
elem.hide();
},200);
});
#modalOverlay {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: rgba(0,0,0,0.8);
z-index:9999;
}
#modal {
position:fixed;
width:60%;
top:55%;
left:50%;
padding:15px;
text-align:center;
background-color:#fafafa;
box-sizing:border-box;
opacity:0;
transform: translate(-50%,-50%);
transition:all 150ms ease-in-out;
}
#modalOverlay.modal-open #modal {
opacity:1;
top:50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="open" type="button">View modal</button>
<div id="modalOverlay" style="display:none;">
<div id="modal">
<h1>My modal</h1>
<p>This is a simple modal</p>
<button id="close" type="button">Close</button>
</div>
</div>
If you don't want to spend too much time on this kind of feature you could use a library like https://sweetalert2.github.io/ which is very easy to use and do the job.
You can also use library like bootstrap. For bootstrap modal you can refer below link.
https://getbootstrap.com/docs/4.0/components/modal/
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