jQuery Plugin development help

Question

Hello jQuery Gurus,

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 == "") {
    //...
}