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;
}
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();'>
<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?