VPF::Прокрутка дива нажатием на картинки

champion

Дата 15.6.2006, 12:51 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 272
Регистрация: 26.1.2005

Репутация: нет
Всего: 2

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

--------------------

FPMOleg

Дата 15.6.2006, 19:02 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 39
Регистрация: 15.5.2006

Репутация: нет
Всего: нет

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

w03zd8rc

Дата 5.2.2008, 16:01 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 128
Регистрация: 26.2.2007

Репутация: нет
Всего: нет

а можно ещё раз текст данного скрипта выложить?

Ghirik

Дата 5.2.2008, 16:26 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

FPMOleg, забавляетесь? smile

Цитата

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

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

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

Цитата

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

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

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

--------------------

Отдадим всё клиенту, пускай его машина мучается...

Wolf1994

Дата 5.2.2008, 16:44 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1701
Регистрация: 5.10.2004

Репутация: 4
Всего: 29

http://www.wolf-ware.ru/forum/id/184/1/skr...linga-kartinok/

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

Это сообщение отредактировал(а) Wolf1994 - 5.2.2008, 16:45

w03zd8rc

Дата 6.2.2008, 08:04 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 128
Регистрация: 26.2.2007

Репутация: нет
Всего: нет

Цитата

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

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

Ghirik

Дата 6.2.2008, 10:29 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

Скрол-бар, что ли?
Вроде такого?

Код


<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 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 128
Регистрация: 26.2.2007

Репутация: нет
Всего: нет

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

Ghirik

Дата 6.2.2008, 10:54 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

offsetWidth или offsetHeight смотря что понимать под длиной smile

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

--------------------

Отдадим всё клиенту, пускай его машина мучается...

w03zd8rc

Дата 6.2.2008, 11:24 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 128
Регистрация: 26.2.2007

Репутация: нет
Всего: нет

у мя полоса прокрутки всё нормально робит, прокручивает див, единственное что надо тока в полосе прокрутки поставить макс значение (максимальное значение, в моём случае это нижняя точка дива, высота так сказать) и ещё у мя не получается сделать так чтоб полоса прокрутки была справа от дива (она то накладывается на неё, то под ней мастится). тексты того что у мя получилось выкладываю тут, в основном всё украдено =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/com...s/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 - 6.2.2008, 11:34

w03zd8rc

Дата 7.2.2008, 11:52 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 128
Регистрация: 26.2.2007

Репутация: нет
Всего: нет

ктонить помогите сделать привязку полосы прокрутки к 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 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

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 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 128
Регистрация: 26.2.2007

Репутация: нет
Всего: нет

спс огромное. поиск по сайту юзал, но все топы были старыми и ссылки в них были битыми.

Nickname

Дата 7.2.2008, 16:09 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 246
Регистрация: 24.10.2006
Где: Санкт-Петербург

Репутация: нет
Всего: 1

Вот выдернул с mail.ru может оно:

Присоединённый файл ( Кол-во скачиваний: 34 )

hacks.rar 2,18 Kb

Nickname

Дата 7.2.2008, 16:17 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 246
Регистрация: 24.10.2006
Где: Санкт-Петербург

Репутация: нет
Всего: 1

К прошлому архиву еще вот это

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

Присоединённый файл ( Кол-во скачиваний: 33 )

imgs.rar 3,53 Kb

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »