ugrás a tartalomhoz

scriptaculous div scroller

Cadeyrn · 2007. Ápr. 25. (Sze), 23.05
Ü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:
  1. var innerHeight = 0;  
  2. var outerX = 0;  
  3. var outerY = 0;  
  4. var outerWidth = 0;  
  5. var outerHeight = 0;  
  6. var zeroY = 0;  
  7. var speed = 10;  
  8. var time = 10;  
  9. var interval;  
  10. var tempX = 0;  
  11. var tempY = 0;  
  12. var movedY = 0;  
  13.   
  14. function relativeSpeed() {  
  15.   var relspeed = Math.round(((zeroY - tempY) / (outerHeight / 2))*speed);  
  16.   return relspeed;    
  17. }  
  18.   
  19. function getMouseXY(e) {  
  20.   var IE = document.all?true:false;  
  21.   if (!IE) document.captureEvents(Event.MOUSEMOVE);  
  22.     
  23.   if (IE) {  
  24.     tempX = event.clientX + document.body.scrollLeft;  
  25.     tempY = event.clientY + document.body.scrollTop;  
  26.   } else {  
  27.     tempX = e.pageX;  
  28.     tempY = e.pageY;  
  29.   }    
  30.     
  31.   if (tempX < 0){tempX = 0;}  
  32.   if (tempY < 0){tempY = 0;}    
  33.   return true;  
  34. }  
  35.   
  36. function setsliderposition () {  
  37.   outerX = $('outerimgcontainer').offsetLeft;   
  38.   outerY = $('outerimgcontainer').offsetTop;  
  39.   outerWidth = $('outerimgcontainer').offsetWidth;   
  40.   outerHeight = $('outerimgcontainer').offsetHeight;  
  41.   
  42.   innerHeight = $('innerimgcontainer').offsetHeight;  
  43.   
  44. /*   
  45.   var elems = getElementsByClass('sliderimage'); 
  46.   for (i=0;i<elems.length;i++) 
  47.   { innerHeight = innerHeight + elems[i].offsetHeight;  }      
  48. */  
  49.     
  50.   var moveUp = Math.round((innerHeight - outerHeight) / 2);  
  51.     
  52.   new Effect.Move($('innerimgcontainer'), { x: 0, y: -moveUp, transition: Effect.Transitions.sinoidal });  
  53.   zeroY = Math.round(outerX + (outerHeight/2));     
  54.     
  55.   Event.observe($('outerimgcontainer'),'mouseover',mouseovercontainer);  
  56.   Event.observe($('outerimgcontainer'),'mouseout',mouseoutcontainer);  
  57. }  
  58.   
  59.   
  60. function mouseovercontainer () {  
  61.   interval = setInterval (moveslider,time);  
  62. }  
  63.   
  64. function mouseoutcontainer () {  
  65.  clearInterval (interval);   
  66. }  
  67.   
  68.   
  69. function moveslider () {  
  70.     var relspeed = relativeSpeed ();  
  71.     var premovedY = movedY + relspeed;  
  72.     if (premovedY<(innerHeight/2) && premovedY>=(-(innerHeight/2)))  
  73.     { movedY+=  (relspeed);   
  74.       new Effect.Move($('innerimgcontainer'), { x: 0, y: -relspeed, duration: 0.1 });  
  75.     }        
  76. }  
  77.   
  78. Event.observe(window, 'load', setsliderposition);  
  79. document.onmousemove = getMouseXY;  
‹ Js setInterval és változók/metódusok elérése Kép HTML elem tartalma CSS-ben? ›
 ■
1

scrollHeight és clientHeight

Methos · 2007. Május. 5. (Szo), 09.18
Épp a napokban írtam én is egy div scroller-t. A div tartalmának magasságának meghatározására a scrollHeight tulajdonságot használd. A scrollHeight-ból és a clientHeight-ból pedig már kiszámolható, hogy mennyit kell tudnod görgetni.
2

doctype és padding

Jano · 2007. Május. 5. (Szo), 10.02
A moo.fx-es effekt könyvtárnál voltak hasonlóan fura jelenségek amit egy szabványmódba kapcsoló doctype oldott meg. Ezután még a padding értékeket is egy befoglaló div-hez rendeltem és nem ahhoz aminek lekéri a méretét és minden jó lett.