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.

Microsoft Edge not immediately redrawing element after class change

On my React site, I have a profile/account dropdown (similar to Github's, where you click on your profile picture and a dropdown appears). On most browsers, it works correctly. When the div is clicked, it applies the dropdown--active class to itself. This dropdown--active class contains a rule for the child element, dropdown__content, to change its display from none to block, thereby toggling the display of the dropdown content on click.
Before click:
<div class="dropdown account-dropdown">
<a href="/#" class="dropdown__trigger ">
<span class="account-dropdown--name">admin</span>
</a>
<div class="dropdown__content">
<div class="account-dropdown--identity account-dropdown--segment">
Signed in as admin
</div>
</div>
</div>
After click:
<div class="dropdown dropdown--active account-dropdown">
<a href="/#" class="dropdown__trigger ">
<span class="account-dropdown--name">admin</span>
</a>
<div class="dropdown__content">
<div class="account-dropdown--identity account-dropdown--segment">
Signed in as admin
</div>
</div>
</div>
However, the only way I can get it to display in Microsoft Edge is to click some where else on the screen after I've already clicked the parent element. With Inspect Element open, I can tell that the class is in fact being applied immediately after click, but the child element is not redrawn/reevaluated until some where else on the screen is clicked. Alternatively, tabbing to the element and clicking "enter" does not cause this problem.
Works in Chrome, IE 11, Firefox fine though.

How do I get voice over focus to my modal?

I am using iphone 6+ and with the voice over (accessibility) option on. I have my exit modal open on a link click and I set my keyboard focus on the modal (with js). This all works fine. However, the voice over focus is not switched to my modal, it is still on the trigger link.
How do I get the voice over focus to the modal?
Here is the modal code
<div class="modal-container" id="{{ modalModel.modalId }}">
<div class="modal-mask" data-ng-click="onMaskClick($event)">
</div>
<div class="modal-body" tabindex="-1" role="dialog" aria-label="{{ modalModel.modalTitle }}">
<div class="modal-body-container">
<h4 class="modal-title heading-4">{{ modalModel.modalTitle }}</h4>
<button type="button" class="modal-close" data-ng-click="closeModal($event)">
<span class="btn-text">close</span>
<span class="icon chrome-blue-x-round"></span>
</button>
<div class="modal-contents">
<div class="modal-contents-wrapper" data-ng-transclude></div>
xxxxxx xxxx
</div>
</div>
</div>
</div>
The modal-body class element has focus when the modal pops up. I am using iOS 9.

I was able to focus the voice over cursor in the modal by putting the keyboard focus on the close button when the modal opens.
It appears if the keyboard focus is not on an element which the keyboard can focus on naturally, then the voice over cursor will not move inside of the modal. Since the close button is a button, this worked
<button type="button" class="modal-close" data-ng-click="closeModal($event)">
<span class="btn-text">close</span>
<span class="icon chrome-blue-x-round"></span>
</button>

You must focus on a focusable item. If you want to set it on something normally not focusable add tabindex=0. There are a couple other quick tricks to make VO read the entire modal. Add aria-labelledby="id_of_title" aria-describedby="id_of_content" don't use the hash '#'.

Make a div always on top using JavaScript

I am working on a simple HTML/JavaScript project. In this I have a main div, in this div I have another div which is not visible initially.
<div>
<div class="warning" id="time-alert" style="visibility:hidden">
<span style="font-weight:bold">your time is up To extend the time click on
extend button.
<input type="button" id="extend-btn" onclick="clickaction()" value="Extend">
</div>
<div class="create pull-right">
<button id="btn-create" type="button" class="btn btn-primary"
onClick="openmodal()">open modal</button>
</div>
</div>
When user clicks on open modal button, a Bootstrap modal pops up. Now I am making that time-alert div visible continuously on 2 minutes interval by JavaScript. When I am on home page it's working fine but if model has already opened on the screen, the alert div is not showing above the modal. Can you please tell me how can I do this with JavaScript?

Try to put the HTML of your bootstrap modal before the "time alert" div. That way, the modal box should stay behind the time alert. You may want to add a z-index to the CSS of the time alert if need be.

In iOS Safari, how do you disable a html button element?

I've discovered that my iPad (iOS 7) doesn't disable <button> elements even when they have the disabled attribute on them. They are disabled on every other browser I've tried on my OS (Windows 7): FF, Chrome, Safari.
If I take the same html and simply replace the <button> and with an <input type="button">, the input becomes disabled as you'd expect. The reason I want to keep it as a <button> is because I want to put an img inside and that doesn't seem to work with an input. So how do you disable <button> on iOS Safari? Here is a jsfiddle that can reproduce this issue:
<div id="hero-1" class="hero">
<button disabled="" class="go-to-hero">
<div style="background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-oWvCrkzPjX9VBkJavc48RfBP1mSLPYMUIe8FpSaNzpgWWEL55A');background-position: -399px -42px;width: 13px;height: 15px">
</div>
</button>
</div>
<div id="hero-2" class="hero">
<input type="button" disabled="" class="go-to-hero">
<div style="background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-oWvCrkzPjX9VBkJavc48RfBP1mSLPYMUIe8FpSaNzpgWWEL55A');background-position: -399px -42px;width: 13px;height: 15px">
</div>
</input>
</div>
When I view this in my iPad, the first button is enabled and the second is disabled. I want them to both be disabled.