Watermarking doesn't work if an element is hidden on page load

[GoogleCodeExporter]

What steps will reproduce the problem?
1. display none a div with an element you want to watermark
2. dom elements must be visible to have height
3. will appear too high on input/element

Fix: (From Line 79 refactoring)

$elem.wrap(watermark_container).attr('data-jq-watermark', 'processed');
            if (this.nodeName.toLowerCase() == 'textarea') {
                e_height = $elem.css('line-height');
                e_height = e_height === 'normal' ? parseInt($elem.css('font-size')) : e_height;
                e_top = ($elem.css('padding-top') != 'auto' ? parseInt($elem.css('padding-top')) : 0);
                e_top += ($elem.css('margin-top') != 'auto' ? parseInt($elem.css('margin-top')) : 0);
            } else {
                var $hiddenParent = null;
                //this only works if the element is visible
                //so if hidden find element show > magic > hide again
                if ($elem.is(':hidden')) {
                    $parents = $elem.parents().each(function () {
                        var $this = $(this);
                        if ($this.css('display') == 'none') {
                            $this.show();
                            $hiddenParent = $this;
                        }
                    });
                }
                //calc where to place the watermark
                e_height = $elem.outerHeight();
                if ($hiddenParent && $hiddenParent.is(':visible')) {
                    $hiddenParent.hide();
                }
            }

regards
James

Original issue reported on code.google.com by james.ro...@reedonline.co.uk on 20 Sep 2010 at 11:26

[GoogleCodeExporter]

AMEND:

$elem.wrap(watermark_container).attr('data-jq-watermark', 'processed');
            if (this.nodeName.toLowerCase() == 'textarea') {
                e_height = $elem.css('line-height');
                e_height = e_height === 'normal' ? parseInt($elem.css('font-size')) : e_height;
                e_top = ($elem.css('padding-top') != 'auto' ? parseInt($elem.css('padding-top')) : 0);
                e_top += ($elem.css('margin-top') != 'auto' ? parseInt($elem.css('margin-top')) : 0);
            } else {
                var $hiddenParents = [];
                //this only works if the element is visible
                //so if hidden find element show > magic > hide again
                if ($elem.is(':hidden')) {
                    $elem.parents().each(function () {
                        var $this = $(this);
                        if ($this.css('display') == 'none') {
                            $this.show();
                            $hiddenParents.push($this);
                        }
                    });
                }
                //calc where to place the watermark
                e_height = $elem.outerHeight();

                $.each($hiddenParents, function () {
                   $(this).hide();
                });                
            }

Original comment by james.ro...@reedonline.co.uk on 20 Sep 2010 at 11:55

[GoogleCodeExporter]

Are you sure you are reporting this issue to the correct plugin?  My Watermark 
plugin does not specify any kind of height or positioning attributes.  It 
simply loads the text directly into the input element.

From what I can gather, you are working with a watermark plugin that inserts a 
new element into the DOM and floats it over the input element.  That isn't done 
here.

Original comment by t...@speednet.biz on 3 Dec 2010 at 4:12

• Changed state: Invalid