hello,
I'm on my first day with jQuery so maybe i oversee some things. But I tried
the autoexpander plugin from the
"interface"-site, and obviously the resizing of the textarea doesnt work as
it should or im missing
something.
(check out http://interface.eyecon.ro/demos/expander.html
http://interface.eyecon.ro/demos/expander.html )
the "height" doesnt grow up fast enough. ok it grows and you always have the
view/focus on the line that
youre editing. but this is mainly because overflow is set to visible (or
default). if you set it to "hidden"
then youre writing in the dark. (tested it on the usual windows-browsers).
ok, looking into the source. ...
a hidden <div> with the properties of the selected textarea is inserted on
top of the body-element and
filled with the html-value of the textarea. so it (the box) grows when
typing. the width of the div is then
copied to the width of the textarea. since the <div> grows til the width of
the body (ouch?), obviously (?)
the height of the div or the number of lines the div uses doesnt correspond
to the number of lines the same
text will occupy in the textarea. since - thats what its all about - the
textarea has a limited width.
so before we set the height of the textarea, we need to set the width of the
div to match the text-box. Ive
done this as you can see in the snippet. after that we should reset the
width to default of course. the
first thing works, the second, the resetting breaks opera 8.5.
so im new to jQuery. and im not experienced in JavaScript/DOM or whatever.
could you please give me some
feedback on my explanation. the jQuery.iExpander.helper.width('auto');
doesnt reset the <div>. at least
it breaks opera 8.5x where applying the "patch" results in maximizing the
input-fields.
// pWW instead of pW because Opera needs a "padding"-fix
jQuery.iExpander.helper.html('pWW');
spacer = jQuery.iExpander.helper.get(0).offsetWidth;
jQuery.iExpander.helper.html(html);
width = jQuery.iExpander.helper.get(0).offsetWidth + spacer;
if (this.Expander.limit && width > this.Expander.limit[0]) {
width = this.Expander.limit[0];
}
this.style.width = width + 'px';
if (this.tagName == 'TEXTAREA') {
// ---- set the width of the helper to the new width of the textarea-element
jQuery.iExpander.helper.width(width+'px');
height = jQuery.iExpander.helper.get(0).offsetHeight + spacer;
//----- reset the width of the helper. ouch.
jQuery.iExpander.helper.width('auto');
if (this.Expander.limit && height > this.Expander.limit[1]) {
height = this.Expander.limit[1];
}
this.style.height = height + 'px';
}
ok, first day, first website, first post
greetings
Caspar
--
..
thdz.x
--
View this message in context:
http://www.nabble.com/malfunction-in-Autoexpander-Interface--tf2605761.html#a7271141
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
