Autor Zpráva
Prochy
Profil
Zdravím,

snažím se udělat rezervační kalendář, bohužel se potýkám s určitými problémy. To co teď mám, je zde http://www.filipprochazka.cz/rezervace.html

Vykreslování události snad mám správně, i časy údálostí by měli být podle toho v kolik začínají.

Teď ty problémy:
První věc: Je možné nějak jednoduše udělat, aby se mi to automaticko zarovnávalo, pokud tam není průnik časů jako je např. 16.02.. Margin-left používám od začátku buňky, tak mi je jasný, že je problém v tom, ale kontrolovat, jestli je to možný vložit vedle mi přijde poměrně složitý (napadlo mě, pro danou buňku ukládat do pole časy, který už jsou zabraný a pak to při vytváření html kontrolavat, jestli se ta nová událost překrývá s některou stávající, pokud ano, budu počítat od začátku buňky margin, pokud ne, tak se bude počítat od dané události).

Druhá věc, jak udělat jednoduše okraje tam, kde nejsou? Např. u události, která má celou buňku pokrytou, tak se okraj vykreslit nemusí. Ale třeba v případě 23.02. si nějak nevím rady, jelikož když udělám okraj horní u druhé události a spodní u první události, tak tam budou jakoby dva okraje a nevypadá to zrovna nejlíp. Grafika se bude ještě určitě předělávat, tak je možný, že to bude udělaný, tak že tam bude nějaká hlavička a pak na těch okrajích nebude, tak záležet, ale v tomto případě mě to zajímalo, jestli to je možné nějak elegantně udělat.

Někde sem koukal, že to řeší přes absolutní pozicovaní, ale myslel jsem si, že to už se nepoužívá.
Omlouvám se, jestli to je poněkud méně srozumitelné. Kdyžtak se ptejte.

Děkuji za případné rady
mimochodec
Profil
Nechci ti do toho mluvit, ale místo zabývání se podobnými detaily bych prostě použil http://fullcalendar.io
Keeehi
Profil
Absolutní pozicování se normálně nepoužívá protože se pak nedá udělat (nebo možná velmí složitě) layout který se buse přizpůsobovat obsahu. Ty máš ale opačný případ, ať bude název akce sebedelší, musí to políčo zústat pořád na svém místě se stejnou velikostí. Takže se bude nějak muset přizpůsobit samotný obsah. Ty potřebuješ umístit prvek na přesně danou pozici. A k tomu je pozicování určeno, takže v tom nevidím žádný problém. A Když se podíváš, jak to třeba řeší google ve svém kalendáři, tak zjistíš, že absolutní pozicování využívá taky.
Prochy
Profil
mimochodec:
Děkuji, ale bohužel, potřebuji ten kalendář poté trochu více upravovat a rychlejší pro mě bude vytvořit vlastní, než abych se hrabal pak v dokumentaci a kódu.

Keeehi:
Děkuji za doporučení s absolutním pozicováním. Ale nemám s tím moc zkušeností. Takže v pozici horizontální by to celkem šlo, ale pokud chci vertikální, tak tam mi to hapruje. Počítám, že je nesmysl, pozicovat kompletně od souřadnice [0,0], ale nejlepší je asi od hranice té tabulky. Chtěl bych, abych vlastnost top vůbec nemusel nastavovat, je to možný nějak udělat? Pokud to nenastavím, tak se mi ten div hodí přesně do poloviny řádků, je možný se toho nějak zbavit? Ale abych nemusel odčítat margin-left, jelikož to momentálně vykresluji tak, že:
vykresluji řádek buňku po buňce
jakmile narazím na událost, tak si uložím její start a konec do pole
pokud v tomtéž řádku vykresluji další událost, tak projdu pole s možnými konflikty a uložím opět danou událost do pole s konflikty
pokud daná událost koliduje s některou událostí, tak vykreslím danou událost o výšku události níž (margin-top:+pocetKonfliktu*výškaUdálosti) + změním velikost řádku na ((1+pocetKonfliktu)*vyskaUdalosti)

A tady je problém v tom, že pokud změním po vykreslení první události velikost řádku, tak se událost vycentruje o nějaký kus dolů, jelikož se mi ten div vykresluje do poloviny řádku. A poté zpětně měnit margin-left předchozích událostí se mi nějak nepozdává.

