Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Прокрутка дива нажатием на картинки


Автор: champion 15.6.2006, 12:51
У меня есть див, и две картинки. Как сделать, чтобы когда я жму на одну картинку, то див прокручивался вверх, на другую вниз? 

Автор: FPMOleg 15.6.2006, 19:02
http://script.woweb.ru/index.htm/c/304 

Автор: w03zd8rc 5.2.2008, 16:01
а можно ещё раз текст данного скрипта выложить? 

Автор: Ghirik 5.2.2008, 16:26
FPMOleg, забавляетесь? smile 

Цитата

вот здесь есть то что тебя интересует


Где скрипт то?

Добавлено через 4 минуты и 13 секунд
champion, 

Цитата

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

Что означает прокручивался? Ездил по странице? http://forum.vingrad.ru/index.php?showtopic=173179&view=findpost&p=1402901

Поставьте просто две кнопки.

Автор: Wolf1994 5.2.2008, 16:44
http://www.wolf-ware.ru/forum/id/184/1/skript-skrollinga-kartinok/

Картинки заменить на div.
Сорри за абракадабру в демке - установите кодировку UTF-8 в браузере.

Автор: w03zd8rc 6.2.2008, 08:04
Цитата

Что означает прокручивался? Ездил по странице? В соседней ветке я давал ссылку.


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

Автор: Ghirik 6.2.2008, 10:29
Скрол-бар, что ли?
Вроде такого?

Код

<style type="text/css">body {scrollbar-arrow-color: #ff00ff;scrollbar-base-color:#ffff00;scrollbar-dark-shadow-color: #ffff00;scrollbar-track-color: #f0f0ff;scrollbar-face-color: #ff00ff;scrollbar-shadow-color: #00ffff;scrollbar-highlight-color: #00ffff;scrollbar-3d-light-color: #00ffff;}
</style>

Автор: w03zd8rc 6.2.2008, 10:37
нет. я уже сам нашёл =) осталось ток одну маленькую весч сделать. никто не подскажет как получить длину div'а? а то кавыряться в учебниках неохота. каму надо могу выложить что у мя получилось..

Автор: Ghirik 6.2.2008, 10:54
offsetWidth или offsetHeight смотря что понимать под длиной smile 

А выложить то стоит, вдруг кому потребуется.

Автор: w03zd8rc 6.2.2008, 11:24
у мя полоса прокрутки всё нормально робит,  прокручивает див, единственное что надо тока в полосе прокрутки поставить макс значение (максимальное значение, в моём случае это нижняя точка дива, высота так сказать) и ещё у мя не получается сделать так чтоб полоса прокрутки была справа от дива (она то накладывается на неё, то под ней мастится). тексты того что у мя получилось выкладываю тут, в основном всё украдено =D частично мной подправлено чтоб работало.

в текст проги вставляем следующее:

в head:
Код

<style>
  .sliderInput {
    height:0;
    width:30;
    font-family : Arial, Helvetica, sans-serif;
    font-size : 12px;
  }
</style>
<style type='text/css'>
body {height: 130%}
#my {height: 100px;  border: 0px solid black; overflow: hidden}
</style>
<script type="text/javascript" src="http://www.blueshoes.org/_bsJavascript/lib/LibCrossBrowser.js"></script>
<script type="text/javascript" src="http://www.blueshoes.org/_bsJavascript/lib/EventHandler.js"></script>
<script type="text/javascript" src="http://www.blueshoes.org/_bsJavascript/core/form/Bs_FormUtil.lib.js"></script>
<script type="text/javascript" src="Bs_Slider.class.js"></script>
<script><!--
function init(){
  mySlider = new Bs_Slider();
    mySlider.loadSkin('burp-vertical');  //стиль. где смотреть стили написано ниже. 
  mySlider.height        = 80; //высота - подбирается под высоту дива
  mySlider.minVal        = 0;  //мин значение ползунка
  mySlider.maxVal        = 100; //макс значение ползунка
  mySlider.valueDefault  = 0; //нач положение ползунка
  mySlider.styleValueFieldClass = 'sliderInput'; //стиль, не трогаем
  mySlider.drawInto('sliderDiv1');  //прорисовка

  mySlider.attachOnChange(bsSliderChange);  //тут функция ктоторая происходит при изменении положения ползунка (в тч при нажатии стьрелок)
}
function bsSliderChange(sliderObj, val, newPos){   // тут соответсвенно сама функция
    document.getElementById('my').scrollTop=val;
}
// --></script>


