We Keep Coding

Using only JS and css, can I implement a filter, so that: clicking/tapping within a JS dropdown menu shows/hides page divs by data-type?

With the help of SO member the.marolie I learned how to implement a JS filter/selector [the 'demo JS filter']. I have this working perfectly on a test page: it shows/hides divs according to "data-types" assigned to them in the body html. However, the selection is made by sliding down a <select> dropdown list and letting go at the preferred option. That's not quite what I want.
I want to utilise my existing nav-bar dropdown ['my dropdown'] as the filter/selector. I especially want to retain the existing interactivity of my dropdown, whereby one click/tap reveals the whole of the dropdown content block, and one click outside the content block closes it.
I want the elements within my dropdown to represent various show/hide <div> 'options' for the html page, and enable the user to choose from these via an additional click/tap (essentially what the demo JS filter does, but at the instigation of a click/tap). Once revealed via a nav-bar click/tap, the whole dropdown content block has to stay on-screen -as it currently does- for this to be practically possible.
After making my dropdown identifiable via id="media-selector-demo" and name="filter" I was hoping that I could assign the demo JS filter's <option> elements to the <a> elements in it, and the whole thing would function like the <select> dropdown of the demo JS filter. I had a vague idea that using <a> elements might obviate the need for another onClick in the JS. I've tried various combinations of <a> and <option> elements, but nothing has worked yet.
Do I need another onClick to invoke the JS filter via my dropdown? or
Can I invoke the JS filter via 'active' <a> status?
I'm struggling by trial and error.
Here are what I think are the relevant sections of code pertaining to all discussed above:
My dropdown is based on the following code.
JS in the page head:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myDropdownJS() {
document.getElementsByClassName("navbarDROPDOWN-JS")[0].classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementsByClassName("navbarDROPDOWN-JS")[0];
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
My dropdown html in nav bar (most of the css is just design styling):
<span class="dropdown" onclick="myFunction()">
<a class="dropbtn navbarDROP-ICON" style="opacity:0.5; padding-top:0px;">menu</a>
<a class="dropbtn navbarDROP-TXT" style="opacity:0.5">menu </a>
<a class="dropbtn navbarDROP-TXT">Career Works by Date </a>
<div class="dropdown-content navbarDROPDOWN-JS" >
<a class="tag-bgd-INSTLLN" href="#">Installations (all media)</a>
<a class="tag-bgd-MOVIMG" href="#">Works with moving image (inc. vid/film releases)</a>
<a class="tag-bgd-SNDMUS" href="#">...with sound and music (inc. sound/music releases)</a>
<a class="tag-bgd-PHOTO" href="#">...with photographs</a>
<a class="tag-bgd-DRAW" href="#">...with drawing (inc. 2D works)</a>
<a class="tag-bgd-TXT" href="#">...with text</a>
<a class="tag-bgd-PERF" href="#">...with performative action</a>
<a class="tag-bgd-COLPUB" href="#">Collaborative and public works</a>
<a class="tag-bgd-OBJDEV" href="#">>Objects, garments, devices</a>
<a class="tag-bgd-EDPUB" href="#">Editions, publications</a>
<a class="tag-bgd-CAREER" href="#">Career Works by Date</a>
</div>
Above: the <a href> elements were going to contain URLs for alternatively styled pages. There is no need for these if I can enable the user to selectively show/hide parts of just this one page, via this dropdown.
The demo JS filter is based on the following code (via SO user the.marolie).
JS at page end:
var select = document.getElementById('media-selector-demo');
var filter;
select.addEventListener("change", function() {
filter = select.value;
var elements = document.querySelectorAll('.wk-date_ITEM');
elements.forEach((el) => {
var type = el.dataset.type.split(', ');
if (type.includes(filter)) {
el.classList.remove('hide-by-media');
} else {
el.classList.add('hide-by-media');
}
})
});
Demo JS filter CSS:
.hide-by-media {
display: none;
}
Demo JS filter html in page body:
<select id="media-selector-demo" name="filter">
<option value="INSTLLN"> Installations (all media)</option>
<option value="MOVIMG"> Works with moving image (inc. vid/film releases)</option>
<option value="SNDMUS" >...with sound and music (inc. sound/music releases)</option>
</select>
Example div in page body (there are 80-100 of these):
<!-- ++++++++++ START FULL-WIDTH LIST ENTRY '2017 STATE OF DREAD' ++++++++++ -->
<div id="state-of-dread" class="w3-container wk-date_ITEM" data-type="INSTLLN, SNDMUS">
<div class="w3-container wk-date_TXT-IMG">
<div class="wk-date_GRID">
<div class= "h3 wk-date_DATE"> 2017 </div>
<div class="wk-date_TTL"><h1>State of Dread</h1></div>
<div class="h2 wk-date_KIND-1" >Installation</div>
<div class="p wk-date_KIND-2" ><span class="sound">Sound</span>, for x2 interconnected rooms.<br>AB, CD, EF, Solo exhibition (as trio), Ohrenhoch sound gallery, Berlin.</div>
<div class="wk-date_IMG">
<div class="w3-container w3-right wk-date_IMG-BOX-LSCP">
<img src="../../imgs/INSTALLATION-EVENT/2017_dread_thmb.jpg"
alt="'xx' by Andrew Stones, installation view, xx"></div>
</div>
</div>
</div>
</div>
<!-- ++++++++++ END FULL-WIDTH LIST ENTRY '2017 STATE OF DREAD' ++++++++++ -->
Demo JS filter: JS at end of page:
<script type="text/javascript">
var select = document.getElementById('media-selector-demo');
var filter;
select.addEventListener("change", function() {
filter = select.value;
var elements = document.querySelectorAll('.wk-date_ITEM');
elements.forEach((el) => {
var type = el.dataset.type.split(', ');
if (type.includes(filter)) {
el.classList.remove('hide-by-media');
} else {
el.classList.add('hide-by-media');
}
})
});
</script>

What you would need to do is change the event listener from select, change to drop down element, click. you would also need to add the values of the options from the select as data-value attributes on the drop down elements.
1 - add a data-value attribute to the elements to represent what to hide
<a class="tag-bgd-INSTLLN" href="#" data-value="INSTLLN">
2 - target the drop down elements you want to attach the event listener to.
const dropDownElements = document.querySelectorAll('.dropdown-content a')
3 - attach event listeners to the selected targets (PS. the e in the function stands for event, click event listener produces an event object)
dropDownElements.forEach((dropDownElement) => {
dropDownElement.addEventListener('click',(e)=>{
const filter = e.target.dataset.value;
})
})
4 - the rest is just adding the rest of the filter used in the demo js filter
dropDownElements.forEach((dropDownElement) => {
dropDownElement.addEventListener("click", (e) => {
const filter = e.target.dataset.value
var elements = document.querySelectorAll(".wk-date_ITEM")
elements.forEach((el) => {
var type = el.dataset.type.split(", ")
if (type.includes(filter)) {
el.classList.remove("hide-by-media")
} else {
el.classList.add("hide-by-media")
}
})
})
})

In JavaScript, or jQuery, how do I accurately grab an attribute to manipulate the active selector?

Ultimately I'm wanting the user to click on the Landing Page next to an image on either Print or Mug. Then on the Order Page have the button for Print/Mug be active and then the image that's associated be marked as well.
So I have in Landing Page the following code:
<ul class="dropdown-menu">
<li>
Print
</li>
<li>
Mug
</li>
</ul>
Then in the Order Page the following code:
<div class="img-container1 image-container" image_var="main_image.jpg">
<%= image_tag('main_image.jpg') %>
<div class="wk-after">
<div class="centered-wk">
<span class="fa fa-check-circle check-circle"></span>
</div>
<div class="centered-wk wk-select">
SELECTED
</div>
</div>
</div>
My thought process was to then grab from the Order Page the image_var attribute and make it active.
So far I've been using:
<script>
function toggleActive() {
var activeElements = document.querySelectorAll('image_var');
activeElements.forEach(function (el) {
el.classList.remove('active');
});
btn.classList.add('active');
}
</script>
This isn't working. I don't know what the best way to grab the image_var or a url parameter. What am I missing?
I've also tried:
<script>
function toggleActive() {
var activeElements = document.querySelectorAll('[image-var]');
activeElements.forEach(function (el) {
el.classList.remove('active');
});
btn.classList.add('active');
}
</script>
With an update to the div on the container to be image-var to match. Still not touching the image.
I feel like this should be working with jQuery:
<script>
$(function(){
$.url.attr('image')
$.url.attr('type')
});
</script>
Wouldn't this be pulling out the main_image.jpg and then the print from type?

How to attach jQuery pop-up event to dynamically created HTML List

Aspiring developer and first time posting a question to StackOverflow.
Researched the topic but couldn't find an exact answer to my question.
Background:
Modifying this static shopping cart, to accept dynamically created list item.
https://tutorialzine.com/2014/04/responsive-shopping-cart-layout-twitter-bootstrap-3
Trying to insert a new item to the shopping cart via span tag, span tag information will be dynamically provided by another function.
For testing purpose I'm using a button to insert the new item to the shopping list.
The shopping cart has popover event to "Modify / Delete" individual items lists
Question: I can't figure out the exact JavaScript / jQuery command to attach the popover event. All static items in the list have the popover event automatically attached but the dynamically created items do not.
I tried using the addEventListener(); but the jQuery doesn't get attached properly.
My initial assumption was if the dynamically created list items had the same "class" as the static items that the popoever event would be automatically applied to them as well.
Tried these solutions but didn't work out for me, the popover event doesn't get attached properly.
a. Event binding on dynamically created elements?
Event binding on dynamically created elements?
b. Attach event to dynamically created chosen select using jQuery
Attach event to dynamically created chosen select using jQuery
c. Attaching events after DOM manipulation using JQuery ajax
Attaching events after DOM manipulation using JQuery ajax
Here's the HTML and JavaScript:
var qrcodelist = document.getElementById('qrdemo_list');
function myFunction() {
// HTML for testing when device is not connected: comment out when device is connected
var x = document.getElementsByClassName("decode-value-offline")[0].innerHTML;
// Qty and Price text values
var qty_text = 1;
var price_text = '$150';
// Create li
var entry_li = document.createElement('li');
entry_li.setAttribute("class", "row");
// Create quantity span
var qty_span = document.createElement('span');
qty_span.setAttribute("class", "quantity");
qty_span.appendChild(document.createTextNode(qty_text));
// Create price span
var price_span = document.createElement('span');
price_span.setAttribute("class", "price");
price_span.appendChild(document.createTextNode(price_text));
// Create pop btn span
var popbtn_span = document.createElement('span');
popbtn_span.setAttribute("class", "popbtn");
popbtn_span.setAttribute("data-original-title", "");
popbtn_span.setAttribute("title", "");
//popbtn_span.addEventListener( );
// Create a tag inside pop btn
var popbtn_a_span = document.createElement('a');
popbtn_a_span.setAttribute("class", "arrow");
popbtn_span.appendChild(popbtn_a_span);
// Create item span and text node
var item_span = document.createElement('span');
item_span.setAttribute("class", "itemName");
// Append span to li
entry_li.appendChild(qty_span);
entry_li.appendChild(item_span);
entry_li.appendChild(popbtn_span);
entry_li.appendChild(price_span);
// Create text node and insert qr-code result to li span
item_span.appendChild(document.createTextNode(x));
// Get list node and insert
var list_node = document.getElementById("qrdemo_list").lastChild;
// alert(list_node);
qrdemo_list.insertBefore(entry_li, qrdemo_list.childNodes[3]);
// Write x to console log
console.log(x);
}
// Popover JavaScript
$(function() {
var pop = $('.popbtn');
var row = $('.row:not(:first):not(:last)');
pop.popover({
trigger: 'manual',
html: true,
container: 'body',
placement: 'bottom',
animation: false,
content: function() {
return $('#popover').html();
}
});
pop.on('click', function(e) {
pop.popover('toggle');
pop.not(this).popover('hide');
});
$(window).on('resize', function() {
pop.popover('hide');
});
row.on('touchend', function(e) {
$(this).find('.popbtn').popover('toggle');
row.not(this).find('.popbtn').popover('hide');
return false;
});
});
<!-- Shopping Cart List HTML -->
<div class="col-md-7 col-sm-12 text-left">
<ul id="qrdemo_list">
<li class="row list-inline columnCaptions">
<span>QTY</span>
<span>ITEM</span>
<span>Price</span>
</li>
<li class="row">
<span class="quantity">1</span>
<span class="itemName">Birthday Cake</span>
<span class="popbtn"><a class="arrow"></a></span>
<span class="price">$49.95</span>
</li>
<li class="row">
<span class="quantity">50</span>
<span class="itemName">Party Cups</span>
<span class="popbtn"><a class="arrow"></a></span>
<span class="price">$5.00</span>
</li>
<li class="row">
<span class="quantity">20</span>
<span class="itemName">Beer kegs</span>
<span class="popbtn"><a class="arrow"></a></span>
<span class="price">$919.99</span>
</li>
<li class="row">
<span class="quantity">18</span>
<span class="itemName">Pound of beef</span>
<span class="popbtn"><a class="arrow"></a></span>
<span class="price">$269.45</span>
</li>
<li class="row">
<span class="quantity">1</span>
<span class="itemName">Bullet-proof vest</span>
<span class="popbtn" data-parent="#asd" data-toggle="collapse" data-target="#demo"><a class="arrow"></a></span>
<span class="price">$450.00</span>
</li>
<li class="row totals">
<span class="itemName">Total:</span>
<span class="price">$1694.43</span>
<span class="order"> <a class="text-center">ORDER</a></span>
</li>
<li class="row">
<!-- QR Code Images -->
<span class="itemName"><img src="img/AppleQRCode.png" width="100" height="100"></span>
<span class="price"><img src="img/OrangeQRCode.png" width="100" height="100"></span>
</li>
<li class="row">
<!-- device offline testing span -->
<span class="decode-value-offline">Unknown</span>
</li>
<li class="row totals">
<!-- Button to insert qr-code result to list -->
<span class="order"><a class="text-center" onclick="myFunction()">Insert</a></span>
<span class="itemName">Insert QR Code Result</span>
</li>
</ul>
</div>
<!-- Popover HTML -->
<!-- The popover content -->
<div id="popover" style="display: none">
<span class="glyphicon glyphicon-pencil"></span>
<span class="glyphicon glyphicon-remove"></span>
</div>
<!-- JavaScript includes -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/customjs.js"></script>
Appreciate the great support in advance and please contact me if additional information is needed for clarification.

JSFiddle of Fix: https://jsfiddle.net/0phz61w7/
The issue is that you need to delegate the event. Please do the following:
Change:
pop.on('click', function(e) {
pop.popover('toggle');
pop.not(this).popover('hide');
});
To:
$(document).on('click', '.popbtn', function(e) {
pop.popover('toggle');
pop.not(this).popover('hide');
});
Also, you need to remove the } from line 54, just after console.log(x);. That is throwing an error.
The above modification works, but in the code provided, .popbtn is not visible because the node is empty. So in the jsfiddle provided, I added a CSS rule to include the text POPBTN. Click that and an alert I added to the click event fires.

