Autor Zpráva
Webfacer
Profil *
Zdravím,
Mám vertikálně přeteklý text s posuvníkem pomocí Overflow. A nyní bych potřeboval aby pokud do něj kliknu a posunu, tak abych neoznažoval text, ale posouval posuvníkem. Nedokážu to moc dobře vysvětlit, ale podobně je to tady: tvprogram.idnes.cz
Nevíte někdo jak se to řeší?

Předem díky za odpověď
Keeehi
Profil
Budeš odchytávat události myši, počítat změnu polohy a podle toho upravovat souřadnice toho elementu s textem.
Webfacer
Profil *
Nešlo by uvést nějaký příklad, nějak se mi to stále nedaří.
Chamurappi
Profil
Reaguji na Keeehiho:
podle toho upravovat souřadnice toho elementu s textem
Může hýbat posuvníkem, tedy vlastností scrollTop. Funguje to dokonce i v případě, že je posuvník zrušený přes overflow: hidden.


Reaguji na Webfacera:
V základu by to mohlo být asi nějak takhle:
<div onmousedown="
  var div = this;
  var y = event.clientY + div.scrollTop;
  window.onmousemove = function(e)
  {
    div.scrollTop = y - (e || window.event).clientY;
  };
  window.onmouseup = function()
  {
    window.onmousemove = window.onmouseup = null;
  };
  return false;
">

U podobných drag&drop věcí mívám vždy nutkání postesknout si, že dotykové události se musí řešit zvlášť, ale v tomto případě je to bez práce, protože požadovaná funkcionalita bývá automaticky výchozí chování.
Webfacer
Profil *
To je přesně co hledám, jen nešlo by to přepsat na pohyb pouze zprava doleva, tedy po ose x (Obsah mám široký, nikoli dlouhý), zkoušel jsem to přepsat, ale vždy přestane zcela fungovat. Opravdu moc by mi to pomohlo..
Chamurappi
Profil
Reaguji na Webfacera:
Místo clientY sleduj clientX, místo scrollTop zjišťuj a nastavuj scrollLeft. (A bylo by také logické přejmenovat proměnnou y na x.)
Pokud ti to nefunguje, ukaž, co máš.
Webfacer
Profil *
Nyní mám toto:
<div style="width:250px;overflow: auto" onmousedown="
  var div = this;
  var x = event.clientX + div.scrollTop;
  window.onmousemove = function(e)
  {
    div.scrollLeft = x - (e || window.event).clientX;
  };
  window.onmouseup = function()
  {
    window.onmousemove = window.onmouseup = null;
  };
  return false;
">dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd hhhhhh</div>

Na první pohled to vypadá, že to funguje, nicméně je problém ještě v tom, že pokud to posunu a pak to chci posunout ještě jednou, tak to ten posun začne brát vždy od kraje, takže se dále nikdy nedostanu. Potřebuji k tomu na začátku nějak přičíst o co už je posunuto. Snad mě pochopíte.


Omlouvám se, chybu jsem uviděl hned jak jsem to odeslal, zapomněl sem přepsat jeden Top na Left,
Pro ostatní zde je správné řešení:
<div style="width:250px;overflow: auto" onmousedown="
  var div = this;
  var x = event.clientX + div.scrollLeft;
  window.onmousemove = function(e)
  {
    div.scrollLeft = x - (e || window.event).clientX;
  };
  window.onmouseup = function()
  {
    window.onmousemove = window.onmouseup = null;
  };
  return false;
">dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd hhhhhh</div>



Tak ještě jsem se snažil funkci zapsat zvlášť do souboru, ale poté funkce přestane fungovat.
V JS mám:
function posouvani()
{
var div = this;
  var x = event.clientX + div.scrollLeft;
  window.onmousemove = function(e)
  {
    div.scrollLeft = x - (e || window.event).clientX;
  };
  window.onmouseup = function()
  {
    window.onmousemove = window.onmouseup = null;
  };
  return false;
}

A volám ji pomocí:
<div onmousedown="posouvani()" >obsah</div>

Toto bohužel nejde.
Chamurappi
Profil
Reaguji na Webfacera:
1) function posouvani() změň na function posouvani(div).
2) Smaž řádek var div = this;.
3) Uprav volání na posouvani(this).
Webfacer
Profil *
Chamurappi:
Bohužel nefunguje viz:
<div id="posouvacitext" onmousedown="posouvani(this)" >fffff</div>
A js:
function posouvani(div)
{
  var x = event.clientX + div.scrollLeft;
  window.onmousemove = function(e)
  {
    div.scrollLeft = x - (e || window.event).clientX;
  };
  window.onmouseup = function()
  {
    window.onmousemove = window.onmouseup = null;
  };
  return false;
}
Chamurappi
Profil
Reaguji na Webfacera:
Uvedený kód musí fungovat. Akorát by tam mělo být asi spíš onmousedown="return posouvani(this)", ale jinak problém nevidím.
Dodej prosím odkaz na živou ukázku své stránky, třeba ti tam působí potíže něco jiného.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: