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);
});
Related
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.
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');
}
}
}
I'm familiar with jQuery, but not so much with Javascript. I have an accordion function in javascript in which I need the accordion panel to scroll to the top of the open panel on the click. Right now it scrolls to the bottom of the panel when opened. Here's the click function I'm working with...Thanks in advance!
myAPP.AccordionPanel = function ( headingEl, panelHolder, index ) {
// The AccordionPanel Class controls each of the collapsable panels spawned from Accordion Class
var self = this;
this.panelHolder = panelHolder;
this.index = index;
this.headingEl = headingEl; // this is the clickable heading
this.contentEl = headingEl.nextElementSibling;//headingEl.querySelector( this.panelHolder.panelSelectors['content'] );
this.isSelected = false;
this.setupAccessibility();
this.headingEl.addEventListener( "click", function () {
if (self.isSelected){
self.unselect(); // already open, presume user wants it closed
}
else {
self.panelHolder.resetPanels(); // close all panels
self.select(); // then open desired panel
}
return false;
});
return this;
};
You have access to the element you are clicking, you could call a function like below to scroll to it. if the thing you are clicking is not that, you will need a reference.
function liberated from here - http://itnewb.com/tutorial/Creating-the-Smooth-Scroll-Effect-with-JavaScript
function elmYPosition(eID) {
var elm = document.getElementById(eID);
var y = elm.offsetTop;
var node = elm;
while (node.offsetParent && node.offsetParent != document.body) {
node = node.offsetParent;
y += node.offsetTop;
} return y;
}
scrollTo(0, elmYPosition('idstring'));
//html
<div id="idstring">scroll to me</div>
I'm working on a website which have a separate file for the FAQ, which I import above the footer on all pages. The faq is displayed using accordion tabs with the following code:
$(document).ready(function () {
var expanded = false;
var collapsed = true;
$(".expanderHead").click(function () {
if (expanded == true) {
expanded = false;
collapsed = true;
} else {
expanded = true;
collapsed = false;
}
var divid = $(this).attr('tabdata');
if (expanded == true) {
// $(this).find('.expanderSign').html("-");
$("#"+divid).slideToggle();
}
$(this).find('.expanderSign').toggleClass("open");
$(this).find('.expanderSign').toggleClass("closetab");
if (collapsed == true) {
// $(this).find('.expanderSign').html("+");
$("#"+divid).slideToggle();
}
});
});
It works fine on all pages, but on a page that is using an other script for the cart, the first 2 tabs in the accordion are not working:
Check if the other scripts of your page have some errors. Sometimes when a javascript has an error it just stops the others methods
I have a scenario in which there is a master and seperate detail grid. Double clicking on the master should open an edit form. Single click should change te selected row and rebind the detail grid.
The master grid has the following client events:
var hasChanges, inputs, dropdowns, editedRow;
var isDoubleClick = false;
var clickHandler = null;
var ClickedDataKey = null;
function RowClickHoofdscenario(sender, args) {
ClickedDataKey = args._dataKeyValues.Id;
isDoubleClick = false;
if (clickHandler) {
window.clearTimeout(clickHandler);
clickHandler = null;
}
clickHandler = window.setTimeout(ActualClick(args), 100);
}
function RowDblClickHoofdscenario(sender, args) {
isDoubleClick = true;
if (clickHandler) {
window.clearTimeout(clickHandler);
clickHandler = null;
}
clickHandler = window.setTimeout(ActualClick(args), 100);
}
function ActualClick(eventArgs) {
if (isDoubleClick) {
if (editedRow && hasChanges) {
hasChanges = false;
if (confirm("Wijzigingen opslaan?")) {
$find("<%= rgHoofdscenarios.ClientID %>").get_masterTableView().updateItem(editedRow);
}
}
else {
editedRow = eventArgs.get_itemIndexHierarchical();
$find("<%= rgHoofdscenarios.ClientID %>").get_masterTableView().editItem(editedRow);
}
}
else {
** implement refresh here ** (added this line in StackOverflow ;) )
}
}
How do I implement the selected row change? I have tried an ajax on OnRowSelected that does a server Rebind of the detail grid. But it shows the detail content of the previous selection.