Форум

#1 (**permalink**) 23.02.2009, 15:26

Здраствуйте, у меня вопрос, как можно сделать прокрутку текста находящегоя в форме по кнопкам, тоесть чтоб скрола небыло видно.

нажимаю на стрелочку и текст прокручивается на строку в низ.
тоесть как в яндексе картинки.

Гуру, подскажите пожалуйста.

Zibba · #2 (**permalink**) 23.02.2009, 16:03

задать свойство overflow:hidden; чтобы не появлялись полосы прокрутки, а затем повесить обработчики событий на клавиши которые будут управлять прокруткой и менять свойство top.

#3 (**permalink**) 23.02.2009, 16:21

Zibba, спасибо огромное, только мне не на клавиши а на рисунок в виде стрелки надо.

может у когонибудь пример есть, как сделать можно.

Zibba · #4 (**permalink**) 23.02.2009, 16:30

Ну если на ирсунок в виде стрелки, то тогда повесите обработчик onclick() на этот рисунок.

Zibba · #5 (**permalink**) 23.02.2009, 17:10

В общем будет как то так (проверки уже сами повставляете, просто идею показываю):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Scroll</title>
	</head>
	<style type="text/css">
		#content{
			position:relative;
			overflow:hidden;
			margin:2px;
			height:100px; width:240px;
			border:solid 1px #000;
			font-size:16px;
		}
		#down, #up{
			margin:2px;
			background:#eee;
			border:solid 1px #000;
			width:60px;
			cursor:pointer;
		}
		#text{
			position:absolute;
		}
	</style>
	<script type="text/javascript">
			var top = 0;
			
			function up(){
				var text = document.getElementById('text');
				top = top - 20;
				text.style.top = top+'px';
			}
			
			function down(){
				var text = document.getElementById('text');
				top = top + 20;
				text.style.top = top+'px';
			}
	</script>
	<body>
		<div id="content">
			<div id="text">			
			1:<br>
			2:<br>
			3:<br>
			4:<br>
			5:<br>
			6:<br>
			7:<br>
			8:<br>
			9:<br>
			10:<br>
			</div>
		</div>
		<div id="up" onclick="up();">Вверх</div>
		<div id="down" onclick="down();">Вниз</div>
	</body>
</html>

#6 (**permalink**) 23.02.2009, 18:16

Zibba, огромное спасибо что сделали, то что надо

ТЕМУ МОЖНО ЗАКРЫВАТЬ, ЕЩЕ РАЗ СПАСИБО Zibba ЗА ОКАЗАННУЮ ПОМОЩЬ

#7 (**permalink**) 24.02.2009, 20:22

А если можно еще как сделать чтобы в опере работало, а то у меня чета не хочет, только в ие.

как сделать чтобы если несколько таких форм на странице чтобы счетчик не перекидывал.
пример: отмотал первую форуму, нажимаешь например в низ или верх на другой то автоматом перекидывает на ту строчку что смотрел в первой форме.

onclick="down(значение ид для разных форм);

<script type="text/javascript">
            var top = 0;
 
            function up(zncenie){
                
                var text = document.getElementById(zncenie);
                
                top = top - 30;
                text.style.top = top+'px';
                
            }
 
            function down(zncenie){
         
                var text = document.getElementById(zncenie);
                top = top + 30;
                text.style.top = top+'px';
            }
 </script>

Zibba · #8 (**permalink**) 24.02.2009, 20:40

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

отмотал первую форуму, нажимаешь например в низ или верх на другой то автоматом перекидывает на ту строчку что смотрел в первой форме

Наверное из за счетчика, var top, который изначально равен 0, попробуйте завести для каждой формы свой счетчик, и передавать его в функции движения, тогда будет все нормально. Ну или смотреть по id счетчик форм, в общем тут полет фантазии.

В опере не знаю почему не пашет, не могу проверить. В сафари и лисе работает O_o

#9 (**permalink**) 24.02.2009, 22:17

Zibba, спасибо, попробуем.

#10 (**permalink**) 24.02.2009, 23:07

неполучается что то у меня, то крутится но работает попордку, сначала одна форма потом другая, то вобще ничего не работает.

так еще пробывал тож не хочет

<script type="text/javascript">
            
 
            function up(index){
              var top(index) = 0;  
                var text = document.getElementById(index);
                
                top = top(index) - 30;
                text.style.top = top+'px';
                
            }
 
            function down(index){
         var top(index) = 0;  
                var text = document.getElementById(index);
                top = top(index) + 30;
                text.style.top = top+'px';
            }
            
            
    </script>

Форум

Справочник

Discord чат

Курсы javascript