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!

How to autogrow a textbox that has a variable font size

I am coding a website that lets you test typefaces and just like google fonts, the textarea in which you type should autogrow, when the user types in more text.
I tried this plugin by jaz303 and it works fine, if the font-size stays the same.
https://github.com/jaz303/jquery-grab-bag/blob/master/javascripts/jquery.autogrow-textarea.js
(function($) {
/**
* Auto-growing textareas; technique ripped from Facebook
*
*
* http://github.com/jaz303/jquery-grab-bag/tree/master/javascripts/jquery.autogrow-textarea.js
*/
$.fn.autogrow = function(options) {
return this.filter('textarea').each(function() {
var self = this;
var $self = $(self);
var minHeight = $self.height();
var noFlickerPad = $self.hasClass('autogrow-short') ? 0 : parseInt($self.css('lineHeight')) || 0;
var settings = $.extend({
preGrowCallback: null,
postGrowCallback: null
}, options);
var shadow = $('<div></div>').css({
position: 'absolute',
top: -10000,
left: -10000,
width: $self.width(),
fontSize: $self.css('fontSize'),
fontFamily: $self.css('fontFamily'),
fontWeight: $self.css('fontWeight'),
lineHeight: $self.css('lineHeight'),
resize: 'none',
'word-wrap': 'break-word'
}).appendTo(document.body);
var update = function(event) {
var times = function(string, number) {
for (var i = 0, r = ''; i < number; i++) r += string;
return r;
};
var val = self.value.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/\n$/, '<br/> ')
.replace(/\n/g, '<br/>')
.replace(/ {2,}/g, function(space) {
return times(' ', space.length - 1) + ' '
});
// Did enter get pressed? Resize in this keydown event so that the flicker doesn't occur.
if (event && event.data && event.data.event === 'keydown' && event.keyCode === 13) {
val += '<br />';
}
shadow.css('width', $self.width());
shadow.html(val + (noFlickerPad === 0 ? '...' : '')); // Append '...' to resize pre-emptively.
var newHeight = Math.max(shadow.height() + noFlickerPad, minHeight);
if (settings.preGrowCallback != null) {
newHeight = settings.preGrowCallback($self, shadow, newHeight, minHeight);
}
$self.height(newHeight);
if (settings.postGrowCallback != null) {
settings.postGrowCallback($self);
}
}
$self.change(update).keyup(update).keydown({
event: 'keydown'
}, update);
$(window).resize(update);
update();
});
};
However, I need the possibility for the user to change the font-size while testing and for some reason the autogrow doesn’t work anymore, as soon as I change the size.
Here is my Test jsFiddle:
http://jsfiddle.net/fquk6v3o/2/

The solution is to relaunch $("#autoGrowTextArea").autogrow(); when the slider value changes...
Sample code for doing this :
$("input[type='range']").change( function() {
$("#autoGrowTextArea").height("100px");
$("#autoGrowTextArea").autogrow();
});
New JSfiddle here : http://jsfiddle.net/newzy08/fquk6v3o/3/

You can achieve this with css as well using height and width in em units. Em means relative to the font-size of the element (2em means 2 times the size of the current font) w3schools.com/cssref/css_units.asp
I don't know if this works well together with the autogrowth plugin though.
$(document).ready(function(){
$("#font-small").click(function(){
$(".ta").css("font-size", "12px");
});
$("#font-big").click(function(){
$(".ta").css("font-size", "24px");
});
$("#font-huge").click(function(){
$(".ta").css("font-size", "36px");
});
});
.ta {
font-size: 12px;
height: 3em;
width: 10em;
resize: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<textarea class="ta">test</textarea>
</div>
<div>
<button id="font-small">fontsmall</button>
<button id="font-big">fontbig</button>
<button id="font-huge">fonthuge</button>
</div>

Fix Popup to lift up smoothly

I create a pop-up dialog box which lift up on left bottom while user scroll page.
You can see it live here- http://uposonghar.com/jobs/odesk/daniel/new/
My problem is it does not smoothly lift up first time, then it is ok. Anyone please suggest any idea to fix it. Need to make smoothly lift up.
My code
<div id="scrolltriggered" style="width: 310px; left: 10px; bottom: 10px;">
<div id="inscroll">
x<a href="http://www.google.com" target="_blank"><img src="images/buyersguide.png" alt="Free Resources" height="235" width="310">
</a>
</div>
</div>
<script type="text/javascript">
var stb = {
hascolsed: false,
cookieLife: 7,
triggerHeight: 30,
stbElement: ""
};
</script>
Javascript Code-
if (typeof stb === "undefined")
var stb = {};
jQuery(document).ready(function () {
jQuery("#closebox").click(function () {
jQuery('#scrolltriggered').stop(true, true).animate({ 'bottom':'-210px' }, 700, function () {
jQuery('#scrolltriggered').hide();
stb.hascolsed = true;
jQuery.cookie('nopopup', 'true', { expires: stb.cookieLife, path: '/' });
});
return false;
});
stb.windowheight = jQuery(window).height();
stb.totalheight = jQuery(document).height();
stb.boxOffset = '';
if (stb.stbElement != '') {
stb.boxOffset = jQuery(stb.stbElement).offset().top;
}
jQuery(window).resize(function () {
stb.windowheight = jQuery(window).height();
stb.totalheight = jQuery(document).height();
});
jQuery(window).scroll(function () {
stb.y = jQuery(window).scrollTop();
stb.boxHeight = jQuery('#scrolltriggered').outerHeight();
stb.scrolled = parseInt((stb.y + stb.windowheight) / stb.totalheight * 100);
if (stb.showBox(stb.scrolled, stb.triggerHeight, stb.y) && jQuery('#scrolltriggered').is(":hidden") && stb.hascolsed != true) {
jQuery('#scrolltriggered').show();
jQuery('#scrolltriggered').stop(true, true).animate({ 'bottom':'10px' }, 700, function () {
});
}
else if (!stb.showBox(stb.scrolled, stb.triggerHeight, stb.y) && jQuery('#scrolltriggered').is(":visible") && jQuery('#scrolltriggered:animated').length < 1) {
jQuery('#scrolltriggered').stop(true, true).animate({ 'bottom':-stb.boxHeight }, 700, function () {
jQuery('#scrolltriggered').hide();
});
}
});
jQuery('#stbContactForm').submit(function (e) {
e.preventDefault();
stb.data = jQuery('#stbContactForm').serialize();
jQuery.ajax({
url:stbAjax.ajaxurl,
data:{
action:'stb_form_process',
stbNonce:stbAjax.stbNonce,
data:stb.data
},
dataType:'html',
type:'post'
}).done(function (data) {
jQuery('#stbMsgArea').html(data).show('fast');
});
return false;
});
});
(function(stb_helpers) {
stb_helpers.showBox = function(scrolled, triggerHeight, y) {
if (stb.isMobile()) return false;
if (stb.stbElement == '') {
if (scrolled >= triggerHeight) {
return true;
}
}
else {
if (stb.boxOffset < (stb.windowheight + y)) {
return true;
}
}
return false;
};
stb_helpers.isMobile = function(){
if (navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
) {
return true;
}
else return false;
}
})(stb);

i think you need css changes, copy paste the following in your aspx
<div style="width: 310px; left: 10px; bottom: -225px; display: none;" id="scrolltriggered">
Hope it Helps

All you need to do is add the following line to your document ready as the First line
$("#scrolltriggered").css({bottom: -235});
This will make sure that the popup is scrolled to the bottom by 235px. If you need it to scroll variably add the Elements height by using jquery selector.
See the Fiddle Here

Passing data to custom console

I've been working on a little project and been trying to make my own debug console kinda thing, something that i can customize to what i need instead of using firebug.. so far i've got the two parts i need working but not togehter. I have a script that is going to report what the mouse enters and clicks on, it workded printing directly to the window DIV i have set up,, then yesterday ran across a JQuery console which i really liked, i cut out everything i didn't need and it works fine within its self, but not sure how to pass the data from my other method to that one,, i compiled the basic stuff to try to get it working... its probably something simple as ussual with me LOL and i could be confusing myself and making it harder then it needs to be
if anyone could help out that would be great
JsFiddle

after having a day off from work to sit down and actually mess with it for a while, reading Trip's comment LOL i decided to just go through the thing and clean it up as if it was working and took out a couple dozen un-needed functions and wrapped the main guts i was needing into one function that contained everything and made sure i wasn't using multiple variables to avoid conflict and some tweaking i got it to work.. so my conclusion from it there was to many functions leftover after i was deleting the stuff i didn't need. so heres the working code,, just incase someone is searching for something like this
JsFiddle
big thanks to Trip for point out all the Methods being used
function clock(){
var dayarray = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var montharray = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var suffix = "AM";
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var mydate = new Date();
var year = mydate.getFullYear();
var day = mydate.getDay();
var month = mydate.getMonth();
var daym = mydate.getDate();
if(hours >= 12){
suffix = "PM";
hours = hours - 12;
}
if(hours == 0){
hours = 12;
}
if(minutes < 10){
minutes = "0" + minutes
}
if(daym<10){
daym="0"+daym
}
//alert(hours);
return [hours, minutes, suffix, month, day, year, dayarray, montharray];
}
$('#consolex').click(function() { loadConsole(); });
var xD;
function loadConsole(){
if (document.forms[0].console.checked) {
// if CHECKED than LOAD Console
if (window.twd_console) {
window.twd_console.toggle();
} else {
function init($) {
function HistoryManager() {
this.curr = -1;
this.entries = [];
};
HistoryManager.prototype = {
push: function(item) {
if (this.entries.length && this.entries[0] == item) return;
if (item.match(/^\s*$/)) return;
this.entries.unshift(item);
this.curr = -1;
},
scroll: function(direction) {
var moveTo = this.curr + (direction == 'prev' ? 1 : -1);
if (moveTo >= 0 && moveTo < this.entries.length) {
this.curr = moveTo;
return this.entries[this.curr];
} else if (moveTo == -1) {
this.curr = moveTo;
return '';
} else {
return null;
}
}
};
var toolbar = 'hello';
var context = {},
history = new HistoryManager(),
$drag = $('<div/>').css({
backgroundColor: '#e0e0e0',
border: '1px solid #a0a0a0',
fontSize: '11px',
fontFamily: 'sans-serif',
lineHeight: 1,
padding: '5px',
marginBottom: '7px',
cursor: 'pointer',
textAlign: 'right'
}).html(toolbar),
$log = $('<div/>').css({
fontSize: '11px',
fontFamily: 'monospace',
color: 'white',
marginBottom: '7px',
height: '155px',
overflow: 'auto',
border: '1px solid #a0a0a0',
padding: '5px',
textAlign: 'left'
}),
$dummy = $('<div/>');
xD = function append(text, act, tag, id, color) {
var aX = ' » ', // Bullet
bX = '['+ clock()[0]+':'+clock()[1]+':'+clock()[2]+'] ', // Timestamp
cX = ' ERROR ', //ERROR
dX = ' Location ', //Location of ERROR
eX = ' ID Location ', //ID Location
fX = ' Cause '; //Cause of ERROR
$log.append($('<div/>').css({
'color': color || 'black',
margin: 0,
padding: 0
}).text(aX).append(bX).append(text).append(act).append(tag).append(id));
$log[0].scrollTop = $log[0].scrollHeight;
};
$(document).mousemove(function(evt) {
if (dragging) $container.css({
left: evt.pageX - dragging[0],
top: evt.pageY - dragging[1]
});
});
var pos = ($.browser.msie && $.browser.version < 7) ? 'absolute' : 'fixed';
var $container = $('<div/>').css({
backgroundColor: 'white',
padding: '7px',
position: pos,
opacity: 0.9,
top: '10px',
right: '10px',
width: '550px',
height: '200px',
border: '1px solid #000',
zIndex: 99999
}).appendTo(document.body);
$container.append($drag).append($log);
//xD('jQuery initialised!', 'green');
//xD('(using jQuery version ' + $.fn.jquery + ')');
//xD('jQuery initialised!', 'green');
//xD('(using jQuery version ' + $.fn.jquery + ')');
//xD('jQuery initialised!', 'green');
//xD('(using jQuery version ' + $.fn.jquery + ')');
//xD('jQuery initialised!', 'green');
//xD('(using jQuery version ' + $.fn.jquery + ')');
window.twd_console = $container;
};
if (typeof jQuery == 'undefined' || !jQuery.fn.jquery.match(/^1\.7/)) {
var e = document.createElement('script'),
jq = null;
e.onload = function() {
jq = jQuery;
jQuery.noConflict(true);
init(jq);
};
e.setAttribute('type', 'text/javascript');
e.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js');
document.body.appendChild(e);
} else {
init(jQuery);
}
}
} else if (!document.forms[0].console.checked) {
window.twd_console.hide();
}
mouse(true);
}
function mouse(bol){
var d = $("*", document.body);
if(bol){
// Cancel mousedown.
d.mousedown(function(event) {
var x = $(this).get(0),
y = x.tagName,
z = x.id;
switch (event.which) {
case 1:
//alert('Left mouse button click: ' + x.tagName);
xD(x.tagName, ' Left mouse button ',' '+ x.tagName+' ',' '+ x.id+' ', 'purple');
//xD(x.id, 'red');
break;
case 2:
//alert('Middle mouse button click: ' + x.tagName);
xD(x.tagName, ' Centermouse button ', x.tagName, x.id, 'purple');
break;
case 3:
//alert('Right mouse button click: ' + x.tagName);
xD(x.tagName, ' Right mouse button ', x.tagName, x.id, 'purple');
return null;
break;
default:
xD(x.tagName, ' mouse UNKNOWN ', x.tagName, x.id, 'purple');
}
});
// Transfer focus, if already open.
d.mouseenter(function(event) {
var x = $(this).get(0),
y = x.tagName,
z = x.id;
// $('#window').append('mouse entered' + x.tagName + '<br />');
try{
xD(y, ' Mouse Entered ', y, z, 'blue');
//xD(y, 'blue');
}catch(err){
alert(err);
}
});
}
};

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.