This can probably best be described from the images I attached to this post. I don’t know how to create this window or what it would be called when clicking on the ‘Adv. FIlter’ button. As seen below the ‘Adv Filter’ button
This is what happens once the button is clicked
How do I create this?
Hi,
You would create the panel as a hidden element in your html (using html and css) and then when the button is clicked you can toggle a class on the panel that will allow you to make the panel visible.
It is similar to most menus or dropdown arrangements. Of course the filter functions are beyond my scope and will need considerable work but here is the basic of how to show a panel when a button is clicked.
Hi this doesn’t seem to be working. When I click the button I get ‘Uncaught Type Error: Cannot read property ‘addEventListener’ of null’ on line 7 of the js code. I added everything else html,css.
The codepen isn’t working for you? It works in all my browsers.
You are not using IE8 or something similar are you as the js is for modern browsers?
Unless you meant that you have copied the code locally and your local code isn’t working? If this is the case we need to see your code as you have probably copied something incorrectly.
You did put the js at the end of the html didn;t you?
e.g. The JS needs to go just before the closing body tag (after any html that it references) otherwise the html doesn’t exist when the JS runs.
<script>
(function(d) {
"use strict";
if ("querySelector" in document && "addEventListener" in window) {
var theFilter = d.querySelector("#advanced-filter-button");
var theFilterParent = d.querySelector("#advanced-filter");
var closeButton = d.querySelector("#close");
theFilter.addEventListener(
"click",
function(e) {
theFilterParent.classList.toggle("open-filter");
},
false
);
closeButton.addEventListener(
"click",
function(e) {
theFilterParent.classList.toggle("open-filter");
},
false
);
}
})(document);
</script>
</body>
</html>
No I’m using Chrome. I did copy your code. I put the js in it’s own .js file and included it in the html head. Does it matter, didn’t think it would. Still get the same error if I put it in html code.
This is the js I copied
(function (d) {
"use strict";
if ("querySelector" in document && "addEventListener" in window) {
var theFilter = d.querySelector("#advanced-filter-button");
var theFilterParent = d.querySelector("#advanced-filter");
var closeButton = d.querySelector("#close");
theFilter.addEventListener(
"click",
function (e) {
theFilterParent.classList.toggle("open-filter");
},
false
);
closeButton.addEventListener(
"click",
function (e) {
theFilterParent.classList.toggle("open-filter");
},
false
);
}
})(document);
CSS:
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.wrap {
max-width: 1280px;
margin: auto;
padding: 10px;
background: #f9f9f9;
}
.table-data {
width: 100%;
border-collapse: collapse;
}
.table-data td,
.table-data th {
padding: 5px 10px;
border: 1px solid #000;
}
.table-data th {
background: #522d84;
color: #fff;
}
.advanced-filter {
position: relative;
}
.filter-panel {
position: absolute;
left: -999em;
width: 100%;
top: 100%;
z-index: 99;
opacity: 0;
background: #fff;
transition: opacity 1s ease, border 1s ease, left 0s 1s;
min-height: 100px;
margin: -3px 0 0;
border: 3px solid #522d84;
padding: 10px 10px 25px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
.open-filter .filter-panel {
left: 0;
opacity: 1;
transition: opacity 1s ease, border 1s ease;
}
.advanced-filter-button {
background: #522d84;
color: #fff;
padding: 3px 10px;
border: 3px solid #522d84;
margin: 0 0 10px auto;
width: 150px;
display: block;
position: relative;
z-index: 100;
}
.open-filter .advanced-filter-button {
background: #fff;
border-bottom: none;
padding: 3px 10px 6px;
color: #000;
outline: 0;
}
.close {
position: absolute;
bottom: 5px;
right: 5px;
background: #522d84;
color: #fff;
padding: 3px 10px;
border: 3px solid #522d84;
}
HTML:
<div class="wrap">
<div id="advanced-filter" class="advanced-filter">
<button class="advanced-filter-button" id="advanced-filter-button">Adv Filter</button>
<div class="filter-panel">
<p>
<th class="auto-style1">Code</th>
<th class="auto-style2">Name</th>
<th class="auto-style3">Client</th>
<th class="auto-style1">Type</th>
<th class="auto-style4">Location</th>
<th class="auto-style5">Start</th>
<th class="auto-style6">Expiration</th>
<th class="auto-style7">Next Insp.</th>
<th class="auto-style8">Region</th>
<th class="auto-style9">IOS</th>
<th class="auto-style10">RM</th>
</p>
<button id="close" class="close">Close</button>
</div>
</div>
<!--button class="button">Adv. Filter</button-->
<br />
<br />
<table class="auto-style11" >
<th class="auto-style1">Code</th>
<th class="auto-style2">Name</th>
<th class="auto-style3">Client</th>
<th class="auto-style1">Type</th>
<th class="auto-style4">Location</th>
<th class="auto-style5">Start</th>
<th class="auto-style6">Expiration</th>
<th class="auto-style7">Next Insp.</th>
<th class="auto-style8">Region</th>
<th class="auto-style9">IOS</th>
<th class="auto-style10">RM</th>
<tr>
<td class="auto-style1">1038</td>
<td class="auto-style2">Altamonte Mall</td>
<td class="auto-style3">GGP</td>
<td class="auto-style1">Mall</td>
<td class="auto-style4">Altamonte Sprints<br />
FL 32701</td>
<td class="auto-style5">12/21/2012</td>
<td class="auto-style6">12/20/2018</td>
<td class="auto-style7">06/01/2018</td>
<td class="auto-style8">Southeast</td>
<td class="auto-style9">Jason Kringle</td>
<td class="auto-style10">Justin Glamp</td>
</tr>
</table>
</div>
Yes it matters.
Only the head exists when the js is run and therefore does not find any html to work with. Always include your own scripts at the end of the html as I have shown above even for external scripts.
You can only add scripts in the head when they have been designed to wait for the page to load but it is much safer and better practice to place them at the end of the html as shown.
I don’t get any errors but now when I click on the ‘Adv. Filter’ button it flashes the menu quick and goes away. I’ve tried changing the css but nothing seems to work. Why is it doing that?
Do you get the same results in the codepen?
If not then its something you have done that is different and therefore I have no idea what the problem is unless you show me your exact version
Steps to take:
Hope that helps
Hi Paul,
Hopefully you are still around. Everything is working great so far. I did have one thing I needed help with on your code pen on this page and this is the close button. I wanted to make that say ‘Cancel’ and it basically does the same thing as close but it’s not a button but like a link or label. Then right beside it I want to have an ‘Apply’ button. How do I configure that?
Then just style it like that.
Remove the background, borders,padding, dimensions and colours and it will just be text (background:transparent;border:none; etc…). Then change the text in the button as required and style to suit.
Remember links are for navigating to somewhere and buttons are for actions so don’t confuse or misuse the two.
The example of how to style the button is already in the codepen so you should be able to create another button exactly the same (or styled to suit) quite easily. You can just place it next to the other one with absolute positioning or create a parent for both buttons and absolutely place that instead. I used absolute positioning so the buttons could be at the bottom but you do need to make sure that content doesn’t over-write them.
You need to start getting your hands dirty and experimenting so that you can learn more than just me giving you code
How you handle the action of actually applying whatever it is you have in your form is a programming task and beyond my scope. It’s more a question for the JS forum if that’s what you meant.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.