Develop Reference

Hide div with window.addEventListener doesn't work

I've created some kind of notification div which contains notifications, it shows when user clicks on notification icon and I wanted to do something like if the user clicks somewhere where isn't part of this notification container the container will hide, with dropdown menu it works but with this div it isn't and I have no idea why... Someone could help? Someone have any idea what am I doing wrong?
This is container HTML:
<div class="notifications-container">
<div class="notifications-container-top-bar">
<span>Notyfications</span>
<div class="btns">
<div class="seenAll">
<img src="static/img/icons/checkedIcon.svg" alt="Seen all btn">
</div>
<div class="closeNotifications">
<img src="static/img/icons/menu/close.svg" alt="Close">
</div>
</div>
</div>
<div class="noNotif">
<p>No new notifications</p>
</div>
<div class="notifications-container-list">
// notification items here
</div>
<div class="notifications-container-bottom-bar">
<p id="loadMoreNotif">See more</p>
</div>
</div>
Default css for this container is display: none; and after user click on notifications icon its gets active class which contains display: block;
I need to remove the active class when user clicks somewhere where is not a part of notifications container, this is how my js looks like
const notifContainer = document.getElementsByClassName("notifications-container")[0];
openNotif.addEventListener("click", ()=>{ //it works
notifContainer.classList.add("active");
});
window.addEventListener('click', function(e) {
if (!notifContainer.contains(e.target)) {
notifContainer.classList.remove('active');
}
});
It doesn't work, after I added the window event listener the container won't open anymore.
Any ideas?

Your window click event is fired when you click openNotif, so what is going on is that the active class is being added and then removed. In the function removing the attribute you should check that event.target is not the element or selector firing the "show" action.

Prevent click on certain elements

I'm working on portfolio items, where every item looks like this
<div class="item">
<div class="item-title"></div>
<div class="item-subtitle"></div>
<div class="item-image"></div>
<div class="item-site"></div>
</div>
Previous div is hidden and items are shown by this code
<a class="project" :href="`http://www.${item.site}`" >
So, if I put like "mysite.com" in item-site div and hover over item output is www.mysite.com and that is ok if item-site is not empty. But if that div is empty output is www. and I dont want that.Is there a way to prevent that?
How to dissable click if item-site class is empty, so if I click on it nothing happens, but if is not empty and has link then if I click it's opens that link in new window.

You can use the pointer-events: none CSS statement to disable the hover and click events on an element.
In your case, it might look something like this:
HTML:
<div class="item">
<div class="item-title"></div>
<div class="item-subtitle"></div>
<div class="item-image"></div>
<div class="item-site not-clickable"></div>
</div>
CSS:
.not-clickable{
pointer-events: none;
}
If the DOM element (in this case <div class="item-site"></div>) is empty, then add the class not-clickable. If the element has content, then remove the class not-clickable.
Please also note that <div> tags are not clickable by default. It sounds like you want these to be links which are <a> tags. Also, an <a> tag without the href attribute has no pointer events - so an alternative would be to provide the href when you want the element to be clickable, and remove it when you want the element to not be clickable.
<div class="item">
<div class="item-title"></div>
<div class="item-subtitle"></div>
<div class="item-image"></div>
<a class="item-site">I should not be clickable</a>
<a class="item-site" href="https://www.example.com" target="_blank">
I should be clickable, and I will also open in a new tab
</a>
</div>
Here is a pen that might explain further:
https://codepen.io/mikeabeln_nwea/pen/yZQLaj?editors=1111

Prevent default click action based on another class existing on the page

I have the following CSS code that when the .dashboard-actions class is clicked opens up a dropdown menu. Once clicked the 2nd div in the tree .dropdown changes to class="dropdown open" (indicates the dropdown menu is open/visible), once the user clicks off the open class is removed and the dropdown menu disappears (as expected).
I want to be able using some form of javascript (AngularJS 1.3 or jQuery) be able to do some logic to recognise when the dropdown is 'open' - if so, if a user clicks anywhere else on the screen, for instance the href below the div it will open 'close' the dropdown by removing the 'open' class rather than doing that default action, how could I best approach this?
<div class="dashboard-actions ellipsis">
<div class="dropdown" stop-event>
<div class="dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="material-icons">more_vert</span>
</div>
<ul class="dropdown-menu" aria-labelledby="dropdown1">
<div>
<div ng-include src="'templates/menu.html'" ng-repeat="x in item.x"></div>
</div>
</ul>
</div>
</div>
<div class="interaction-body">
<a href="https://somecdn.com/t51.2885-15/aaa.jpg" ng-href="https://somecdn.com/t51.2885-15/aaa.jpg" target="_blank" stop-event="">
<img ng-src="https://somecdn.com/t51.2885-15/aaa.jpg" src="https://somecdn.com/t51.2885-15/aaa.jpg"></a>
</div>

