We Keep Coding

Add external link to an <a> element inside a Click Event Listener Div

I'm having trouble adding a link to a button inside a card. the card is wrapped in a div element which when clicked automatically expands and closes.
Is there anyway to remove this functionality just when clicking on the details button? So it acts as a normal link?
Here is the code:
https://codepen.io/candroo/pen/wKEwRL
Card HTML:
<div class="card">
<div class="card__image-holder">
<img
class="card__image"
src="https://source.unsplash.com/300x225/?wave"
alt="wave"
/>
</div>
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
Card title
<small>Image from unsplash.com</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
This grid is an attempt to make something nice that works on touch
devices. Ignoring hover states when they're not available etc.
</div>
<div class="card-flap flap2">
<div class="card-actions">
Read more
</div>
</div>
</div>
</div>
JS:
$(document).ready(function () {
var zindex = 10;
$("div.card").click(function (e) {
e.preventDefault();
var isShowing = false;
if ($(this).hasClass("show")) {
isShowing = true;
}
if ($("div.cards").hasClass("showing")) {
// a card is already in view
$("div.card.show").removeClass("show");
if (isShowing) {
// this card was showing - reset the grid
$("div.cards").removeClass("showing");
} else {
// this card isn't showing - get in with it
$(this).css({ zIndex: zindex }).addClass("show");
}
zindex++;
} else {
// no cards in view
$("div.cards").addClass("showing");
$(this).css({ zIndex: zindex }).addClass("show");
zindex++;
}
});
});

You can check the target of the event and see if it is an <a> using is()
Something like:
$("div.card").click(function (e) {
// only run when not an `<a>`
if(!$(e.target).is('a')){
e.preventDefault();
//the rest of your code
....
}
});

I don't know Jquery but with javascript you can do this inside your code:
const links = document.querySelectorAll('.btn');
links.forEach(link => link.addEventListener('click', (e)=>e.stopPropagation()))

Disable close dropdown after click href

I would like to keep my dropdown opened after a page load. For example if I click on an item(href) into an dropdown, I would like to keep the dropdown opened after the redirection.
I've seen that there is a method jquery named stopPropagation, but it seems that this does not work for me
HTML
<div class="sidenav">
<div class="item_sn">
Groups
</div>
<div class="item_list_body">
<div class="link_sidenav">
<a href="#" class="sub_item">
group 1
</a>
</div>
<div class="link_sidenav">
<a href="#" class="sub_item">
group 2
</a>
</div>
</div>
<div class="item_sn">
Users
</div>
<div class="item_list_body">
<div class="link_sidenav">
<a href="#" class="sub_item">
user 1
</a>
</div>
<div class="link_sidenav">
<a href="#" class="sub_item">
user 2
</a>
</div>
</div>
</div>
JQuery
<script>
$(document).ready(function () {
$('.item_list_body').hide();
$('.item_sn').on('click', function (event) {
var content = $(this).next('.item_list_body')
content.slideToggle();
$('.item_list_body').not(content).slideUp();
});
});
</script>
Solution 1 (not working) :
$(document).on('click', '.sub_item', function (e) {
$(this).parent('.link_sidenav').parent('.item_list_body').toggle();
});

you can use sessionStorage to store the state of the menu and then open the menu on page load by checking the state see below
EDIT
rather than using state of the menu we should save the index of the clicked menu as discussed in the comment so updated my answer
$(document).ready(function () {
//sessionStorage.removeItem('opened');
$('.item_list_body').hide();
if (sessionStorage.getItem('opened') !== null) {
$('.sidenav>div:eq(' + sessionStorage.getItem('opened') + ')').next('.item_list_body').show();
}
$('.item_sn').on('click', function (event) {
var content = $(this).next('.item_list_body');
var elem = $(this);
content.slideDown(0, function () {
sessionStorage.setItem('opened', elem.index());
});
$('.item_list_body').not(content).slideUp();
});
});
Hope it helps

Change <button> text if element is :hidden or :visible

I have a button that toggles the playlistHolder div. In addition, when '.albumImage a' is selected, it also unhides the playlist. I am trying to change the text of the button to 'Show Playlist' if the playlist is hidden and 'Hide Playlist' if it is not hidden. I have tried click functions with if(('.playlist').is(:hidden)) but have not had any luck with getting it to work. I am new to Jquery so I understand that my code below can use much improvement, here is my setup now that works when the album image is selected as well as when the toggle button is selected without changing the text:
HTML
<div class="togglePlaylist">
<button id="togglePlaylistBT">Show/Hide Playlist</button>
<!-- POPUP LAUNCHER -->
</div>
<div class="playlistHolder">
<div class="componentPlaylist">
<div class="playlist_inner">
<!-- playlist items are appended here! -->
</div>
</div>
<!-- preloader -->
<div class="preloader"></div>
</div>
<div class="albumWrapper">
<div class="albumCovers">
<div class="albumImage"> <img class="img-responsive" src="media/music/Album_Covers/Swag_Brothers.jpg" alt="thumb" />
<p class="nowPlaying">Now Playing</p>
</div>
</div>
</div>
Javascript/JQuery
$('#togglePlaylistBT, .albumImage a').on('click', function() {
var $this = $('#togglePlaylistBT');
if($('.playlistHolder').is(':visible'))
{
$('.playlistHolder').hide('slow');
$this.text('Hide Playlist');
}
else
{
$('.playlistHolder').show('slow');
$this.text('Show Playlist');
}
});

Try this snippet of code:
$('.togglePlaylist button').on('click', function() {
var $this = $(this);
if($('.playlistHolder').is(':visible'))
{
$('.playlistHolder').hide();
$this.text('Hide Playlist');
}
else
{
$('.playlistHolder').show();
$this.text('Show Playlist');
}
});
Working JSFiddle

When you hide and show the playlist just run document.getElementById("togglePlaylistBT").value="Show Playlist";
For example:
function change()
{
var elem = document.getElementById("playlistButton");
if (elem.value=="Open Playlist") { elem.value = "Close Playlist"; closeBox(); }
else { elem.value = "Open Playlist"; openBox(); }
}
function openBox() {
alert("open");
}
function closeBox() {
alert("closed");
}
<input onclick="change()" type="button" value="Open Playlist" id="playlistButton"></input>
Make sure to change openBox() and closeBox() functions to your box code!

jQuery find closest

I'm trying to get the a href of an list item.
HTML
<div class="popup" style="display: none;">
<div class="product">
<div class="photo">
<a href="" class="sendkleur" id="link69"> <!-- href im trying to reach -->
<img id="product-collection-image-69" src="" alt="Test kleur" class="popup-image69">
</a>
</div>
<a href="" class="sendkleur" id="link69">
<strong>Test kleur</strong>
</a>
<span class="swatchLabel-category">Kleur:</span>
<p class="float-clearer"></p>
<div class="swatch-category-container" style="clear:both;" id="ul-attribute137-69">
<img onclick="listSwitcher();" src="" id="a137-32" class="swatch-category" alt="Beige" width="12px" height="12px" title="Beige">
<img onclick="listSwitcher();" src="" id="a137-36" class="swatch-category" alt="Zwart" width="12px" height="12px" title="Zwart">
</div>
<p class="float-clearer"></p>
</div>
</div>
There are multiple popups on the site and thats what makes it difficult. At first I used this code
var link = jQuery('.photo').find('a')[0].getAttribute("href");
But this ofcourse only returns the href of the first popup. Then I tried this code:
var link = jQuery('.photo').closest('a').attr("href");
But this returned undefined
Then I tried this:
var link = jQuery(this).closest('a').attr("href");
But that also returns undefined
Edit
Here is the whole jQuery code snippet
jQuery(document).ready(function(){
jQuery('.swatch-category-container img').click(function(){
var kleur = jQuery(this).attr('title');
var link = jQuery('.photo').find('a').attr("href");
console.log(link);
link += "?kleur="+kleur;
console.log(link);
jQuery('.photo').find('.sendkleur').attr("href", link);
});
});

Working from the .swatch-category-container img element, you can traverse the DOM to find the required a like this:
$('.swatch-category-container img').click(function() {
var link = $(this).closest('.popup').find('.photo a').prop('href');
// do something with link here...
});

If this is the .swatch-category-container img element then, the anchor is the previous to previous sibling of the ancestor swatch-category-container element
var link = jQuery(this).closest('.swatch-category-container').prev().prev().attr("href");

Since you said multiple popups, the idea would be like this.
1. Get all popups
2. From each popup in all popups
Get the photo href item
$('.popup').each(function() {
var hrefItem = $(this).find('.photo a').attr('href');
//Do your processing with href item
});

Get content id (greatest) by clicking button on it Jquery

I need to get comment id when clicking to report button (I want to get comment-6)
Now when I click 'report' it show a modal box with form.
<div class="comment-box medium-comment" id="comment-6">
<div class="photo-box">
<img src="img/samples/photo_1.jpg" alt="" class="photo rounded"/>
</div>
<div class="avatars">
<a href="#" title="">
<img src="img/samples/followers/1.jpg" alt=""/>dearskye
</a>
<span>commented on</span>
<a href="#" title="">
<img src="img/samples/followers/2.jpg" alt=""/>Antony12
</a>
</div>
<div class="comment rounded">
<div class="bg-tl"></div>
<div class="text">Happy golden days of yore
Happy golden days of yore Happy golden days
of yore</div>
<div class="buttons">
REPORT
</div>
</div>
<div class="cinfo">
2 дня назад
</div>
<div class="both"></div>
</div>
clicking to
REPORT
call jquery
jQuery('a.report').bind('click', function(event) {
showModalWindow('report-window');
});
and function is
function checkReportForm(form)
{
var result=true;
var select=jQuery("#report-window select");
var textarea=jQuery("#report-window textarea");
if(textarea.hasClass('default'))
{
//Save placeholder
textarea.data('placeholder', textarea.text());
textarea.toggleClass('default');
}
textarea.attr('class','rounded');
if(select.val()==0)
{
if(textarea.val()==''||textarea.val()==textarea.data('placeholder'))
{
result=false;
textarea.toggleClass("alert");
}
}
if(result)
{
closeModalWindow('report-window');
}
I tried to do it but nothing. I suppose it is possible otherwise will think to change code. I hope someone will help me.

You can use closest to get the closest element which cotains the required class and get its id. Try this.
jQuery('a.report').click(function() {
var $commentBox = $(this).closest(".comment-box");
var id = $commentBox.attr('id').replace('comment-', '');
alert(id);//It will alert the comment id
//Store the comment id in report window
$('#report-window').data('commentid', id);
});
Now use $('#report-window').data('commentid') to get the current comment id inside checkReportForm method.

If i understand you correctly, the following should fetch the comment id for you:
$(".report").click(function() {
var $box = $(this).parents(".comment-box");
var commentId = $box.attr("id").replace("comment-", "");
// commentId contains 6
// call showModalBox and do whatever you want
});

When this context is your report link:
var id = Number(this.parentNode.parentNode.id.substring(8));