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);
Related
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;
});
I need to make a web page with a lot of content. In order to be more efficient when modifying this content, I decided to put it in separate files and then include these files, following this tutorial: https://www.w3schools.com/howto/howto_html_include.asp.
For example one of these files may contain some clickable links to book descriptions, which are modal boxes. So I need to get them in a loading script to get these clickable links and make them trigger some events. But it seems this loading script is called before JavaScript gets the included nodes, even if I add an event listener after reading some threads (I tried to run it at 'DOMContentLoaded' or 'load') : document.getElementById or document.getElementsByClassName still returns null so it fails to define an onclick function. Let me show an example code:
script.js
function includeHTML() { /* Some code replacing the div by some-content.html, which is : <a id="clickable">Hello</a> */}
var button = null
window.addEventListener('load', function() {
button = document.getElementById("clickable");
button.onclick = function() { alert('Hello'); }
});
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<p>Here is a trigger button : </p>
<div include-html="some-content.html"></div>
<script>includeHTML();</script>
</body>
</html>
On Firefox, this will fail on defining button.onclick as button is still null.
Any idea on how to fix it?
Not only should I be adding links, but also modal boxes. Here is a script code, more complete, for what my guess was:
script.js
var boxNames = ["bibliography", "about", "book1", "book2" ];
var boxes = null /* Contains the boxes to be displayed */
var trigs = null /* Contains the trigger buttons for each box */
var close = null /* Contains the close buttons for each box */
function setTrigger(i) {
trigs[i].onclick = function() { setBoxVisible(true, i); }
}
function setClose(i) {
trigs[i].onclick = function() { setBoxVisible(false, i); }
}
function load() {
boxes = new Array(4);
trigs = new Array(4);
close = new Array(4);
for(var i = 0; i < boxNames.length; i++) {
boxes[i]=document.getElementById(boxNames[i]+"-box");
trigs[i]=document.getElementById(boxNames[i]+"-trig");
close[i]=document.getElementById(boxNames[i]+"-close");
setTrigger(i); setClose(i);
}
}
window.onload = function() { load(); }
For the code of includeHTML(), you can have a look at the tutorial I shared, I copy/pasted.
I think this kind of function would be more elegant if dealing with such stuff, but I would need it to be launched once everything is loaded, as if I was running it manually.
Your code only added the event listener when the page was loading, likely before the link existed.
You need to delegate from the nearest static container.
Here in your code it is document
Give the link a class instead of ID and do
window.addEventListener('load', function(e) {
document.addEventListener('click', function(e) {
const tgt = e.target;
if (tgt.classList.contains("clickable")) {
e.preventDefault(); // because it is a link
alert('Hello');
}
});
});
<a class="clickable" href="#">Click</a>
Update after new code
You overwrite the trigs code
You can very simply extend my code so you do not need to loop
window.addEventListener('load', function(e) {
document.addEventListener('click', function(e) {
const tgt = e.target;
if (tgt.classList.contains("clickable")) {
e.preventDefault(); // because it is a link
alert('Hello');
}
else if (tgt.classList.contains("box")) {
e.preventDefault(); // because it is a link
const [id, what] = tgt.id.split("-")
console.log(id)
if (what === "trig") {
document.getElementById(id).classList.remove("hide")
}
else if (what === "close") {
document.getElementById(id).classList.add("hide"); // or tgt.closest("div").classList.add("hide")
}
}
});
});
.hide { display:none; }
<a class="clickable" href="#">Click</a>
<hr/>
<a class="box" id="bibliography-trig" href="#">Trigger Biblio</a>
<a class="box" id="about-trig" href="#">Trigger About</a>
<div id="bibliography" class="hide">Biblio
<a class="box" id="bibliography-close" href="#">Close</a>
</div>
<div id="about" class="hide">About
<a class="box" id="about-close" href="#">Close</a>
</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 am a little new to JS / jQuery and have done a hover function so when hover a link it shows a hidden DIV area but when I go to then hover over the div area shown of course it closes. I would like that if I then go into the content area won't close but stay open but then if leave that area would close?
JS:
$('.mini-cart').hover(
function () {
cartOpen();
},
function () {
cartClose();
}
);
var overlay = $("#cart_slide");
var cartContainer = $("#cart_over");
function cartOpen() {
cartContainer.fadeIn("slow");
overlay.addClass("overlay");
}
function cartClose() {
cartContainer.fadeOut("medium");
overlay.removeClass("overlay");
}
HTML:
<a class="mini-cart">hover link</a>
<div id="cart_over" style="display:none;">testing</div>
You could introduce the usage of a flag (isCartOpen) variable which is going to control the whether the DIV should be displayed or not.
See this working JSFiddle example and find below the related code:
var isCartOpen = false;
$('.mini-cart, #cart_over').hover(
function() {
isCartOpen = true;
cartOpen();
},
function() {
isCartOpen = false;
setTimeout(cartClose, 1000); // after 1 sec
}
);
var overlay = $("#cart_slide");
var cartContainer = $("#cart_over");
function cartOpen() {
cartContainer.fadeIn("slow");
overlay.addClass("overlay");
}
function cartClose() {
if (isCartOpen)
return;
cartContainer.fadeOut("medium");
overlay.removeClass("overlay");
}
Looks like you'll need to separate your open/close functions . Look at the following:
$('.mini-cart').hover(
cartOpen();
);
// You'll need to create a close button.. ex. <div class="close-button"></div>
$(".close-button").click(function(){
cartClose();
});
I am using this script from: http://pop.seaofclouds.com/
The problem is if you call the script multiple times it causes a cascading effect of a pop-out within a pop-out for as many times as you call the script.
I'm trying to figure out how to prevent it from executing when the popout has already been set. Here's the script:
//
// pop! for jQuery
// v0.2 requires jQuery v1.2 or later
//
// Licensed under the MIT:
// http://www.opensource.org/licenses/mit-license.php
//
// Copyright 2007,2008 SEAOFCLOUDS [http://seaofclouds.com]
//
(function($) {
$.pop = function(options){
// inject html wrapper
function initpops (){
$(".pop").each(function() {
var pop_classes = $(this).attr("class");
if ( $(this).find('.pop_menu').length) {
// do nothing
} else {
$(this).addClass("pop_menu");
$(this).wrap("<div class='"+pop_classes+"'></div>");
$(".pop_menu").attr("class", "pop_menu");
$(this).before(" \
<div class='pop_toggle'></div> \
");
}
});
}
initpops();
// assign reverse z-indexes to each pop
var totalpops = $(".pop").length + 100;
$(".pop").each(function(i) {
var popzindex = totalpops - i;
$(this).css({ zIndex: popzindex });
});
// close pops if user clicks outside of pop
activePop = null;
function closeInactivePop() {
$(".pop").each(function (i) {
if ($(this).hasClass('active') && i!=activePop) {
$(this).removeClass('active');
}
});
return false;
}
$(".pop").mouseover(function() { activePop = $(".pop").index(this); });
$(".pop").mouseout(function() { activePop = null; });
$("body").on("click", ".pop", function(){
closeInactivePop();
});
// toggle that pop
$("body").on("click", ".pop_toggle", function(){
$(this).parent(".pop").toggleClass("active");
});
}
})(jQuery);
now when i load this script on an ajax call the new pop-out menus work but the old ones do not react to the onclick event.
You shouldn't mess with the plugin. It works exactly like it should.
Better show us how you call this on elements that you already have.
Also I don't like this plugin. Better use something from JqueryUI
You can do such thing in much easier way.
[edit]
I tried your first code (the plugin) and it works correctly for me.
[edit]
OK. I get it. You call $.pop(); multiple times. You shouldn't! Calling $.pop(); will pin up the drop down menu to all elements that has class="pop". This is the reason why you have such funny stack.
Just use $.pop(); once.
Plugin doesn't give ability to connect NEW elements that was dynamically created on the page.
Removed pop from ajax call and just called this on success:
$(".pop").each(function() {
var pop_classes = $(this).attr("class");
if ( $(this).find('.pop_menu').length) {
// do nothing
} else {
$(this).addClass("pop_menu");
$(this).wrap("<div class='"+pop_classes+"'></div>");
$(".pop_menu").attr("class", "pop_menu");
$(this).before(" \
<div class='pop_toggle'></div> \
");
}
});
// assign reverse z-indexes to each pop
var totalpops = $(".pop").length + 100;
$(".pop").each(function(i) {
var popzindex = totalpops - i;
$(this).css({ zIndex: popzindex });
});
// close pops if user clicks outside of pop
activePop = null;
function closeInactivePop() {
$(".pop").each(function (i) {
if ($(this).hasClass('active') && i!=activePop) {
$(this).removeClass('active');
}
});
return false;
}
$(".pop").mouseover(function() { activePop = $(".pop").index(this); });
$(".pop").mouseout(function() { activePop = null; });