We Keep Coding

Trigger modal card from menu item not top-level menu - HTML, CSS, JS

I'm new to coding and hope someone can help be understand where I am going wrong. I am having a problem with getting a modal card popup to trigger from a navbar-item. Everything that I have tried so far triggers the modal at the top menu item. Each of the navbar-items on the drop down will have a link to a modal card.
Thank you in advance for your help!!
const item = document.querySelector(".navbar-item");
const modalBg = document.querySelector('.modal-background');
const modal = document.querySelector('.modal');
item.addEventListener('click', () => {
modal.classList.add('is-active');
});
modalBg.addEventListener('click', () => {
modal.classList.remove('is-active');
});
<section>
<nav class="navbar has-shadow" role="navigation" aria-label="dropdown navigation" id="navbar_link_modal">
<div class="navbar-brand">
<a class="navbar-burger" id="burger">
<span></span>
<span></span>
<span></span>
</a>
</div>
<div class="navbar-menu" id="nav-links">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" data-target="#modal">Ford</a>
<div class="navbar-dropdown">
<a class="navbar-item">
Explorer
</a>
<a class="navbar-item" href="#framingLumber">
Focus
</a>
<a class="navbar-item">
Flex
</a>
<a class="navbar-item">
F-150
</a>
</a>
</div>
</div>
</div>
</div>
</nav>
</section>
<div class="modal is-active" id="modal">
<div class="modal-background"></div>
<div class="modal-card" id="framingLumber">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<!-- Content ... -->
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button">Cancel</button>
</footer>
</div>
</div>

You are targeting your modal at your top-level menu as data-target="#modal" which is wrong because there is no element with id 'modal'.
You need to do this at your menu item as data-target="#framingLumber" whereframingLumber is id of your modal and href is not needed.
So your code that would look like this:
<div class="navbar-menu" id="nav-links">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">Ford</a>
<div class="navbar-dropdown">
<a class="navbar-item">Explorer</a>
<a class="navbar-item" data-target="#framingLumber">Focus</a>
<a class="navbar-item">Flex</a>
<a class="navbar-item">F-150</a>
</div>
</a>
</div>
</div>
</div>

jQuery When Div is clicked go to url in a new tab, Except when Child item is Clicked

