jQuery Plugin | Why doesn't this part of it work?

Question

I have the following code, it's a bit to long, and ignore the opts , it should work without that too, but it seems like there is something I am doing wrong because nothing happens.

 var container = 'body';

 var structureWrapper = '<div class="content-login"></div>';

 var structure = [
'<form name="', opts.formClass, '" class="', opts.formClass, '" method="post" action="#">',
    '<fieldset class="', opts.fieldsWrapper, '">',
        '<fieldset class="', opts.userWrapper, '">',
            '<label for="', opts.userInt, '" class="', opts.userLbl, '"><img src="', opts.userIcon, '" alt="', opts.userName, '" /></label>',
            '<input type="text" name="', opts.userInt, '" class="', opts.userInt, '" placeholder="', checkNameLenght(opts.userName, namesLenght.userNameLenght, 16, 'Username'), '" value="" autocomplete="off" />',
        '</fieldset>',
        '<fieldset class="', opts.passWrapper, '">',
            '<label for="', opts.passInt, '" class="', opts.passLbl, '"><img src="', opts.passIcon, '" alt="', opts.passName, '" /></label>',
            '<input type="password" name="', opts.passInt, '" class="', opts.passInt, '" placeholder="', checkNameLenght(opts.passName, namesLenght.passNameLenght, 16, 'Password'), '" value="" autocomplete="off" />',
        '</fieldset>',
        '<fieldset class="', opts.btnWrapper, '">',
            '<button type="submit" name="', opts.btnInt, '" class="', opts.btnInt, '">', checkNameLenght(opts.btnName, namesLenght.btnNameLenght, 7, 'Login'), '</button>',
        '</fieldset>',
    '</fieldset>',
    '<div class="toogle-button">',
        '<ul class="inside">',
            '<li class="toogle"><a><img src="assets/gfx/toogle.png" alt="Back" /></a></li>',
        '</ul>',
    '</div>',
'</form>',
'<div class="toogle-buttons">',
'</div>'
];





var getProps = function(obj) {
return {
    'position': 'absolute',
    'top': (($(window).height() - $(obj).outerHeight()) / 2) + 'px',
    'left': (($(window).width() - $(obj).outerWidth()) / 2) + 'px'
}
}

var showObj = function(obj, callback) {
return setTimeout(function() {
    if (opts.centerObj === true) {
        var cssProps = getProps(obj);
        obj.css(cssProps).fadeIn('slow');
    }
    else {
        obj.fadeIn('slow');
    }
    if (typeof callback == 'function') {
        callback.call(this);
    }
}, 1500);
}


var appendStructure = function(wrapper, structure, cls) {

return $(wrapper).appendTo(container).hide(function() {
    var obj = $(container).find(cls);
    $(structure.join('')).appendTo(obj);
    showObj(obj, function() {
        if (opts.centerObj === true) {
            $(window).resize(function() {
                var cssProps = getProps(obj);
                obj.css(cssProps);
            });
        }
    });
});
}

appendStructure(structureWrapper, structure, '.content-login');

What it's suppose to do is take that array and concatenate it and then append it to the container, body in my case, and then fade the content in. Can you spot anything I'm doing wrong ?

I appreciate the help :) You also have a fiddle here: http://jsfiddle.net/VUjMH/ .

Answer 1

Your code fails over when there are no opts properties set since you can't carry out concatenation on something that has no means of first being translated into a string.

Throughout your code the word "length" was misspelled "lenght"

Apart from that I've been through the code form jsfiddle and brought it up to a point where it works.

I've made a small change to the "checkNameLength" function, removing the "namesLength" parameter and replacing instances of it with "name.length"

var container = 'body';
 var opts = {
    debug: true,
     formClass:"",
     userWrapper:"",
     userInt:"",
     userLbl:"",
     userIcon:"" ,
     userName:"",
     passName:"",
     btnName:""
 }

  /*Removed redundant namesLength var*/   
 var checkNameLength = function(name, allowedLength, defaultName) {
     if ((name.length<= allowedLength) && !(/\s[^a-z]/i.test(name))) {
         return name;
     }
     else {
         if (opts.debug === true) {
             console.log(name + ' is to long or contains special characters / numbers | Please      choose a name shorter than ' + allowedLength+ ' characters or remove any character / number');
         }
         return defaultName;
     }
 }


 var structureWrapper = '<div class="content-login"></div>';

 var structure = [
     '<form name="', opts.formClass, '" class="', opts.formClass, '" method="post" action="#">',
    '<fieldset class="', opts.fieldsWrapper, '">',
        '<fieldset class="', opts.userWrapper, '">',
            '<label for="', opts.userInt, '" class="', opts.userLbl, '"><img src="', opts.userIcon, '" alt="', opts.userName, '" /></label>',
            '<input type="text" name="', opts.userInt, '" class="', opts.
userInt, '" placeholder="', checkNameLength(opts.userName,  16, 'Username'), '" value="" autocomplete="off" />',
        '</fieldset>',
        '<fieldset class="', opts.passWrapper, '">',
            '<label for="', opts.passInt, '" class="', opts.passLbl, '"><img src="', opts.passIcon, '" alt="', opts.passName, '" /></label>',
            '<input type="password" name="', opts.passInt, '" class="', opts.passInt, '" placeholder="', checkNameLength(opts.passName, 16, 'Password'), '" value="" autocomplete="off" />',
        '</fieldset>',
        '<fieldset class="', opts.btnWrapper, '">',
            '<button type="submit" name="', opts.btnInt, '" class="', opts.btnInt, '">', checkNameLength(opts.btnName, 7, 'Login'), '</button>',
        '</fieldset>',
    '</fieldset>',
    '<div class="toogle-button">',
        '<ul class="inside">',
            '<li class="toogle"><a><img src="assets/gfx/toogle.png" alt="Back" /></a></li>',
        '</ul>',
    '</div>',
'</form>',
'<div class="toogle-buttons">',
'</div>'
];





var getProps = function(obj) {
    return {
        'position': 'absolute',
        'top': (($(window).height() - $(obj).outerHeight()) / 2) + 'px',
        'left': (($(window).width() - $(obj).outerWidth()) / 2) + 'px'
     }
 }

 var showObj = function(obj, callback) {
     return setTimeout(function() {
         if (opts.centerObj === true) {
             var cssProps = getProps(obj);
             obj.css(cssProps).fadeIn('slow');
         }
         else {
             obj.fadeIn('slow');
        }
         if (typeof callback == 'function') {
            callback.call(this);
         }
     }, 1500);
 }


 var appendStructure = function(wrapper, structure, cls) {

     return $(wrapper).appendTo(container).hide(function() {
         var obj = $(container).find(cls);
         $(structure.join('')).appendTo(obj);
         showObj(obj, function() {
             if (opts.centerObj === true) {
                 $(window).resize(function() {
                     var cssProps = getProps(obj);
                     obj.css(cssProps);
                 });
             }
         });
     });
 }

 appendStructure(structureWrapper, structure, '.content-login');