[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Помогите придумать алгоритм работы с текстом в JS
sergeiss
Идея вот какая... Есть у нас несколько "окошек" (например ДИВы или textarea), где выводится текст. И я хочу сделать так, чтобы текст выводился в этих окошках последовательно, т.е. как только одно окно заполнилось, так тут же продолжался вывод в другом окне, затем в третьем и т.д. То есть, чтобы никаких прокруток не было и чтобы ничего не оставалось "за кадром". Изменили размер окна браузера - изменились размеры окошек - вызываем функцию на JS, которая заново распеределяет текст. Вот в алгоритме работы этой функции и заключается вопрос.

Своих идей пока нету. Хотелось бы услышать что-нибудь разумное, желательно без пустого флуда. Только если флуд по делу smile.gif

PS. На самом деле, если придумать такой алгоритм, то его можно использовать не только для текста, но и для любого набора элементов, идущих друг за другом в потоке вывода. Ну, допустим, группа ДИВов, которая выводится последовательно друг за другом. Их тоже можно будет, при наличии алгоритма, выводить в разных "окошках".

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
sharki
sergeiss
Элементарно, Ватсон, задаешь в переменной (назовем её дивчик) начальный див (стартовый так сказать), далее тебе нужно ловить событие изменения контента в диве, ну там как хочешь, т.е главное знать что прям щас вставился текст. Далее ты начинаешь измерять контентную область текста и область дива, следовательно это нужно, чтобы понять появился ли скролл, или нет. Я даже нашел для тебя кусочек кода, примерно
if (document.documentElement.scrollHeight - document.documentElement.clientHeight  == document.documentElement.scrollTop)

http://javascript.ru/forum/jquery/20576-po...skrollinga.html

Далее при проявлении скрола, ты в той самой переменной дивчик, меняешь название на следующий див в группе, тем самым ты сместишь "курсор" в другое место.
sharki
Думаю если ты хочешь остатки текста перекидывать в другой, тебе стоит просто вычислить размер шрифта, и далее по кол-ву символов вычислять вмещается ли он в див. Если нет, то вычитаешь сколько нужно символов с конца (можешь до пробела, как тебе угодно) и передвигая курсор на другой див, вставляешь в него
sharki
А вот немного инфы по высоте шрифта http://learn.javascript.ru/font-size-line-height
sergeiss
sharki - первый вариант понятен, я уже после задания вопроса почти что успел сам понять, без подсказки, как это сделать smile.gif Добавляем слово из текста и сравниваем clientHeight и и scrollHeight для ДИВа. Этот же алгоритм годится, если нам нужно добавить не текст, а набор других элементов.

А вот второй вариант... Меньше нравится.

Спасибо за умные мысли! smile.gif Буду думать дальше.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
sharki
Ну а если другой контент, то проверяй на целостность содержимого, наличие других объектов. И если такие имеются, вычиляй размеры каждой из групп, и по первому же посту проверяй. Думаю удобнее если все отдельный блоки класть в стек, для последующего вычленения
sergeiss
Чегой-то всё слишком просто оказалось... Но работает же, зараза! :)

Готовый код тут, если кому понадобится:

Свернутый текст

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Untitled Document</title>
<script
language="javascript">
var
initial_text=
'Floating point precision. \nFloating point numbers have limited precision. Although it depends on the system, PHP typically uses the IEEE 754 double precision format, which will give a maximum relative error due to rounding in the order of 1.11e-16. Non elementary arithmetic operations may give larger errors, and, of course, error progragation must be considered when several operations are compounded. \n Additionally, rational numbers that are exactly representable as floating point numbers in base 10, like 0.1 or 0.7, do not have an exact representation as floating point numbers in base 2, which is used internally, no matter the size of the mantissa. Hence, they cannot be converted into their internal binary counterparts without a small loss of precision. This can lead to confusing results: for example, floor((0.1+0.7)*10) will usually return 7 instead of the expected 8, since the internal representation will be something like 7.9999999999999991118.... \n So never trust floating number results to the last digit, and never compare floating point numbers for equality. If higher precision is necessary, the arbitrary precision math functions and gmp functions are available. ';

function set_text( id_label, id_div, txt )
{
var labels=id_label.length;
var divs=id_div.length;

for( var i=0; i<labels; i++)
document.getElementById( id_label[i] ).innerText='';

if( labels == 0 || divs == 0 || labels != divs )
return;

var curr_element=0;
var label=document.getElementById( id_label[0] );
var div=document.getElementById( id_div[0] );


var word=txt.split( ' ' );
var c=word.length;
var prev_text='';
var curr_text='';

div.style.overflow='auto';
for( var i=0; i<c; i++)
{
curr_text = curr_text + word[i] + ' ';
label.innerText=curr_text;
if( div.clientHeight == div.scrollHeight && div.clientWidth == div.scrollWidth )
{
prev_text=curr_text;
continue;
}

i--;
div.style.overflow='hidden';
label.innerText=prev_text;

if( curr_element++ >= divs )
break;

curr_text='';
label=document.getElementById( id_label[curr_element] );
div=document.getElementById( id_div[curr_element] );
div.style.overflow='auto';

}

}


var info_list = new Array( 'info1', 'info2', 'info3', 'info4');
var div_list = new Array( 'div1', 'div2', 'div3', 'div4');

function set_info()
{
set_text( info_list, div_list, initial_text );
}
</script>

</head>

<body
onload="set_info()" onresize="set_info()">
<div
id="div1" style="width:45%; height: 150px; background-color:#66FF99; ">
<label
id="info1"></label>
</div>

<div
id="div2" style="width:45%; height: 150px; background-color:#6699CC; position:absolute; right:40px; top:55px; ">
<label
id="info2"></label>
</div>

<div
id="div3" style="width:75%; height: 150px; background-color:#FF9999; position:absolute; left:100px; top:250px; ">
<label
id="info3"></label>
</div>

<div
id="div4" style="width:75%; height: 50px; background-color:#99CC00; position:absolute; left:100px; top:450px; ">
<label
id="info4"></label>
</div>

</body>
</html>



_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.