On Feb 5, 8:06 am, Ariel Flesler <[EMAIL PROTECTED]> wrote:
> Hi Lihao, I assume 550 is width and height so it's a squared textarea.
> IMO 550 fits on any screen ( fits on 800x600 ).
> You could simply scroll to the textarea and leave a gap below. You
> could add a margin to the textarea and set the option 'margin' to
> true, will it stop when it reaches the margin. The hard way would be:
>
> var $textarea = $('textarea');//this you need to customize
> var gap = ($(window).height() - $textarea.height()) / 2;//this is the
> margin on top
> $.scrollTo( $textarea, 1000, { offset: -gap });
>
> That is if you only scroll vertically, else you need to calculate both
> gaps and use:
> $.scrollTo( $textarea, 1000, { offset:{ top:-gap1, left:-gap2 }} );
>
> If you really want to scroll based on the caret position, you need to
> count the lines with a regex, looking for \n or /^/m.
> I don't think you need to involve font-size. Textareas have a property
> named 'rows'. So to keep it easy, if you specified 55 rows, and the
> height is 550, then each row is 10px. So you count the rows and voila!
> ( I think :) ).
> So well.. give this a try, let me know if this doesn't do what you
> need.
>
> Cheers
> Ariel Flesler
On Feb 5, 8:06 am, Ariel Flesler <[EMAIL PROTECTED]> wrote:
> Hi Lihao, I assume 550 is width and height so it's a squared textarea.
> IMO 550 fits on any screen ( fits on 800x600 ).
> You could simply scroll to the textarea and leave a gap below. You
> could add a margin to the textarea and set the option 'margin' to
> true, will it stop when it reaches the margin. The hard way would be:
>
> var $textarea = $('textarea');//this you need to customize
> var gap = ($(window).height() - $textarea.height()) / 2;//this is the
> margin on top
> $.scrollTo( $textarea, 1000, { offset: -gap });
>
> That is if you only scroll vertically, else you need to calculate both
> gaps and use:
> $.scrollTo( $textarea, 1000, { offset:{ top:-gap1, left:-gap2 }} );
>
> If you really want to scroll based on the caret position, you need to
> count the lines with a regex, looking for \n or /^/m.
> I don't think you need to involve font-size. Textareas have a property
> named 'rows'. So to keep it easy, if you specified 55 rows, and the
> height is 550, then each row is 10px. So you count the rows and voila!
> ( I think :) ).
> So well.. give this a try, let me know if this doesn't do what you
> need.
>
> Cheers
Hi, Ariel:
really thank you for your help, I guess I've done a first-version
solution with your plug-in, looks work well : -) The code is roughly
as follows:
BTW. I want to scroll the contents within the textares element:-)
var $text = $('form#myform textarea:eq(0)');
var txt = $test.val();
var scroll = {
x : $text.width()/2.0, /* center x-coordinate */
y : $text.height()/2.0, /* center y-coordinate */
r : $text.height()/11, /* height per-row, 11 total */
v : $text.height() /* vertical height */
};
var do_scroll = function() {
/* IEs dont need to scroll.*/
if ($.browser.msie) return;
/* get the sub-string before the current caret position */
var btxt = txt.substr(0, findhist.pos[current]);
/* compute gap by counting number of lines, roughly 50 chars per-
line */
var gap = (btxt.match(/.{1,50}|\n(?=\n)/g).length) * scroll.r;
if (gap > scroll.v)
$text.scrollTo({ top: gap - scroll.y });
else
$text.scrollTo({ top: 0 });
}
Some weird things:
1) Since it's hard to specify number of characters per-line becouse of
"word-wrap", so I roughly set a number '50' as chars per-line so that
I can count the number of rows, is there any more practical ways??
2) I've specified rows="10" as an attribute of the textarea, i.e.
<textarea name="content" id="content" rows="10" cols="60"
style="width:550px"></textarea>
but I found it's actually 11 rows shown in my textarea? Is there any
tricks?? :- )
3) cols="60" seems not work as I thought, I can only type 43 '1's but
96 'i's in one line.. So seems this value is not very useful: - (
Thanks again,
lihao(XC)
