Javascript-форум - Номера строк и Chrome

Javascript-форум (https://javascript.ru/forum/)

- Opera, Safari и др. (https://javascript.ru/forum/css-html-browser/)

- - Номера строк и Chrome (https://javascript.ru/forum/css-html-browser/23019-nomera-strok-i-chrome.html)

Номера строк и Chrome

Здравствуйте. Есть простой скрипт счетчика строк. При соответствующей разметке отображает номера строк, как в редакторе кода.

Все прекрасно работает в Opera, но не работает в хроме и Firefox.
В чем причина отсутствия кроссбраузерности в данном случае?

<script language='JavaScript'>

var new_nums=0; 
var old_nums=0; 
function startCounter(){ 
check(); 
timerID = setTimeout("startCounter()", 10);} 
function redraw(){ 
ex = new String(); 
for(i=1;i<=new_nums;i++){ex+=i+"<br>";} 
document.getElementById("holder").innerHTML=ex;} 
function check(){ 
s=new String(document.getElementById('iLines').value); 
ar=s.split("\r\n"); 
new_nums=ar.length; 
if(new_nums != old_nums){ 
old_nums=new_nums; 
redraw(); 
}else{ 
document.getElementById("holder").scrollTop=document.getElementById("iLines").scrollTop;}}

</script>




<table border=0>
<tr>
<td valign='top' width=30> 

<div id='holder' style='height:400px;overflow:hidden;font-family:Courier New;font-size:11px;line-height:16px;padding-top:3px'>1</div>

</td>

<td>

<textarea id='iLines' name='text' style='overflow:auto;height:400px;width:95%;' wrap='OFF'>111</textarea> 

</td>
</tr>
</table>


<script language='JavaScript'>startCounter();</script>

Цитата:

Сообщение от LRCenter

В чем причина отсутствия кроссбраузерности в данном случае?

Вот в этом...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
var new_nums=0; 
var old_nums=0; 
function startCounter(){ 
	check(); 
	timerID = setTimeout(startCounter, 10);
};
function redraw(){ 
	ex = new String(); 
	for(i=1;i<=new_nums;i++){ex+=i+"<br>";} 
	document.getElementById("holder").innerHTML=ex;
};
function check(){ 
	s=new String(document.getElementById('iLines').value); 
	ar=s.split("\r\n"); 
	*!*
	new_nums=ar.length; 
	*/!*
	alert(new_nums); 
	if (new_nums != old_nums){ 
		old_nums=new_nums; 
		redraw(); 
	} else { 
		document.getElementById("holder").scrollTop=document.getElementById("iLines").scrollTop;
	}
};
</script>
</head>
<body>
<table border=0>
	<tr>
		<td valign='top' width=30> 
			<div id='holder' style='height:400px;overflow:hidden;font-family:Courier New;font-size:11px;line-height:16px;padding-top:3px'>1</div>
		</td>
		<td>
			<textarea id='iLines' name='text' style='overflow:auto;height:400px;width:95%;' wrap='OFF'>111</textarea> 
		</td>
	</tr>
</table>
<button onclick='check()'>Go</button>
<script language='JavaScript'>
	//startCounter();
</script>
</body>
</html>

ksa, ваш пример так же не работает в Chrome и Firefox.
А зачем в начале документа закомментированые ссылки на jQuery?

Цитата:

Сообщение от LRCenter

ваш пример так же не работает в Chrome и Firefox

Разумеется! :D Поскольку я лишь показал почему не работает...

Цитата:

Сообщение от LRCenter

А зачем в начале документа закомментированые ссылки на jQuery?

Это потому, что некоторые (например ты) не делают полные примеры, а выкладывают огрызли и всякого рода "Лего"...
Вот и приходится самому все собирать в кучу. Так вам еще и не так собрал! :D Ну дают...

Как вариант использовать такое...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
var new_nums=0; 
var old_nums=0; 
function startCounter(){ 
	check(); 
	timerID = setTimeout(startCounter, 10);
};
function redraw(){ 
	ex = new String(); 
	for(i=1;i<=new_nums;i++){ex+=i+"<br>";} 
	document.getElementById("holder").innerHTML=ex;
};
function check(){ 
	var s=document.getElementById('iLines').value; 
	ar=s.match(/\n/g); 
	new_nums=(ar)? ar.length: 1; 
	if (new_nums != old_nums){ 
		old_nums=new_nums; 
		redraw(); 
	} else { 
		document.getElementById("holder").scrollTop=document.getElementById("iLines").scrollTop;
	}
};
</script>
</head>
<body>
<table border=0>
	<tr>
		<td valign='top' width=30> 
			<div id='holder' style='height:400px;overflow:hidden;font-family:Courier New;font-size:11px;line-height:16px;padding-top:3px'>1</div>
		</td>
		<td>
			<textarea id='iLines' name='text' style='overflow:auto;height:400px;width:95%;' wrap='OFF'>111</textarea> 
		</td>
	</tr>
</table>
<button onclick='check()'>Go</button>
<script language='JavaScript'>
	startCounter();
</script>
</body>
</html>

Но в этом варианте "не видно" последнюю строчку... :(

ksa, Спасибо!
Разобрался, исправил момент с отображением последней строки, даже сделал одну запасную на всякий :)

Приведу лишь исправленную функцию.

function redraw(){ 
	ex = new String(); 
	for(i=1;i<=new_nums+2;i++){ex+=i+"<br />";} 
	document.getElementById("holder").innerHTML=ex;
}

Так и не понял зачем jQuery? :blink:

Цитата:

Сообщение от LRCenter

Так и не понял зачем jQuery?

Ты тут не один. :D
Для другого "Лего" я его выну из коментария и всего делов - готов очередной пример... ;)

А, понятно! Это у вас типа заготовка такая ;)

Цитата:

Сообщение от LRCenter

типа заготовка такая

Угу... :yes: