Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
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: Zjištění výšky

Aktivity
Avatar
mat.masar
Člen
Avatar
mat.masar:12.3.2016 19:56

Ahoj, dá se přes css zjistit výška elementu a podle něj nastavit hodnotu height? Nebo je na to potřeba js?

 
Odpovědět
12.3.2016 19:56
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na mat.masar
Honza Bittner:12.3.2016 20:45

Záleží na konkrétním problému, ale obecně v CSS pouze nastavuješ. Pravděpodobně budeš muset využít JS.

Nahoru Odpovědět
12.3.2016 20:45
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
mat.masar
Člen
Avatar
Odpovídá na Honza Bittner
mat.masar:12.3.2016 22:29

Ty to zrovna pochopíš asi nejlíp :D Mám pevně danou výšku elementu(header) a v tom je sticky menu. Jenže když je zařízení menší výška zůstává stejná, chtěl jsem nastavovat výšku podle výšky obrázku(ten má width 100% takže se mění) napřesno a ne to dělat přes media. Na to je asi potřeba js, že?

 
Nahoru Odpovědět
12.3.2016 22:29
Avatar
Martin Štěpánek
Tvůrce
Avatar
Martin Štěpánek :12.3.2016 23:19

Jo na to potřebuješ js :-)

Nahoru Odpovědět
12.3.2016 23:19
Všechno jde naprogramovat, chce to jen čas a chuť...
Avatar
mat.masar
Člen
Avatar
Odpovídá na Martin Štěpánek
mat.masar:12.3.2016 23:25

Achjo, js nějak nechápu...i pres přečtení zakladu a zakladu jquery, ale diky

 
Nahoru Odpovědět
12.3.2016 23:25
Avatar
Martin Štěpánek
Tvůrce
Avatar
Martin Štěpánek :12.3.2016 23:31 
window.onload = function() {
var vyska = document.getElementById("obrazek").style.height;
document.getElementById("menu").style.height = vyska;
} ;

Obrázku nastav id obrazek a menu nastav id menu.
Snad je to správně, i když ne zrovna elegantně (píšu to na mobilu) :-)

Nahoru Odpovědět
12.3.2016 23:31
Všechno jde naprogramovat, chce to jen čas a chuť...
Avatar
Tomáš123
Člen
Avatar
Odpovídá na mat.masar
Tomáš123:13.3.2016 13:01

Ak by ti stačilo zachovávať proporcie prvku, využi percentuálnej hodnoty paddingu. Tá sa vždy počíta od šírky prvku.

div {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

vytvorí presný štvorec... Za height si môžeš dať aj inú hodnotu. Slúži ako akýsi modifikátor. Pohraj sa s tým a sám uvidíš.

Otázkou je, či toto je to, čo požaduješ. Podľa obrázku úplne inde v dokumente výšku nenastavíš. Ak by si poznal pomer jeho strán, týmto to môžeš simulovať.

Nahoru Odpovědět
13.3.2016 13:01
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
mat.masar
Člen
Avatar
Odpovídá na Tomáš123
mat.masar:13.3.2016 13:52

Špatně jsem se vyjádřil. V hlavičce je fotka a menu. Je to v jednom,elementu a tomu potrebuju zmenšovat výšku.

 
Nahoru Odpovědět
13.3.2016 13:52
Avatar
Tomáš123
Člen
Avatar
Tomáš123:13.3.2016 14:35

A kde je problém? Ak je všetko v jednom prvku, na čo potrebuješ zisťovať a nastavovať výšku? Niečo sa tam napočíta: http://kod.djpw.cz/djvb... Skús si zmenšovať okno. Mení sa aj výška divu.obal bez toho, aby trebalo niečo počítať. Ak nechceš používať img, ale iný prvok, ktorému nastavíš pozadie v CSS, použi ten hack: http://kod.djpw.cz/ejvb.

Ak chceš vidieť ukážky na celej obrázovke, pridaj si za adresu mínusko.

Nahoru Odpovědět
13.3.2016 14:35
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
mat.masar
Člen
Avatar
Odpovídá na Tomáš123
mat.masar:15.3.2016 17:40

Po delší pauze :D

No já asi nevím jak to popsat.. Snad pomůže když se podíváš na live verzi. www.matmasar.wz.cz
Když si zmenšíš okno tak je tam mezera, protože header má nastavenou výšku 225px, aby to při smooth scrollu( a sticky menu ) neškubal. Zkus si to v prvku vypnout, třeba poochopíš jak to myslím :D

 
Nahoru Odpovědět
15.3.2016 17:40
Avatar
Tomáš123
Člen
Avatar
Odpovídá na mat.masar
Tomáš123:15.3.2016 18:53

Spôsobuje to fixne nastavená výška prvku #menu.

Ja by som to pozadie nastavil prvku #menu, vymazal odtiaľ <img> (na dekoračné účely slúži CSS) a navigáciu absolútne napozicioval naspod. Nejako takto: http://kod.djpw.cz/pkvb

Bohužiaľ, je nutné poznať proporcie a hodnotu nastavovať pre dva prvky (prípadne si spoj dva selektory, aby bolo pohodlnejšie hodnotu zmeniť).

Neviem, či v CSS existuje riešenie, ktoré by nevyžadovalo poznať rozmery obrázku a bolo všeobecne funkčné. Súčasné má aspoň dobrú podporu.

Nahoru Odpovědět
15.3.2016 18:53
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na mat.masar
Tomáš123:15.3.2016 18:58

Pozerám, že navigáciu máš na spodnej hrane hlavičky. To by šlo takto: http://kod.djpw.cz/qkvb

Deklarácia top: 100% zariadi, že sa prvok napoziciuje presne na spodnú hranu (najbližšieho nadradeného) obmedzujúceho bloku (div.hlavicka).

Nahoru Odpovědět
15.3.2016 18:58
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
mat.masar
Člen
Avatar
Odpovídá na Tomáš123
mat.masar:15.3.2016 20:01

No já vím. Samozřejmě, že by se to dalo předělat do css ale tím bych si stejně problém nevyřešil.

 
Nahoru Odpovědět
15.3.2016 20:01
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na mat.masar
Neaktivní uživatel:15.3.2016 21:55

Jde to bez Javascriptu, obrázek můžeš nastavit jako pozadí a nastavit mu background-size na cover. To funguje fajn :)