I have a Div structure and when the div is clicked I want a link to open in a new tab. But there is a child item inside the div which has a function of copying the code. When this child item is clicked, it should not open the link in new tab.
This is my HTML structure:
$(".nuget").on('click', ':not(.copy-nuget-section)', function (e) {
window.open('http://google.pl', '_blank')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-item nuget">
<div class="product-image">
<img class="img-responsive add-shadow" alt="" src="/img/nuget-logo.png">
</div>
<div class="product-info">
<h3>Install with <span>NuGet</span></h3>
</div>
<div class="copy-nuget-section" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Click to copy">
<div class="copy-nuget-row">
<pre class="install-script">Install-Package</pre>
<div class="copy-button">
<button class="btn btn-default copy-nuget-script" type="button" data-toggle="popover" data-placement="bottom" data-content="Copied." aria-label="Copy the Package Manager command" data-original-title="" title="">
<span class="ms-Icon ms-Icon--Copy"></span>
</button>
</div>
</div>
</div>
<div class="nuget-link">nuget.org/packages/</div>
</div>

Check if the target is .copy-nuget-section or any of it's children using closest()
$(".nuget").on('click', function(e) {
if (!$(e.target).closest('.copy-nuget-section').length) {
window.open('http://google.pl', '_blank')
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-item nuget">
<div class="product-image">
<img class="img-responsive add-shadow" alt="" src="/img/nuget-logo.png">
</div>
<div class="product-info">
<h3>Install with <span>NuGet</span></h3>
</div>
<div class="copy-nuget-section" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Click to copy">
<div class="copy-nuget-row">
<pre class="install-script">Install-Package</pre>
<div class="copy-button">
<button class="btn btn-default copy-nuget-script" type="button" data-toggle="popover" data-placement="bottom" data-content="Copied." aria-label="Copy the Package Manager command" data-original-title="" title="">
<span class="ms-Icon ms-Icon--Copy"></span>
</button>
</div>
</div>
</div>
<div class="nuget-link">nuget.org/packages/</div>
</div>

You can use the concept of event bubbling to stop the propagation of click event from child to parent like this.
$(".copy-nuget-section").on('click', function (e) {
// code for the copy functionality that you want to implement
e.stopPropagation()
});
$(".nuget").on('click', function (e) {
window.open('http://google.pl', '_blank')
});

jQuery get text value from elements from different divs with same class

<div class="panel">
<div class="panel-heading item-name">T-shirt1</div>
<div class="panel-body"><img src="img/shirt1.jpg" class="img-responsive" alt="Image"></div>
<div class="panel-footer text-center">
<h5>PRICE: <span class="old-price">$15.32</span></h5>
<h4>$17.56</h4>
<button type="button" class="btn btn-danger add-to-cart">Add to cart</button>
</div>
</div>
<div class="panel">
<div class="panel-heading item-name">T-shirt2</div>
<div class="panel-body"><img src="img/shirt2.jpg" class="img-responsive" alt="Image"></div>
<div class="panel-footer text-center">
<h5>PRICE: <span class="old-price">$21.67</span></h5>
<h4>$23.15</h4>
<button type="button" class="btn btn-danger add-to-cart">Add to cart</button>
</div>
</div>
<div class="panel">
<div class="panel-heading item-name">T-shirt3</div>
<div class="panel-body"><img src="img/shirt3.jpg" class="img-responsive" alt="Image"></div>
<div class="panel-footer text-center">
<h5>PRICE: <span class="old-price">$16.69</span></h5>
<h4>$16.80</h4>
<button type="button" class="btn btn-danger add-to-cart">Add to cart</button>
</div>
</div>
What I really want is to retrieve the value of each item-name when I click on the Add to cart button. If I click on the first button, I should get T-shirt1, second button should alert T-shirt2, third button => T-shirt3.
Here is my jQuery script.
<script>
$('.add-to-cart').click(function() {
var itemName = $('.item-name', this).text();
alert(itemName);
});
</script>

You can try this:
$('.add-to-cart').click(function() {
var itemName = $(this).closest('.panel').find('.item-name').text();
alert(itemName);
});
Usage of the closest method: closest

Go from clicked button up in parents chain until you find .panel and then down in children tree until you find .item.name:
$('.add-to-cart').click(function() {
var itemName = $(this).parents('.panel').children('.item-name').first().text();
alert(itemName);
});

Portfolio filter

I am trying to make portfolio filter with js (without plugins). So far I created navigation
<div class="filter-nav">
<div class="nav-wrap">
<button class="btn fil-cat active" href="" data-rel="kuche">
<span class="ico ico-big"><img src="/assets/images/ico-kueche.svg" alt="Kueche"></span>
<span>Kuche</span>
</button>
<button class="btn fil-cat" data-rel="bade">
<span class="ico ico-big"><img src="/assets/images/ico-baeder.svg" alt="Baeder"></span>
<span>Bade</span>
</button>
<button class="btn fil-cat" data-rel="mobel">
<span class="ico ico-big"><img src="/assets/images/ico-moebel.svg" alt="Moebel"></span>
<span>Mobel</span>
</button>
<button class="btn fil-cat" data-rel="schreinerei">
<span class="ico ico-big"><img src="/assets/images/ico-kueche.svg" alt="Kueche"></span>
<span>Schreinerei</span>
</button>
<button class="btn fil-cat" data-rel="acrylstein">
<span class="ico ico-big"><img src="/assets/images/ico-baeder.svg" alt="Baeder"></span>
<span>Acrylstein</span>
</button>
<button class="btn fil-cat" data-rel="objekte">
<span class="ico ico-big"><img src="/assets/images/ico-moebel.svg" alt="Moebel"></span>
<span>Objekte</span>
</button>
</div>
</div>
with data attribute,
and rest of the code
<div id="inspiration" class="row in-wrap">
<div class="tile scale-anm kuche col-lg-6">
<img class="lazyload" data-srcset="../../assets/images/sample/inspiration.png," src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="tile scale-anm bade col-lg-6">
<img class="lazyload" data-srcset="../../assets/images/sample/inspiration.png," src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="tile scale-anm kuche col-lg-6">
<img class="lazyload" data-srcset="../../assets/images/sample/inspiration.png," src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="tile scale-anm bade col-lg-6">
<img class="lazyload" data-srcset="../../assets/images/sample/inspiration.png," src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="tile scale-anm kuche col-lg-6">
<img class="lazyload" data-srcset="../../assets/images/sample/inspiration.png," src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="tile scale-anm bade col-lg-6">
<img class="lazyload" data-srcset="../../assets/images/sample/inspiration.png," src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
</div>
</div>
so with data atribute I chose which one will be selected with this JS code
function filterInspiration() {
var selectedClass = "";
$('.fil-cat').click(function(){
selectedClass = $(this).attr("data-rel");
$("#inspiration").fadeTo(100, 0.1);
$("#inspiration div").not("."+selectedClass).fadeOut().removeClass('scale-anm');
setTimeout(function() {
$("."+selectedClass).fadeIn().addClass('scale-anm');
$("#inspiration").fadeTo(300, 1);
}, 300);
});
};
filterInspiration();
The part that I am stacked is, how can I add class active for example to button that I clicked, and then when I click on another button in filter navigation, then to remove on previous and add to another?
Thanks

You can use jquery function to add and remove class i.e., addClass & removeClass
First remove class active from all elements
Add active to the this (current element)
$('.fil-cat').click(function(e) {
$('.fil-cat').removeClass('active');
$(this).addClass('active');
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter-nav">
<div class="nav-wrap">
<button class="btn fil-cat" href="" data-rel="kuche">
<span class="ico ico-big"><img src="/assets/images/ico-kueche.svg" alt="Kueche"></span>
<span>Kuche</span>
</button>
<button class="btn fil-cat" data-rel="bade">
<span class="ico ico-big"><img src="/assets/images/ico-baeder.svg" alt="Baeder"></span>
<span>Bade</span>
</button>
<button class="btn fil-cat" data-rel="mobel">
<span class="ico ico-big"><img src="/assets/images/ico-moebel.svg" alt="Moebel"></span>
<span>Mobel</span>
</button>
<button class="btn fil-cat" data-rel="schreinerei">
<span class="ico ico-big"><img src="/assets/images/ico-kueche.svg" alt="Kueche"></span>
<span>Schreinerei</span>
</button>
<button class="btn fil-cat" data-rel="acrylstein">
<span class="ico ico-big"><img src="/assets/images/ico-baeder.svg" alt="Baeder"></span>
<span>Acrylstein</span>
</button>
<button class="btn fil-cat" data-rel="objekte">
<span class="ico ico-big"><img src="/assets/images/ico-moebel.svg" alt="Moebel"></span>
<span>Objekte</span>
</button>
</div>
</div>

Here is a small proof of concept for the functionality you're looking for.
// Get the container with the buttons...
var container = document.getElementById('button-container');
// and add a click event listener.
container.addEventListener('click', event => {
// Find the item that has the active class...
var activeItem = container.querySelector('.active');
// when such an item exists, remove the active class from the element.
if (activeItem !== null) {
activeItem.classList.remove('active');
}
// When the clicked element is the same as the element that was active, leave. When an active button is clicked it should become inactive.
if (event.target === activeItem) {
return;
}
// Make the clicked button the active button.
event.target.classList.add('active');
});
.active {
font-size: 2em;
}
<div id="button-container">
<button type="button">Button</button>
<button type="button">Button</button>
<button type="button">Button</button>
<button type="button">Button</button>
<button type="button">Button</button>
</div>

Adding descriptions inside a blueimp gallery

I am using a BlueImp Gallery to add lightboxes to my image gallery. So, when you click on an image thumbnail, it launches a lightbox with a larger version of the image etc.
I also want to add in some descriptive text and a button to each slide of the lightbox, but I am having trouble making it work. It won't show the placeholder descriptions that I have added in.
Here's what I have so far;
HTML:
<div id="blueimp-gallery" class="blueimp-gallery">
<!-- The container for the modal slides -->
<div class="slides"></div>
<!-- Controls for the borderless lightbox -->
<h3 class="title"></h3>
<p class="description"></p>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body next"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left prev">
<i class="glyphicon glyphicon-chevron-left"></i>
Previous
</button>
<button type="button" class="btn btn-primary next">
Next
<i class="glyphicon glyphicon-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div id="links">
<div class="row prints">
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm3.staticflickr.com/2843/10406026526_4cd1b56391.jpg" title="Ballooning" data-description="This is a banana." data-gallery>
<img src="http://farm8.staticflickr.com/7389/10404414563_0914b69e0e.jpg" alt="Ballooning">
</a>
<h3>Ballooning</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm6.staticflickr.com/5547/10406009404_c197c2221b.jpg" title="Clearing" data-description="This is a apple." data-gallery>
<img src="http://farm6.staticflickr.com/5490/10404414523_745ea3065d.jpg" alt="Clearing">
</a>
<h3>Clearing</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm6.staticflickr.com/5510/10406026066_7f95a075ee.jpg" title="Sky/Sea" data-description="This is a cherry." data-gallery>
<img src="http://farm4.staticflickr.com/3769/10404249505_d767f7c420.jpg" alt="Sky/Sea">
</a>
<h3>Sky/Sea</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm4.staticflickr.com/3678/10406009004_5c625e2028.jpg" title="Lights" data-description="This is a grapefruit." data-gallery>
<img src="http://farm3.staticflickr.com/2814/10404249395_9e4cae5bc7.jpg" alt="Lights">
</a>
<h3>Lights</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm6.staticflickr.com/5538/10406019875_8424fbee11.jpg" title="Silhouettes" data-description="This is a orange." data-gallery>
<img src="http://farm8.staticflickr.com/7343/10404255766_d808d1902d.jpg" alt="Silhouettes">
</a>
<h3>Silhouettes</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm4.staticflickr.com/3682/10406009134_3b666324ff.jpg" title="Sway" data-description="This is a kiwi." data-gallery>
<img src="http://farm6.staticflickr.com/5516/10404249545_7efb481042.jpg" alt="Sway">
</a>
<h3>Sway</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm8.staticflickr.com/7425/10406019935_1def1e0c09.jpg" title="Sunset" data-description="This is a grape." data-gallery>
<img src="http://farm3.staticflickr.com/2810/10404249465_0124b7f3e5.jpg" alt="Sunset">
</a>
<h3>Sunset</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm6.staticflickr.com/5532/10406009324_4cd1b56391.jpg" title="Lighthouse" data-description="This is a strawberry." data-gallery>
<img src="http://farm6.staticflickr.com/5543/10404240054_6261498220.jpg" alt="Lighthouse">
</a>
<h3>Lighthouse</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm4.staticflickr.com/3747/10406026506_6a4dbf2df0.jpg" title="Slabs"data-description="This is a pineapple." data-gallery>
<img src="http://farm8.staticflickr.com/7345/10404249655_7512bf6565.jpg" alt="Slabs">
</a>
<h3>Slabs</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
</div>
</div>
CSS:
.blueimp-gallery > .description {
position: absolute;
top: 30px;
left: 15px;
color: red;
display: none;
}
.blueimp-gallery-controls > .description {
display: block;
}
JS:
blueimp.Gallery(
document.getElementById('links'),
{
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
}
}
);
And in my body (gallery.js is the file where I've added the above JS):
<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="lib/fancybox/jquery.fancybox.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="js/bootstrap-image-gallery.min.js"></script>
<script src="js/gallery.js"></script>
Any pointers on where I've gone wrong would be much appreciated!

You can pass any needed data on a element, and then display it in the gallery.
I spend a lot of time trying to find an answer, so I'll leave it here.
Here is an example:
HTML:
<div id="blueimp-gallery" class="blueimp-gallery">
<div class="slides"></div>
<h3 class="title"></h3>
<p class="description"></p>
<p class="example"></p>
...
</div>
------
<div id="links">
Banana
Apple
</div>
JS:
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {
index: link, event: event,
onslide: function (index, slide) {
self = this;
var initializeAdditional = function (index, data, klass, self) {
var text = self.list[index].getAttribute(data),
node = self.container.find(klass);
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
};
initializeAdditional(index, 'data-description', '.description', self);
initializeAdditional(index, 'data-example', '.example', self);
}
},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
CSS:
You can use .scss to refactor it, but it's just for example
.blueimp-gallery > .description, .blueimp-gallery > .example {
position: absolute;
top: 30px;
left: 15px;
color: #fff;
display: none;
}
.blueimp-gallery-controls > .description, .blueimp-gallery-controls > .example {
display: block;
}

Sorry if to late but I find a way to do this, only change the JS from:
blueimp.Gallery(
document.getElementById('links'),
{
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
}
}
);
to this:
blueimp.Gallery(
document.getElementById('links'),
{
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].innerHTML = text;
}
}
}
);

blueimp.Gallery(
document.getElementById('links'), {
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
}
});
http://jsfiddle.net/2B3bN/25/
Have a look at this one, it is a working one.
Just check what you've done wrong compared to mine.

use
document.getElementById('links').getElementsByTagName('a') or .children()

That works only for the first link...
I am trying to get it to work with html in the data-description. I have it working and pulling in the decsription text, but how do you parse the html to work as a link?
http://jsfiddle.net/LXp76/
<img src="http://lorempixel.com/80/80/" alt="" >
here it is working with FancyBox, http://jsfiddle.net/yShjB/2/
but I would much rather use the BlueImp Gallery..