lots and lots of te...">
Geek Answers Handbook

JQuery: scroll the text box to the given position

I have a text box with lots of text:

<textarea cols="50" rows="10" id="txt">lots and lots of text goes here</textarea>

I want to scroll the text box down so that the user can see the 2000th character. How to do this using javasctipt / jQuery?

 $('#txt').scrollToCharNo(2000); // something like this would be great

EDIT (my solution)

Well, I managed to get it to work myself. The only way I found is to create a DIV with the same font and width as the text box, put the SPAN next to the desired character and find the position of this range.

I'm sure someone might find my solution useful, so paste it here:

 jQuery.fn.scrollToText = function(search) { // getting given textarea contents var text = $(this).text(); // number of charecter we want to show var charNo = text.indexOf(search); // this SPAN will allow up to determine given charecter position var anch = '<span id="anch"></span>'; // inserting it after the character into the text text = text.substring(0, charNo) + anch + text.substring(charNo); // creating a DIV that is an exact copy of textarea var copyDiv = $('<div></div>') .append(text.replace(/\n/g, '<br />')) // making newlines look the same .css('width', $(this).attr('clientWidth')) // width without scrollbar .css('font-size', $(this).css('font-size')) .css('font-family', $(this).css('font-family')) .css('padding', $(this).css('padding')); // inserting new div after textarea - this is needed beacuse .position() wont work on invisible elements copyDiv.insertAfter($(this)); // what is the position on SPAN relative to parent DIV? var pos = copyDiv.find('SPAN#anch').offset().top - copyDiv.find('SPAN#anch').closest('DIV').offset().top; // the text we are interested in should be at the middle of textearea when scrolling is done pos = pos - Math.round($(this).attr('clientHeight') / 2); // now, we know where to scroll! $(this).scrollTop(pos); // no need for DIV anymore copyDiv.remove(); }; $(function (){ $('#scroll_button').click( function() { // scrolling to "FIND ME" using function written above $('#txt').scrollToText('FIND ME'); return false; } ); });

Here is a demo (it works!): Http://jsfiddle.net/KrVJP/

Since none of the answers is not really solved the problem, I agree with the experimental version XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

+6
javascript jquery scroll textarea
source share
2 answers

I'm not sure if this will work. Please also check here . It seems to be working at 2000, 1500 and 1000 positions.

CHANGE confused font size or line height

  $(function (){ var height = 2000/$('#txt').attr('cols'); $('#txt').scrollTop(height*13); $('#txt').selectRange(2000,2000); //this is just to check }); $.fn.selectRange = function(start, end) { //this is just to check return this.each(function() { if (this.setSelectionRange) { this.focus(); this.setSelectionRange(start, end); } else if (this.createTextRange) { var range = this.createTextRange(); range.collapse(true); range.moveEnd('character', end); range.moveStart('character', start); range.select(); } }); };

UPDATE How about this

  var height = 1200/$('#txt').attr('cols'); var line_ht = $('#txt').css('line-height'); line_ht = line_ht.replace('px',''); height = height*line_ht;
+3
source share

You can use this jquery plugin

0
source share

More articles:


All Articles