Related
There are books in my incoming data. I want to make these books slider by categories. In other words, when I click on the 1st class, the books belonging to the 1st class will be listed. When I click on 2nd grade I want 2nd grade books to be listed. But I want it to be in slider shape. The categories will increase more after that. like 3rd grade 4th grade. Please run the codes in full page
const books = [
{
id: 1,
bookname: "Book Name 1",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class"
},
{
id: 2,
bookname: "Book Name 2",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class"
},
{
id: 3,
bookname: "Book Name 3",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class"
},
{
id: 4,
bookname: "Book Name 4",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class"
},
{
id: 5,
bookname: "Book Name 5",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class"
},
{
id: 6,
bookname: "Book Name 6",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class"
},
{
id: 7,
bookname: "Book Name 7",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class"
},
{
id: 8,
bookname: "Book Name 8",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class"
},
{
id: 9,
bookname: "Book Name 9",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "Second Class"
},
{
id: 10,
bookname: "Book Name 10",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "Second Class"
},
]
const n = 6;
const bookshelfbox = document.querySelector('.bookshelfbox');
const bookproduct = document.querySelectorAll('.bookproduct');
const className = document.querySelector('.slides');
const bookproductbox = document.querySelector('.bookproductbox');
const grouredBooks = books.reduce((r, e, i) =>
(i % n ? r[r.length - 1].push(e) : r.push([e])) && r
, []);
console.log(grouredBooks)
grouredBooks.map((books) => {
const row = document.createElement('div');
row.className = 'row';
bookshelfbox.appendChild(row);
return books.map(
(book) =>
(row.innerHTML += `
<div class="bookproductbox">
<div class="bookproduct">
<img
src="${book.bookimage}"
alt=""
width="120"
height="180"
class="img_thumb" style="width: 120px; height: 180px; top: -73px;"
>
<div class="producttitle">
<p> ${book.bookname} </p>
<p> ${book.bookClass} </p>
</div>
</div>
`)
);
});
#charset "UTF-8";
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;600;800&family=PT+Serif:wght#400;700&display=swap");
*,
html {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden;
font-family: 'PT Serif', serif;
}
body a {
text-decoration: none;
}
body a:hover {
text-decoration: none;
}
body .form-control:focus {
outline: none;
box-shadow: none !important;
}
body button:focus {
outline: none;
box-shadow: none;
}
body p {
margin-bottom: 0 !important;
}
.wrapper .booklib {
width: 100%;
height: 100%;
}
.wrapper .booklib .header {
background: #93643a url('images/header2.png') repeat;
color: #e4b173;
width: 100%;
height: 70px;
text-align: center;
margin: 0 auto;
overflow: hidden;
}
.wrapper .booklib .header ul {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.wrapper .booklib .header ul li {
list-style: none;
margin: 0;
padding: 0;
display: block;
float: left;
margin-right: 15px;
padding: 4px 8px;
border-radius: 5px;
border: #d39e6b solid 1px;
cursor: pointer;
box-shadow: 1px 1px 4px rgb(0 0 0 / 40%);
font-size: 18px;
opacity: 0.7;
transform: scale(0.9);
transition: all .5s ease;
font-weight: 900;
}
.wrapper .booklib .header ul .active {
opacity: 1;
transform: scale(1);
}
.bookshelfbox {
position: relative;
margin: 0;
padding: 0;
left: 0px;
top: 0px;
float: left;
display: block;
width: 100%;
height: auto;
}
.bookshelfbox .bookproductbox {
background: url('images/shelf2.png');
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
padding: 1rem;
height: 225px;
}
.bookproduct {
margin-left: 50px;
position: relative !important;
display: block;
direction: ltr !important;
}
.bookproduct img {
display: block !important;
border: none !important;
cursor: pointer;
margin: 0 !important;
padding: 0 !important;
}
.producttitle {
position: absolute;
top: 80%;
z-index: 1;
text-align: center !important;
color: #ffffff;
background: #c33b4e;
overflow: hidden;
max-height: auto;
line-height: 14px !important;
width: 100%;
box-shadow: 0px 0px 8px rgb(0 0 0 / 40%);
font-size: 11px;
padding: 1px 5px 3px 5px;
font-family: Arial, Helvetica, sans-serif;
}
.bookproduct:hover .producttitle {
color: rgb(255, 255, 255);
background: url("http://srvalle.com/wp-content/plugins/bookshelf-slider/assets/title_product_bg.png") repeat rgb(195, 59, 78);
overflow: visible;
max-height: 150px;
}
.flexslider {
margin:0;
border:0;
background: none!important;
}
.flex-nav-prev, .flex-nav-next {
display: none;
}
#media (max-width: 575.98px) {
.wrapper .booklib .booklibnav .header {
left: 60px;
right: 60px;
}
.book-content {
margin-left: 15px;
}
}
#media (min-width: 576px) and (max-width: 767.98px) {
.wrapper .booklib .booklibnav .header {
left: 60px;
right: 60px;
}
}
#media (min-width: 768px) and (max-width: 991.98px) {
}
.bookshelfbox {
display: flex;
flex-direction: column;
}
.bookproductbox, .row {
display: flex;
}
<!doctype html>
<html lang="tr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<link rel="shortcut icon" type="image/x-icon" href="/_tema/cms/images/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<title> TG Book Library </title>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="booklib">
<div class="header">
<ul class="slides">
<li class="active">
First Class
</li>
<li>
Second Class
</li>
</ul>
</div>
<div class="bookshelfbox">
</div>
</div>
</div>
</div>
<!--/ container end -->
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
I used SwiperApi for this. Check and customize by yourself please.
const books = [
{
id: 1,
bookname: "Book Name 1",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class",
},
{
id: 2,
bookname: "Book Name 2",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class",
},
{
id: 3,
bookname: "Book Name 3",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class",
},
{
id: 4,
bookname: "Book Name 4",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class",
},
{
id: 5,
bookname: "Book Name 5",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class",
},
{
id: 6,
bookname: "Book Name 6",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class",
},
{
id: 7,
bookname: "Book Name 7",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class",
},
{
id: 8,
bookname: "Book Name 8",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "First Class",
},
{
id: 9,
bookname: "Book Name 9",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "Second Class",
},
{
id: 10,
bookname: "Book Name 10",
bookimage: "http://srvalle.com/wp-content/uploads/2013/11/issuu5.jpg",
bookClass: "Second Class",
},
];
const n = 6; // slide per page
const booksBase = $("#booksInto"); // books going to be added into swiper-swapper class.
let defaultClass = $(".btnFilter").data("classname"); // initialize class.
$(document).ready(function () {
$(".btnFilter").click(filterBooks);
filterBooks();
});
filterBooks = function (classname = null) {
// getting value from data attribute if any button clicked
if (classname != null) defaultClass = $(this).data("classname");
let theDiv = "";
$.each(
books.filter((t) => t.bookClass == defaultClass),
function (index, obj) {
theDiv += `
<div class="swiper-slide">
<div class="bookItem">
<img class="card-img-top" src="${obj.bookimage}" alt="${obj.bookname}" />
<div class="card-body">
<p class="card-text">${obj.bookname}</h5>
<p class="card-text">${obj.bookClass}</h5>
Read Book
</div>
</div>
</div>
`;
}
);
booksBase.html(theDiv);
makeSlider();
};
makeSlider = function () {
const swiper = new Swiper(".swiper", {
slidesPerView: n,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/swiper#7/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper#7/swiper-bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row mb-5">
<div class="col-lg-12">
<div class="btn-group" role="group" aria-label="Basic example">
<button
type="button"
class="btn btn-secondary btnFilter defaultClass"
data-classname="First Class"
>
Class 1
</button>
<button
type="button"
class="btn btn-secondary btnFilter"
data-classname="Second Class"
>
Class 2
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper" id="booksInto"></div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I am having trouble connecting the button to my JSON structure. I want each button to render each domain. I tried selecting $('button') and applying onlclick() function but it did not work.
Is it because I used JSON to render 4 buttons instead of creating an HTML structure for each?
//landing domain info/deisgn and structure
const domainInfo = [{
id: 001,
domain: "Title 1",
photo: "title-1.jpg",
},
{
id: 002,
domain: "Title 2",
photo: "title-2.jpg",
},
{
id: 003,
domain: "Title 3",
photo: "title-3.jpg",
},
{
id: 004,
domain: "Title 4",
photo: "title-4.jpg",
},
]
function domainTemplate(domaininfo) {
return `
<div class="box__shadow">
<button id="myBtn" class="myBtn" type="button">
<img src="${domaininfo.photo}" width="90%;"style="margin: 0em; padding: 0em;">
<div class="cover-bkg-ser-domain4">
<h4 style="overflow:hidden; color: #1a4177; font-weight: bold; font-size: 18px; padding: 1em; margin: 0em;">${domaininfo.domain}</h4>
</div>
</button>
</div>
`
}
document.getElementById("domainCat").innerHTML = `
${domainInfo.map(domainTemplate).join('')}
`
//Serice category data
const serviceData = [{
domain1Data: [{
"manager": "Manager Name",
"subcat": "Subcategory name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": null
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
]
},
//domain 2 data
{
domain2Data: [{
"manager": "Manager Name",
"subcat": "Subcategory name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": null
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
]
},
// domain 3 data
{
domain3Data: [{
"manager": "Manager Name",
"subcat": "Subcategory name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": null
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
]
},
//domain 4 data
{
domain4Data: [{
"manager": "Manager Name",
"subcat": "Subcategory name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": null
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
{
"manager": "Manager Name",
"subcat": "Subcategory Name",
"logo": {
"prefpart": "logo-1",
"secpart": "logo-2",
"locpart": "logo-3"
}
},
]
}
]
function servTemplate(servicedata) {
return `
<div class="info-data" id="infodata">
<table>
<colgroup>
<col width="30%"/>
<col width="70%"/>
</colgroup>
<tr>
<th colspan="2" class="header">
<h3>${servicedata.subcat}</h3>
</th>
</tr>
<tr class="">
<td class="title">
<h5>Section 1</h5>
</td>
<td class="text">
<img class="img-service" src="${servicedata.prefpart}">
</td>
</tr>
<tr>
<td class="">
<h5>Section 2</h5>
</td>
<td class="">
<img class="img-service" src="${servicedata.secpart}">
</td>
</tr>
<tr>
<td>
<h5>Section 3</h5>
</td>
<td class="">
<img class="img-service" src="${servicedata.locpart}">
</td>
</tr>
</table>
</div>
`
}
document.getElementById("serviceCat").innerHTML = `
${serviceData.map(servTemplate).join('')}
`
/*domain names and pics css*/
#domainCat {
width: 100%;
}
.box__shadow {
width: auto;
height: auto;
margin-top: 1em;
display: flex;
justify-content: center;
align-items: center;
float: left;
}
.myBtn {
border: 0px solid #000000;
outline: none;
box-shadow: none;
width: 260px;
height: auto;
background: none;
margin: 1em 1.1em 5em 1.1em;
padding: 0em -1em 5em -1em;
float: left;
}
.myBtn:hover {
outline: none;
background: none;
box-shadow: none;
cursor: pointer;
}
.cover-bkg-ser-domain4 {
background-color: #2BD5F2;
margin: auto auto -2em auto;
width: 90%;
}
.cover-bkg-ser-domain4:hover {
background-color: rgba(165, 209, 238, 0.8);
}
/*list rendering css*/
#serviceCat {
overflow: hidden;
float: left;
background-color: rgba(117, 117, 117, 0.8);
/* Black w/ opacity */
overflow: auto;
/* Enable scroll if needed */
width: 72.5%;
/* Full width */
height: 50%;
/* Full height */
top: 0;
left: 0;
margin-left: 2em;
}
.service-title {
font-style: normal;
font-weight: normal;
font-size: 22px;
text-align: center;
color: #000000;
width: 100%;
}
.info-data {
width: auto;
height: auto;
}
.img-service {
width: 50%;
margin: 1em;
padding: 0em;
display: block;
}
.header {
width: 100%;
background-color: #83e06c;
text-align: center;
}
.row {
display: inline;
background-color: rgba(76, 76, 76, 0.4);
width: 70%;
height: auto;
padding: 0.1em;
margin: 0.2em;
}
.column-1 {
width: 20%;
height: auto;
float: left;
vertical-align: auto;
margin-left: 2em;
font-size: 20px;
font-weight: bold;
}
.column-2 {
width: 70%;
height: auto;
float: left;
vertical-align: auto;
margin-left: 2em;
}
table,
th,
tr {
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<section id="domainCat"></section>
<section id="serviceCat"></section>
</body>
</html>
I can only use jQuery as a library since I am trying to fit the code in SharePoint webparts.
So the issue is that you were trying to add click listener on the object that was created dynamically. You need 4 buttons here so we should also create dynamical listeners in function domainTemplate(); Also we need to pass index here so we can understand which button we are clicking and add class to all buttons.
function domainTemplate(domaininfo, index) {
$(document).on('click',`.btn-${index}`, function() {
document.getElementById("serviceCat").innerHTML = servTemplate(serviceData[index]);
return `
...some html here
<button id="myBtn" class="myBtn btn-${index}" type="button">
`;
});
Also I have fixed your servTemplate() function. There was object that we need to call so we have to always get first item of object. So now servicedata is correct if we call it like this.
function servTemplate(data) {
const servicedata = data[Object.keys(data)[0]][0];
return some html;
}
Please check the full code here https://jsfiddle.net/yh915e6o/
I am using the 'required' tag in HTML to validate input. However, I am having an error with the the selection. It does not show the option nor am I able to continue.
const slidePage = document.querySelector(".slide-page");
const nextBtnFirst = document.querySelector(".firstNext");
const prevBtnSec = document.querySelector(".prev-1");
const nextBtnSec = document.querySelector(".next-1");
const prevBtnThird = document.querySelector(".prev-2");
const nextBtnThird = document.querySelector(".next-2");
const prevBtnFourth = document.querySelector(".prev-3");
const submitBtn = document.querySelector(".submit");
const progressText = document.querySelectorAll(".step p");
const progressCheck = document.querySelectorAll(".step .check");
const bullet = document.querySelectorAll(".step .bullet");
let current = 1;
nextBtnFirst.addEventListener("click", function(event) {
event.preventDefault();
slidePage.style.marginLeft = "-25%";
bullet[current - 1].classList.add("active");
progressCheck[current - 1].classList.add("active");
progressText[current - 1].classList.add("active");
current += 1;
});
nextBtnSec.addEventListener("click", function(event) {
event.preventDefault();
slidePage.style.marginLeft = "-50%";
bullet[current - 1].classList.add("active");
progressCheck[current - 1].classList.add("active");
progressText[current - 1].classList.add("active");
current += 1;
});
nextBtnThird.addEventListener("click", function(event) {
event.preventDefault();
slidePage.style.marginLeft = "-75%";
bullet[current - 1].classList.add("active");
progressCheck[current - 1].classList.add("active");
progressText[current - 1].classList.add("active");
current += 1;
});
submitBtn.addEventListener("click", function() {
bullet[current - 1].classList.add("active");
progressCheck[current - 1].classList.add("active");
progressText[current - 1].classList.add("active");
current += 1;
setTimeout(function() {
alert("Your Consultation Successfully Submitted");
location.reload();
}, 800);
});
prevBtnSec.addEventListener("click", function(event) {
event.preventDefault();
slidePage.style.marginLeft = "0%";
bullet[current - 2].classList.remove("active");
progressCheck[current - 2].classList.remove("active");
progressText[current - 2].classList.remove("active");
current -= 1;
});
prevBtnThird.addEventListener("click", function(event) {
event.preventDefault();
slidePage.style.marginLeft = "-25%";
bullet[current - 2].classList.remove("active");
progressCheck[current - 2].classList.remove("active");
progressText[current - 2].classList.remove("active");
current -= 1;
});
prevBtnFourth.addEventListener("click", function(event) {
event.preventDefault();
slidePage.style.marginLeft = "-50%";
bullet[current - 2].classList.remove("active");
progressCheck[current - 2].classList.remove("active");
progressText[current - 2].classList.remove("active");
current -= 1;
});
let data = [{
"id": 1,
"name": "Management",
"parentid": 0
},
{
"id": 2,
"name": "Support",
"parentid": 0
},
{
"id": 3,
"name": "Digital Business",
"parentid": 0
},
{
"id": 4,
"name": "Cyber Security",
"parentid": 0
},
{
"id": 5,
"name": "Infrastructure",
"parentid": 0
},
{
"id": 6,
"name": "Network",
"parentid": 0
},
{
"id": 8,
"name": "MDM Solution",
"parentid": 1
},
{
"id": 9,
"name": "IT Procurement",
"parentid": 1
},
{
"id": 10,
"name": "Vendor Management",
"parentid": 1
},
{
"id": 11,
"name": "Managed servers, Network, Firewall",
"parentid": 1
},
{
"id": 12,
"name": "Backup and Storage",
"parentid": 1
},
{
"id": 13,
"name": "Email Management",
"parentid": 1
},
{
"id": 14,
"name": "Microsoft Office Management",
"parentid": 1
},
{
"id": 15,
"name": "Asset Management",
"parentid": 1
},
{
"id": 16,
"name": "Network Management",
"parentid": 1
},
{
"id": 17,
"name": "Communication Management",
"parentid": 1
},
{
"id": 21,
"name": "Patch Management",
"parentid": 1
},
{
"id": 18,
"name": "IT Helpdesk",
"parentid": 2
},
{
"id": 19,
"name": "Maintenance of Servers",
"parentid": 2
},
{
"id": 20,
"name": "Network Maintenance",
"parentid": 2
},
{
"id": 21,
"name": "Communication Maintenance",
"parentid": 2
},
{
"id": 21,
"name": "Patch Management",
"parentid": 2
},
{
"id": 22,
"name": "Disaster Recovery Testing and Support",
"parentid": 2
},
{
"id": 23,
"name": "Pro-active Capacity Planning and Support",
"parentid": 2
},
{
"id": 24,
"name": "Remote and Onsite Support",
"parentid": 2
},
{
"id": 25,
"name": "Office 365 Migration",
"parentid": 3
},
{
"id": 26,
"name": "Managed Offsite Backups",
"parentid": 3
},
{
"id": 27,
"name": "Azure Migration & Uplift",
"parentid": 3
},
{
"id": 28,
"name": "SaaS Products Support ",
"parentid": 3
},
{
"id": 29,
"name": "Microsoft Teams Setup",
"parentid": 3
},
{
"id": 30,
"name": "SharePoint Configuration",
"parentid": 3
},
{
"id": 32,
"name": "Risk Assessment",
"parentid": 4
},
{
"id": 33,
"name": "Cloud base & on prem SIEM Solution Implementation",
"parentid": 4
},
{
"id": 34,
"name": "Vulnerability & penetration testing",
"parentid": 4
},
{
"id": 35,
"name": "Cyber Security Incident Response Plan",
"parentid": 4
},
{
"id": 36,
"name": "Cloud Security",
"parentid": 4
},
{
"id": 37,
"name": "CyberArk PAM solution",
"parentid": 4
},
{
"id": 38,
"name": "SME Upgrades and Consolidation",
"parentid": 5
},
{
"id": 39,
"name": "Dell Networking",
"parentid": 5
},
{
"id": 40,
"name": "Data Centre Design",
"parentid": 5
},
{
"id": 41,
"name": "Storage Design and Installation",
"parentid": 5
},
{
"id": 42,
"name": "Disaster Recovery Infrastructure",
"parentid": 5
},
{
"id": 43,
"name": "Redundancy Planning",
"parentid": 6
},
{
"id": 44,
"name": "Internet and WAN Connectivity Design",
"parentid": 6
},
{
"id": 45,
"name": "Cabling Design",
"parentid": 6
},
{
"id": 46,
"name": "Network Switching Design and Scale",
"parentid": 6
},
{
"id": 47,
"name": "Routing Design ",
"parentid": 6
},
{
"id": 48,
"name": "Firewall Design and Maintenance ",
"parentid": 6
},
{
"id": 49,
"name": "Fibre, Cat5, Cat6 and WiFi Planning and Installation",
"parentid": 6
},
{
"id": 50,
"name": "Access Network Design ",
"parentid": 6
},
{
"id": 51,
"name": "Automation Workflows and Software Development",
"parentid": 6
},
{
"id": 52,
"name": "Campus Network Design",
"parentid": 6
},
{
"id": 53,
"name": "ISP Network Design",
"parentid": 6
},
]
function populateList(list, pid) {
let l = document.getElementById(list);
l.innerHTML = "";
let topItem = document.createElement("option");
topItem.value = 0;
topItem.text = "--Select--";
l.appendChild(topItem);
let items = data.filter(item => item.parentid == pid);
items.forEach(function(item) {
let newItem = document.createElement("option");
newItem.value = item.id;
newItem.text = item.name;
l.appendChild(newItem);
})
}
function updateList(selList, thisList) {
if (thisList.value != 0) {
populateList(selList, Number(thisList.value));
} else {
let s = document.getElementById(selList);
s.value = 0;
triggerEvent(s, "onchange");
let sCopy = s.cloneNode(false);
let p = s.parentNode;
p.replaceChild(sCopy, s);
}
}
function triggerEvent(e, trigger) {
if ((e[trigger] || false) && typeof e[trigger] == 'function') {
e[trigger](e);
}
}
function loadList1() {
populateList("list1", 0);
}
window.onload = loadList1;
if (FullNameValue === '') {
setErrorFor(FullName, FullName 'Full Name cannot be blank');
}
::selection {
color: #fffef8;
background: #4197a9;
}
.container {
width: 750px;
margin-left: 0px;
text-align: center;
border-radius: 5px;
padding: 50px 35px 10px 35px;
}
.container header {
font-size: 35px;
font-weight: 600;
margin: 0 0 30px 0;
right: auto;
}
.container .form-outer {
width: 100%;
overflow: hidden;
margin-left: 300px;
}
.container .form-outer form {
display: flex;
width: 600%;
}
.form-outer form .page {
width: 25%;
transition: margin-left 0.3s ease-in-out;
}
.form-outer form .page .title {
text-align: left;
font-size: 25px;
font-weight: 500;
}
.form-outer form .page .field {
width: 800px;
height: 45px;
margin: 90px 0;
display: flex;
position: relative;
}
form .page .field .label {
position: absolute;
top: -30px;
font-weight: 500;
}
form .page .field input {
height: 80%;
width: 70%;
border: 1px solid #33343d;
border-radius: 5px;
padding-left: 15px;
font-size: 18px;
}
form .page .field select {
width: 80%;
padding-left: 10px;
font-size: 17px;
font-weight: 500;
}
form .page .field button {
width: 250px;
height: calc(100% + 5px);
border: none;
background: #4197a9;
margin-top: -10px;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
transition: 0.5s ease;
margin-left: 10px;
margin-right: 10px;
}
form .page .field button:hover {
background: #000;
}
form .page .btns button {
margin-top: -20px!important;
}
form .page .btns button.prev {
margin-right: 10px;
font-size: 17px;
}
form .page .btns button.next {
margin-left: 20px;
}
.container .progress-bar {
display: flex;
user-select: none;
left: 250px;
position: relative;
}
.container .progress-bar .step {
text-align: center;
width: 100%;
position: relative;
}
.container .progress-bar .step p {
font-weight: 500;
font-size: 18px;
color: #000;
margin-bottom: 8px;
}
.progress-bar .step .bullet {
height: 28px;
width: 28px;
border: 2px solid #000;
display: inline-block;
border-radius: 50%;
position: relative;
transition: 0.2s;
font-weight: 500;
font-size: 17px;
line-height: 24px;
}
.progress-bar .step .bullet.active {
border-color: #4197a9;
background: #4197a9;
}
.progress-bar .step .bullet span {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.progress-bar .step .bullet.active span {
display: none;
}
.progress-bar .step .bullet:before,
.progress-bar .step .bullet:after {
position: absolute;
content: '';
bottom: 11px;
right: -51px;
left: 50px;
height: 3px;
width: 100px;
background: black;
}
.progress-bar .step .bullet.active:after {
background: #4197a9;
transform: scaleX(0);
transform-origin: left;
animation: animate 0.3s linear forwards;
}
#keyframes animate {
100% {
transform: scaleX(1);
}
}
.progress-bar .step:last-child .bullet:before,
.progress-bar .step:last-child .bullet:after {
display: none;
}
.progress-bar .step p.active {
color: #d43f8d;
transition: 0.2s linear;
}
.progress-bar .step .check {
position: absolute;
left: 50%;
top: 70%;
font-size: 15px;
transform: translate(-50%, -50%);
display: none;
}
.progress-bar .step .check.active {
display: block;
color: #fffef8;
}
<div class="progress-bar">
<div class="step">
<p>
Name</p>
<div class="bullet">
<span>1</span>
</div>
<div class="check fas fa-check">
</div>
</div>
<div class="step">
<p>
Contact</p>
<div class="bullet">
<span>2</span>
</div>
<div class="check fas fa-check">
</div>
</div>
<div class="step">
<p>
Service</p>
<div class="bullet">
<span>3</span>
</div>
<div class="check fas fa-check">
</div>
</div>
<div class="step">
<p>
Submit</p>
<div class="bullet">
<span>4</span>
</div>
<div class="check fas fa-check">
</div>
</div>
</div>
<div class="form-outer">
<form action="#">
<div class="page slide-page">
<div class="title">
Lets get Started
</div>
<div class="form-control">
<div class="field">
<div class="label">
Full Name </div>
<input type="text" placeholder="FirstName SecondName " id="FullName" required>
</div>
<div class="field">
<div class="label">
Company Name</div>
<input type="text" placeholder="Name" id="comname" required>
</div>
<div class="field">
<button class="firstNext next" style="position: relative; left: 280px;">Next</button>
</div>
</div>
</div>
<div class="page">
<div class="title">
Contact Info:</div>
<div class="field">
<div class="label">
Email Address</div>
<input type="email" placeholder="name#example.com" required>
</div>
<div class="field">
<div class="label">
Phone Number</div>
<input type="number" placeholder="+61 412 345 678" required>
</div>
<div class="field btns">
<button class="prev-1 prev">Previous</button>
<button class="next-1 next">Next</button>
</div>
</div>
<div class="page">
<div class="title">
Services</div>
<div class="field">
<div class="label">
Service Category</div>
<select id="list1" onchange="updateList('list2', this);" required>
</select>
</div>
<div class="field">
<div class="label">
Service</div>
<select id="list2" onchange="updateList('list3', this);" required></select>
</div>
<div class="field">
<div class="label">
Description
</div>
<textarea name="Description" id="" cols="75" rows="100" style="height:60px;" placeholder="Provide a small description about the service you have selected."></textarea>
</div>
<div class="field btns">
<button class="prev-2 prev" style="position: relative; left: 30px;">Previous</button>
<button class="next-2 next" style="position: relative; left: 30px;">Next</button>
</div>
</div>
<div class="page">
<div class="title">
Submit</div>
<div class="field">
<div class="label">
Pefered method of Communication</div>
<select name="communica" id="" required>
<option value=""></option>
<option value="Phone">Phone </option>
<option value="Email ">Email </option>
<option value="SMS">SMS </option>
</select>
</div>
<div class="textsub" style="position: relative; left: 0; margin-right: 400px;">
We will reach out to you with some proposal and we will discuss which will be the best for you while hearing your feedback. You should recieve an email within 24 hours with what will be happening. Thank you
</div>
<div class="field btns">
<button class="prev-3 prev">Previous</button>
<button class="submit" style="left: 50px; position: relative;">Submit</button>
</div>
</div>
</form>
</div>
</div>
I have included the relevant code below.
<select id="list1" onchange="updateList('list2', this);" required >
</select>
</div>
<div class="field">
<div class="label">
Service</div>
<select id="list2" onchange="updateList('list3', this);" required ></select>
</div>
In the following example in the JS I create a basic datatable table, I easily create the functions to open and close the panels and define the data with which the table will be filled by means of a javascript variable.
In the CSS I define the styles for the left and right panels (sidebarLeft, sidebarRight), so that they occupy their position in their respective place, I add color and I add style for the position and color of their close button (closebtnLeft, closebtnRight) .
and finally in the HTML section I only add the left panel,
the main container that contains the table that will be seen at all times and the right panel.
As you can see by having a sufficient screen size for the table to be displayed complete, and pressing either the button left or right panel, the table does not become responsive keeping its size before adding the panel
show size error in the table here
$(document).ready(function() {
$('#example').DataTable( {
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
],
"searching": false,
"lengthChange": false,
responsive:true
} );
} );
function openNavLeft() {
document.getElementById("mySidebarLeft").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function openNavRight() {
document.getElementById("mySidebarRight").style.width = "250px";
document.getElementById("main").style.marginRight = "250px";
document.getElementById("example").style.marginRight = "250px";
}
function closeNavLeft() {
document.getElementById("mySidebarLeft").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
function closeNavRight() {
document.getElementById("mySidebarRight").style.width = "0";
document.getElementById("main").style.marginRight= "0";
document.getElementById("example").style.marginRight = "0";
}
var dataSet = [
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
[ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
[ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
[ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
[ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ],
[ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500" ],
[ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900" ],
[ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500" ],
];
.sidebarLeft {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebarRight {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebarRight .closebtnRight {
position: absolute;
top: 0;
left: 25px;
font-size: 36px;
margin-right: 50px;
}
.sidebarLeft .closebtnLeft {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.sidebarLeft a,.sidebarRight a {
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebarLeft a:hover,.sidebarRight a:hover {
color: #f1f1f1;
}
body {
font-family: "Lato", sans-serif;
}
<!--sidebar left-->
<div id="mySidebarLeft" class="sidebarLeft">
×
</div>
<!--main card-->
<div id="main" class = "card bg-light">
<div class="pt-3">
<div class = "row pull-right">
<div class = "col-12 ">
<ul class = "flex-lg-row d-flex flex-column mb-0 p-0">
<li class = "d-inline px-lg-1">
<button class="btn fas fa-arrow-left openbtn" onclick="openNavLeft()">
</button>
<button class="btn fas fa-arrow-right openbtn" onclick="openNavRight()">
</button>
</li>
</ul>
</div>
</div>
<div class = "clearfix"></div>
</div>
<div class = "card-block px-3 pb-0">
<table id="example" class="table table-hover display responsive no-wrap" width="100%"></table>
</div>
</div>
<!--sidebar right-->
<div id="mySidebarRight" class="sidebarRight">
×
</div>
<!-------------------------------- CDN's css-------------------------------------->
<!-- Bootstrap & fontawesome css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel = "stylesheet" href = "https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" />
<!-- Datatable css -->
<link rel = "stylesheet" href = "https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css" />
<link rel = "stylesheet" href = "https://cdn.datatables.net/autofill/2.3.0/css/autoFill.dataTables.min.css" />
<link rel = "stylesheet" href = "https://cdn.datatables.net/fixedcolumns/3.2.5/css/fixedColumns.dataTables.min.css" />
<link rel = "stylesheet" href = "https://cdn.datatables.net/responsive/2.2.2/css/responsive.dataTables.min.css" />
<!-------------------------------- CDN's js-------------------------------------->
<!-- Boostrap & fontawesome js-->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Datatable js -->
<script type = "text/javascript" src = "https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script type = "text/javascript" src = "https://cdn.datatables.net/autofill/2.3.0/js/dataTables.autoFill.min.js"></script>
<script type = "text/javascript" src = "https://cdn.datatables.net/fixedcolumns/3.2.5/js/dataTables.fixedColumns.min.js"></script>
<script type = "text/javascript" src = "https://cdn.datatables.net/scroller/2.0.0/js/dataTables.scroller.js"></script>
<script type = "text/javascript" src = "https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.min.js"></script>
I want that when you add the left or right panels, if the size of the table is not enough to show all the information, adjust the table and show the responsive mode for mobiles
attached photo of what I want to do
Try recalculate the widths used by responsive after a change in the nav menu
table.responsive.recalc()
var table;
$(document).ready(function() {
table = $('#example').DataTable( {
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
],
"searching": false,
"lengthChange": false,
"responsive":true
});
});
function recalc() {
table.responsive.recalc();
}
function openNavLeft() {
document.getElementById("mySidebarLeft").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
recalc();
}
function openNavRight() {
document.getElementById("mySidebarRight").style.width = "250px";
document.getElementById("main").style.marginRight = "250px";
recalc();
}
function closeNavLeft() {
document.getElementById("mySidebarLeft").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
recalc();
}
function closeNavRight() {
document.getElementById("mySidebarRight").style.width = "0";
document.getElementById("main").style.marginRight= "0";
recalc();
}
var dataSet = [
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
[ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
[ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
[ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
[ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ],
[ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500" ],
[ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900" ],
[ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500" ],
];
.sidebarLeft {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebarRight {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebarRight .closebtnRight {
position: absolute;
top: 0;
left: 25px;
font-size: 36px;
margin-right: 50px;
}
.sidebarLeft .closebtnLeft {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.sidebarLeft a,
.sidebarRight a {
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebarLeft a:hover,
.sidebarRight a:hover {
color: #f1f1f1;
}
body {
font-family: "Lato", sans-serif;
}
<!--sidebar left-->
<div id="mySidebarLeft" class="sidebarLeft">
×
</div>
<!--main card-->
<div id="main" class="card bg-light">
<div class="pt-3">
<div class="row pull-right">
<div class="col-12 ">
<ul class="flex-lg-row d-flex flex-column mb-0 p-0">
<li class="d-inline px-lg-1">
<button class="btn fas fa-arrow-left openbtn" onclick="openNavLeft()">
</button>
<button class="btn fas fa-arrow-right openbtn" onclick="openNavRight()">
</button>
</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="card-block px-3 pb-0">
<table id="example" class="table table-hover display responsive no-wrap" width="100%"></table>
</div>
</div>
<!--sidebar right-->
<div id="mySidebarRight" class="sidebarRight">
×
</div>
<!-------------------------------- CDN's css-------------------------------------->
<!-- Bootstrap & fontawesome css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" />
<!-- Datatable css -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/autofill/2.3.0/css/autoFill.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.5/css/fixedColumns.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.2/css/responsive.dataTables.min.css" />
<!-------------------------------- CDN's js-------------------------------------->
<!-- Boostrap & fontawesome js-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Datatable js -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/autofill/2.3.0/js/dataTables.autoFill.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.5/js/dataTables.fixedColumns.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/scroller/2.0.0/js/dataTables.scroller.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.min.js"></script>
Trying to launch a modal upon a button click. I can console.log "button clicked" but the modal will not display. Please help me find where I am going wrong. Been looking for a while but I am somehow overlooking the error. Thank you.
The full code can be found at this Codepen: https://codepen.io/centem/pen/BaajLZm
var app = angular.module('myApp', []);
app.controller('myController',
function ($scope, $http) {
$scope.list = [
{
"ID": "001",
"Name": "Eurasian Collared-Dove",
"Type": "Dove"
},
{
"ID": "002",
"Name": "Bald Eagle",
"Type": "Hawk"
},
{
"ID": "003",
"Name": "Cooper's Hawk",
"Type": "Hawk"
},
{
"ID": "004",
"Name": "Bell's Sparrow",
"Type": "Sparrow"
},
{
"ID": "005",
"Name": "Mourning Dove",
"Type": "Dove"
},
{
"ID": "006",
"Name": "Rock Pigeon",
"Type": "Dove"
},
{
"ID": "007",
"Name": "Abert's Towhee",
"Type": "Sparrow"
},
{
"ID": "008",
"Name": "Brewer's Sparrow",
"Type": "Sparrow"
},
{
"ID": "009",
"Name": "Canyon Towhee",
"Type": "Sparrow"
},
{
"ID": "010",
"Name": "Black Vulture",
"Type": "Hawk"
},
{
"ID": "011",
"Name": "Eurasian Collared-Dove",
"Type": "Dove"
},
{
"ID": "012",
"Name": "Bald Eagle",
"Type": "Hawk"
},
{
"ID": "013",
"Name": "Cooper's Hawk",
"Type": "Hawk"
},
{
"ID": "014",
"Name": "Bell's Sparrow",
"Type": "Sparrow"
},
{
"ID": "015",
"Name": "Mourning Dove",
"Type": "Dove"
},
{
"ID": "016",
"Name": "Rock Pigeon",
"Type": "Dove"
},
{
"ID": "017",
"Name": "Abert's Towhee",
"Type": "Sparrow"
},
{
"ID": "018",
"Name": "Brewer's Sparrow",
"Type": "Sparrow"
},
{
"ID": "019",
"Name": "Canyon Towhee",
"Type": "Sparrow"
},
{
"ID": "020",
"Name": "Black Vulture",
"Type": "Hawk"
},
{
"ID": "021",
"Name": "Eurasian Collared-Dove",
"Type": "Dove"
},
{
"ID": "022",
"Name": "Bald Eagle",
"Type": "Hawk"
},
{
"ID": "023",
"Name": "Cooper's Hawk",
"Type": "Hawk"
},
{
"ID": "024",
"Name": "Bell's Sparrow",
"Type": "Sparrow"
},
{
"ID": "025",
"Name": "Mourning Dove",
"Type": "Dove"
},
{
"ID": "026",
"Name": "Rock Pigeon",
"Type": "Dove"
},
{
"ID": "027",
"Name": "Abert's Towhee",
"Type": "Sparrow"
},
{
"ID": "028",
"Name": "Brewer's Sparrow",
"Type": "Sparrow"
},
{
"ID": "029",
"Name": "Canyon Towhee",
"Type": "Sparrow"
},
{
"ID": "030",
"Name": "Black Vulture",
"Type": "Hawk"
}
];
$scope.count = $scope.list.length;
$scope.reverseOrder = true;
$scope.sortField = 'ID';
$scope.sortBy = function(sortField) {
$scope.reverseOrder = ($scope.sortField === sortField) ? !$scope.reverseOrder : false;
$scope.sortField = sortField;
};
});
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// 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) {
console.log("button clicked");
if (event.target == modal) {
modal.style.display = "none";
}
}
body {
margin: 0 auto;
}
a {
text-decoration: none;
}
nav {
font-family: monospace;
width: 100%;
margin: auto;
display: flex;
/*justify-content: center;*/
justify-content: space-between;
background: rgb(67, 66, 66);
align-items: center;
}
ul {
background: rgb(67, 66, 66);
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #fff;
background: rgb(67, 66, 66);
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.3s;
width: 70px;
}
li a {
color: #fff;
}
li:hover,
li:focus-within {
background: rgb(0,0,0);
cursor: pointer;
}
li:focus-within a {
outline: none;
}
ul li ul {
background: rgb(67, 66, 66);
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.3s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
visibility: visible;
opacity: 1;
display: block
}
ul li ul li {
clear: both;
width: 100%;
}
section {
width: 90%;
margin: auto;
margin-top: 50px;
display: block;
border: 1px solid black;
min-height: 400px;
max-height: 700px;
overflow: auto;
}
.section-header {
border-bottom: 1px solid black;
padding: 5px;
background-color: #7C9DB9;
}
.section-header > div {
display: inline-block;
}
.section-header div:nth-child(3) {
color: red;
float: right;
}
.content {
padding: 5px;
}
#company-name {
float: left;
vertical-align: middle;
}
.logo {
float: right;
vertical-align: middle;
}
img {
height: 40px;
vertical-align: middle;
}
footer {
font-family: monospace;
width: 100%;
margin: auto;
display: flex;
/*justify-content: center;*/
justify-content: space-between;
background: rgb(67, 66, 66);
align-items: center;
}
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
.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;
}
span {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<nav>
<img id="company-name" src="https://i.imgur.com/MOBXeoA.jpg">
<ul>
<li>One</li>
<li>Two
<ul>
<li href="#">One</li>
<li href="#">Two</li>
</ul>
</li>
<li>Three
<ul>
<li href="#">One</li>
<li href="#">Two</li>
<li href="#">Three</li>
</ul>
</li>
<li>Four</li>
<li>Five</li>
</ul><span>
<img class="logo" src="https://i.imgur.com/ITht7Gc.jpg">
<img class="logo" src="https://i.imgur.com/qNV0oMX.jpg">
</span>
</nav>
<section ng-app="myApp" ng-controller="myController">
<div class="section-header">
<div>One</div>
<div>Two</div>
<div>Count: {{list.length}}</div>
</div>
<div class="content">
<label>Search: <input ng-model="searchText"></label>
<table id="searchTextResults">
<tr>
<th ng-click="sortBy('ID')">ID</th>
<th ng-click="sortBy('Name')">Bird Name</th>
<th ng-click="sortBy('Type')">Type of Bird</th>
</tr>
<tr ng-repeat="birds in list | filter:searchText | orderBy:sortField:reverseOrder">
<td>{{birds.ID}}</td>
<td>{{birds.Name}}</td>
<td>{{birds.Type}}</td>
<td><button id="myBtn">Edit</button></td>
</tr>
</table>
</div>
</section>
<!--
<footer>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</footer>-->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
OK first of all the Edit button is inside a ng-repeat which will create so many buttons and all of them with the same ID which is not valid as each element must have a unique id.
Secondly the button as is created inside angulars's context is not accessible to you getElementById as that is executed even before the button is rendered. And as you button clicked function is bound to window so it logs. Below is a sample code that works fine. Just create a function inside controller that opens the modal. Below is a working sample.
var app = angular.module('myApp', []);
app.controller('myController',
function($scope, $http) {
$scope.list = [{
"ID": "001",
"Name": "Eurasian Collared-Dove",
"Type": "Dove"
},
{
"ID": "002",
"Name": "Bald Eagle",
"Type": "Hawk"
},
{
"ID": "003",
"Name": "Cooper's Hawk",
"Type": "Hawk"
},
{
"ID": "004",
"Name": "Bell's Sparrow",
"Type": "Sparrow"
},
{
"ID": "005",
"Name": "Mourning Dove",
"Type": "Dove"
},
{
"ID": "006",
"Name": "Rock Pigeon",
"Type": "Dove"
},
{
"ID": "007",
"Name": "Abert's Towhee",
"Type": "Sparrow"
},
{
"ID": "008",
"Name": "Brewer's Sparrow",
"Type": "Sparrow"
},
{
"ID": "009",
"Name": "Canyon Towhee",
"Type": "Sparrow"
},
{
"ID": "010",
"Name": "Black Vulture",
"Type": "Hawk"
},
{
"ID": "011",
"Name": "Eurasian Collared-Dove",
"Type": "Dove"
},
{
"ID": "012",
"Name": "Bald Eagle",
"Type": "Hawk"
},
{
"ID": "013",
"Name": "Cooper's Hawk",
"Type": "Hawk"
},
{
"ID": "014",
"Name": "Bell's Sparrow",
"Type": "Sparrow"
},
{
"ID": "015",
"Name": "Mourning Dove",
"Type": "Dove"
},
{
"ID": "016",
"Name": "Rock Pigeon",
"Type": "Dove"
},
{
"ID": "017",
"Name": "Abert's Towhee",
"Type": "Sparrow"
},
{
"ID": "018",
"Name": "Brewer's Sparrow",
"Type": "Sparrow"
},
{
"ID": "019",
"Name": "Canyon Towhee",
"Type": "Sparrow"
},
{
"ID": "020",
"Name": "Black Vulture",
"Type": "Hawk"
},
{
"ID": "021",
"Name": "Eurasian Collared-Dove",
"Type": "Dove"
},
{
"ID": "022",
"Name": "Bald Eagle",
"Type": "Hawk"
},
{
"ID": "023",
"Name": "Cooper's Hawk",
"Type": "Hawk"
},
{
"ID": "024",
"Name": "Bell's Sparrow",
"Type": "Sparrow"
},
{
"ID": "025",
"Name": "Mourning Dove",
"Type": "Dove"
},
{
"ID": "026",
"Name": "Rock Pigeon",
"Type": "Dove"
},
{
"ID": "027",
"Name": "Abert's Towhee",
"Type": "Sparrow"
},
{
"ID": "028",
"Name": "Brewer's Sparrow",
"Type": "Sparrow"
},
{
"ID": "029",
"Name": "Canyon Towhee",
"Type": "Sparrow"
},
{
"ID": "030",
"Name": "Black Vulture",
"Type": "Hawk"
}
];
$scope.count = $scope.list.length;
$scope.reverseOrder = true;
$scope.sortField = 'ID';
$scope.sortBy = function(sortField) {
$scope.reverseOrder = ($scope.sortField === sortField) ? !$scope.reverseOrder : false;
$scope.sortField = sortField;
};
$scope.openModal = function() {
debugger
modal.style.display = "block";
}
});
// Get the modal
var modal = document.getElementById('myModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
// 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) {
console.log("button clicked");
if (event.target == modal) {
modal.style.display = "none";
}
}
body {
margin: 0 auto;
}
a {
text-decoration: none;
}
nav {
font-family: monospace;
width: 100%;
margin: auto;
display: flex;
/*justify-content: center;*/
justify-content: space-between;
background: rgb(67, 66, 66);
align-items: center;
}
ul {
background: rgb(67, 66, 66);
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #fff;
background: rgb(67, 66, 66);
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.3s;
width: 70px;
}
li a {
color: #fff;
}
li:hover,
li:focus-within {
background: rgb(0, 0, 0);
cursor: pointer;
}
li:focus-within a {
outline: none;
}
ul li ul {
background: rgb(67, 66, 66);
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.3s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover>ul,
ul li:focus-within>ul,
ul li ul:hover,
ul li ul:focus {
visibility: visible;
opacity: 1;
display: block
}
ul li ul li {
clear: both;
width: 100%;
}
section {
width: 90%;
margin: auto;
margin-top: 50px;
display: block;
border: 1px solid black;
min-height: 400px;
max-height: 700px;
overflow: auto;
}
.section-header {
border-bottom: 1px solid black;
padding: 5px;
background-color: #7C9DB9;
}
.section-header>div {
display: inline-block;
}
.section-header div:nth-child(3) {
color: red;
float: right;
}
.content {
padding: 5px;
}
#company-name {
float: left;
vertical-align: middle;
}
.logo {
float: right;
vertical-align: middle;
}
img {
height: 40px;
vertical-align: middle;
}
footer {
font-family: monospace;
width: 100%;
margin: auto;
display: flex;
/*justify-content: center;*/
justify-content: space-between;
background: rgb(67, 66, 66);
align-items: center;
}
tr:nth-child(even) {
background: #CCC
}
tr:nth-child(odd) {
background: #FFF
}
.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;
}
span {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.4/angular.min.js"></script>
<nav>
<img id="company-name" src="https://i.imgur.com/MOBXeoA.jpg">
<ul>
<li>One</li>
<li>Two
<ul>
<li href="#">One</li>
<li href="#">Two</li>
</ul>
</li>
<li>Three
<ul>
<li href="#">One</li>
<li href="#">Two</li>
<li href="#">Three</li>
</ul>
</li>
<li>Four</li>
<li>Five</li>
</ul><span>
<img class="logo" src="https://i.imgur.com/ITht7Gc.jpg">
<img class="logo" src="https://i.imgur.com/qNV0oMX.jpg">
</span>
</nav>
<section ng-app="myApp" ng-controller="myController">
<div class="section-header">
<div>One</div>
<div>Two</div>
<div>Count: {{list.length}}</div>
</div>
<div class="content">
<label>Search: <input ng-model="searchText"></label>
<table id="searchTextResults">
<tr>
<th ng-click="sortBy('ID')">ID</th>
<th ng-click="sortBy('Name')">Bird Name</th>
<th ng-click="sortBy('Type')">Type of Bird</th>
</tr>
<tr ng-repeat="birds in list | filter:searchText | orderBy:sortField:reverseOrder">
<td>{{birds.ID}}</td>
<td>{{birds.Name}}</td>
<td>{{birds.Type}}</td>
<td><button ng-click="openModal()" class="myBtn">Edit</button></td>
</tr>
</table>
</div>
</section>
<!--
<footer>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</footer>-->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
Hope this helps :)