Question

I have this code in plugins.js:

$(document).ready(function() {                         

watermark = function(elemId, text, hoverClass, normalClass, parentId){
    // onFocus event
    $("#"+elemId).focus(function(){
        ($(this).val()==text)
            $(this).val('');
        (parentId!=0)
            byId(parentId).className = hoverClass;
    });
    // onBlur event
    $("#"+elemId).blur(function(){
        ($(this).val()=='')
            $(this).val(text);
        (parentId!=0)
            byId(parentId).className = normalClass;
    }); 
}
});

Then I have this in the index.js file:

new watermark("footer_contact_name", "Name", "footer_form_text_active", "footer_form_text", "footer_form_field_1");

Everything works when written in the same js file, but when calling it like this from the index.js file, I get an undefined function error in FireFox, using Firebug to debug.

Any ideas?

Thanks

BTW: I include these in index.html like this:

<script src="scripts/plugins.js" type="text/javascript"></script>
<script src="scripts/index.js" type="text/javascript"></script>

Answer 1

You need to call the function after the document gets ready – wrap it in:

$(document).ready(function() { });