Nahoru Odpovědět
15.3.2016 21:55
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na mat.masar
Neaktivní uživatel:15.3.2016 21:56

S tím ještě souvisí background position center center :) Možná funguje i jeden center, nechce se mi to teď hledat :D

Nahoru Odpovědět
15.3.2016 21:56
Neaktivní uživatelský účet
Avatar
Tomáš123
Člen
Avatar
Odpovídá na mat.masar
Tomáš123:16.3.2016 9:20

Podľa mňa tu bolo nastienené funkčné riešenie bez JavaScriptu... Je taký problém poznať proporcie obrázku? V tvojom prípade, by si potreboval odsadiť o presne 16,625%...

Ak máš v pláne obrázok meniť, meraj si JavaScriptom výšku divu.hlavicka + výšku .nav a nastav to ako horný margin obsahovej časti.

Nahoru Odpovědět
16.3.2016 9:20
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
mat.masar
Člen
Avatar
Odpovídá na Tomáš123
mat.masar:16.3.2016 18:07

Jestli si to myslel takhle

window.onload = function() {
var vyskaHeaderu = document.getElementByTagName("header");
var vyska = vyskaHeaderu.offsetHeight();
document.getElementById("Reference-weby").style.marginTop = vyska;
} ;

Tak to nefunguje, nevím jak jinak si to myslel.

 
Nahoru Odpovědět
16.3.2016 18:07
Avatar
Tomáš123
Člen
Avatar
Odpovídá na mat.masar
Tomáš123:16.3.2016 18:31

V tvojom headeri je predsa obrázok poziciovaný. Musíš merať výšku obrázku. Myslel som, že budeme vychádzať z môjho kódu.

Inak, myslím, že existuje iba getElementsBy­TagName. Aj tak mi ale príde rozumnejšie využiť metódu getElementById().

Nahoru Odpovědět
16.3.2016 18:31
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
mat.masar
Člen
Avatar
Odpovídá na Tomáš123
mat.masar:18.3.2016 14:42

Díky, výsledný fungující kód

window.onload = function() {
var vyskaHeaderu = document.getElementById("zahlavi");
var vyska = vyskaHeaderu.offsetHeight;
document.getElementById("menu").style.height = vyska;
} ;

Akorád, když měníš šířku okna, tak to nefunguje, protože se js neaktualizuje(to stejné s pozicí navu). Nedá se nějak při změně šířky aktualizovat js?

 
Nahoru Odpovědět
18.3.2016 14:42
Avatar
Martin Štěpánek
Tvůrce
Avatar
Martin Štěpánek :18.3.2016 14:58

Není to snad to samé, co jsem psal já? :-D

Nahoru Odpovědět
18.3.2016 14:58
Všechno jde naprogramovat, chce to jen čas a chuť...
Avatar
mat.masar
Člen
Avatar
Odpovídá na Martin Štěpánek
mat.masar:18.3.2016 16:29

No asi jo, ale když jsem pozměnil ten tvůj, jak jsi psal, tak to nefungovalo tak nevím :D

 
Nahoru Odpovědět
18.3.2016 16:29
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 21 zpráv z 21.