Javascript-форум - Вставить div в javascript

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

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Вставить div в javascript (https://javascript.ru/forum/misc/48031-vstavit-div-v-javascript.html)

yapka

17.06.2014 10:07

Вставить div в javascript

Добрый день. Прошу у Вас помощи. Подскажите пожалуйста , как вставить div в этот код:

function pageScroll() {
    	window.scrollBy(0,50); 
    	scrolldelay = setTimeout('pageScroll()',100); 
}

и вот кнопка:

<a href="javascript:pageScroll()"> </a>

Пробовал делать так:

function pageScroll() {
		
		var div = document.getElementById("#left");	
    	window.scrollBy(0,50); 
    	scrolldelay = setTimeout('pageScroll  ("#left")',100);

и так:

function pageScroll() {
	var div = ("#left"); 	
    	window.scrollBy(0,50); 
    	scrolldelay = setTimeout('pageScroll(document.getElementById("#left"))', 100);
}

Все равно при нажатии на кнопку срабатывает главная страница, подскажите пожалуйста , как вставить правильно div.

рони	17.06.2014 10:32

yapka,
:-? а ещё проще обьяснить?

рони	17.06.2014 10:45

yapka,
что ваша функция должна сделать в итоге? пока какая-то бесконечная рекурсия -- функция себя бесконечно запускает

Erolast

17.06.2014 10:47

Допустим, что прокрутить див до низу.

Зачем решетка? Зачем ты в функцию pageScroll передаешь что-то, если в ней нет аргументов? Где остановка при достижении максимальной прокрутки? У тебя тут бесконечная рекурсия получилась. И, главное - с чего бы должен прокрутиться див, когда у тебя ясно написано "window.scrollBy"?

<!DOCTYPE HTML>
<html>
<head> </head>
<body>
  <script>
  function scroll_into_bottom(element, step, delay) {
    if (element.scrollTop >= element.scrollTopMax) return;
    if (step == undefined) step = 10;
    if (delay == undefined) delay = 10;
    element.scrollTop += step;
    setTimeout(function(){scroll_into_bottom(element, step, delay)}, delay);
  }
  </script>
    
  <div id="mydiv" style="height: 100px; overflow-y: scroll; background-color: blue;">
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
  </div>
  <button onclick="scroll_into_bottom(document.getElementById('mydiv'))">Scroll into bottom!</button>
</body>
</html>

yapka

17.06.2014 10:54

Цитата:

Сообщение от Erolast (Сообщение 316873)

<!DOCTYPE HTML>
<html>
<head> </head>
<body>
  <script>
  function scroll_into_bottom(element, step, delay) {
    if (element.scrollTop >= element.scrollTopMax) return;
    if (step == undefined) step = 10;
    if (delay == undefined) delay = 10;
    element.scrollTop += step;
    setTimeout(function(){scroll_into_bottom(element, step, delay)}, delay);
  }
  </script>
    
  <div id="mydiv" style="height: 100px; overflow-y: scroll; background-color: blue;">
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
  </div>
  <button onclick="scroll_into_bottom(document.getElementById('mydiv'))">Scroll into bottom!</button>
</body>
</html>

не работает так , div становится белым и все. остановка вот:

function stopScroll() {
    	clearTimeout(scrolldelay);
}

рони	17.06.2014 10:55

Erolast,
в некоторых браузерах несмог ваш код запустить а в некоторых получил туже рекурсию :-?

yapka

17.06.2014 10:58

Пробую делать так:

function pageScroll() {
		
		var div = ("#left"); 	
    	div.scrollBy(0,50); 
    	scrolldelay = setTimeout('pageScroll ()',100);

не выходит.. белый экран

Erolast

17.06.2014 11:00

Цитата:

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

А... scrollTopMax не везде поддерживается, походу.
А так?

<!DOCTYPE HTML>
<html>
<head> </head>
<body>
  <script>
  function scroll_into_bottom(element, step, delay) {
    if (element.scrollTop >= (element.scrollHeight - element.clientHeight)) return;
    if (step == undefined) step = 10;
    if (delay == undefined) delay = 10;
    element.scrollTop += step;
    setTimeout(function(){scroll_into_bottom(element, step, delay)}, delay);
  }
  </script>
     
  <div id="mydiv" style="height: 100px; overflow-y: scroll; background-color: blue;">
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
  </div>
  <button onclick="scroll_into_bottom(document.getElementById('mydiv'))">Scroll into bottom!</button>
</body>
</html>

Цитата:

не выходит.. белый экран

И не выйдет.

рони	17.06.2014 11:00

yapka,
:-? что должна сделать ваша функция и причём в ней див?

рони	17.06.2014 11:02

Цитата:

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

А так?

форум говорит ошибка

yapka

17.06.2014 11:03

Цитата:

Сообщение от Erolast (Сообщение 316879)

А... scrollTopMax не везде поддерживается, походу.
А так?

<!DOCTYPE HTML>
<html>
<head> </head>
<body>
  <script>
  function scroll_into_bottom(element, step, delay) {
    if (element.scrollTop >= (element.scrollHeight - element.clientHeight)) return;
    if (step == undefined) step = 10;
    if (delay == undefined) delay = 10;
    element.scrollTop += step;
    setTimeout(function(){scroll_into_bottom(element, step, delay)}, delay);
  }
  </script>
     
  <div id="mydiv" style="height: 100px; overflow-y: scroll; background-color: blue;">
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
  </div>
  <button onclick="scroll_into_bottom(document.getElementById('mydiv'))">Scroll into bottom!</button>
</body>
</html>

И не выйдет. Я тебе привел пример, как надо. Нажми на кнопку "посмотреть".

вышло спасибо. но как мне выше указанный код заставить видеть div ? чтоб при нажатии на кноку он опускался постоянно ,а при нажатии на другую останавливался. Подскажите пожалуйста.

Erolast

17.06.2014 11:03

Цитата:

форум говорит ошибка

Хз, код вроде как валидный полностью, форум тупит походу)
http://learn.javascript.ru/play/sifMtc

yapka

17.06.2014 11:05

Цитата:

Сообщение от рони (Сообщение 316880)

yapka,
:-? что должна сделать ваша функция и причём в ней див?

Должна при нажатии на кнопку опускать постоянно div , а другая кнопка останавливать

Вот остановка:

function stopScroll() {
        clearTimeout(scrolldelay);
}



<a href="javascript:stopScroll()"></a>

Erolast

17.06.2014 11:09

Цитата:

вышло спасибо. но как мне выше указанный код заставить видеть div ?

Передавай первым аргументом ссылку на див. Неужели непонятно по коду? В твоем случае

<a href="javascript:pageScroll(document.getElementById('left'))"> </a>

Цитата:

чтоб при нажатии на кноку он опускался постоянно ,а при нажатии на другую останавливался.
Должна при нажатии на кнопку опускать постоянно div , а другая кнопка останавливать

Тогда так:

<!DOCTYPE HTML>
<html>
<head> </head>
<body>
  <script>
  function scroll_into_bottom(element, step, delay) {
    if (step == undefined) step = 10;
    if (delay == undefined) delay = 10;
    element.scrollTop += step;
    window.scroll_timeout = setTimeout(function(){scroll_into_bottom(element, step, delay)}, delay);
  }
  </script>
      
  <div id="mydiv" style="height: 100px; overflow-y: scroll; background-color: blue;">
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
  </div>
  <button onclick="scroll_into_bottom(document.getElementById('mydiv'))">Scroll into bottom!</button>
  <button onclick="clearTimeout(scroll_timeout)">Stop scrolling!</button>
</body>
</html>

yapka

17.06.2014 11:11

Цитата:

Сообщение от Erolast (Сообщение 316886)

Передавай первым аргументом ссылку на див. Неужели непонятно по коду? В твоем случае

<a href="javascript:pageScroll(document.getElementById('left'))"> </a>

Тогда так:

<!DOCTYPE HTML>
<html>
<head> </head>
<body>
  <script>
  function scroll_into_bottom(element, step, delay) {
    if (step == undefined) step = 10;
    if (delay == undefined) delay = 10;
    element.scrollTop += step;
    window.scroll_timeout = setTimeout(function(){scroll_into_bottom(element, step, delay)}, delay);
  }
  </script>
      
  <div id="mydiv" style="height: 100px; overflow-y: scroll; background-color: blue;">
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
  </div>
  <button onclick="scroll_into_bottom(document.getElementById('mydiv'))">Scroll into bottom!</button>
  <button onclick="clearTimeout(scroll_timeout)">Stop scrolling!</button>
</body>
</html>

Спасибо тебе . Все как хотел получилось. Не все понятно , только начал изучать javascript. Еще раз спасибо тебе добрый человек ):victory:

Часовой пояс GMT +3, время: 11:55.