Delphi - Görgetéssel mozgó reklámblokk weblapokon

forráskód letöltése
Weblapunkon többféle módszert alkalmazhatunk arra, hogy valamilyen mozgó kontrolban helyezzük el a közlendő információt, figyelemfelkeltés céljából. Cikkünkben elkészítünk egy olyan mozgó ablakot, melynek mozgása a görgetősáv mozgását követi, vagyis az oldal y koordináta mentén elhelyezkedő információk megtekintésekor az ablak automatikusan lejjebb, illetve feljebb mozdul, mindig szem előtt tartava az ablakot.
A mellékelt példában a projekt mappájában található Page alkönyvtár Test.htm állományát töltjük be a TWebBrowser komponensbe, mely tartalmazza a kontrol mozgatásáért felelős kódot.
A kontrolt úgy építettük fel, hogy egy DIV elemben elhelyeztünk két másikat, melyek közül a felső lesz az ablak sávja, melynél fogva az ablak kvázi vonszolható.
A lap betöltődésekor elhelyezzük a kontrolt a lapon úgy, hogy annak pozíciója igazodjon a képernyő hasznos területének méretéhez.
A felső DIV elemben elhelyeztünk egy gombot, melyre kattintva azt a hatást keltjük, mintha az alsó ablak feltolódna, majd megjelenne. Ehhez a gombot tartalmazó kép eseménykezelőjébe a következő sorokat illesztettük:
function doImgShow()
{
  if (panelmain.style.display == '') 
    panelmain.style.display = 'none';
  else
    panelmain.style.display = '';
}
A lap görgetésekor változtatjuk a kontrol pozícióját is, annyival, amennyivel megváltozik a csúszka pozíciója. A kódot doInit függvényben helyeztük el:
function doInit(){
  var posx = (document.body.scrollLeft + leftpos);
  var posy = (document.body.scrollTop + toppos);
  fullpanel.style.left = posx; 
  fullpanel.style.top = posy;
}
A panel fejlécét megragadva vonszolhatjuk át egy másik pozícióba. Ehhez használjuk a doDragMain függvényt. A végén megadjuk, hogy mozgás közben a doMoveMain függvény fusson le:
if (event.srcElement.id == "panelbar")
{
  dragstate = true;
  z = fullpanel;
  temp1 = z.style.pixelLeft;
  temp2 = z.style.pixelTop;
  x = event.clientX;
  y = event.clientY;
  document.onmousemove = doMoveMain;
}
A doMoveMain függvényben kalkuláljuk az új pozíciót:
  ...
  z.style.pixelLeft = temp1 + event.clientX-x;
  z.style.pixelTop = temp2 + event.clientY-y;
  leftpos = document.all.fullpanel.style.pixelLeft - document.body.scrollLeft;
  toppos = document.all.fullpanel.style.pixelTop - document.body.scrollTop;
  ...
  return false;
A kontrol mozgását a csúszka pozíciójához igazítva elérhető, hogy az információ, mindig a felhasználó „keze ügyében” legyen, ugyanakkor „eltüntethesse”, ha az zavarja.