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:

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;
‹ 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.