You need to delegate jquery function to the HTML elements created dynamically like this:
Change your following line
var pop = $('.popbtn');
var row = $('.row:not(:first):not(:last)');
like given here:
var pop = $(document).find('.popbtn');
var row = $(document).find('.row:not(:first):not(:last)');

Jquery Show Hide with attribute

How to get value from custom attribute to be used in if else condition?
I want to switch button between show & hide . if show button clicked it will hiden and the hide button showed. And also the same for opposites.
So i can do show hide for my divs.
Here's my codes
<div class="wrapper">
<a class="show_detail" target="1" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="1" style="display:none">- Hide</a>
<div class="event_down" id="event_down1" style="display:none">
Content 1
</div>
<a class="show_detail" target="2" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="2" style="display:none">- Hide</a>
<div class="event_down" id="event_down2" style="display:none">
Content 2
</div>
<a class="show_detail" target="3" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="3" style="display:none">- Hide</a>
<div class="event_down" id="event_down3" style="display:none">
Content 3
</div>
</div>
CSS:
.show_detail{cursor:pointer; color:red;}
.hide_detail{cursor:pointer; color:red;}
JS :
$('.show_detail').click(function(){
var atribut_show = $('.show_detail').attr('target');
var atribut_hide = $('.hide_detail').attr('target-hide');
if (atribut_show == atribut_hide){
$('.hide_detail').show();
$(this).hide();
}
$('.event_down').hide();
$('#event_down'+$(this).attr('target')).show();
});
and here's MY FIDDLE need your help to solve it.

