you mean like this: http://remysharp.com/wp-content/uploads/2007/03/label_over_example.html ?
^_^ good job anyways! On 3/31/07, Scott Sauyet <[EMAIL PROTECTED]> wrote:
Hi Folks, I'm fairly new to JQuery. I recently needed a technique I had seen recently on A List Apart to combine labels and text input boxes into a single control in order to save space. The technique is at http://alistapart.com/articles/makingcompactformsmoreaccessible The Javascript there looked like a lot for what was done, so I tried to simplify it into a JQuery plug-in. I'm looking for advice as to whether this is done in the best way possible. A demo page is at http://scott.sauyet.com/Javascript/Demo/Overlabel/ and I've posted a blurb about it on my blog: http://tinyurl.com/2vx4n8 The code is fairly simple and much simpler than the original (see the original article or the commented out code in the demo page), but I'm wondering if there are further simplifications that should be made. I'm especially bothered by the number of times I am switching between DOM objects and their JQuery counterparts. It seems somehow counterintutive that I should need to do so as many times as I do. Any advice would be appreciated. This is the plug-in code: jQuery.fn.overlabel = function() { this.each(function(index) { var label = $(this); var field; var id = this.htmlFor || label.attr('for'); if (id && (field = document.getElementById(id))) { var control = $(field); label.addClass("overlabel-apply"); if (field.value !== '') { label.css("text-indent", "-1000px"); } control.focus(function () {label.css("text-indent", "-1000px");}).blur(function () { if (this.value === '') { label.css("text-indent", "0px"); } }); label.click(function() { var label = $(this); var field; var id = this.htmlFor || label.attr('for'); if (id && (field = document.getElementById(id))) { field.focus(); } }); } }); } And it would be called like this: $(document).ready(function() { $("label.overlabel").overlabel(); }); I'm also wondering what the thought is on just how much plug-ins should stand on their own. This right now is dependent upon rules being defined in the CSS for the label (position: absolute, top, left, z-index) and for a common ancestor of the label and the input box (position:relative or absolute). I could do all this in the plug-in, of course, but that limits flexibility on the CSS side. Is there any established wisdom about this in the JQuery community? Thanks for any insight you can offer, -- Scott Sauyet _______________________________________________ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
_______________________________________________ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/