Question

I am having a problem where my javascript plugins appear to be conflicting, but only slightly. If you look at this fiddle where I am creating my form, you will notice that after an input field is created, then deleted, the alert messages start popping up on the next element (below where they initially are placed).

To clarify: If the user has not entered any information yet, the alerts pop up in the correct position (floated to the right side of the input field in red text). However, if the user has inputted their name, then deletes their name, the ajax alert (“this field is required”) pops up in the wrong place in the field below where it is supposed to. The problem appeared after I included this part of the javascript (controls a different menu on the page):

/* jQuery Content Panel Switcher JS */
var jcps = {};
jcps.fader = function(speed, target, panel) {
    jcps.show(target, panel);
    if (panel == null) {panel = ''};
    $('.switcher' + panel).click(function() {
        var _contentId = '#' + $(this).attr('id') + '-content';
        var _content = $(_contentId).html();
        if (speed == 0) {
            $(target).html(_content);
        }
        else {    
            $(target).fadeToggle(speed, function(){$(this).html(_content);}).fadeToggle(speed);
        }
    });
};
jcps.slider = function(speed, target, panel) { 
    jcps.show(target, panel);
    if (panel == null) {panel = ''};
    $('.switcher' + panel).click(function() {
        var _contentId = '#' + $(this).attr('id') + '-content';
        var _content = $(_contentId).html();
        if (speed == 0) {
            $(target).html(_content);
        }
        else {    
            $(target).slideToggle(speed, function(){$(this).html(_content);}).slideToggle(speed);
        }
    });
};
jcps.show = function (target, panel) {
$('.show').each(function() {
    if (panel == null) {
        $(target).append($(this).html() + '<br/>');
    }
    else {
        var trimPanel = panel.replace('.', '');
        if ($(this).hasClass(trimPanel) == true){$(target).append($(this).html() + '<br/>');}
    }
});
}

Thanks for any help.

Answer 1

I think you may be right about having some css conflicts, but I was able to get close to what I assume is the desired affect by modifying the css on the label.error elements.

label.error { color: red; position: relative; float: right: top: -30px; }

Example: http://jsfiddle.net/shanabus/kmJ87/1/