in order to get custom attributes their name must start with "data-". For example your custom attribute target would be "data-target". After that you can get them using something like $("#myElement").getAttribute("data-target").

You are getting object array list you have to get only the current object
Check updated fiddle here
"http://jsfiddle.net/p7Krf/3/"
$('.show_detail').click(function(){
var atribut_show = $(this).attr('target');
$('.hide_detail').each(function(element){
if($(this).attr("target-hide")==atribut_show){
$(this).show();
}
});
$(this).hide();
$('#event_down'+atribut_show).show();
});

The following javascript made it function for me. You should however consider calling your attributes data-target and data-target-hide as your specified attributes are not actually valid. It will function, but you could run into problems if you don't change the attribute names.
$('.show_detail').click(function(){
var atribut_show = $(this).attr('target');
$('.hide_detail[target-hide="'+atribut_show+'"]').show();
$(this).hide();
$('#event_down'+atribut_show).show();
});
$('.hide_detail').click(function(){
var atribut_hide = $(this).attr('target-hide');
$('.show_detail[target="'+atribut_hide+'"]').show();
$(this).hide();
$('#event_down'+atribut_hide).hide();
});

Modal not visible in Twitter boootstrap

I am trying to display a modal on image click with the image which is clicked, but its not working.
fiddle
I am inserting the content of modal after the user clicks the image using
$("#imageModal").html(modalHtml);
$('#imageModal').modal('show');
This code might now work as I am getting the error: showModal is not defined but the same code is working on my website.
Please help find the issue.

