Can anyone tell me why the second function is not working? The first function works fine, but the subsequent click outside of the submenu does not work.
//reveal submenu, dropdown when browser is < 613px
function revealSubmenu_web() {
var sites = document.getElementById("sites");
var container = document.getElementById("menu_container");
if (window.innerWidth > 613) {
sites.classList.toggle("show_sub");
} else {
sites.classList.toggle("show_sub");
container.classList.toggle("container_height");
}
}
//close submenu when clicked outside
window.onclick = function(e) {
if (!e.target.matches('.submenu_web')) {
var myDropdown = document.getElementById("sites");
if (myDropdown.classList.contains('show_sub')) {
myDropdown.classList.remove('show_sub');
}
}
}
Related
Hi Iam using here a jquery tab
The issue is on mobile view. When I click on accordion, screen scrolls to the end of the page or just went to the bottom. I want to fix this so that when the user clicks on the accordion, screen will not scroll to the bottom of the page and the user can see the tab content from starting.
I hope I make sense.
var labels = document.querySelectorAll(".accordion-item__label");
var tabs = document.querySelectorAll(".accordion-tab");
function toggleShow() {
var target = this;
var item = target.classList.contains("accordion-tab")
? target
: target.parentElement;
var group = item.dataset.actabGroup;
var id = item.dataset.actabId;
tabs.forEach(function(tab) {
if (tab.dataset.actabGroup === group) {
if (tab.dataset.actabId === id) {
tab.classList.add("accordion-active");
} else {
tab.classList.remove("accordion-active");
}
}
});
labels.forEach(function(label) {
var tabItem = label.parentElement;
if (tabItem.dataset.actabGroup === group) {
if (tabItem.dataset.actabId === id) {
tabItem.classList.add("accordion-active");
} else {
tabItem.classList.remove("accordion-active");
}
}
});
}
labels.forEach(function(label) {
label.addEventListener("click", toggleShow);
});
tabs.forEach(function(tab) {
tab.addEventListener("click", toggleShow);
});
I'm trying to close my Hamburger menu using JS but it's not working, can anyone let me know what's wrong with this?
window.onload = function() {
var buttons = $('#buttons01');
buttons.each( function () {
var t = $(this);
t.find('li').addClass('x');
t.prepend('<li class="toggle"><i class="fa fa-bars"></i></li>');
var toggle = t.find('.toggle');
toggle.on("click", function() {
if (t.hasClass('active')) {
t.removeClass('active');
} else {
t.addClass('active');
}
});
});
}
// close hamburger menu after click a
$('toggle').on("click", function(){
$('#toggle').click();
});
I was able to get an idea on how to close a modal window when clicking outside, but I am having issues to have it working when trying to have links inside the modal window.
I created a small code in Codepen to illustrate my point:
https://codepen.io/neotriz/pen/MRwLem
window.addEventListener('load', setup);
const get = document.getElementById.bind(document);
const query = document.querySelector.bind(document);
function setup() {
let modalRoot = get('modal-root');
let button = get('modal-opener');
let modal = query('.modal');
modalRoot.addEventListener('click', rootClick);
button.addEventListener('click', openModal);
modal.addEventListener('click', modalClick);
function rootClick() {
modalRoot.classList.remove('visible');
}
function openModal() {
modalRoot.classList.add('visible');
}
function modalClick(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
}
remove e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();from modalClick . Thats the reason you are not able to click on inside links.
and modify the function rootClick
function rootClick(event) {
if (!(modal == event.target || modal.contains(event.target))) {
modalRoot.classList.remove('visible');
}
}
Codepen : https://codepen.io/anon/pen/ZZGwRr
We are working on Office UI Fabric JS 1.2.0. Issue is with context menu having submenu items. When you open Second level, and then click anywhere on menu, first level menu was closing and second menu was re-aligning to Top-Left of page. We couldn't find the solution in next version of fabric also.
The issue gets resolved after overriding two methods from fabric.js of ContextualHost as follows:
fabric.ContextualHost.prototype.disposeModal = function () {
if (fabric.ContextualHost.hosts.length > 0) {
window.removeEventListener("resize", this._resizeAction, false);
document.removeEventListener("click", this._dismissAction, true);
document.removeEventListener("keyup", this._handleKeyUpDismiss, true);
this._container.parentNode.removeChild(this._container);
if (this._disposalCallback) {
this._disposalCallback();
}
// Dispose of all ContextualHosts
var index = fabric.ContextualHost.hosts.indexOf(this);
fabric.ContextualHost.hosts.splice(index, 1);
//Following is original code removed
//var i = ContextualHost.hosts.length;
//while (i--) {
// ContextualHost.hosts[i].disposeModal();
// ContextualHost.hosts.splice(i, 1);
//}
}
};
fabric.ContextualHost.prototype._dismissAction = function (e) {
var i = fabric.ContextualHost.hosts.length;
while (i--) { //New added
var currentHost = fabric.ContextualHost.hosts[i];
if (!currentHost._container.contains(e.target) && e.target !== this._container) {
if (currentHost._children !== undefined) {
var isChild_1 = false;
currentHost._children.map(function (child) {
if (child !== undefined) {
isChild_1 = child.contains(e.target);
}
});
if (!isChild_1) {
currentHost.disposeModal();
}
}
else {
currentHost.disposeModal();
}
}
}
};
Hope this question + answer helps someone looking to override fabric.js original code.
FAQ fiddle
JS code:
var $ = function (id) {
return document.getElementById(id);
};
var faqs = $("faqs");
var h2Elements = faqs.getElementsByTagName("h2");
var h2Node;
for (var i = 0; i < h2Elements.length; i++) {
h2Node = h2Elements[i];
}
$("first_link").focus();
$(document).ready(function () {
$("h2").click(function () {
if (h2.hasAttribute("class")) {
h2.removeAttribute("class");
} else {
h2.setAttribute("class", "minus");
}
if (h2.nextElementSibling.hasAttribute("class")) {
h2.nextElementSibling.removeAttribute("class");
} else {
h2.nextElementSibling.hide();
}
});
});
Upon clicking a question, that answer should show. When I click on a different question, all other answers should retract (be hidden). I tweaked it a few times and either the code wouldn't hide anything (all answers still open) or all answers wouldn't open at all.
Starting from $(document).ready(function () {, how do I get the question to open one at a time when clicked (close others)?
Any input would be much appreciated!
create a function to hide all other div's having class name open, like:
function hideOthers() {
var othersDivEle = document.getElementsByClassName("open");
for(var d = 0; d < othersDivEle.length; d++) {
othersDivEle[d].removeAttribute("class");
}
}
and change your code in :
...
} else {
hideOthers();
h2.nextElementSibling.setAttribute("class", "open");
}
to
..
} else {
hideOthers();
h2.nextElementSibling.setAttribute("class", "open");
}
Updated jsFiddle