jQuery Plugin development help

Question

This is my first attempt at a plugin but I think I'm missing the whole "How to" on this.

Ok here goes:

Trying to write an error popup box for form validation.

I like the look and functionality on this JavaScript code on this page, See demo here and source here.

It's basically what I want to do if the user enters invalid data.

Now I have tried to create a jQuery plugin with this code but it's not working, any help would be great :-)

(function($){

/* Might use the fadein fadeout functions */
var MSGTIMER = 20;
var MSGSPEED = 5;
var MSGOFFSET = 3;
var MSGHIDE = 3;

var errorBox = function(target, string, autohide, options)
{
    var ebox        = $(ebox);
    var eboxcontent = $(eboxcontent);
    var target      = $(target);
    var string      = $(string);
    var autohide    = $(autohide);
    var obj = this;

    if (!document.getElementById('ebox')) {
        ebox = document.createElement('div');
        ebox.id = 'ebox';
        eboxcontent = document.createElement('div');
        eboxcontent.id = 'eboxcontent';
        document.body.appendChild(ebox);
        ebox.appendChild(eboxcontent);
        ebox.style.filter = 'alpha(opacity=0)';
        ebox.style.opacity = 0;
        ebox.alpha = 0;
    }
    else {
        ebox = document.getElementById('ebox');
        eboxcontent = document.getElementById('eboxcontent');
    }
    eboxcontent.innerHTML = string;
    ebox.style.display = 'block';
    var msgheight = ebox.offsetHeight;
    var targetdiv = document.getElementById(target);
    targetdiv.focus();
    var targetheight = targetdiv.offsetHeight;
    var targetwidth = targetdiv.offsetWidth;
    var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2);
    var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;
    ebox.style.top = topposition + 'px';
    ebox.style.left = leftposition + 'px';
    clearInterval(ebox.timer);
    ebox.timer = setInterval("fadeMsg(1)", MSGTIMER);
    if (!autohide) {
        autohide = MSGHIDE;
    }
    window.setTimeout("hideMsg()", (autohide * 1000));

    // hide the form alert //
    this.hideMsg(msg) = function (){
        var msg = document.getElementById('msg');
        if (!msg.timer) {
            msg.timer = setInterval("fadeMsg(0)", MSGTIMER);
        }
    };

    // face the message box //
    this.fadeMsg(flag) = function() {
        if (flag == null) {
            flag = 1;
        }
        var msg = document.getElementById('msg');
        var value;
        if (flag == 1) {
            value = msg.alpha + MSGSPEED;
        }
        else {
            value = msg.alpha - MSGSPEED;
        }
        msg.alpha = value;
        msg.style.opacity = (value / 100);
        msg.style.filter = 'alpha(opacity=' + value + ')';
        if (value >= 99) {
            clearInterval(msg.timer);
            msg.timer = null;
        }
        else 
            if (value <= 1) {
                msg.style.display = "none";
                clearInterval(msg.timer);
            }
    };

    // calculate the position of the element in relation to the left of the browser //
    this.leftPosition(target) = function() {
        var left = 0;
        if (target.offsetParent) {
            while (1) {
                left += target.offsetLeft;
                if (!target.offsetParent) {
                    break;
                }
                target = target.offsetParent;
            }
        }
        else 
            if (target.x) {
                left += target.x;
            }
        return left;
    };

    // calculate the position of the element in relation to the top of the browser window //
    this.topPosition(target) = function() {
        var top = 0;
        if (target.offsetParent) {
            while (1) {
                top += target.offsetTop;
                if (!target.offsetParent) {
                    break;
                }
                target = target.offsetParent;
            }
        }
        else 
            if (target.y) {
                top += target.y;
            }
        return top;
    };

    // preload the arrow //
    if (document.images) {
        arrow = new Image(7, 80);
        arrow.src = "images/msg_arrow.gif";
    }
};

$.fn.errorbox = function(options)
{
    this.each(function()
    {
        var element = $(this);

        // Return early if this element already has a plugin instance
        if (element.data('errorbox')) return;

        // pass options to plugin constructor
        var errorbox = new errorBox(this, options);

        // Store plugin object in this element's data
        element.data('errorbox', errorbox);
    });
};

})(jQuery);

How Im calling it

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>jQuery Plugin - Error ToolTip</title>
    <script type="text/javascript" src="js/jquery.js">
    </script>
    <script type="text/javascript" src="js/jquery.errorbox.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            var name = document.getElementById('name');

            if(name == "") {
                $('#name','You must enter your name.',2).errorbox();
                alert("Blank");
            }
        });
    </script>
    <link rel="stylesheet" type="text/css" href="css/errorbox.css" />
</head>
<body>
    <div>
        Name: <input type="text" id="name" width="30"></input>
    </div>
</body>

Any help on my first plugin would be great, thanks in advance.

--Phill

Answer 1

The var errorBox = function(... needs to change to:

$.errorBox = function(...

then you can call it on the jquery object.

Secondly, for clarity you may want to use $('#eboxcontent') instead of document.getElementById('eboxcontent') . It wont be any faster, but it is "clearer" to other jquery developers.

Lastly, jQuery has many built in functions for fading things over a specified time period, and it appears that you have built your own. I know that jQuery's fading is cross-browser compatible. just use:

$('#someDivId').fadeOut(timeInMilliseconds);

Answer 2

var name = document.getElementById('name');

if(name == "") {
    //...
}

should be

var name = document.getElementById('name');

if(name.value == "") {
    //...
}

or

var name = $('#name').val();

if(name == "") {
    //...
}