First at the very top of your html body....directly after the <body> tag, and before any content.
Put your modal...without any img, just an empty body...
<div id="imageModal" class="modal hide fade in">
<div class="modal-header"><a class="close" data-dismiss="modal">x</a>
<h3>Select the area</h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
Men Topwear
Men Bottowear
Women Topwear
Women Bottomwear<br>
Close
</div>
Then later in your document, wherever you want the images...just wrap them in a <a> tags, and apply the name of the modal box to the href, and apply the data-toggle attribute... data-toggle="modal"
<a class='galleryImg' href="#imageModal" data-toggle="modal">
<img src="http://media.santabanta.com/gallery/global%20celebrities(f)/shakira/shakira-28-m.jpg" />
</a>
<a class='galleryImg' href="#imageModal" data-toggle="modal">
<img src="http://media.santabanta.com/gal/event/ramaiya-vastavaiya-sp" />
</a>
Then in your Jquery...simply find all the links with the class .galleryImg, or however you want to identify them, and apply a click handler...that passes the image, to the modal.
$('a.galleryImg').click(function (e) {
e.preventDefault();
var img = $(this).html();
$('.modal-body').html(img);
});
Heres the JSFIDDLE DEMO
UPDATE
After looking at the code you pasted....you cant do it like that, as you are outputting two click handlers, on created items. You need to do it like this...
function testAPI(){
listOfPage = ["http://media.santabanta.com/gallery/global%20celebrities(f)/shakira/shakira-28-m.jpg", "http://media.santabanta.com/gal/event/ramaiya-vastavaiya-special-screening/ramaiya-vastavaiya-special-screening-32.jpg"]
for (var i=0;i<listOfPage.length;i++){
$("#imgbox").append('<a class="galleryImg" href="#imageModal" data-toggle="modal"><img src="'+listOfPage[i]+ '"></a>');
}
}
And then sepereately have this outside of the loop....
$('body').on('click', 'a.galleryImg', function (e) {
e.preventDefault();
var img = $(this).html();
$('.modal-body').html(img);
});
Because since you are appending the items, they are dynamically created so you need to use on instead of click
But you also need to wrap it all in a $(document).ready(function()...like so
$(document).ready(function(){
//Facebook login function run/loop
function testAPI(){
listOfPage = ["http://media.santabanta.com/gallery/global%20celebrities(f)/shakira/shakira-28-m.jpg", "http://media.santabanta.com/gal/event/ramaiya-vastavaiya-special-screening/ramaiya-vastavaiya-special-screening-32.jpg"]
for (var i=0;i<listOfPage.length;i++){
$("#imgbox").append('<a class="galleryImg" href="#imageModal" data-toggle="modal"><img src="'+listOfPage[i]+ '"></a>');
}
}
//Apply click handler to dynamic links...
$('body').on('click', 'a.galleryImg', function (e) {
e.preventDefault();
var img = $(this).html();
$('.modal-body').html(img);
});
});