ugrás a tartalomhoz

JavaScript div height

bnc1995 · 2014. Május. 2. (P), 10.36
Sziasztok!

A segítségeteket szeretném kérni egy div magasságának beállításával kapcsolatban.

A problémám a következő:

Egy tartalomtól függően változó magasságú div-et hoztam létre, ami működik is csak mivel, a kerekített sarkokat képekkel oldottam meg, egy kicsit lejjebb kerül mint én szeretném, ezért a position tulajdonsággal néhány pixellel feljebb toltam, így a tartalom alatt maradt egy kis hely. Én ezt úgy próbáltam megoldani, hogy JavaScript-ben lekérdezem a magasságot, majd kivonom belőle a felesleges magasságot. A probléma viszont az, hogy bár $("div_ID").ready(function(){...}) segítségével megvárnám amíg a div betölt, sajnos nekem azonnal lefut az átméretező kód, nem várja meg míg teljes egészében betölt, így viszont nem a tényleges méretet használja a kód, erre végső megoldásként az a barbár megoldás jutott az eszembe, hogy a setTimeout() függvényt használnám. Először 1000ms-re állítottam, de ez sem volt elég,mert némely eszköznek nem elég az 1s, hogy betöltsön, most 2000ms-en van, de ez sem elég mindenhol(pl. telefonon). Már az 1s-et is soknak tartottam, de a 2s már pláne. Szerintem elég feltűnő, hogy az oldal betöltése után 2 másodperccel felugrik a weboldal jelentős része. Biztos van erre egy elegánsabb megoldás.

Ha valaki tudna segíteni azt nagyon megköszönném, illetve, ha tudtok a problémára másik megoldást azt is szívesen fogadom.

Bence
 
1

Document

janoszen · 2014. Május. 2. (P), 10.49
Probald meg ugy, hogy nem az elem ready eventjet nezed, hanem a document-et.
2

Próbáltam

bnc1995 · 2014. Május. 2. (P), 10.54
Bocsi, hogy ezt nem írtam, de ezt is próbáltam.
3

A kérdés az, a problémát

Hidvégi Gábor · 2014. Május. 2. (P), 11.23
A kérdés az, a problémát hogyan szeretnéd megoldani. Ha gyorsan, akkor olvasd át a jQuery dokumentációját. Ha rendesen, akkor szabadulj meg tőle, és oldd meg a feladatot normál DOM függvényekkel, így megértheted, hogy mi hogyan működik, és a későbbiekben nem kell ilyen kérdéseket feltenned, mint a témaindító. Ha ezt abszolváltad, akkor visszatérhetsz a jQueryre, bár szerintem nem fogod érezni a szükségét.
4

Miért rossz a jQuery?

Pepita · 2014. Május. 5. (H), 12.38
Ha rendesen, akkor szabadulj meg tőle, és oldd meg a feladatot normál DOM függvényekkel
Bocs, de ezzel nem értek egyet, a jQuery egy csomó böngészőkülönbséget áthidal helyettem és "tiszta JS-el" sem lesz előrébb, mert szerintem a képek betöltődését kéne elkapni.

A kérdésre javaslat:

- Nem tudom, hogy oldod meg képekkel a sarkokat, de valószínűleg több div, nem egy; ha igen, annak olvass utána, hogy a háttérképek betöltődését el lehet-e kapni és hogyan, ezeket számold, és mikor meg van mind a négy, akkor méretezz. Ez a gagyi megoldás.

- Nem értem, hogy a kerekített sarkokat miért nem egyszerűen CSS-el oldod meg. Ha mobilban is gondolkodsz, de máskülönben is: ilyen kis frincfrancok miatti kismillió HTTP kérés és túl sok kiküldött felesleges byte miatti 2 mp feletti oldalmegjelenési idő alapból sok. Ha valaki régi böngészőt használ, hát nem lesz kerek a sarka, nem lesz árnyék, stb., arra figyelj, hogy azért akkor is olvashatóan jelenjen meg a tartalom.

- Egyébként pedig szerintem mobilra kapásból másik design "jár".
5

Mind CSS-ben, mind pedig

Hidvégi Gábor · 2014. Május. 5. (H), 13.15
Mind CSS-ben, mind pedig HTML-ben van lehetőség arra, hogy a képeknek fix méretet adjon meg, így a div-be való beillesztés pillanatában tudhatja a magasságát. Ehhez nem kell jQuery, és teljesen mindegy, hogy képekkel vagy CSS-ből kerekít.
6

Nem mindegy

Pepita · 2014. Május. 5. (H), 13.28
teljesen mindegy, hogy képekkel vagy CSS-ből kerekít
v.ö.
kismillió HTTP kérés és túl sok kiküldött felesleges byte miatti 2 mp feletti oldalmegjelenési idő alapból sok

Ezért jobb CSS-el, a JS szerintem - ahogy értettem - valami margin vagy padding -variálás miatt kell(ene), amire szinte biztos, hogy szintén van CSS megoldás.
7

Annak a mondatnak nem az volt

Hidvégi Gábor · 2014. Május. 5. (H), 14.47
Annak a mondatnak nem az volt a lényege, amit kiragadtál belőle.
8

Igaz

Pepita · 2014. Május. 5. (H), 15.08
Bocs, kicsit túlreagáltam.

Szerk.: jó lenne látni a jelenlegi HTML-t, CSS-t.
9

Böngészőkülönbség

Poetro · 2014. Május. 5. (H), 16.00
Mi az a fontos böngészőkülönbség, amit át kellene hidalni IE9/Fx/Chrome/Safari/Opera alatt? Mert én nem igazán tudok róla. Az XP halott platform, ennek megfelelően illik szerintem kezelni az IE9 alatti böngészőket is, ugyanis azok sem igazán támogatottak (minden támogatott MS operációs rendszeren amennyiben nincs letiltva legalább IE9-re frissül a böngésző). Innentől kezdve nincs túl sok minden, amit el kellene fedni. Mindehol van querySelector / querySelectorAll (IE8), addEventListener (IE9), Array metódusok (IE9), XMLHttpRequest (IE7). Nem tudom, mi más kellhet még.
10

Akkor csak a megszokás, kényelem

Pepita · 2014. Május. 8. (Cs), 07.33
Sok mást is (pl. animációk) "megcsinál helyettem" a jQuery, mondjuk ez természetesen nem azt jelenti, hogy mindent azzal csinálok.
Ezzel együtt jónak tartom, mint keretrendszert, ha bent van a cache-ben, a többi (oldalanként változó) JS-ed jelentősen rövidülhet, ha jól használod.

(Ma még nagyon sok magyar gépen van "halott platform", olyat is hallottam, hogy valaki azért tért vissza win7-8-ról, mert nem tudta megszokni...)
11

Animáció

Poetro · 2014. Május. 8. (Cs), 08.34
Én animációt már csak IE9 miatt csinálok JS-sel, a többi CSS.