We Keep Coding

Advanced carousel is invisible and the dropdown button is gone

WP/Plug-in/Theme updates broke our site's "select a campus" button. It is a button that drops down a previously hidden carousel of campus images that scroll horizontally.
Clicking one redirects you. It is in the custom js of the theme, so that it is a sitewide header. The carousel is called "Advanced Carousel" built through the "Ultimate Addons for WPBakery"
I'm sorry, I have next to no web experience, and I was handed this website after someone else broke it. I am trying my best to learn as much as possible. Everything else now works but this part.
This is for a newly updated WP site, which hadn't been updated in years. When WP itself was updated, it broke all the sites and that's as far as the previous people got. I updated the plug-ins and themes and that fixed most the issues other than this carousel.
Here is the custom JS that is a part of the theme (should apply to every site's header I beleive).
jQuery(document).ready(function($){
$('.select-campus a').on('click', function(e) {
e.preventDefault();
$(this).toggleClass('active');
$('#select-a-campus').toggleClass('active');
});
});
(function (n) { n.fn.sticky = function (t) { var i = n.extend({}, {
topSpacing: 0, bottomSpacing: 0, debug: !1 }, t), r = function (t, r, u) { var o = u.offset(), e = n(window).scrollTop(), f = n(document).outerHeight() - i.bottomSpacing - i.topSpacing - t.outerHeight(); f <= 0 || t.height() <= 0 || (e > o.top - i.topSpacing && e < f ? (t.css("position") != "fixed" && (t.trigger("sticky-start"), t.css({ position: "fixed", top: i.topSpacing })), t.trigger("sticky-bottom-unreached")) : e > o.top - i.topSpacing && e >= f ? t.css("position") == "fixed" ? (t.trigger("sticky-bottom-reached"), t.css({ position: "absolute", top: f - r.offset().top + i.topSpacing + "px" })) : t.css("position") == "absolute" ? t.css({ top: f - r.offset().top + i.topSpacing + "px" }) : f > o.top && t.css({ position: "absolute", top: f - r.offset().top + i.topSpacing + "px" }) : ((t.css("position") == "fixed" || t.css("position") == "absolute") && t.trigger("sticky-end"), t.css({ position: "", top: "" }))) }; return this.each(function () { var t = n(this), u = t.offsetParent(), i; t.width(t.width()); i = n("<div class='sticky-holder' style='visibility: hidden;height:0;display:block'><\/div>").insertBefore(t); r(t, u, i); n(window).scroll(function () { r(t, u, i) }) }) } })(jQuery);
jQuery(document).ready(function ($) {
$('.vc_custom_1489943500023, .vc_custom_1489936456809').sticky( {topSpacing: 20,bottomSpacing:$("#page-section-40").outerHeight(true)} );
});
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
Please tell me if I can do anything else to help understanding. Sorry I don't know more. Any help is appreciated.
No error messages, however if you hover the mouse within a handful of pixels below the header, you are able to click some of the hidden campuses.
EDIT 1: here is the link to the html https://github.com/dtnieboer/sh-html/releases/tag/1.0
EDIT 2: Hey guys! An update- yes this job would be way too hard with my skill level. Going to get rid of the old code and rebuild a more simple button for now. Thanks for the help!

Caught on a persistent issue with JS, nav bar active class not switching properly

I've been using this code snippet to add in a vertical dot nav to a one page site, which smooth scrolls to a section when one of the links are clicked, and keeps a highlight on the active section. I did a lot of tweaking to the css to make it look how I wanted, and then replaced the sections.
So this is my code in a jsfiddle, and the main issue I am having is the active class not changing properly, and making the side nav bar mess up. I've posted the JS below.
$(document).ready(function(){
$('.awesome-tooltip').tooltip({
placement: 'left'
});
$(window).bind('scroll',function(e){
dotnavigation();
});
function dotnavigation(){
var numSections = $('section').length;
$('#side-nav li a').removeClass('active').parent('li').removeClass('active');
$('section').each(function(i,item){
var ele = $(item), nextTop;
console.log(ele.next().html());
if (typeof ele.next().offset() != "undefined") {
nextTop = ele.next().offset().top;
}
else {
nextTop = $(document).height();
}
if (ele.offset() !== null) {
thisTop = ele.offset().top - ((nextTop - ele.offset().top) / numSections);
}
else {
thisTop = 0;
}
var docTop = $(document).scrollTop();
if(docTop >= thisTop && (docTop < nextTop)){
$('#side-nav li').eq(i).addClass('active');
}
});
}
/* get clicks working */
$('#side-nav li').click(function(){
var id = $(this).find('a').attr("href"),
posi,
ele,
padding = 0;
ele = $(id);
posi = ($(ele).offset()||0).top - padding;
$('html, body').animate({scrollTop:posi}, 'slow');
return false;
});
It works fairly well on the jsfiddle, but I am putting this code into squarespace, and on there it ends up like this where all of the buttons highlight when you try to change active classes.
I have tried to isolate the bug by going through the html, css, and the js, but I don't have enough knowledge of JS to be able to edit the script to fix it.
I would really appreciate any help. Thanks in advance.
EDIT: Link to broken squarespace

In the code snippet, the sample page is designed with continuous sections, so the method ele.next() will return next sections. In your squarespace page, the sections is not continuous, so method ele.next() will return empty and the code is not working.
Your could try to modify function dotnavigation like this
function dotnavigation(){
var numSections = $('section').length;
$('#side-nav li a').removeClass('active').parent('li').removeClass('active');
var sections = $('section');
var i = 0;
for (i = 0; i < sections.length; i++) {
var ele = $(sections[i]), nextTop;
//console.log(ele.next().html());
if (i < sections.length - 1) {
nextTop = $(sections[i + 1]).offset().top;
}
else {
nextTop = $(document).height();
}
if (ele.offset() !== null) {
thisTop = ele.offset().top - ((nextTop - ele.offset().top) / numSections);
}
else {
thisTop = 0;
}
var docTop = $(document).scrollTop();
console.log(thisTop);
if(docTop >= thisTop && (docTop < nextTop)){
$('#side-nav li').eq(i).addClass('active');
}
}
}
I've updated your code sample here.

JS function that scrolls an element into view taking into account possible scrollable and positioned parent

I was looking for a function that would scroll a given element into view with some smart behavior:
if an element is descendant of a scrollable element - that ancestor is scrolled rather than body.
if an element is descendant of a positioned element - body won't be scrolled.
I didn't find any suitable function, so I made one and wanted some expert opinion on it. Please check the plunkr http://plnkr.co/edit/DNGWLh5cH1Cr1coZbwpa?p=preview . There are problems with animated scroll in FF, so please use Chrome to check the logic.
To illustrate, what I'm looking for - here is the first update that came to mind - if we reached an element that can scroll, lets call it SC (Scroll Parent), we should not only scroll SC to make the target visible inside it, but also recursively scroll SC itself into view, since it may outside of the currently visible are of the page. Here is the update plunkr http://plnkr.co/edit/DNGWLh5cH1Cr1coZbwpa?p=preview (also applied fix for FF scrolling problem).
And here is the code of the function
function scrollTo(target){
//Position delta is used for scrollable elements other than BODY
var combinedPositionDelta = 0;
var previousParent = $(target);
var parent = $(target).parent();
while(parent){
combinedPositionDelta += previousParent.position().top - parent.position().top;
//If we reached body
if(parent.prop("tagName").toUpperCase() == "BODY"){
scrollBody(target.offset().top);
break;
}
//if we reached an element that can scroll
if(parent[0].scrollHeight > parent.outerHeight()){
scrollElementByDelta(parent,combinedPositionDelta);
//Recursively scroll parent into view, since it itself might not be visible
scrollTo(parent);
break;
}
//if we reached a apositioned element - break
if(parent.css('position').toUpperCase() != 'STATIC'){
console.log("Stopping due to positioned parent " + parent[0].outerHTML);
break;
}
previousParent = parent;
parent = parent.parent();
}
}
var offsetSkin = 20;
function scrollElementByDelta(element,offsetDelta){
$(element).animate({
scrollTop: element.scrollTop() + (offsetDelta - offsetSkin)
}, 1000);
}
function scrollBody(offset){
$('body,html').animate({
scrollTop: offset - offsetSkin
}, 1000);
}

Well I'm Using this one which works very well for me:
function scrollIntoView (element, alignTop) {
var document = element.ownerDocument;
var origin = element, originRect = origin.getBoundingClientRect();
var hasScroll = false;
var documentScroll = this.getDocumentScrollElement(document);
while (element) {
if (element == document.body) {
element = documentScroll;
} else {
element = element.parentNode;
}
if (element) {
var hasScrollbar = (!element.clientHeight) ? false : element.scrollHeight > element.clientHeight;
if (!hasScrollbar) {
if (element == documentScroll) {
element = null;
}
continue;
}
var rects;
if (element == documentScroll) {
rects = {
left : 0,
top : 0
};
} else {
rects = element.getBoundingClientRect();
}
// check that elementRect is in rects
var deltaLeft = originRect.left - (rects.left + (parseInt(element.style.borderLeftWidth, 10) | 0));
var deltaRight = originRect.right
- (rects.left + element.clientWidth + (parseInt(element.style.borderLeftWidth, 10) | 0));
var deltaTop = originRect.top - (rects.top + (parseInt(element.style.borderTopWidth, 10) | 0));
var deltaBottom = originRect.bottom
- (rects.top + element.clientHeight + (parseInt(element.style.borderTopWidth, 10) | 0));
// adjust display depending on deltas
if (deltaLeft < 0) {
element.scrollLeft += deltaLeft;
} else if (deltaRight > 0) {
element.scrollLeft += deltaRight;
}
if (alignTop === true && !hasScroll) {
element.scrollTop += deltaTop;
} else if (alignTop === false && !hasScroll) {
element.scrollTop += deltaBottom;
} else {
if (deltaTop < 0) {
element.scrollTop += deltaTop;
} else if (deltaBottom > 0) {
element.scrollTop += deltaBottom;
}
}
if (element == documentScroll) {
element = null;
} else {
// readjust element position after scrolls, and check if vertical scroll has changed.
// this is required to perform only one alignment
var nextRect = origin.getBoundingClientRect();
if (nextRect.top != originRect.top) {
hasScroll = true;
}
originRect = nextRect;
}
}
}
}
I hope this helps.

If you do not mind venturing into jQuery, the scrollTo plugin is the best bet. It handles most needs and gives a very refined smooth trasition.
Hope it helps.

z-index sorting in javascript

trying to get this z-sorting to work proper.
What i want to achieve is some kind of looping/carousel. When a ".area" is getting clicked it should be placed at the very bottom z-wize. And when all elements have been set to bottom they should start to be placed up again.Dont need to be animated. Just need help with the logic.
Really like an carousel but z-wise. Any ideas? http://jsfiddle.net/EjpSu/8/
var z = 1;
$(".area").each(function(e) {
z++;
$(this).css("z-index",z)
});
$(".area").click(function(){
$(this).css("z-index",z--)
})

Try subtracting the total # of area divs from z-index (updated to keep z-index non-negative):
var n = $(".area").length;
$(".area").click(function(){
var z = $(this).css("z-index") - n;
if(z === 0) {
reset();
} else {
$(this).css("z-index", z);
}
});
function reset() {
var z = n;
$(".area").each(function(e) {
$(this).css("z-index",z);
z++;
});
};
reset();
Demo: http://jsfiddle.net/verashn/mTKRL/

JQuery menu float and display submenus on page

This is my first time using JQuery in any of my projects.
I have implemented the superfish menu.
On some of my pages I have a horizontal scroll. I would like to make the menu float on the center of the page as the page is scrolled.
Also I need to make sure that the submenu on the far right hand side of the menu does not open up off the page. When I hover on the right most element it opens up half off the page.
Any ideas on how to fix these two things?
I'm perfectly willing to use a different Jquery menu if there is a better one that has these features built in...
Thanks!
javascrupt call in my page:
$(document).ready(function () {
$("ul.sf-menu").supersubs({
minWidth: 12, // minimum width of sub-menus in em units
maxWidth: 27, // maximum width of sub-menus in em units
extraWidth: 1 // extra width can ensure lines don't sometimes turn over
// due to slight rounding differences and font-family
}).superfish({ animation: { opacity: 'show', height: 'show' }, autoArrows: false }); // call supersubs first, then superfish, so that subs are
// not display:none when measuring. Call before initialising
// containing tabs for same reason.
I can post any more code that is needed, but there is quite a lot of code in the superfish files so i'm not sure what I should post.
I found this script and it works well, however when I scroll right the horizonal menu starts to stack so the menu items are side by side rather then vertical. I want to modify this to keep the menu horizonal...
<script type="text/javascript"><!--
var floatingMenuId = 'floatdiv';
var floatingMenu =
{
targetX: -1000,
targetY: 10,
hasInner: typeof (window.innerWidth) == 'number',
hasElement: document.documentElement
&& document.documentElement.clientWidth,
menu:
document.getElementById
? document.getElementById(floatingMenuId)
: document.all
? document.all[floatingMenuId]
: document.layers[floatingMenuId]
};
floatingMenu.move = function () {
if (document.layers) {
floatingMenu.menu.left = floatingMenu.nextX;
floatingMenu.menu.top = floatingMenu.nextY;
}
else {
floatingMenu.menu.style.left = floatingMenu.nextX + 'px';
floatingMenu.menu.style.top = floatingMenu.nextY + 'px';
}
}
floatingMenu.computeShifts = function () {
var de = document.documentElement;
floatingMenu.shiftX =
floatingMenu.hasInner
? pageXOffset
: floatingMenu.hasElement
? de.scrollLeft
: document.body.scrollLeft;
if (floatingMenu.targetX < 0) {
if (floatingMenu.hasElement && floatingMenu.hasInner) {
// Handle Opera 8 problems
floatingMenu.shiftX +=
de.clientWidth > window.innerWidth
? window.innerWidth
: de.clientWidth
}
else {
floatingMenu.shiftX +=
floatingMenu.hasElement
? de.clientWidth
: floatingMenu.hasInner
? window.innerWidth
: document.body.clientWidth;
}
}
floatingMenu.shiftY =
floatingMenu.hasInner
? pageYOffset
: floatingMenu.hasElement
? de.scrollTop
: document.body.scrollTop;
if (floatingMenu.targetY < 0) {
if (floatingMenu.hasElement && floatingMenu.hasInner) {
// Handle Opera 8 problems
floatingMenu.shiftY +=
de.clientHeight > window.innerHeight
? window.innerHeight
: de.clientHeight
}
else {
floatingMenu.shiftY +=
floatingMenu.hasElement
? document.documentElement.clientHeight
: floatingMenu.hasInner
? window.innerHeight
: document.body.clientHeight;
}
}
}
floatingMenu.doFloat = function () {
var stepX, stepY;
floatingMenu.computeShifts();
stepX = (floatingMenu.shiftX +
floatingMenu.targetX - floatingMenu.nextX) * .07;
if (Math.abs(stepX) < .5) {
stepX = floatingMenu.shiftX +
floatingMenu.targetX - floatingMenu.nextX;
}
stepY = (floatingMenu.shiftY +
floatingMenu.targetY - floatingMenu.nextY) * .07;
if (Math.abs(stepY) < .5) {
stepY = floatingMenu.shiftY +
floatingMenu.targetY - floatingMenu.nextY;
}
if (Math.abs(stepX) > 0 ||
Math.abs(stepY) > 0) {
floatingMenu.nextX += stepX;
floatingMenu.nextY += stepY;
floatingMenu.move();
}
setTimeout('floatingMenu.doFloat()', 20);
};
// addEvent designed by Aaron Moore
floatingMenu.addEvent = function (element, listener, handler) {
if (typeof element[listener] != 'function' ||
typeof element[listener + '_num'] == 'undefined') {
element[listener + '_num'] = 0;
if (typeof element[listener] == 'function') {
element[listener + 0] = element[listener];
element[listener + '_num']++;
}
element[listener] = function (e) {
var r = true;
e = (e) ? e : window.event;
for (var i = element[listener + '_num'] - 1; i >= 0; i--) {
if (element[listener + i](e) == false)
r = false;
}
return r;
}
}
//if handler is not already stored, assign it
for (var i = 0; i < element[listener + '_num']; i++)
if (element[listener + i] == handler)
return;
element[listener + element[listener + '_num']] = handler;
element[listener + '_num']++;
};
floatingMenu.init = function () {
floatingMenu.initSecondary();
floatingMenu.doFloat();
};
// Some browsers init scrollbars only after
// full document load.
floatingMenu.initSecondary = function () {
floatingMenu.computeShifts();
floatingMenu.nextX = floatingMenu.shiftX +
floatingMenu.targetX;
floatingMenu.nextY = floatingMenu.shiftY +
floatingMenu.targetY;
floatingMenu.move();
}
if (document.layers)
floatingMenu.addEvent(window, 'onload', floatingMenu.init);
else {
floatingMenu.init();
floatingMenu.addEvent(window, 'onload',
floatingMenu.initSecondary);
}
</script>

I'm not sure on how you mean centering, but if you mean horizontally centered:
Could you separate the main page (that horizontally overflows) and the menu into separate div's? e.g.
<div id="menu"><center><ul class="sf-menu">...</ul></center></div>
<div id="mainpage" style="overflow:auto;">Contents goes here</div>
(the <center> tag might have to be <div style="width:X;margin:0 auto;"> depending on how superfish works)
On the menu going over the page, sorry I'll have to defer to someone more knowable to answer that.