1

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

2

2 Answers 2

2

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);
Sign up to request clarification or add additional context in comments.

6 Comments

Thanks this did help some but still not working and no errors in FireBug
the best tutorial i have found so far is this one from nettuts.com: net.tutsplus.com/videos/screencasts/… Don't let the name scare you, its aimed at people who dont know much about jquery plugin development, but want to learn.
Thanks for the tutorial it did help but still having issues.
would it be possible to email me so I can help you better? It's difficult to understand what problems you are having without a thorough explanation and source code.
After further looking into this I see the "Remember the Milk" validation test page JavaScript code is like this: var errorBox = function(... Why do you say to change this, "needs to change to: $.errorBox = function(..."? Just wanting to know the best way to code this. Thanks in advance.
|
1
var name = document.getElementById('name');

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

should be

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

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

or

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

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

1 Comment

Thanks I used the 3rd example, Newbie mistake =P

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.