Autor Zpráva
Anonymouz
Profil *
Mám dva prvky a potřeboval bych nastavit, aby první prvek měl nastavenou výšku podle druhého.
Něco málo jsem pročetl a zkusil to sám. Řekl bych, že napsat proměnné jsem ještě zvládl, ale zasekl jsem se už u podmínky (nechápu proč) a script bohužel nefunguje.

Vytvořil jsem hodně zjednodušenou ukázku kódu. Živá ukázka

Chtěl jsem, aby to fungovalo následovně: Pokud výška levého elementu neodpovídá pravému, bude mít levý element výšku stejnou jako ten pravý. Ty alerty tam jsou pouze pro ověření abych věděl jak mi to funguje/nefunguje.

Uvítám každou radu a pomoc :-)
pcmanik
Profil
Anonymouz:
Cez .style zisťuješ nastavené vlastnosti elementu (CSS, alebo inline) - v tomto prípade výšku. Ak chceš zistiť reálnu výšku tak na to slúži .offsetHeight.

Ale to o čo sa snažíš sa dá pohodlne vyriešiť bez JS a to použítím obalu ktorému nastavíš display: table A potomkom nastavíš display: table-cell. Tak budú mať automaticky rovnakú výšku.
Keeehi
Profil
Anonymouz:
Důležitá je otázka proč? Nestačí jen, aby to vypadalo že jsou stejně dlouhé?
Anonymouz
Profil *
Já jsem ten příklad možná špatně udělal. Takto to vypadá, že prvky budou vedle sebe, ale nebudou. Oba prvky mohou být na stránce různě daleko od sebe. Jde mi pouze o to nastavit prvku A stejnou výšku jako má prvek B a to pouze ve chvíli, kdyby bude prvek A menší než prvek B. Bohužel v javascriptu neumim ani "fň" - teprve se snažím vše pochopit, takže ty otázky podle toho pak vypadají tak jak vypadají. Na druhou stranu myslím, že je lepší snaha a případně se zeptat, než rovnou volat o hotové řešení (bez ochoty se učit).

Myslím, že jsem díky pcmanik přišel na řešení viz živá ukázka Živá ukázka Akorát nevím, zda se to takto může psát, nebo tam němám nějakou chybu. Za kontrolu a rady (i co se týče čistoty psaní kódu) budu vděčný. Všem zúčastněným děkuji za čas.
pcmanik
Profil
Anonymouz:
Ak #levy,#pravy dáš box-sizing: border-box; Tak potom v js nemusíš čarovať s paddingom, ale môžes priamo nastaviť výšku ľavého podľa pravého. Ukážka
Keeehi
Profil
Anonymouz:
Živá ukázka

Taky je lepší použít getBoundingClientRect() protože nezaokrouhluje výšky. Taky jsem přidal listener na změnu velikosti okna, aby se to případně přepočítalo. Kvůli tomu jsem vyhodil podmínku, že je levý menší protože když se okno zmenší a pak zvětší, tak se levý natáhne ale už nevrátí. Případně si ji vrať.

Problém s onresize je ten, že aby fungoval všech prohlížečích, tak jde použít jen na objektu window. Ovšem změna velikosti elementu může nastat nejenom změnou velikosti okna prohlížeče (například zoomem). Takže je ještě potřeba pohlídat všechny jiné možnosti, kdy se může velikost elementu změnit. Ale nejlepší řešení bude nějaký polyfill nebo knihovna které umožní hlídat měnu velikosti přímo toho elementu.
Dorien
Profil *
Jak funguje ten polyfil nebo knihovna? To jsou ty věci co se musí instalovat přes příkazovou řádku v node.js? Btw šlo by čistě teoreticky udělat toto stejné řešení i pomocí php?
Keeehi
Profil
Dorien:
Jak funguje ten polyfil nebo knihovna?
Rozšíří stávající podporu (pro prohlížeče které něco nepodporují mají v sobě kód, který zajistí, že to fungovat bude) nebo přidávají nové funkce které můžeš použít.

To jsou ty věci co se musí instalovat přes příkazovou řádku v node.js?
Záleží na autorovi řešení, co si zvolí. Když jsem zběžně prolétl nějaké projekty, tak jsem viděl instalaci pomocí npm, boweru ale i předkompilované soubory které se ručně zkopírují. Vypadá to ale, že npm je standard k tomu některé projekty obsahují i jiné možnosti. Jinak to že se to instaluje pomocí npm by nemělo být překážkou.

Btw šlo by čistě teoreticky udělat toto stejné řešení i pomocí php?
Ne. PHP běží na serveru, javascript v prohlížeči. A ty ten problém máš v prohlížeči. Teoreticky by jsi mohl použít nějaký jiný programovací jazyk, který běží v prohlížeči. Bohužel, kromě javascript neexistuje žádný jiný, který by fungoval ve všech běžně používaných prohlížečích. Takže tvou jedinou šancí je javascript.
Dorien
Profil *
Já mám právě raději řešení na serveru, než v prohlížeči, které si mohou lidé vypnout. PHP script tedy nedovede, vytáhnout údaj např. z CSS do proměnné, kterou by pak vložil jako hodnotu height?

Mám následující problém. Když se pustím do nějakých online kurzů pro začátečníky atd, tak během chvíle se naučím jak fungují proměnné, if, else, různé operace, napsání něčeho do dokumentu atd. Problém je, že v praxi tyto věci nedovedu použít k něčemu užitečnému a naopak užitečné věci, které bych potřeboval, nedokážu provést se znalostmi, které z těch kurzů a knih jsou. Připadá, mi jako kdyby mi chyběl nějaký mezičlánek. Naprosto stejný problém mám jak u JS tak u PHP.
Keeehi
Profil
Dorien:
PHP script tedy nedovede, vytáhnout údaj např. z CSS do proměnné, kterou by pak vložil jako hodnotu height?
Ano, nedokáže.

Já mám právě raději řešení na serveru, než v prohlížeči, které si mohou lidé vypnout.
Ano, já taky. Kde to jde tak preferují také serverové řešení. Ovšem toto není ten případ.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

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