[es] - Skrolovanje diva pomoću miša onMouseDown, onMouseMove...

ksrele
Programer - informatičar
Gold Drink D.O.O. Subotica
Subotica

Član broj: 14253
Poruke: 1642
79.101.236.*

ICQ: 66444502

+47 Profil

Skrolovanje diva pomoću miša onMouseDown, onMouseMove...

^{31.01.2009. u 18:44 - pre 186 meseci}

Pozdrav ljudi.
Napravio sam malu skripticu koja služi za skrolovanje nekog DIV-a kojem se sadržaj dinamički puni u jednu fiksnu tabelu, pa na kraju bude i dosta opterećen sa elementima ali ne prevelike (skrivene/bez scroll barova/ fiksne) veličine, i to tako sto kada se kliknem mišem unutar DIV-a i držim taster DIV se skroluje.
Sve je proradilo iz prve, ali kada se DIV jako optereti (pojave razni elementi i slike) dolazi do "okačivanja" miša, kako sam ja to sebi pojednostavio. Desi se da kada pomeram miša i opterećenje procesora skoči onda se desi efekat kao da sam pustio taster miša, ali nisam.
Miš je ispravan i sve je ostalo OK.
Ovaj problem se desava i kada je DIV prazan (samo prazna tabela unutra njega) i kada brzo pomerim miša, tj relativno brzo, ne prebrzo.
Evo pro JS kod:

Code:

var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;

var tempX = 0
var tempY = 0
var startX = 0
var startY = 0
var deltaX = 0
var deltaY = 0
var start_scrollX = 0
var start_scrollY = 0
var scrollX = 0
var scrollY = 0
var Timer1 = null

function getMouseXY(e) {
e2 = e;
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
return true
}

function scroll_div()
{
deltaX = (startX - tempX)
deltaY = (startY - tempY)
the_div=document.getElementById('the_div')
scrollX=start_scrollX + deltaX
scrollY=start_scrollY + deltaY
//if(((div2.scrollLeft != 0) && (scrollX>0)) || ((div2.scrollLeft != div2.offsetWidth) && (scrollX<div2.offsetWidth))) div2.scrollLeft = scrollX;
//if(((div2.scrollTop != 0) && (scrollY>0)) || ((div2.scrolltop != div2.offsetWidth) && (scrollY<div2.offsetWidth))) div2.scrollTop = scrollY;
the_div.scrollLeft = scrollX;
the_div.scrollTop = scrollY;
}

function set_start()
{
startX = tempX
startY = tempY
var the_div=document.getElementById('the_div')
start_scrollX = the_div.scrollLeft
start_scrollY = the_div.scrollTop
return true;
}

function reset_delta()
{
    deltaX=0
    deltaY=0
    return true;
}

A ovako pozivam iz HTML-a:

Code:

<body onmouseup="if(Timer1!=null){Timer1=clearInterval(Timer1);}reset_delta();">

<table class='tabela' onclick='set_start();'
    onMouseDown='javascript:set_start();Timer1=setInterval("scroll_div();","1");'
    onmouseup='javascript:Timer1=clearInterval(Timer1);reset_delta();'
    onmouseout='Timer1=clearInterval(Timer1);reset_delta();'>

Molio bih nekog da mi objasni da li je ovo normalno, da li su mi funkcije OK i da li ima resenja?

Odgovor na temu

ksrele
Programer - informatičar
Gold Drink D.O.O. Subotica
Subotica

Član broj: 14253
Poruke: 1642
79.101.236.*

ICQ: 66444502

+47 Profil

Re: Skrolovanje diva pomoću miša onMouseDown, onMouseMove...

^{31.01.2009. u 18:56 - pre 186 meseci}

Ja se izvinjavam, skidajuci nevazan kod skinuo sam i poziv konkretnog DIV-a, dakle kod u HTML-u je sledeci:

Code:

<body onmouseup="if(Timer1!=null){Timer1=clearInterval(Timer1);}reset_delta();">

<div id="the_div">
<table class='tabela' onclick='set_start();'
    onMouseDown='javascript:set_start();Timer1=setInterval("scroll_div();","1");'
    onmouseup='javascript:Timer1=clearInterval(Timer1);reset_delta();'
    onmouseout='Timer1=clearInterval(Timer1);reset_delta();'>
  <tr>
    <td></td>
    <td></td>
       .  //jos po koja
       .  //celija u redu
    <td></td>
  </tr>
  .  //jos po koji
  .  //red u tabeli
</table>
</div>
</body>

Odgovor na temu