Форум

LRCenter · #1 (**permalink**) 09.11.2011, 12:06

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

Все прекрасно работает в 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>

ksa · #2 (**permalink**) 09.11.2011, 13:52

Сообщение от 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>

LRCenter · #3 (**permalink**) 09.11.2011, 13:59

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

ksa · #4 (**permalink**) 09.11.2011, 14:23

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

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

Разумеется!

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

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

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

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

Ну дают...

ksa · #5 (**permalink**) 09.11.2011, 14:26

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

<!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>

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

LRCenter · #6 (**permalink**) 09.11.2011, 14:47

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

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

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

LRCenter · #7 (**permalink**) 09.11.2011, 14:49

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

ksa · #8 (**permalink**) 09.11.2011, 14:59

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

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

Ты тут не один.

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

LRCenter · #9 (**permalink**) 09.11.2011, 15:09

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

ksa · #10 (**permalink**) 09.11.2011, 15:53

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

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

Угу...

Форум

Справочник

Discord чат

Курсы javascript