Hope you are searching for this
//Some code
$('.dropdown-menu').each({
if($(this).hasClass('open')){
// Do something
// $(this).removeClass('open');
}
});
//More code

how to set tab-pane to active dynamically or manually

I have recently started working with dynamic tabs and I hit a wall trying to play with them and their respective divs.
My code is the following and works this way:
<ul id="modalFormUlId" class="bootstrapWizard form-wizard">
<li class="active" data-target="#step1"> <span class="step">1</span><span class="title">Datos Generales</span>
</li>
<li data-target="#step2"> <span class="step">2</span> <span class="title">Detalles Financieros</span>
</li>
<li data-target="#step3"> <span class="step">3</span> <span class="title">Archivos</span>
</li>
<li data-target="#step4"> <span class="step">4</span> <span class="title">Historial Transacciones</span>
</li>
<li data-target="#step5"> <span class="step">5</span> <span class="title">Resguardante</span>
</li>
<li data-target="#step6"> <span class="step">6</span> <span class="title">Etiqueta</span>
</li>
</ul>
<div class="clearfix"></div>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<br>
<h3><strong></strong> Datos Generales</h3>
</div><!-- End tab1 -->
<div class="tab-pane" id="tab2">
<br>
<h3><strong></strong> Detalles Financieros</h3>
</div>
<div class="tab-pane" id="tab3">
<br>
<h3><strong></strong> Lista Archivos</h3>
</div>
<div class="tab-pane" id="tab4">
<br>
<h3><strong></strong> Historial de Transacciones</h3>
</div>
<div class="tab-pane" id="tab5">
<br>
<h3><strong></strong> Resguardante</h3>
</div>
<div class="tab-pane" id="tab6">
<br>
<h3 ><strong></strong> Etiqueta del Bien</h3>
</div>
When I click a button, a small window (div) appears which has the
code written above.
Clicking on any of the li elements, brings out its respective div
Bootstrap class makes it so the li elements show as circles that
paint green when set as active (default for first one, then changes
as I click on any of them)
As you can see, the first li element has its class set as active,
since when the window its first opened, its the default choice shown.
When I close my div and re-open it by clicking the button, it appears
again having the last li element clicked as active (So, if I clicked
li for #step3 element then close my window and opened it again, #tab3
div would still be showing).
My problem comes when trying to set a different li element as active after reopening my window, since #step1 keeps showing as the active one even when any other div is the one currently being displayed, I know I would have to get the current active div and set its li element to active or something like that, but I'm still inexperienced in jQuery (need to do it with jQuery) and can't seem to do it.
Any tips would be appreciated.

You just need to add a click listener to your button which you use to open the modal and trigger a click manually on first tab.
Here is the code:
$(function(){
$('#modal-btn').click(function () {
$("#modalFormUlId a:eq(0)").click();
// or
//$('#modalFormUlId a:first').tab('show');
});
});
Here is working example http://jsfiddle.net/0mvt0qe5/3/

Onclick of any li, store the active tab in localStorage and when you hit the button you can check if active tab has any localStorage value and make them active accordingly. Hope this will help you. Please let me know if you face any issues using this.
Try doing this:
set the localStorage based on your active tab, you can give on onclick event of any tab
localStorage.setItem("activeTab", "Archivos");
Use localStorage.getItem("activeTab"), based on that add active class to the tab

Bootstrap dropdown still clickable when hidden

I'm creating a dropdown in my navbar which contains a video player, however when I hide the video player by toggling the dropdown button, I'm still able to click on the hidden div element.
So when I'm trying to navigate other elements on the page, sometimes I click on the hidden div video player. How do I make the hidden div element in droppable unclickable? and then clickable again when I show the element using the dropdown.
Thanks!
EDIT:
I'm using the following code:
<a ng-cloak class="dropdown-toggle player-btn btn btn-large" data-toggle="dropdown">TOGGLE</a>
<div class="dropdown-menu">
<div style='position:relative;height:210px'>
<div style='position:relative;height:210px'>
<div id="player"></div>
</div>
</div>
</div>