Autor | Zpráva | ||
---|---|---|---|
rudla Profil |
#1 · Zasláno: 28. 1. 2011, 15:51:37
Ahoj,
pořeboval bych zjistit, jak získat pozici kurzoru a aby byl označený prvek zobrazen přímo u něj. (i když myší hýbu, prvek by měl držet u kurzoru). Jde to? Dík. Edit: vím, že to asi patří do JS, kdyžtak to tam hoďte, pokud to tam fakt patří. Nevím to jistě. |
||
Witiko Profil |
#2 · Zasláno: 28. 1. 2011, 17:55:49 · Upravil/a: Witiko
var prvek = document.getElementById("prvek"); document.body.onmousemove = function(e) { prvek.style.left = ((e || event).clientX + document.body.scrollLeft - Xoffsety) + "px"; prvek.style.top = ((e || event).clientY + document.body.scrollTop - Yoffsety) + "px"; } <div id="prvek" style="position:absolute;">Prvek</div> |
||
_es Profil |
#3 · Zasláno: 28. 1. 2011, 18:16:45 · Upravil/a: _es
Witiko:
Použil si zlý operátor, má byť || .
Funguje to správne vo všetkých prehliadačoch? |
||
joe Profil |
#4 · Zasláno: 28. 1. 2011, 18:32:21 · Upravil/a: joe
Witiko:
1. Máš prohozené X a Y 2. Máš místo || napsáno | 3. Nefunguje to správně. ... to je ten váš nativní JavaScript bez frameworků ;-) EDIT: abych byl přesnější - není tam započtený offset viewportu. Navíc v IE to nefunguje vůbec. |
||
rudla Profil |
#5 · Zasláno: 28. 1. 2011, 19:00:44
joe:
Dobrá, jak to tedy má být správně? |
||
_es Profil |
#6 · Zasláno: 28. 1. 2011, 19:04:22
Witiko:
Ešte ti tam chýbajú jednotky dĺžky - aby to fungovalo aj v štandardnom vykresľovacom režime. V IE to tuším nefunguje. joe: „… to je ten váš nativní JavaScript bez frameworků ;-)“ No tak sa teda pochváľ so svojím jednoduchým riešením v jQuery. |
||
joe Profil |
#7 · Zasláno: 28. 1. 2011, 19:14:50
_es:
Pro jQuery třeba takto: $(document).ready(function() { $(this).mousemove(function(e) { $("#prvek").css({ left: e.pageX + 20, top: e.pageY + 20 }); }); }); |
||
_es Profil |
#8 · Zasláno: 28. 1. 2011, 19:19:14 · Upravil/a: _es
rudla:
„jak to tedy má být správně?“ var prvek = document.getElementById("prvek"); document.documentElement.onmousemove = function(e) { prvek.style.top = (e || event).clientY + "px"; prvek.style.left = (e || event).clientX + "px"; }; Nechcel si náhodou nejakú funkčnosť drag & drop? joe: „left: e.pageX + 20,“ V jQuery netreba zadávať jednotky dĺžky? Overil si si, že ti to naozaj funguje v rôznych prehliadačoch? |
||
joe Profil |
#9 · Zasláno: 28. 1. 2011, 19:24:24 · Upravil/a: joe
_es:
Asi ne :-) funguje to i s nimi, takže tam zřejmě dochází k nějaké kontrole. Nejsem žádný expert na používání jQuery, jen jsem tím chtěl naznačit, že použití fw smysl má, protože ne vždycky je to triviální, jak se na první pohled může zdát. Pořád tam je problém v tom, že to nejde v IE a pokud stránka bude mít vertikální posuvník, nebude se to zobrazovat na správné pozici (stačí otestovat přidáním hodně značek <br> do dokumentu). EDIT: jasně, ověřil. Funguje to třeba i v IE6. EDIT2: (ta 20ka je tam proto, aby to nebylo tak nalepené u kurzoru) |
||
rudla Profil |
#10 · Zasláno: 28. 1. 2011, 19:29:44
_es:
„Nechcel si náhodou nejakú funkčnosť drag & drop?“ Nechtel, chtel jsem objekt u kurzoru |
||
Witiko Profil |
#11 · Zasláno: 28. 1. 2011, 19:34:08 · Upravil/a: Witiko
_es:
Ano, sypu si popel na hlavu, psal jsem to narychlo, bez přídavné kontroly. Opraveno. joe: „Pořád tam je problém v tom, že to nejde v IE a pokud stránka bude mít vertikální posuvník, nebude se to zobrazovat na správné pozici“ To se samozřejmě dá snadno ošetřit pomocí vlastností, které nám sdělují, kolik již bylo odscrollováno. Posuvníky nás nezajímají, poněvadž pozici nastavujeme od shora a zleva, povětšinou tam žádné posuvníky nenajdeš. Mým záměrem v žádném případě nebylo zaslat plnohodnotné řešení (což ani není možné, jelikož rudla se se svými záměry ohledně scriptu nesvěřil), spíš popostrčit. „že použití fw smysl má“ Na tohle není potřeba žádné fw, kterými jsi viditelně zcela nepokrytě posedlý. Stačí sada funkcí / objekt řešící daný problém - takový si dokáže napsat / sehnat každý, kdo není zcela líný. |
||
Chamurappi Profil |
#12 · Zasláno: 28. 1. 2011, 19:36:39
Reaguji na rudlu:
var prvek = document.getElementById("prvek"); document.onmousemove = function(e) { var event = e || window.event, html = document.documentElement, body = document.body; prvek.style.left = (event.pageX || event.clientX + html.scrollLeft + body.scrollLeft - html.clientLeft - body.clientLeft) + "px"; prvek.style.top = (event.pageY || event.clientY + html.scrollTop + body.scrollTop - html.clientTop - body.clientTop) + "px"; }; Reaguji na joe: Není to moc pohodlné, ale pořád o desítky kB menší. Koukám, že tohle je ten (skoro jediný) výjimečný případ, jak jsme se nedávno bavili :-) |
||
_es Profil |
#13 · Zasláno: 28. 1. 2011, 19:37:03 · Upravil/a: _es
joe:
„Pořád tam je problém v tom, že to nejde v IE“ Mne môj kód v IE funguje. Skús si porovnať zaťaženie procesora v rôznych prehliadačoch tvojho a Chamurappiho kódu pri hýbaní myšou. |
||
joe Profil |
#14 · Zasláno: 28. 1. 2011, 19:39:08
Witiko:
„Mým záměrem v žádném případě nebylo zaslat plnohodnotné řešení“ To mi přijde, jako neposlat žádné řešení. Co s řešením, které nefunguje? U hodnoty top má být Y. Neříkám, že se to nedá udělat, samozřejmě, že to jde, ale neznalý člověk může trávit dlouhou dobu tím, aby našel skutečně funkční řešení. A jak už jsem napsal, toto nefunguje ani v Internet Exploreru. |
||
joe Profil |
#15 · Zasláno: 28. 1. 2011, 19:44:21 · Upravil/a: joe
Chamurappi:
Chválím :-) Menší to rozhodně je a je rozhodně lepší použít tvé řešení. Kdybych to měl psát, taky bych k něčemu podobnému došel, ale musel bych to testovat a hledat, kde všude a v jakém prohlížeči je ta a jinde zase ona proměnná/parametr Jinak přesně takovový příklad jsem měl předtím na mysli. _es: „Mne môj kód v IE funguje.“ Nevím proč, v IETesteru mi to nedělalo vůbec nic. Ten od Chamurappiho jde (samozřejmě :-)) Testovat to nemá smysl, je jasné co je lepší. Nehádám se, jen jsem tím chtěl poukázat na efektivnost (co se v rychlosti psaní skriptů týká) frameworků. |
||
Witiko Profil |
#16 · Zasláno: 28. 1. 2011, 20:01:05 · Upravil/a: Witiko
joe:
„Nehádám se, jen jsem tím chtěl poukázat na efektivnost (co se v rychlosti psaní skriptů týká) frameworků.“ To už poukazuješ nějaký ten pátek. Já bych rád poukázal na to, že frameworky nejsou jediným způsobem, jak si usnadnit práci. ;) Kód v postu #2 jsem rozšířil, avšak ponechal ve schématické podobě. |
||
rudla Profil |
#17 · Zasláno: 28. 1. 2011, 21:07:51
_es:
Ještě jsem se nezmínil, že mi o IE dnes výjmečně nejde. |
||
Witiko Profil |
#18 · Zasláno: 28. 1. 2011, 21:32:21
rudla:
U tohoto scriptu je požadovaná úroveň abstraktizace stejně poměrně malá, takže je to stejně celkem jedno. :) |
||
rudla Profil |
#19 · Zasláno: 29. 1. 2011, 20:57:33
Chamurappi:
Já tedy zkusím to tvoje :) |
||
rudla Profil |
#20 · Zasláno: 29. 1. 2011, 21:50:21 · Upravil/a: rudla
Stejně nic. Prvek je na místě, kde byl uložen. Ještě zkusím jednu metodu, ale nic si neslibuji.
|
||
rudla Profil |
#21 · Zasláno: 29. 1. 2011, 21:53:53
Takže ne. Nejede mi to. Hodil jsem to jako script do hlavičky. Do body jsem nastavil obrazek s id prvek a nic... obrazek je umisteny na strance. Co delam spatne?
|
||
Davex Profil |
#22 · Zasláno: 29. 1. 2011, 22:10:12
rudla:
„Co delam spatne?“ O chybové konzoli jsi už slyšel? Skript dej za ten obrázek. |
||
rudla Profil |
#23 · Zasláno: 29. 1. 2011, 22:13:54
Davex:
„O chybové konzoli jsi už slyšel?“ Letmo. „Skript dej za ten obrázek.“ Dobře. |
||
rudla Profil |
#24 · Zasláno: 29. 1. 2011, 22:16:40
Davex:
„Skript dej za ten obrázek.“ Pořád nic. |
||
Chamurappi Profil |
#25 · Zasláno: 30. 1. 2011, 01:27:13
|
||
rudla Profil |
#26 · Zasláno: 30. 1. 2011, 11:32:24
Chamurappi:
Dobrá, zkusím position: absolute, pokud ani to, hodím to na web a dám odkaz. |
||
rudla Profil |
#27 · Zasláno: 30. 1. 2011, 11:38:33 · Upravil/a: rudla
Už to jede, bylo to opravdu position: absolute;.
Mám ještě dotaz. Dá se prvek napozicotat kousek od kurzoru? Aby mi tam nelez a byl vedle něj? Ještě ten odkaz: http://zatnaktel.unas.cz/ntb/osobni-data/html-testy/mys.html Ale opravdu děkuju. |
||
rudla Profil |
#28 · Zasláno: 30. 1. 2011, 12:02:36
Už to jede. Vyřešil jsem to. Za všechno vám děkuju.
|
||
Časová prodleva: 13 let
|
0