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

Posted by Brian on Stack Overflow See other posts from Stack Overflow or by Brian
Published on 2010-04-03T01:26:58Z Indexed on 2010/04/03 1:33 UTC
Read the original article Hit count: 364

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 funtctions. Inside them, we can refer the panel with $(this).
* onEnter: Funtion raised when the panel is activated. // default: none
* onLeave: Funtion 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 <[email protected]>
*/
(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);

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about conflict