Develop Reference

Codrops Multi Level Menu - Converting codrops multi level menu to topbar

I am trying to modify the codedrop multilevel menu.
What I am trying to do is to take the sidebar main category and insert into topbar and there submenu should open in sidebar but I am having issues most of them I have solved but some of them I m not able to.
So where I m currently suck rightnow
modified part works fine
MLMenu.prototype._initEvents = function() {
var self = this;
console.log(self);
for(var i = 0, len = this.menusArr.length; i < len; ++i) {
this.menusArr[i].menuItems.forEach(function(item, pos) {
item.querySelector('a').addEventListener('click', function(ev) {
var submenu = ev.target.getAttribute('data-submenu'),
itemName = ev.target.innerHTML,
// subMenuEl = self.el.querySelector('ul[data-menu="' + submenu + '"]');
subMenuEl = document.getElementById('sidebar').querySelector('ul[data-menu="' + submenu + '"]');
// console.log(subMenuEl)
// console.log(self.el);
// console.log(itemName);
// console.log(document.getElementById('sidebar'));
// check if there's a sub menu for this item
if( submenu && subMenuEl ) {
ev.preventDefault();
// open it
self._openSubMenu(subMenuEl, pos, itemName);
}
else {
// add class current
var currentlink = self.el.querySelector('.menu__link--current');
if( currentlink ) {
classie.remove(self.el.querySelector('.menu__link--current'), 'menu__link--current');
}
classie.add(ev.target, 'menu__link--current');
// callback
self.options.onItemClick(ev, itemName);
}
});
});
}
// back navigation
if( this.options.backCtrl ) {
this.backCtrl.addEventListener('click', function() {
self._back();
});
}
};
Main.js (it triggers error)
main.js:288 Uncaught TypeError: Cannot read property 'menuEl' of
undefined
Below is the code whree it triggers
MLMenu.prototype._menuIn = function(nextMenuEl, clickPosition) {
var self = this,
// the current menu
currentMenu = this.menusArr[this.current_menu].menuEl,
isBackNavigation = typeof clickPosition == 'undefined' ? true : false,
// index of the nextMenuEl
nextMenuIdx = this.menus.indexOf(nextMenuEl),
nextMenu = this.menusArr[nextMenuIdx],
nextMenuEl = nextMenu.menuEl,
nextMenuItems = nextMenu.menuItems,
nextMenuItemsTotal = nextMenuItems.length;
// console.log(nextMenuIdx);
// console.log(currentMenu);
console.log(nextMenuEl);
// console.log('nm ' + nextMenu);
// console.log(nextMenuEl);
// console.log(self);
// slide in next menu items - first, set the delays for the items
nextMenuItems.forEach(function(item, pos) {
item.style.WebkitAnimationDelay = item.style.animationDelay = isBackNavigation ? parseInt(pos * self.options.itemsDelayInterval) + 'ms' : parseInt(Math.abs(clickPosition - pos) * self.options.itemsDelayInterval) + 'ms';
// we need to reset the classes once the last item animates in
// the "last item" is the farthest from the clicked item
// let's calculate the index of the farthest item
var farthestIdx = clickPosition <= nextMenuItemsTotal/2 || isBackNavigation ? nextMenuItemsTotal - 1 : 0;
if( pos === farthestIdx ) {
onEndAnimation(item, function() {
// reset classes
if( self.options.direction === 'r2l' ) {
classie.remove(currentMenu, !isBackNavigation ? 'animate-outToLeft' : 'animate-outToRight');
classie.remove(nextMenuEl, !isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft');
}
else {
classie.remove(currentMenu, isBackNavigation ? 'animate-outToLeft' : 'animate-outToRight');
classie.remove(nextMenuEl, isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft');
}
classie.remove(currentMenu, 'menu__level--current');
classie.add(nextMenuEl, 'menu__level--current');
//reset current
self.current_menu = nextMenuIdx;
// control back button and breadcrumbs navigation elements
if( !isBackNavigation ) {
// show back button
if( self.options.backCtrl ) {
classie.remove(self.backCtrl, 'menu__back--hidden');
}
// add breadcrumb
self._addBreadcrumb(nextMenuIdx);
}
else if( self.current_menu === 0 && self.options.backCtrl ) {
// hide back button
classie.add(self.backCtrl, 'menu__back--hidden');
}
// we can navigate again..
self.isAnimating = false;
// focus retention
nextMenuEl.focus();
});
}
});
// animation class
if( this.options.direction === 'r2l' ) {
classie.add(nextMenuEl, !isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft');
}
else {
classie.add(nextMenuEl, isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft');
}
};
Links
main.js https://pastebin.com/sKzeqAnD (modifed)
classic.js https://pastebin.com/PERqmCSb (not modifed)
modernizr https://pastebin.com/ZUNZbgK0 ( not modifed)
and jsfiddle

Slideshow first slide timeout longer

I have a custom image slideshow that I am having to modify. I am trying to make the first slide timeout longer, basically I want it to be visible 2 seconds longer than the others. What would be the best way to go about? Here is the code:
(function($) {
var settings = {
'promoid': 'promo',
'selectorid': 'promoselector',
'promoanimation': 'fade',
'timeout': 4500,
'speed': 'slow',
'go': 'true',
'timeoutname': 'promotimeout'
};
$.fn.promofade = function(options) {
settings.promoid = $(this).attr("id");
return this.each(function() {
$.promofade(this, options);
});
};
$.promofade = function(container, options) {
if ( options ) {
$.extend( settings, options );
}
var elements = $("#" + settings.promoid).children();
var selectors = $("#" + settings.selectorid).children();
if ( elements.length != selectors.length ) { alert("Selector length does not match."); }
if ( settings.go == 'true' )
{
settings.timeoutname = setTimeout(function() {
$.promofade.next(elements, selectors, 1, 0);
}, settings.timeout);
} else {
clearTimeout( settings.timeoutname );
}
};
$.promofade.next = function( elements, selectors, current, last ) {
if ( settings.promoanimation == 'fade' )
{
//$(elements[last]).fadeOut( settings.speed );
//$(elements[current]).fadeIn( settings.speed );
$(elements[last]).hide();
$(elements[current]).show();
} else if ( settings.promoanimation == 'slide' ) {
// This creates a 'slide gap', where they havent crossed yet, causing a blank spot
// TODO: fix!
$(elements[last]).slideUp( settings.speed );
$(elements[current]).slideDown( settings.speed );
}
$(selectors[last]).removeClass("on");
$(selectors[current]).addClass("on");
//$(selectors[current]).attr("class", "on");
// They are both the same length so we only calculate for one
if ( (current + 1) < elements.length ) {
current = current + 1;
last = current - 1;
} else {
current = 0;
last = elements.length - 1;
}
if ( settings.go == 'true' )
{
settings.timeoutname = setTimeout( function() {
$.promofade.next( elements, selectors, current, last );
}, settings.timeout );
} else {
clearTimeout( settings.timeoutname );
}
};
})(jQuery);
My html is built out like so:
<div id="fader">
<img src="#" alt='#'/>
<img src="#" alt='#'/>
<img src="#" alt='#'/>
</div>

You could solve it by specifying a separate first slide timeout that's assigned during initialization, then use the standard timeout on promofade.next.
(function($) {
var settings = {
'promoid': 'promo',
'selectorid': 'promoselector',
'promoanimation': 'fade',
'firstslidetimeout':2000, //apply this during $.promofade only
'timeout': 4500,
'speed': 'slow',
'go': 'true',
'timeoutname': 'promotimeout'
};
$.fn.promofade = function(options) {
settings.promoid = $(this).attr("id");
return this.each(function() {
$.promofade(this, options);
});
};
$.promofade = function(container, options) {
if ( options ) {
$.extend( settings, options );
}
var elements = $("#" + settings.promoid).children();
var selectors = $("#" + settings.selectorid).children();
if ( elements.length != selectors.length ) { alert("Selector length does not match."); }
if ( settings.go == 'true' )
{
settings.timeoutname = setTimeout(function() {
$.promofade.next(elements, selectors, 1, 0);
}, settings.timeout + settings.firstslidetimeout);
} else {
clearTimeout( settings.timeoutname );
}
};
$.promofade.next = function( elements, selectors, current, last ) {
if ( settings.promoanimation == 'fade' )
{
//$(elements[last]).fadeOut( settings.speed );
//$(elements[current]).fadeIn( settings.speed );
$(elements[last]).hide();
$(elements[current]).show();
} else if ( settings.promoanimation == 'slide' ) {
// This creates a 'slide gap', where they havent crossed yet, causing a blank spot
// TODO: fix!
$(elements[last]).slideUp( settings.speed );
$(elements[current]).slideDown( settings.speed );
}
$(selectors[last]).removeClass("on");
$(selectors[current]).addClass("on");
//$(selectors[current]).attr("class", "on");
// They are both the same length so we only calculate for one
if ( (current + 1) < elements.length ) {
current = current + 1;
last = current - 1;
} else {
current = 0;
last = elements.length - 1;
}
if ( settings.go == 'true' )
{
settings.timeoutname = setTimeout( function() {
$.promofade.next( elements, selectors, current, last );
}, settings.timeout);
} else {
clearTimeout( settings.timeoutname );
}
};
})(jQuery);

You might need to make changes in two places to get what you wanted.
(function ($) {
var settings = {
'promoid': 'promo',
'selectorid': 'promoselector',
'promoanimation': 'fade',
'timeout': 4500,
'firstAdditionalTimeout': 4500,
'speed': 'slow',
'go': 'true',
'timeoutname': 'promotimeout'
};
$.fn.promofade = function (options) {
settings.promoid = $(this).attr("id");
return this.each(function () {
$.promofade(this, options);
});
};
$.promofade = function (container, options) {
if (options) {
$.extend(settings, options);
}
var elements = $("#" + settings.promoid).children();
var selectors = $("#" + settings.selectorid).children();
//if (elements.length != selectors.length) {
// alert("Selector length does not match.");
//}
if (settings.go == 'true') {
settings.timeoutname = setTimeout(function () {
$.promofade.next(elements, selectors, 1, 0);
}, settings.timeout + settings.firstAdditionalTimeout); // here
} else {
clearTimeout(settings.timeoutname);
}
};
$.promofade.next = function (elements, selectors, current, last) {
if (settings.promoanimation == 'fade') {
//$(elements[last]).fadeOut( settings.speed );
//$(elements[current]).fadeIn( settings.speed );
$(elements[last]).hide();
$(elements[current]).show();
} else if (settings.promoanimation == 'slide') {
// This creates a 'slide gap', where they havent crossed yet, causing a blank spot
// TODO: fix!
$(elements[last]).slideUp(settings.speed);
$(elements[current]).slideDown(settings.speed);
}
//$(selectors[last]).removeClass("on");
//$(selectors[current]).addClass("on");
//$(selectors[current]).attr("class", "on");
// They are both the same length so we only calculate for one
if ((current + 1) < elements.length) {
current = current + 1;
last = current - 1;
} else {
current = 0;
last = elements.length - 1;
}
if (settings.go == 'true') {
settings.timeoutname = setTimeout(function () {
$.promofade.next(elements, selectors, current, last);
}, current == 1 ? (settings.timeout + settings.firstAdditionalTimeout) : settings.timeout); // and here
} else {
clearTimeout(settings.timeoutname);
}
};
})(jQuery);
DEMO

responsive top-bar navigation with mootools

i am working with mootools , and with foundation as my css "framework".
i am using the navigation top-bar from foundation and its great. yet the responsive design was ruined.
since i am not working with jquery ....
http://jsfiddle.net/idanhen/3LXQb/ <-- this is the foundation code.
http://foundation.zurb.com/docs/navigation.php <- navigation documentation
i cant understand the jquery script they did to convert it.
anyone know of a mootools responsive navigation bar ?

Made it myself , thought i would share if someone will ever need it .
original file is : "jquery.foundation.topbar.js"
new file is : "mootools.foundation.topbar.js"
just add foundation.css
mootools-core-1.4.5 , mootools-more-1.4.0.1 ( i have both cause its a huge project , but i guess u can only use the core ... )
mootools.foundation.topbar.js
and ofcourse run the following command :
<script type="text/javascript">
window.addEvent('domready', function() {
window.foundationTopBar();
});
</script>
"mootools.foundation.topbar.js" :
`
/**
* mootools.foundation.topbar
*
* taken from foundation.topbar.js
* http://foundation.zurb.com
*
* Written by Idan Hen : idandush#gmail.com
*/
;(function ($, window, undefined) {
'use strict';
/* just create settings object */
var settings = {
index : 0,
breakPoint : 940, // Set to to 9999 to force it into responsive always
initialized : false
};
var methods = {
init : function (options) {
return function () {
settings = Object.merge(settings, options); //settings = $.extend(settings, options);
settings.window = window;
settings.topbar = $$('nav.top-bar');
settings.titlebar = settings.topbar.getChildren('ul')[0]; // getElement() just return #
if (!settings.initialized) {
methods.assemble();
settings.initialized = true;
}
if (!settings.height) {
methods.largestUL();
}
$$('.top-bar .toggle-topbar').getParent().addEvent('click.fndtn:relay(.top-bar .toggle-topbar)', function (e) { //live switched to addEvent
e.preventDefault();
if (methods.breakpoint()) {
settings.topbar.toggleClass('expanded');
settings.topbar.setStyle('min-height', ''); //css
}
});
// Show the Dropdown Levels on Click
$$('.top-bar .has-dropdown>a').getParent().addEvent('click.fndtn:relay(.top-bar .has-dropdown>a)', function (e) {
e.preventDefault();
if (methods.breakpoint()) {
var anchor = $(this),
selectedLi = anchor.getParent('li'), // closest -> getParent
section = anchor.getParents('section')[0],// closest -> getParents
largestUl;
settings.index += 1;
selectedLi.addClass('moved');
section.setStyle('left', -(100 * settings.index) + '%');
section.getElements('>.name').setStyle('left', 100 * settings.index + '%');
//outerHeight
anchor.getSiblings('ul').setStyle('height', (settings.height + settings.titlebar.getSize().y));
settings.topbar.setStyle('min-height', settings.height + settings.titlebar.getSize().y * 2) //outerHeight
}
});
// Go up a level on Click
$$('.top-bar .has-dropdown .back').getParent().addEvent('click.fndtn:relay(.top-bar .has-dropdown .back)', function (e) {
e.preventDefault();
var anchor = $(this),
movedLi = anchor.getParent('li.moved'),
section = anchor.getParents('section')[0],
previousLevelUl = movedLi.getParent();
settings.index -= 1;
section.setStyle('left', -(100 * settings.index) + '%'); //css
section.getElements('>.name').setStyle('left', 100 * settings.index + '%'); // find
if (settings.index === 0) {
settings.topbar.setStyle('min-height', 0); // changed topbar from $topbar
}
setTimeout(function () {
movedLi.removeClass('moved');
}, 300);
});
}.call(window.document.HTMLDocument);
},
breakpoint : function () {
return settings.window.getSize().x < settings.breakPoint; //width()
},
assemble : function assemble() {
var section = settings.topbar.getElements('section')[0];
// Pull element out of the DOM for manipulation
section = section.dispose(); //detach
//console.log('section.getElements.n>a : ', section.getElements('.has-dropdown>a'));
section.getElements('.has-dropdown>a').each(function(e){
e.each(function (e) {
//console.log('section' , section);
var link = $(e),
dropdown = link.getSiblings('.dropdown'), //siblings
//<li class="title back js-generated"><h5></h5></li>
a = new Element('a', {
href: '#'
}),
h5 = new Element('h5', {}),
titleLi = new Element('li', {
'class': 'title back js-generated'
});//section.getChildren('ul li');// back js-generated');
// console.log('dropdown: ', dropdown);
h5.grab(a);
titleLi.grab(h5);
// Copy link to subnav
titleLi.getElements('h5>a').set('html', (link.get('html') ) ); // find -> getElements
dropdown.grab(titleLi, 'top');
});
});
// Put element back in the DOM
settings.topbar[0].grab(section[0]); // section.appendTo(settings.topbar);
},
largestUL : function () {
var uls = settings.topbar[0].getElements('section ul ul'), // find -> getElements
largest = uls.getFirst(),
total = 0;
uls.each(function(ul){
if (ul.getChildren('li').length > largest.getChildren('li').length) { //length -> getSize().x
largest = ul;
}
});
largest.getChildren('li').each(function (li) { total += li.getComputedSize().height; }); //outerHeight(true); -> getSize().y
settings.height = total;
}
};
/**
* this function is added to the window -> need to add it myself
* apply is call ...
*/
window.foundationTopBar = function (method)
{
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.foundationTopBar');
}
};
}($, this));
`

Modify fancybox html

Is it possible to customize the fancybox HTML code?
I want to move out the next and previous buttons outside the .fancybox-outer

In order to move out the next and previous buttons of the .fancybox-outer container, you just need to add these CSS rules (in your own custom CSS file and AFTER you loaded the fancybox CSS file)
.fancybox-nav {
width: 60px;
}
.fancybox-nav span {
visibility: visible;
opacity: 0.5;
}
.fancybox-nav:hover span {
opacity: 1;
}
.fancybox-next {
right: -60px;
}
.fancybox-prev {
left: -60px;
}
​
You said you have looked around in the documentation but haven't found anything but the above is well documented in the fancyapps.com website here --> http://fancyapps.com/fancybox/#useful check No. 6, and the demo is in this fiddle
... but wonder if you will consider this as a correct answer.

Here is how I solved it. I did not know before that you could extend/replace methods in jquery. But this new method will (with some basic css) slide in from the right and out to the left.
It renders the buttons outside of the fancybox-outer element and it takes the width of the documen. It can probably be optimized a lot.
jQuery('ul a').fancybox({
margin: 0,
openMethod : 'afterZoomIn',
nextMethod : 'slideIn',
nextSpeed : 1000,
prevMethod : 'slideOut',
prevSpeed : 1000
});
(function ($, F) {
var getScalar = function(value, dim) {
var value_ = parseInt(value, 10);
if (dim && isPercentage(value)) {
value_ = F.getViewport()[ dim ] / 100 * value_;
}
return Math.ceil(value_);
},
getValue = function(value, dim) {
return getScalar(value, dim) + 'px';
};
F.transitions.afterZoomIn = function () {
var current = F.current;
if (!current) {
return;
}
F.isOpen = F.isOpened = true;
F.wrap.addClass('fancybox-opened').css('overflow', 'visible');
F.reposition();
// Assign a click event
if (current.closeClick || current.nextClick) {
F.inner.css('cursor', 'pointer').bind('click.fb', function(e) {
if (!$(e.target).is('a') && !$(e.target).parent().is('a')) {
F[ current.closeClick ? 'close' : 'next' ]();
}
});
}
// Create a close button
if (current.closeBtn) {
$(current.tpl.closeBtn).appendTo('.fancybox-overlay').bind('click.fb', F.close);
}
// Create navigation arrows
if (current.arrows && F.group.length > 1) {
if (current.loop || current.index > 0) {
$(current.tpl.prev).appendTo('.fancybox-overlay').bind('click.fb', F.prev);
}
if (current.loop || current.index < F.group.length - 1) {
$(current.tpl.next).appendTo('.fancybox-overlay').bind('click.fb', F.next);
}
}
F.trigger('afterShow');
// Stop the slideshow if this is the last item
if (!current.loop && current.index === current.group.length - 1) {
F.play( false );
} else if (F.opts.autoPlay && !F.player.isActive) {
F.opts.autoPlay = false;
F.play();
}
};
F.transitions.slideIn = function () {
var current = F.current,
effect = current.nextEffect,
startPos = current.pos,
endPos = { opacity : 1 },
direction = F.direction,
distance = $(document).width(),
field;
startPos.opacity = 0.1;
field = 'left';
if (direction === 'right') {
startPos[ field ] = getValue(getScalar(startPos[ field ]) - distance);
endPos[ field ] = '+=' + distance + 'px';
} else {
startPos[ field ] = getValue(getScalar(startPos[ field ]) + distance);
endPos[ field ] = '-=' + distance + 'px';
}
// Workaround for http://bugs.jquery.com/ticket/12273
if (effect === 'none') {
F._afterZoomIn();
} else {
F.wrap.css(startPos).animate(endPos, {
duration : current.nextSpeed,
easing : current.nextEasing,
complete : F._afterZoomIn
});
}
};
F.transitions.slideOut = function () {
var previous = F.previous,
effect = previous.prevEffect,
endPos = { opacity : 0 },
direction = F.direction,
distance = $(document).width();
if (effect === 'elastic') {
endPos[ 'left' ] = ( direction === 'left' ? '-' : '+' ) + '=' + distance + 'px';
}
previous.wrap.animate(endPos, {
duration : effect === 'none' ? 0 : previous.prevSpeed,
easing : previous.prevEasing,
complete : function () {
// $(this).trigger('onReset').remove();
previous.wrap.trigger('onReset').remove();
}
});
}
}(jQuery, jQuery.fancybox));

Conflict between two Javascripts (MailChimp validation etc. scripts & jQuery hSlides.js)

I have two scripts running on the same page, one is the jQuery.hSlides.js script http://www.jesuscarrera.info/demos/hslides/ and the other is a custom script that is used for MailChimp list signup integration. The hSlides panel can be seen in effect here: http://theatricalbellydance.com. I've turned off the MailChimp script because it was conflicting with the hSlides script, causing it not to to fail completely (as seen here http://theatricalbellydance.com/home2/). Can someone tell me what could be done to the hSlides script to stop the conflict with the MailChimp script?
The MailChimp Script
var fnames = new Array();
var ftypes = new Array();
fnames[0] = 'EMAIL';
ftypes[0] = 'email';
fnames[3] = 'MMERGE3';
ftypes[3] = 'text';
fnames[1] = 'FNAME';
ftypes[1] = 'text';
fnames[2] = 'LNAME';
ftypes[2] = 'text';
fnames[4] = 'MMERGE4';
ftypes[4] = 'address';
fnames[6] = 'MMERGE6';
ftypes[6] = 'number';
fnames[9] = 'MMERGE9';
ftypes[9] = 'text';
fnames[5] = 'MMERGE5';
ftypes[5] = 'text';
fnames[7] = 'MMERGE7';
ftypes[7] = 'text';
fnames[8] = 'MMERGE8';
ftypes[8] = 'text';
fnames[10] = 'MMERGE10';
ftypes[10] = 'text';
fnames[11] = 'MMERGE11';
ftypes[11] = 'text';
fnames[12] = 'MMERGE12';
ftypes[12] = 'text';
var err_style = '';
try {
err_style = mc_custom_error_style;
} catch (e) {
err_style = 'margin: 1em 0 0 0; padding: 1em 0.5em 0.5em 0.5em; background: rgb(255, 238, 238) none repeat scroll 0% 0%; font-weight: bold; float: left; z-index: 1; width: 80%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(255, 0, 0);';
}
var mce_jQuery = jQuery.noConflict();
mce_jQuery(document).ready(function ($) {
var options = {
errorClass: 'mce_inline_error',
errorElement: 'div',
errorStyle: err_style,
onkeyup: function () {},
onfocusout: function () {},
onblur: function () {}
};
var mce_validator = mce_jQuery("#mc-embedded-subscribe-form").validate(options);
options = {
url: 'http://theatricalbellydance.us1.list-manage.com/subscribe/post-json?u=1d127e7630ced825cb1a8b5a9&id=9f12d2a6bb&c=?',
type: 'GET',
dataType: 'json',
contentType: "application/json; charset=utf-8",
beforeSubmit: function () {
mce_jQuery('#mce_tmp_error_msg').remove();
mce_jQuery('.datefield', '#mc_embed_signup').each(function () {
var txt = 'filled';
var fields = new Array();
var i = 0;
mce_jQuery(':text', this).each(function () {
fields[i] = this;
i++;
});
mce_jQuery(':hidden', this).each(function () {
if (fields[0].value == 'MM' && fields[1].value == 'DD' && fields[2].value == 'YYYY') {
this.value = '';
} else if (fields[0].value == '' && fields[1].value == '' && fields[2].value == '') {
this.value = '';
} else {
this.value = fields[0].value + '/' + fields[1].value + '/' + fields[2].value;
}
});
});
return mce_validator.form();
},
success: mce_success_cb
};
mce_jQuery('#mc-embedded-subscribe-form').ajaxForm(options);
});
function mce_success_cb(resp) {
mce_jQuery('#mce-success-response').hide();
mce_jQuery('#mce-error-response').hide();
if (resp.result == "success") {
mce_jQuery('#mce-' + resp.result + '-response').show();
mce_jQuery('#mce-' + resp.result + '-response').html(resp.msg);
mce_jQuery('#mc-embedded-subscribe-form').each(function () {
this.reset();
});
} else {
var index = -1;
var msg;
try {
var parts = resp.msg.split(' - ', 2);
if (parts[1] == undefined) {
msg = resp.msg;
} else {
i = parseInt(parts[0]);
if (i.toString() == parts[0]) {
index = parts[0];
msg = parts[1];
} else {
index = -1;
msg = resp.msg;
}
}
} catch (e) {
index = -1;
msg = resp.msg;
}
try {
if (index == -1) {
mce_jQuery('#mce-' + resp.result + '-response').show();
mce_jQuery('#mce-' + resp.result + '-response').html(msg);
} else {
err_id = 'mce_tmp_error_msg';
html = '<div id="' + err_id + '" style="' + err_style + '"> ' + msg + '</div>';
var input_id = '#mc_embed_signup';
var f = mce_jQuery(input_id);
if (ftypes[index] == 'address') {
input_id = '#mce-' + fnames[index] + '-addr1';
f = mce_jQuery(input_id).parent().parent().get(0);
} else if (ftypes[index] == 'date') {
input_id = '#mce-' + fnames[index] + '-month';
f = mce_jQuery(input_id).parent().parent().get(0);
} else {
input_id = '#mce-' + fnames[index];
f = mce_jQuery().parent(input_id).get(0);
}
if (f) {
mce_jQuery(f).append(html);
mce_jQuery(input_id).focus();
} else {
mce_jQuery('#mce-' + resp.result + '-response').show();
mce_jQuery('#mce-' + resp.result + '-response').html(msg);
}
}
} catch (e) {
mce_jQuery('#mce-' + resp.result + '-response').show();
mce_jQuery('#mce-' + resp.result + '-response').html(msg);
}
}
}
The hslides script:
/*
* hSlides (1.0) // 2008.02.25 // <http://plugins.jquery.com/project/hslides>
*
* REQUIRES jQuery 1.2.3+ <http://jquery.com/>
*
* Copyright (c) 2008 TrafficBroker <http://www.trafficbroker.co.uk>
* Licensed under GPL and MIT licenses
*
* hSlides is an horizontal accordion navigation, sliding the panels around to reveal one of interest.
*
* Sample Configuration:
* // this is the minimum configuration needed
* $('#accordion').hSlides({
* totalWidth: 730,
* totalHeight: 140,
* minPanelWidth: 87,
* maxPanelWidth: 425
* });
*
* Config Options:
* // Required configuration
* totalWidth: Total width of the accordion // default: 0
* totalHeight: Total height of the accordion // default: 0
* minPanelWidth: Minimum width of the panel (closed) // default: 0
* maxPanelWidth: Maximum width of the panel (opened) // default: 0
* // Optional configuration
* midPanelWidth: Middle width of the panel (centered) // default: 0
* speed: Speed for the animation // default: 500
* easing: Easing effect for the animation. Other than 'swing' or 'linear' must be provided by plugin // default: 'swing'
* sensitivity: Sensitivity threshold (must be 1 or higher) // default: 3
* interval: Milliseconds for onMouseOver polling interval // default: 100
* timeout: Milliseconds delay before onMouseOut // default: 300
* eventHandler: Event to open panels: click or hover. For the hover option requires hoverIntent plugin <http://cherne.net/brian/resources/jquery.hoverIntent.html> // default: 'click'
* panelSelector: HTML element storing the panels // default: 'li'
* activeClass: CSS class for the active panel // default: none
* panelPositioning: Accordion panelPositioning: top -> first panel on the bottom and next on the top, other value -> first panel on the top and next to the bottom // default: 'top'
* // Callback functions. Inside them, we can refer the panel with $(this).
* onEnter: Function raised when the panel is activated. // default: none
* onLeave: Function raised when the panel is deactivated. // default: none
*
* We can override the defaults with:
* $.fn.hSlides.defaults.easing = 'easeOutCubic';
*
* #param settings An object with configuration options
* #author Jesus Carrera <jesus.carrera#trafficbroker.co.uk>
*/
(function($) {
$.fn.hSlides = function(settings) {
// override default configuration
settings = $.extend({}, $.fn.hSlides.defaults, settings);
// for each accordion
return this.each(function(){
var wrapper = this;
var panelLeft = 0;
var panels = $(settings.panelSelector, wrapper);
var panelPositioning = 1;
if (settings.panelPositioning != 'top'){
panelLeft = ($(settings.panelSelector, wrapper).length - 1) * settings.minPanelWidth;
panels = $(settings.panelSelector, wrapper).reverse();
panelPositioning = -1;
}
// necessary styles for the wrapper
$(this).css('position', 'relative').css('overflow', 'hidden').css('width', settings.totalWidth).css('height', settings.totalHeight);
// set the initial position of the panels
var zIndex = 0;
panels.each(function(){
// necessary styles for the panels
$(this).css('position', 'absolute').css('left', panelLeft).css('zIndex', zIndex).css('height', settings.totalHeight).css('width', settings.maxPanelWidth);
zIndex ++;
// if this panel is the activated by default, set it as active and move the next (to show this one)
if ($(this).hasClass(settings.activeClass)){
$.data($(this)[0], 'active', true);
if (settings.panelPositioning != 'top'){
panelLeft = ($(settings.panelSelector, wrapper).index(this) + 1) * settings.minPanelWidth - settings.maxPanelWidth;
}else{
panelLeft = panelLeft + settings.maxPanelWidth;
}
}else{
// check if we are centering and some panel is active
// this is why we can't add/remove the active class in the callbacks: positioning the panels if we have one active
if (settings.midPanelWidth && $(settings.panelSelector, wrapper).hasClass(settings.activeClass) == false){
panelLeft = panelLeft + settings.midPanelWidth * panelPositioning;
}else{
panelLeft = panelLeft + settings.minPanelWidth * panelPositioning;
}
}
});
// iterates through the panels setting the active and changing the position
var movePanels = function(){
// index of the new active panel
var activeIndex = $(settings.panelSelector, wrapper).index(this);
// iterate all panels
panels.each(function(){
// deactivate if is the active
if ( $.data($(this)[0], 'active') == true ){
$.data($(this)[0], 'active', false);
$(this).removeClass(settings.activeClass).each(settings.onLeave);
}
// set position of current panel
var currentIndex = $(settings.panelSelector, wrapper).index(this);
panelLeft = settings.minPanelWidth * currentIndex;
// if the panel is next to the active, we need to add the opened width
if ( (currentIndex * panelPositioning) > (activeIndex * panelPositioning)){
panelLeft = panelLeft + (settings.maxPanelWidth - settings.minPanelWidth) * panelPositioning;
}
// animate
$(this).animate({left: panelLeft}, settings.speed, settings.easing);
});
// activate the new active panel
$.data($(this)[0], 'active', true);
$(this).addClass(settings.activeClass).each(settings.onEnter);
};
// center the panels if configured
var centerPanels = function(){
var panelLeft = 0;
if (settings.panelPositioning != 'top'){
panelLeft = ($(settings.panelSelector, wrapper).length - 1) * settings.minPanelWidth;
}
panels.each(function(){
$(this).removeClass(settings.activeClass).animate({left: panelLeft}, settings.speed, settings.easing);
if ($.data($(this)[0], 'active') == true){
$.data($(this)[0], 'active', false);
$(this).each(settings.onLeave);
}
panelLeft = panelLeft + settings.midPanelWidth * panelPositioning ;
});
};
// event handling
if(settings.eventHandler == 'click'){
$(settings.panelSelector, wrapper).click(movePanels);
}else{
var configHoverPanel = {
sensitivity: settings.sensitivity,
interval: settings.interval,
over: movePanels,
timeout: settings.timeout,
out: function() {}
}
var configHoverWrapper = {
sensitivity: settings.sensitivity,
interval: settings.interval,
over: function() {},
timeout: settings.timeout,
out: centerPanels
}
$(settings.panelSelector, wrapper).hoverIntent(configHoverPanel);
if (settings.midPanelWidth != 0){
$(wrapper).hoverIntent(configHoverWrapper);
}
}
});
};
// invert the order of the jQuery elements
$.fn.reverse = function(){
return this.pushStack(this.get().reverse(), arguments);
};
// default settings
$.fn.hSlides.defaults = {
totalWidth: 0,
totalHeight: 0,
minPanelWidth: 0,
maxPanelWidth: 0,
midPanelWidth: 0,
speed: 500,
easing: 'swing',
sensitivity: 3,
interval: 100,
timeout: 300,
eventHandler: 'click',
panelSelector: 'li',
activeClass: false,
panelPositioning: 'top',
onEnter: function() {},
onLeave: function() {}
};
})(jQuery);

The $ is no longer assigned to jQuery. I don't see what other library is using the $ however? What happens when you change
var mce_jQuery = jQuery.noConflict();
to
var mce_jQuery = jQuery;
Maybe it is just that I am not finding the library that is using the $ that required the call to noConflict.
**Edit:**Try reassigning the $ back to jQuery before your script runs.

I had a very similar problem with the custom MailChimp code. It turns out that another plugin was taking over jQuery and the $ symbol was not working. Michael's suggestion worked for me. What I did was just use the jQuery keyword on the $(document) line at the top of the MC code.
I also copied the MC js script off of the MailChimp server, and I am hosting it myself.