стили тут: http://www.blueshoes.org/_bsJavascript/components/slider/examples/example7.html. название понравившегося стиля пишем в mySlider.loadSkin. 

в тексте страницы следующее:
Код

<div id="sliderDiv1">
</div>
<div id='my'>
1<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>10<br>21<br>31<br>41<br>51<br>
</div>


вот я не могу понять как связать <div id="sliderDiv1"> и <div id='my'> чтоб они рядом друг с другом находились и макс значение ползунка поставить равную высоту дива. кто знает отпишитесь плиз. 

Добавлено @ 11:32
сам скрипт выложил тут:
http://w03zd8rc.mail333.com/Bs_Slider.class.js

Автор: w03zd8rc 7.2.2008, 11:52
ктонить помогите сделать привязку полосы прокрутки к div'у. выкладываю полный текст страницы но я как ни пробовал у м я не получается привязать...

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<title>JavaScript Bs_Slider example 1</title>
<style>
  .sliderInput {
    height:0;
    width:30;
    font-family : Arial, Helvetica, sans-serif;
    font-size : 12px;
  }
</style>
<style type='text/css'>
body {height: 130%}
#my {height: 100px;  border: 0px solid black; overflow: hidden}
</style>
<script type="text/javascript" src="http://www.blueshoes.org/_bsJavascript/lib/LibCrossBrowser.js"></script>
<script type="text/javascript" src="http://www.blueshoes.org/_bsJavascript/lib/EventHandler.js"></script>
<script type="text/javascript" src="http://www.blueshoes.org/_bsJavascript/core/form/Bs_FormUtil.lib.js"></script>
<script type="text/javascript" src="Bs_Slider.class.js"></script>
<script><!--
function init(){
  mySlider = new Bs_Slider();
  mySlider.loadSkin('burp-vertical');
  mySlider.height        = 80;
  mySlider.minVal        = 0;
  mySlider.maxVal        = document.getElementById("my").offsetheight; //тут должна быть длина div'a
  mySlider.valueDefault  = 0;
  mySlider.styleValueFieldClass = 'sliderInput';
  mySlider.drawInto('sliderDiv1');
  mySlider.attachOnChange(bsSliderChange);
}
function bsSliderChange(sliderObj, val, newPos){ 
    document.getElementById('my').scrollTop=val;
}
// --></script>
</head>
<body bgColor="white" text="#3366aa" link="#0000ee" alink="#ff0000" vlink="#551a8b" onload="init();">
<table>
<tr>
<td>
<div id='my'>
1<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>10<br>21<br>31<br>41<br>51<br>
</div>
</td><td>
<div id="sliderDiv1">
</div></td></dr></table>
</body></html>


может какнить перенести этот скрипт из заголовка в тело страницы, но у мя тутже возникла проблема - скрипт из тела не хочет запускатся (просто полоса не появляется и всё =()

Автор: Ghirik 7.2.2008, 13:33
w03zd8rc, ну полные ломы пробовать создать то, что уже в тысячах вариантов сделано. Вы поиск, хотя бы по форуму использовали?

http://www.n-son.com/scripts/jsScrolling/new/example2.html
http://www.ghtml.com/showoff/scrollbar/index.html
http://13thparallel.org/archive/dhtml-scrollbars/example.htm
http://13thparallel.org/archive/dhtml-scrollbars/
http://www.blueshoes.org/en/javascript/slider/


Это только с ходу, в первых результатах поиска, и только на этом форуме.

Автор: w03zd8rc 7.2.2008, 13:59
спс огромное. поиск по сайту юзал, но все топы были старыми и ссылки в них были битыми.

Автор: Nickname 7.2.2008, 16:09
Вот выдернул с mail.ru может оно:

Автор: Nickname 7.2.2008, 16:17
К прошлому архиву еще вот это

Добавлено через 8 минут и 58 секунд
Блин извеняюсь - невнимательно прочитал тему топика, и выложил прокрутку картинок, а не прокрутку дива. Ну ладно пусть лежит, может кому-нить понадобится. 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)