Ukázka: http://www.filipprochazka.cz/rezervace.html
Hlavní otázka: je možné vycentrovat div na začátek buňky, aniž bych měnil vlastnost top nebo margin-top
Keeehi
Profil
Prochy:
Takže první věc: umístění prvku s position: absolute; se počítá od levého horního rohu nejbližšího rodičovského prvku ktherý má nastaveno position absolute nebo relative. Pokud takový rodič neexistuje, počtá se to vzhledem k celému oknu. Taže jelikož ty chceš pozicovat oproti řádku, nastavíš <tr> position: relative; a pak se všechny abolutně pozicované prvky, kteří jsou potomky toho daného řádku pozicují oproti levému hornímu rohu tohoto řádku.

Nahoru a dolu to pak posouváš pomocí top. Událost, comá být v daném řádku nahoře má top: 0 (nebo je možné o vynechat), událost co má být pod ní má top: vyskaUdalosti, ta co by měla bý ještě níže má top: 2*vyskaUdalosti. Ale týká se to vždy jen událostí v daném řádku. Následující událost v novém řádku bude mít zase top: 0
Prochy
Profil
Keeehi:
Velice děkuji za postupné rady. S absolutním a relativním pozicováním jsem měl nulové zkušenosti. Postupně se dopracovávám k cíli.

Takže další vyskytnuté problém: Při nastavení relativního pozicování řádku a použití absolutního poté u divu mi zmizí border daných buňěk (border-collapse, Firefox,Opera 12), plus v chrome(IE) to pozicuje od okraje stránky.
http://www.filipprochazka.cz/rezervace2.html

Tento problém jsem dokázal vyřešit tím, že jsem nastavil řádku display block a poté už to vypadá relativně v pořádku, ale tato možnost se mi nějak nepozdává. Okraje jsou zde podivně u každé buňky jinak, čemuž moc nerozumím. Zjistil jsem navíc, že tato oprava pravděpodobně nefunguje v ie 9,8 a níž.
http://www.filipprochazka.cz/rezervace.html

Snažil jsem se na dané otázky najít řešení, abych tě příliš neotrval, ale nejspíš nevím, pod čím to správně hledat.
Keeehi
Profil
Hlavně bych to nedělal tabulkou. Já vím že se může zdát, že se na to tabulka hodí, ale ono vlastně nejde o tabulková data. Ta tabulka je spíš grafický prvek nad kterým poletují ty události. Takže tu mřížkovitou strukturu bych tvořil divy které jsou v základu neutrální a je proto mnohem jednodušší je stylovat.
Prochy
Profil
Keeehi:
Super, teď už to je skoro 100% funkční. Jen asi poslední problém a nechám tě napokoji. Při oddalování se začne měnit asi šířka nějakého elementu a layout se začne měnit, pozorováno v Chrome a Firefoxu (Při přibližování to je ok). Moc nechápu proč, jelikož všechno má pevnou šířku (řádek, buňka), co by to teoretiky mohlo ovlivňovat.

Struktura je teď následující v html

<div class="tabulka" style="float:left">
 <div class="radek" style="width:xxPx;clear:both;">
   <div class="bunka" style="float:left;width:71px;">
     <div class="udalost"></div>
   </div>
 </div>
</div>


Edit: Rovnou se zeptám, ať to mám najednou. Teď mě napadlo, vyprdnout se na pevný px, ale uvádět to v procentech tzn. tabulka 100%, buněk tam je 17, tzn jedna buňka 1/17, událost je taky možné poté přepočítat na procenta, u top a left jde také používat procente. Vím, že se jedná o responzivní desing, ale zajímá mě, jestli se tím vystavuji některým rizikům(např. bude velká šance, že to bude haprovat v některých prohlížečích apod.) Děkuji
Keeehi
Profil
To co to způsobuje, je pravděpodobně zaokrouhlování. Když se stránka zvětší na 110%, tak z 71px se stane 78.1px. Jelikož desetiny pixelů neexistují, musí se to nějak zaokrouhlit. No a když se zaokrouhlovací chyba na 17 elementech nasčítá, může se stát, že ten poslední se už na řádek prostě nevejde. řešením je řádku nenastavovat width, ale min-width, aby se v případě, že mu obsah tochu naroste, mohl roztáhnout.

S procenty je ten problém, že k zaokrouhlování může docházet častěji. 1/17 je 0.05882352941... což není úplně hezké číslo na násobení.
Prochy
Profil
U těch procent mě napadlo, že to bude problematický právě z tohodle důvodu. No nebudu si tím přidělávat starosti. Teď už to funguje v pořádku poté, co jsem to nastavil pomocí min-width. Děkuji moc za pomoc.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0