Как сделать свой скроллинг?

 
0
 
JavaScript
ava
guest | 07.10.2004, 16:12
Хотел написать скроллинг для некоторого IFrame
сделал табличку 2х2, в верхнюю-левую ячейку положил IFrame с содержимым, в нижнюю-левую и верхнюю-правуюю соответственно горизонтальную и вертикальную лнейки прокрутки.
Линейка прокрутки из себя так-же представляет таблицу с тремя ячейками, средняя из которых является "бегунком".
Упраление бегунком вроде тоже простое - определил попала мышь на "бегунок" или нет и в случае попадания перетаскиваю.

Вся проблема начинается когда появляется прокрутка окна. Координаты мышки вычисляются относительно левого-верхнего угла окна, а координаты "бегунка" вычисляются относительно верхнего-вевого угла документа.таблицы1.ячейки-скроллинга.таблицы-скроллинга.

Вопроса собственно три:
1. Можноли сразу вычислить координаты "бегунка" относительно документа?
2. Как скорректировать координаты мышки относительно документа при его прокрутки в окне?
3. Не геморой ли все это, может можно сделать проще?smile
Comments (15)
ava
crash90 | 07.10.2004, 15:58 #
А во флеше не пробывал сделать? :qstn
ava
Aliance | 07.10.2004, 17:20 #
могу подкинуть скрипт скроллинга div`а. У элемента же iframe скроллинг есть и так, зачем делать еще свой?
ava
Alx | 07.10.2004, 19:14 #
Цитата
подкинуть скрипт скроллинга div`а

у div`а тоже есть! (overflow) всё равно кидай!
ava
Sardar | 07.10.2004, 20:02 #
Цитата (chis @ 7.10.2004, 14:12)
1. Можноли сразу вычислить координаты "бегунка" относительно документа?

Смещение в пикселях: element.scroll(Top|Left)
Цитата (chis @ 7.10.2004, 14:12)
2. Как скорректировать координаты мышки относительно документа при его прокрутки в окне?

Не понял что ты хочешь. Мышь ты трогать не можешь, по понятным причнам ;-)
Прокрутить что угодно можно изменив поле scrollTop
Цитата (chis @ 7.10.2004, 14:12)
3. Не геморой ли все это, может можно сделать проще?

Ну смотря что ты конкретно хочешь сделать smile Кидай код, разберемся.
ava
guest | 08.10.2004, 07:57 #
Цитата (Aliance @ 7.10.2004, 17:20)
могу подкинуть скрипт скроллинга div`а. У элемента же iframe скроллинг есть и так, зачем делать еще свой?

Кадай скрипт, поглядим как енто может работать ([email protected]).

Прокручивать нужно некоторую табличку базы данных полученну через cgi. Нужно сделать, чтобы заголовок таблицы при вертикальной прокрутке оставался на месте, а при горизонтальной смещался соответственно с коолнками данных. Одним фреймом тут (насколько я понял) не обойтись. Я оформляю один фрейм например с горизонтальной прокруткой. В энтом фрейме открывается документ с заголовком таблицы и фреймом для самой таблицы. Тепереча надо как-то синхронизировать горизонтальную прокрутку заголовка и содержимого таблицы. В обчем стандартным скроллингом не обойтись.



ava
guest | 08.10.2004, 08:10 #
Цитата (Sardar @ 7.10.2004, 20:02)
Не понял что ты хочешь. Мышь ты трогать не можешь, по понятным причнам

Я хочу перетащить "бегунок" мышкой. Но если все окно прокручено (весь документ не лезет в окно и его прокручивают вних), то координаты мышки вычисленные как eventX, eventY с координатами бегунка вычисленными как offsetTop, offsetLeft, offsetHeight, offsetWidth

А как тут можно отправить скрипт? Сейчас попробую в ето окошко посадить.

