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
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 have looked at other examples on stack overflow, trying to add these carousel controls and I am able to use one of the carousel controls on my page, but then the other set of controls will not work.
This is what I currently have.
$(function() {
$('#keynoteSpeakersCarouselPlayButton').click(function() {
$(this).closest('.carousel').carousel('cycle');
});
$('#keynoteSpeakersCarouselPauseButton').click(function() {
$(this).closest('.carousel').carousel('pause');
});
$('#sponsoredStreamsCarouselPlayButton').click(function() {
$(this).closest('.carousel').carousel('cycle');
});
$('#sponsoredStreamsCarouselPauseButton').click(function() {
$(this).closest('.carousel').carousel('pause');
});
});
I would think the solution would not work with jQuery
From my understanding of the bootstrap carousel a method will be ignored if it is in the middle of a transition. You need to add an event listener and do your pause inside of that. I would set a flag, check for it inside of the event listener and then reset the flag. Also I would add IDs to each carousel to make it more straight forward to select. Something like what follows:
let flagPause = false;
let flagResume = false;
const carousel1 = document.getElementById('carousel1id');
carousel1.addEventListener('slid.bs.carousel', function() {
if (flagPause == true) {
carousel1.carousel('pause');
flagPause = false;
}
if (flagResume == true) {
carousel1.carousel('cycle');
flagResume = false;
}
});
$('#keynoteSpeakersCarouselPlayButton').click(function() {
flagResume = true;
});
$('#keynoteSpeakersCarouselPauseButton').click(function() {
flagPause = true;
});
So I'm working on a sharepoint site.. I'm completely new to javascript. I have been using a jquery I found to enable an expand/collapse feature that is tied to a heading type. When a heading is clicked, all of the paragraph content beneath the heading expands or collapses.
It works well, the only problem is that when the page loads, all of the content is expanded by default, and then collapses a moment later after the page finishes loading. It looks sloppy when loading so I want to have everything collapsed by default.
I also do not need the function that disables expand/collapse while in edit mode or a wikipage, if that makes this issue any simpler.
Here is the script I'm using:
<script language="javascript" type="text/javascript"
src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
var inEditMode = Utils.checkPageInEditMode();
// Prevent the collapsing of <h2> blocks when in SharePoint's [Edit Mode]
if (!inEditMode) {
UI.collapseContentHeaders();
UI.toggleContentHeaders();
}
});
var UI = {
collapseContentHeaders: function () {
$('#DeltaPlaceHolderMain h2').each(function (index, value) {
// Collapses all <h2> blocks
{
$(this).toggleClass('expand').nextUntil('h2').slideToggle(100);
}
});
},
toggleContentHeaders: function () {
// Toggles the accordion behavior for <h2> regions onClick
$('#DeltaPlaceHolderMain h2').click(function () {
$(this).toggleClass('expand').nextUntil('h2').slideToggle(100);
});
}
}
var Utils = {
checkPageInEditMode: function () {
var pageEditMode = null;
var wikiPageEditMode = null;
// Edit check for Wiki Pages
if (document.forms[MSOWebPartPageFormName]._wikiPageMode) {
wikiPageEditMode =
document.forms[MSOWebPartPageFormName]._wikiPageMode.value;
}
// Edit check for all other pages
if (document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode) {
pageEditMode =
document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;
}
// Return the either/or if one of the page types is flagged as in Edit Mode
if (!pageEditMode && !wikiPageEditMode) {
return false;
}
return pageEditMode == "1" || wikiPageEditMode == "Edit";
}
}
</script>
Just delete if statement
if (index > 0) {
So i has to be olny $(this).toggleClass('expand').nextUntil('h2').slideToggle(100);
So because my function uses toggle() to hide and show a panel, Its really hard to actually tell when I should set a cookie and how I would integrate it.
Code:
/ Collapse ibox function
$('.collapse-link:not(.binded)').addClass("binded").click( function() {
var ibox = $(this).closest('div.ibox');
var button = $(this).find('i');
var content = ibox.find('div.ibox-content');
if($.cookie("chat") !== 'show'){
content.slideUp(200);
$.cookie("chat", "hide");
}
button.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
ibox.toggleClass('').toggleClass('border-bottom');
setTimeout(function () {
ibox.resize();
ibox.find('[id^=map-]').resize();
}, 50);
});
I have no idea how to implement the $.cookie("chat") section.
I am loading a page into a modal in some other page.
The problem I am facing is that on change and on click function on drop-down list of the page which I am trying to load in modal is not working.
This is the function I am calling in main page.
$('.MyModal').click(function () {
// $('#formContainer').hide();
var contentId = $(this).attr('val_id');
var submit_type = 'edit_custom_content';
$('.modal-body').load('/abc/xyz/create_page?contentId=' + contentId+'&submit_type=edit_content', function (result) {
$('#MyModal').modal({show: true});
});
});
Modal structure is:
<td><a href="#MyModal" data-toggle="modal"
class="MyModal" val_id='<%=contents.id%>'>Edit</a></td>
I am loading create_page on this Modal.
The problem is that Modal is able to load that page succesfully, but drop-down changes are not being reflected.
Code is:
$('#select_contenttype').on('change', function () {
document.getElementById("select_actiontype").required = false;
document.getElementById("select_actiontyp").required = false;
var _val = $(this).val();
if (_val == "custom_feed") {
$('#actiontype_event').hide();
$('#actiontype_custom').show();
$('#div_imageurl').show();
$('#div_buttonurl').show();
$('#div_buttontext').show();
$('#div_contenttext').show();
$('#div_backgroundspread').show();
$('#div_buttonpicker').show();
$('#div_uploadimage').show();
$('#div_sidetable').show();
$("#content_form_submit").css({ 'margin-top': '' });
$('[name=actiontype]').val("");
document.getElementById("select_actiontype").required = true;
document.getElementById("select_imageurl").required = true;
document.getElementById("select_buttonurl").required = true;
document.getElementById("select_buttontext").required = true;
document.getElementById("select_contenttext").required = true;
document.getElementById("select_backgroundspread").required = true;
document.getElementById("select_buttonpicker").required = true;
document.getElementById("upload_image").required = true;
}
else {
$('#actiontype_custom').hide();
$('#div_imageurl').hide();
$('#div_buttonurl').hide();
$('#div_buttontext').hide();
$('#div_contenttext').hide();
$('#div_backgroundspread').hide();
$('#div_buttonpicker').hide();
$('#div_sidetable').hide();
$('#div_uploadimage').hide();
$('#actiontype_event').show();
$("#content_form_submit").css({ 'margin-top': '-370px' });
$('[name=actiontyp]').val("");
document.getElementById("select_actiontyp").required = true;
document.getElementById("select_imageurl").required = false;
document.getElementById("select_buttonurl").required = false;
document.getElementById("select_buttontext").required = false;
document.getElementById("select_contenttext").required = false;
document.getElementById("select_backgroundspread").required = false;
document.getElementById("select_buttonpicker").required = false;
document.getElementById("upload_image").required = false;
}
});
The Modal is only loading according to one condition, it is not able to change on the basis of change in drop-down menu.
I think I am missing something very silly, but not able to figure out.