| Autor | Zpráva | ||
|---|---|---|---|
| Webfacer Profil * |
#1 · Zasláno: 24. 2. 2017, 16:03:50
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 |
#2 · Zasláno: 24. 2. 2017, 17:11:28
Budeš odchytávat události myši, počítat změnu polohy a podle toho upravovat souřadnice toho elementu s textem.
|
||
| Webfacer Profil * |
#3 · Zasláno: 24. 2. 2017, 17:19:31
Nešlo by uvést nějaký příklad, nějak se mi to stále nedaří.
|
||
| Chamurappi Profil |
#4 · Zasláno: 26. 2. 2017, 01:22:43
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 * |
#5 · Zasláno: 26. 2. 2017, 11:20:36
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 |
#6 · Zasláno: 26. 2. 2017, 13:22:11
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 |
#8 · Zasláno: 26. 2. 2017, 17:34:09
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 * |
#9 · Zasláno: 26. 2. 2017, 17:49:59
Chamurappi:
Bohužel nefunguje viz: <div id="posouvacitext" onmousedown="posouvani(this)" >fffff</div> 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 |
#10 · Zasláno: 28. 2. 2017, 21:17:39
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. |
||
|
Časová prodleva: 6 let
|
|||
0