<script>
var fl=false;
var dl_x=0;
var dl_y=0;
var s_Left=0;
var s_Top=0;
var s_Right=0;
var s_Bottom=0;
var s_Height=0;
var s_Width=0;
</script>
<script FOR="document" Event="onmousedown()">
s_Left = t0.offsetLeft + t0_tdScroll.offsetLeft + t1.offsetLeft + td2.offsetLeft;
s_Top = t0.offsetTop + t0_tdScroll.offsetTop + t1.offsetTop + td2.offsetTop;
s_Width = td2.offsetWidth;
s_Height = td2.offsetHeight;
s_Right = s_Left + s_Width;
s_Bottom = s_Top + s_Height;
ss.value = 't0.offsetTop' + t0.offsetTop + 'LeftTop(' + s_Left + 'x' + s_Top + ') mouse (' + event.x + ' x ' + event.y + ') ' + dl_x;
if ((event.x > s_Left) & (event.x < s_Right) & (event.y > s_Top) & (event.y < s_Bottom)) {
dl_x= event.x - s_Left;
fl=true;
}
</script>
<script FOR="document" Event="onmouseup()">
fl=false;
</script>
<script FOR="document" Event="onmousemove()">
if (fl) {ss.value=ss.offsetWidth;
td1.width=event.x - dl_x;
}
</script>

<TABLE id="t0" border=1 width=100% height=100%>
<TR>
<TD>s</TD>
<TD width=10>s</TD>
</TR>
<TR>
<TD id="t0_tdScroll">
<TABLE id=t1 border=1 width=100% bgColor=#c0c0c0 cellPadding=0 cellSpacing=1>
<TR>
<TD id=td1 width=200 style="BACKGROUND: white; BORDER: medium none; PADDING-LEFT: 3pt; PADDING-RIGHT: 3pt"></TD>
<TD id=td2 width=100 style="BACKGROUND: #f0f0f0; BORDER: medium none; PADDING-LEFT: 3pt; PADDING-RIGHT: 3pt"></TD>
<TD style="BACKGROUND: white; BORDER: medium none; PADDING-LEFT: 3pt; PADDING-RIGHT: 3pt"></TD>
</TR>
</TABLE>
</TD>
<TD height=1 width=10></TD>
</TR>
</TABLE>

<INPUT id="ss" size="86">
Продолжение документа
<P>sdfgsdfg
<P>sdfgsdfgsdgsdfg
<P>sdfgsdgsdfdfdh
<P>sdfghsdfgsdfg
<P>sdfgsdgsdg
<P>sdfgsdgshdfhdfgh
<P>dfhdfh
<P>sdfgsdgds
<P>dfghdfhdfh
<P>dfhfdh
<P>sdfgsdgsdgfsdgf


M
0
Пользуйся тегами code;-)
ava
Aliance | 08.10.2004, 10:53 #
Чтобы надпись всегда была на одном месте, используем сл. код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Название</title>
</head>

<body>

<script>
// © Dynamic Drive (www.dynamicdrive.com)

// текст
var message='<b><font color=000000 size=5>Visit http://aliance.hoha.ru</font></b>'

// задний фон текста
var backgroundcolor="yellow"

// enter 0 for always display, 1 for a set period, 2 for random display mode
var displaymode=0

//if displaymode is set to display for a set period, enter the period below (1000=1 sec)
var displayduration=10000

//enter 0 for non-flashing message, 1 for flashing
var flashmode=1
//if above is set to flashing, enter the flash-to color below
var flashtocolor="lightgreen"

function regenerate(){
window.location.reload()
}

var which=0

function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",400)
}


function display2(){
if (document.layers){
if (topmsg.visibility=="show")
topmsg.visibility="hide"
else
topmsg.visibility="show"
}
else if (document.all){
if (topmsg.style.visibility=="visible")
topmsg.style.visibility="hidden"
else
topmsg.style.visibility="visible"
setTimeout("display2()",Math.round(Math.random()*10000)+10000)
}
}

function flash(){
if (which==0){
if (document.layers)
topmsg.bgColor=flashtocolor
else
topmsg.style.backgroundColor=flashtocolor
which=1
}
else{
if (document.layers)
topmsg.bgColor=backgroundcolor
else
topmsg.style.backgroundColor=backgroundcolor
which=0
}
}

if (document.all){
document.write('<span id="topmsg" style="position:absolute;visibility:hidden">'+message+'</span>')
}

function logoit(){
document.all.topmsg.style.left=document.body.scrollLeft+document.body.clientWidth/2-document.all.topmsg.offsetWidth/2
document.all.topmsg.style.top=document.body.scrollTop+document.body.clientHeight-document.all.topmsg.offsetHeight-4
}

function logoit2(){
topmsg.left=pageXOffset+window.innerWidth/2-topmsg.document.width/2
topmsg.top=pageYOffset+window.innerHeight-topmsg.document.height-5
setTimeout("logoit2()",90)
}

function setmessage(){
document.all.topmsg.style.left=document.body.scrollLeft+document.body.clientWidth/2-document.all.topmsg.offsetWidth/2
document.all.topmsg.style.top=document.body.scrollTop+document.body.clientHeight-document.all.topmsg.offsetHeight-4
document.all.topmsg.style.backgroundColor=backgroundcolor
document.all.topmsg.style.visibility="visible"
if (displaymode==1)
setTimeout("topmsg.style.visibility='hidden'",displayduration)
else if (displaymode==2)
display2()
if (flashmode==1)
setInterval("flash()",1000)
window.onscroll=logoit
window.onresize=new Function("window.location.reload()")
}

function setmessage2(){
topmsg=new Layer(window.innerWidth)
topmsg.bgColor=backgroundcolor
regenerate2()
topmsg.document.write(message)
topmsg.document.close()
logoit2()
topmsg.visibility="show"
if (displaymode==1)
setTimeout("topmsg.visibility='hide'",displayduration)
else if (displaymode==2)
display2()
if (flashmode==1)
setInterval("flash()",1000)
}

if (document.layers)
window.onload=setmessage2
else if (document.all)
window.onload=setmessage
</script>

контент

</body>
</html>


© 1st Page
ava
Sardar | 08.10.2004, 22:23 #
Aliance ну что это такое smileg , IE only? попробуй перепиши что бы везде работало...
Цитата (chis @ 7.10.2004, 14:12)
Вся проблема начинается когда появляется прокрутка окна. Координаты мышки вычисляются относительно левого-верхнего угла окна, а координаты "бегунка" вычисляются относительно верхнего-вевого угла документа.таблицы1.ячейки-скроллинга.таблицы-скроллинга

Кажется я понял твою идею.
Линейки прокрутки у тебя слои с абсолютными позициями. Их позицию можно вычислить опрашивая offset(Left|Top), сидержимое фрейма можешь прокручивать изменяя scrollTop у body. Звиняй что код не пишу, времени ноль. Если у самого не получится, на днях сделаю.
ava
Aliance | 08.10.2004, 23:29 #
Sardar
Нет, ну под NN тоже должно
if (document.layers)
window.onload=setmessage2

Хотя согласен, бесспорно, не DOM`овский код. Переписать - зда запроста smile Проста времени небыло сразу, сам же знаешь... :cool
ava
guest | 11.10.2004, 09:07 #
Ура получилось, маленько поменял технологию, только вот глюки лезут, скорее всего связанные с выделением текста. Можа кто подскажет, как на время перетаскивания "бегунка" отключать выделение текта. И еще как сделкть нулевую ширину ячейки таблицы.


<script>
var flH=false;
var flV=false;
var m_posOld = 0;
var s_posOld = 0;
function fnHDown() {m_posOld=event.x; s_posOld=tdH1.width; flH=true;}
function fnHUp() {flH=false;}
function fnVDown() {m_posOld=event.y; s_posOld=tdV1.height; flV=true;}
function fnVUp() {flV=false;}
</script>
<script FOR="document" Event="onmousemove()">
if (flH) {tdH1.width = eval(s_posOld) + eval(event.x) - eval(m_posOld); divData.style.posLeft=eval(-1*tdH1.width); divTitul.style.posLeft=eval(-1*tdH1.width)}
if (flV) {tdV1.height = eval(s_posOld) + eval(event.y) - eval(m_posOld); divData.style.posTop=eval(-1*tdV1.height)}
</script>
<script FOR="document" Event="onmouseup()">
flH = false;
flV = false;
</script>


<TABLE border=1 width=100% height=0 cellPadding=0 cellSpacing=0 style="font-size=0">

<TR><TD height=70>
<DIV style="position:relative;width:100%;height:100%;overflow:hidden;border:2px ridge white">
<DIV id="divTitul" style="position:absolute">
<TABLE style="font-size=50">Заголовок таблицы</TABLE>
</DIV>
</DIV>
</TD>
<TD></TD></TR>

<TR><TD style="font-size=100">
<DIV style="position:relative;width:100%;height:100%;overflow:hidden;border:2px ridge white">
<DIV id="divData" style="position:absolute">
Тело таблицы
<P>ssssssssssssssssssdddddddddddddddddddddddddddgggggggggggggggggrrrrrrrrrrrrrrrrrrrrrrttttttttttttttttttttttttttttt111111111111111111
<P>1111111111111111111111111111111111111111111111111111111111111111
<P>2222222222222222222222222222222222222222222222222222222222222222
</DIV>
</DIV>
</TD>
<TD width=1 valign=top>
<TABLE width=15 height=400 bgColor=#c0c0c0 cellPadding=0 cellSpacing=1 style="font-size=0">
<TR><TD id=tdV1 height=10 style="BACKGROUND: white; BORDER: medium none; PADDING-LEFT: 3pt; PADDING-RIGHT: 3pt"></TD></TR>
<TR><TD id=tdV2 height=100 onmousedown=fnVDown() onmouseup=fnVUp() style="BACKGROUND: #f0f0f0; BORDER: medium none; PADDING-LEFT: 3pt; PADDING-RIGHT: 3pt"></TD></TR>
<TR><TD style="BACKGROUND: white; BORDER: medium none; PADDING-LEFT: 3pt; PADDING-RIGHT: 3pt"></TD></TR>
</TABLE>
</TD>
</TR>

<TR>
<TD>
<TABLE width=100% height=15 bgColor=#c0c0c0 cellPadding=0 cellSpacing=1 style="font-size=0">
<TR>
<TD id=tdH1 width=200 style="BACKGROUND: white; BORDER: medium none; PADDING-LEFT: 3pt; PADDING-RIGHT: 3pt"></TD>
<TD id=tdH2 width=100 onmousedown=fnHDown() onmouseup=fnHUp() style="BACKGROUND: #f0f0f0; BORDER: medium none; PADDING-LEFT: 3pt; PADDING-RIGHT: 3pt"></TD>
<TD style="BACKGROUND: white; BORDER: medium none; PADDING-LEFT: 3pt; PADDING-RIGHT: 3pt"></TD>
</TR>
</TABLE>
</TD>
<TD></TD>
</TR>

</TABLE>

ava
Aliance | 11.10.2004, 11:43 #
Цитата (chis @ 11.10.2004, 09:07)
Тело таблицы
  <P>ssss

Сделай тут пробелы - читать неудобно!!!

Цитата (chis @ 11.10.2004, 09:07)
eval(event.x) - eval(m_posOld);

Использование этой функции крайне нежелательно, т.к. тормозит работу сценария.

Цитата (chis @ 11.10.2004, 09:07)
как на время перетаскивания "бегунка" отключать выделение текта

Всмысле выделение? А как можно выделить текст во время прокрытки? Или это автоматом идет?
Можно попробовать событие (только в IE 5.5+) onselectstart, установить булевское значение false...
ava
guest | 11.10.2004, 14:16 #
Это мой первый скрипт, так, что ивиняйте.

Цитата (Aliance @ 11.10.2004, 11:43)
Цитата (chis @ 11.10.2004, 09:07)

eval(event.x) - eval(m_posOld);





Использование этой функции крайне нежелательно, т.к. тормозит работу сценария.


А какую функцию тогда использовать, когда я пытаюсь просуммировать три переменных получается что две суммируется как числовые, а третья как строковая. Например 10 + 20 + 30 получается 3030

Цитата (Aliance @ 11.10.2004, 11:43)
Цитата (chis @ 11.10.2004, 09:07)

как на время перетаскивания "бегунка" отключать выделение текта





Всмысле выделение? А как можно выделить текст во время прокрытки? Или это автоматом идет?

Можно попробовать событие (только в IE 5.5+) onselectstart, установить булевское значение false...


Запусти скрипт и попробуй погонять "бегунок". Заметно, когда начинаешь перемещать горизонтальный "бегунок" и сдвигаешь курсор мыши вверх (выше самого "бегунка").
ava
GoodBoy | 11.10.2004, 14:40 #
Цитата (Guest @ 11.10.2004, 15:16)
А какую функцию тогда использовать, когда я пытаюсь просуммировать три переменных получается что две суммируется как числовые, а третья как строковая. Например 10 + 20 + 30 получается 3030

для преобразование строки в число используй parseInt и parseFloat
ava
Sardar | 12.10.2004, 00:25 #
chis до сих пор не могу понять чем тебе обычные полосы прокрутки от iframe или div{overflow:auto} не понравились!
Но продолжим разговор о твоем изврате smile Код не очень красивый, потому переписал. Работать будет во всех бразуерах:
<!-- разметка, убрал кучу не нужных слоев -->
<TABLE border=1 cellPadding=0 cellSpacing=0>
<TR><TH height=70 colspan=2>Çàãîëîâîê òàáëèöû</TH></TR>
<TR>
<TD>
<!-- слой в содержимым, отключаем стандартные полосы прокрутки -->
<div id="cont" style="position:relative; height:400; width:500px; overflow:hidden">
Òåëî òàáëèöû
<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><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>
Test
</div>
</TD>
<TD vAlign="top">
<div id="vScroll" style="position:relative; height:100px; width:14px; top:0px; left:0px; background-color:#f0f0f0; border: solid 1px #c0c0c0"></div>
</TD>
</TR>
<TR>
<TD align="left">
<div id="hScroll" style="position:relative; font-size:12px; width:100px; height:12px; top:0px; left:0px; background-color:#f0f0f0; border: solid 1px #c0c0c0"></div>
</TD><TD style="font-size:12px">&nbsp;</TD>
</TR>
</TABLE>

<script language="Javascript" type="text/javascript">
<!--
var scroll_target=null, doc_x, doc_y, scroll_y, scroll_x;
function doc_mousemove(ev) {
if(scroll_target!=null) {
//вычисляем смещение и сдвигаем div/iframe
if(scroll_target=="vScroll") {
var obj=document.getElementById("vScroll");
var maxY=document.getElementById("cont").offsetHeight - obj.offsetHeight;
var offY=(window.event? window.event.screenY: ev.pageY) - doc_y + scroll_y;
var scrolled=offY<0? 0: offY>maxY? maxY: offY;
obj.style.top=scrolled;
document.getElementById("cont").scrollTop=((document.getElementById("cont").scrollHeight/document.getElementById("cont").offsetHeight)*scrolled);

} else if(scroll_target=="hScroll") {
var obj=document.getElementById("hScroll");
var maxX=document.getElementById("cont").offsetWidth-obj.offsetWidth;
var offX=(window.event? window.event.screenX: ev.pageX) - doc_x + scroll_x;
var scrolled=offX<0? 0: offX>maxX? maxX: offX;
obj.style.left=scrolled;
document.getElementById("cont").scrollLeft=((document.getElementById("cont").scrollWidth/document.getElementById("cont").offsetWidth)*scrolled);
}
}
}
//события
document.onmousemove=doc_mousemove;
document.onmouseup=function() {scroll_target=null;};
document.getElementById("vScroll").onmousedown=function(ev) {
scroll_target=this.id;
doc_y=window.event? window.event.screenY: ev.pageY;
scroll_y=parseInt(this.style.top);
};
document.getElementById("hScroll").onmousedown=function(ev) {
scroll_target=this.id;
doc_x=window.event? window.event.screenX: ev.pageX;
scroll_x=parseInt(this.style.left);
};

//-->
</script>

Можешь заменить слой на iframe если понадобится.
ava
Mebios | 25.10.2004, 20:04 #
:yasno легко и просто, и места немного занимает, всегда сам им пользуюсь. вот один пример скопируй и разберись всё должнобыть понятно:
<html>
<head>
<title></title>
<style>
p,span,form,input,hr,textarea{
font-family: Tahoma, Verdana, Arial, Sans serif;
font-size: 11px;
margin: 0px;padding: 0px;
vertical-align: middle;
}
div.win{
overflow: scroll;
overflow-x: hidden;
scrollbar-face-color: #306CAD;
scrollbar-shadow-color: #A7C1DD;
scrollbar-highlight-color: #A7C1DD;
scrollbar-3dlight-color: #306CAD;
scrollbar-darkshadow-color: #306CAD;
scrollbar-track-color: #ffffff;
scrollbar-arrow-color: #ffffff;
}

body{
scrollbar-face-color: #306CAD;
scrollbar-shadow-color: #A7C1DD;
scrollbar-highlight-color: #A7C1DD;
scrollbar-3dlight-color: #306CAD;
scrollbar-darkshadow-color: #306CAD;
scrollbar-track-color: #ffffff;
scrollbar-arrow-color: #ffffff;
}
</Style>
</head>
<body>
<p >
</body>
</html>



M
0
Пользуйся тегами code.
А вопрос собстна был в другом;-)
Please register or login to write.
Firm of day
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Contributors
  guest   Sardar   GoodBoy   Alx   crash90 ava  Aliance   Mebios
advanced
Submit