IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Posouvání mapy s body

Aktivity
Avatar
Martin Konečný (pavelco1998)
Tvůrce
Avatar
Martin Konečný (pavelco1998):14.2.2015 14:09

Zdar,

potřebuji si vytvořit mapu, která:

  1. bude schovaná pod nějakým divem (jakoby okno), protože je širší než plocha pro obsah
  2. jelikož je větší, musí s ní jít hýbat
  3. budou na ní poházené body, které budou znázorněné obrázkem (třeba nějakým kolečkem) a na které půjde klikat
  4. po posunutí mapy se logicky musí posunout i dané body
  5. mapa půjde posunout maximálně tak, aby zobrazovací plocha dosáhla rohu

V podstatě potřebuji něco takového:
http://red-team-design.com/…ps-demo.html

Jenom nevím, jak udělat právě to posouvání mapy.

Bod č. 1 mám, 2 a 3 řeší jQuery. Problém mám u bodů 4 a 5.
Nechci přímo řešení (nebo kdyby se někomu chtělo, budu rád, protože mě to nebaví), ale potřebuji hodit do správnýho směru :D
Podle mě bude lepší nechat tu mapu statickou a hýbat jen tím "oknem". Ale nenapadá mě, jak to udělat.

Pozn.: nechci světovou mapu, ale nějakou vlastní. Takže potřebuji, abych si mohl definovat vlastní obrázek mapy a pomocí CSS/JS tam naházet obrázky těch bodů.

Kdyby měl někdo nějaký nápad, budu moc vděčný :D

Odpovědět
14.2.2015 14:09
Aktuálně připravuji browser RPG, FB stránka - https://www.facebook.com/AlteiraCZ
Avatar
Martin Konečný (pavelco1998)
Tvůrce
Avatar
Odpovídá na Martin Konečný (pavelco1998)
Martin Konečný (pavelco1998):14.2.2015 18:46

Zatím tedy stačí, když přes tu mapu včetně bodů hodim nějaký div.

Hodil jsem to pro ukázku na web:

http://konecny.php5.cz/devbook/map.php

Takhle by to realtivně šlo. Nicméně bych ještě potřeboval, aby tu mapu nešlo posouvat kamkoliv, ale jen do jejích rohů. Tzn. aby za tím nebylo vidět to černé pozadí.
Nevěděl by někdo?

Edit: mapu posouvám pomocí jQuery UI metody draggable. Obsahuje parametr containment, ale nevím, co tam napsat (pokud to vůbec jde), aby to udělalo to, co potřebuji.

Editováno 14.2.2015 18:47
Nahoru Odpovědět
14.2.2015 18:46
Aktuálně připravuji browser RPG, FB stránka - https://www.facebook.com/AlteiraCZ
Avatar
Martin Konečný (pavelco1998)
Tvůrce
Avatar
Martin Konečný (pavelco1998):14.2.2015 20:19

Ještě já :D

Teď už mi to dělá prakticky to, co potřebuji. Containment jsem nastavil ručně tak, aby šel ten obal nad obrázkem posouvat jen o určitý počet pixelů (podle velikosti obrázku, velikosti toho container divu a marginu container divu).

Nicméně se tu objevil ještě jeden problém - když se s tím obrázkem pohne, automaticky skočí do minusu o tolik pixelů, kolik má ten container margin.
Tzn. když #mapContainer má margin: 10px, automaticky to po drag start skočí o -10px. Když má margin 50px, automaticky to skočí o -50px.
Proč to dělá a jak se toho zbavit?

Nahoru Odpovědět
14.2.2015 20:19
Aktuálně připravuji browser RPG, FB stránka - https://www.facebook.com/AlteiraCZ
Avatar
Martin Konečný (pavelco1998)
Tvůrce
Avatar
Martin Konečný (pavelco1998):14.2.2015 21:05

OK, tak už není třeba.

Nahoru Odpovědět
14.2.2015 21:05
Aktuálně připravuji browser RPG, FB stránka - https://www.facebook.com/AlteiraCZ
Avatar
Jan Lupčík
Tvůrce
Avatar
Jan Lupčík:14.2.2015 21:08

Ty si to tady řešíš sám a ostatní jenom čtou. :D

Nahoru Odpovědět
14.2.2015 21:08
TruckersMP vývojář
Avatar
Martin Konečný (pavelco1998)
Tvůrce
Avatar
Odpovídá na Jan Lupčík
Martin Konečný (pavelco1998):14.2.2015 22:04

Koukal jsem při tom různě po googlu, hlavně stackoverflow hodně pomohlo. Mezitím, co to tu téma leželo, jsem našel dostatečná klíčová slova :D
Snad tu nevadí triple post

Nahoru Odpovědět
14.2.2015 22:04
Aktuálně připravuji browser RPG, FB stránka - https://www.facebook.com/AlteiraCZ
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 6 zpráv z 6.