scriptaculous div scroller
Üdv!
Eljutottam a lassan feladom szintig.
A cél: két div, a külső (outerimagecontainer) overflow:hidden; tulajdonsággal, a belső ezen túllógó mérettel.
Dinamikus oldal lévén a különböző pozíciókat JSből szeretném lekéni, position:absolute; helyett.
A gondok: ott kezdődött, hogy feltölöttem a belső div-et 25 képpel, majd le akartam kérni a méretét, amire NULL-t kaptam vissza. Ekkor megpróbáltam kiszámolni a méretet a képeből - ez hozzávetőlegesen sikerrel járt. Ezután pozícionáltam, hogy középre álljon be. Ekkor omlott össze Explorerben: a belső div elfelejtette figyelembe venni a külső div overflow:hidden; tulajdonságát, és egyszerűen fölé került. FFben továbbment.
FFben folytatva jött a görgetés, relatív sebességgel megadva - itt, hogy ne lépjem túl a méreteket, elfeleztem a fent megkapott belső div méretét, és figyeltem, hogy valamelyik irányba nehogy túllépjem.
Itt jött a pofáraesés: egyszerűen nem jó valamelyik méret, ugyanis felül és alul egy-egy kép már nem görgethető le.
Halvány fogalmam sincs, hol a gond, így szeretném egy JShez jobban értő segítségét kérni.
Előre is köszönöm,
Cadey
A kód:
■ Eljutottam a lassan feladom szintig.
A cél: két div, a külső (outerimagecontainer) overflow:hidden; tulajdonsággal, a belső ezen túllógó mérettel.
Dinamikus oldal lévén a különböző pozíciókat JSből szeretném lekéni, position:absolute; helyett.
A gondok: ott kezdődött, hogy feltölöttem a belső div-et 25 képpel, majd le akartam kérni a méretét, amire NULL-t kaptam vissza. Ekkor megpróbáltam kiszámolni a méretet a képeből - ez hozzávetőlegesen sikerrel járt. Ezután pozícionáltam, hogy középre álljon be. Ekkor omlott össze Explorerben: a belső div elfelejtette figyelembe venni a külső div overflow:hidden; tulajdonságát, és egyszerűen fölé került. FFben továbbment.
FFben folytatva jött a görgetés, relatív sebességgel megadva - itt, hogy ne lépjem túl a méreteket, elfeleztem a fent megkapott belső div méretét, és figyeltem, hogy valamelyik irányba nehogy túllépjem.
Itt jött a pofáraesés: egyszerűen nem jó valamelyik méret, ugyanis felül és alul egy-egy kép már nem görgethető le.
Halvány fogalmam sincs, hol a gond, így szeretném egy JShez jobban értő segítségét kérni.
Előre is köszönöm,
Cadey
A kód:
var innerHeight = 0;
var outerX = 0;
var outerY = 0;
var outerWidth = 0;
var outerHeight = 0;
var zeroY = 0;
var speed = 10;
var time = 10;
var interval;
var tempX = 0;
var tempY = 0;
var movedY = 0;
function relativeSpeed() {
var relspeed = Math.round(((zeroY - tempY) / (outerHeight / 2))*speed);
return relspeed;
}
function getMouseXY(e) {
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE);
if (IE) {
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
} else {
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}
return true;
}
function setsliderposition () {
outerX = $('outerimgcontainer').offsetLeft;
outerY = $('outerimgcontainer').offsetTop;
outerWidth = $('outerimgcontainer').offsetWidth;
outerHeight = $('outerimgcontainer').offsetHeight;
innerHeight = $('innerimgcontainer').offsetHeight;
/*
var elems = getElementsByClass('sliderimage');
for (i=0;i<elems.length;i++)
{ innerHeight = innerHeight + elems[i].offsetHeight; }
*/
var moveUp = Math.round((innerHeight - outerHeight) / 2);
new Effect.Move($('innerimgcontainer'), { x: 0, y: -moveUp, transition: Effect.Transitions.sinoidal });
zeroY = Math.round(outerX + (outerHeight/2));
Event.observe($('outerimgcontainer'),'mouseover',mouseovercontainer);
Event.observe($('outerimgcontainer'),'mouseout',mouseoutcontainer);
}
function mouseovercontainer () {
interval = setInterval (moveslider,time);
}
function mouseoutcontainer () {
clearInterval (interval);
}
function moveslider () {
var relspeed = relativeSpeed ();
var premovedY = movedY + relspeed;
if (premovedY<(innerHeight/2) && premovedY>=(-(innerHeight/2)))
{ movedY+= (relspeed);
new Effect.Move($('innerimgcontainer'), { x: 0, y: -relspeed, duration: 0.1 });
}
}
Event.observe(window, 'load', setsliderposition);
document.onmousemove = getMouseXY;
scrollHeight és clientHeight
doctype és padding