Avatar
Martin Konečný (pavelco1998):

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
Avatar
Odpovídá na Martin Konečný (pavelco1998)
Martin Konečný (pavelco1998):

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
Avatar
Martin Konečný (pavelco1998):

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
Avatar
Martin Konečný (pavelco1998):

OK, tak už není třeba.

 
Nahoru Odpovědět 14.2.2015 21:05
Avatar
IT Man
Redaktor
Avatar
IT Man:

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

Nahoru Odpovědět 14.2.2015 21:08
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Odpovídá na IT Man
Martin Konečný (pavelco1998):

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
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.