Måle høyde på div

[kongen]

Jeg har 2 div, den til venstre inneholder en artikkel, og den til høyre inneholder en annonse.

<div id="a" style="float:left">Artikkel</div> <div id="b" style="float:right">Annonse</div>

Hvis artikkelen er så lang slik at div a blir over 600px høy så skal det settes inn en ekstra annonse i div b.

Er det mulig å måle høyden på div a?

 

[Dostojevskij]

var result = $("#a").height();

 

[adeneo]

Det er selvfølgelig mulig, svaret står rett over her, postet av Dostoshfefettellerannet.

Bare husk at du kan kun måle ting etter at de har lastet inn og er synlige, du må altså vente til bilder og slikt er lastet ferdig, dersom det er bilder i artikkelen.

Husk også at dersom annonsene du setter inn tilhører noe slik som AdSense, så bryter du i de fleste tilfeller retningslinjene til Google når du gjør ting som dette.

 

[kongen]

Er dette det samme som

var result = getElementById("a").offsetHeight;

 

[adeneo]

Nesten, jQuery vil normalt bruke clientHeight ikke offsetHeight

clientHeight:

Returns the height of the visible area for an object, in pixels. The value contains the height with the padding, but it does not include the scrollBar, border, and the margin.

offsetHeight:

Returns the height of the visible area for an object, in pixels. The value contains the height with the padding, scrollBar, and the border, but does not include the margin.

​

 

[kongen]

Er det mulig å måle dette på serveren? Kan serveren rendere siden og måle høyden på div ved f.eks. skjermbredde på 1000px og 750px? Høydene skal puttes i database.

 

[Pong]

Hvorfor må serveren vite det? Jeg lurer litt.
Selv ville jeg nok aller allerhelst gå for en løsning der klienten får avgjøre - responsive. Evt. la client-side js gjør jobben. Grunnen er at informasjon kan gjengis på så mange forskjellige måter som er vanskelig å forutse.
Jeg er interessert i tankegangen din her.

 

[kongen]

Jeg vil at serveren skal klargjøre på forhånd om det er en eller to annonser som skal lastes basert på lengden på innholdet. Jeg vil unngå javascript pga adblock.

 

[xdex]

adblock ville jo blokkert begge disse annonsene uansett, og hvorfor en server må klargjøres på forhånd, er for meg veldig nytt. Hvor er det du tenker å spare resursene dine? Ett regnestykke som regner ut noe over-komplisert, eller bare spytte ut to annonser, uavhengig av adblock, som går direkte på kostnad av client-side, med unntak av båndbredde, som annonsør uansett står for.

Dersom du uansett skulle gjort noe, basert på en lengde, kan du vel veldig enkelt bare regne ut hvor mange tall og bokstaver en artikkel består av, og på den måten, finne ut ett gjennomsnitt, og ta en sjekk mot gjennomsnittet. Er artikkelen mer enn 2000ord, vil sannsynligheten være at den har plass til to annonser. Det samme gjelder enkeltsider, at du sjekker teksten i databasen, og lager ett gjennomsnitt. Uansett, dette er vel det man kaller "over-doing-it", med mindre du har ett nettsted som absolutt ikke var klarert for 2 annonser i små artikler. Men igjen, så kunne du regnet ut alt dette med javascript, som også mest sannsynlig blir brukt for å vise annonsen, uten at du mistet noen resurser.

 

[kongen]

Hvis man skal ha en 100% bred annonse under artikkelen så ser det bedre ut hvis venstre og høyre kolonne over 100%-annonsen har lik høyde. Høyre kolonne skal fylles opp med annonser, fb-ting og masse annet drit. Jeg tror siden lastes raskere hvis dette lastes med minst mulig kommunikasjon frem og tilbake med server og klient. Derfor så vil jeg få regnet ut høyde på venstre kolonne for å finne ut hva det er plass til i høyre kolonne.

 

[Pong]

Da forutsetter du visning på skjerm sant? På min mobil med en skjermbredde på 240 piksler er situasjonen veldig annerledes.
Du kan evt. sende en tom høyre-kolonne til klienten, og bruke ajax for å fylle den. Ajax-baserte forespørselet kan ta med den aktuelle høyden på venstre kolonnen.

 

[kongen]

Kun på skjerm. Jeg vil ikke bruke javascript på det klienten laster. Jeg vil at serveren skal rendere siden i forskjellige bredder, regne ut høyden på venstre kolonne, så finne "ting" å fylle opp høyre kolonne med. Deretter så caches en template for denne siden i forskjellige bredder.

Jeg har en database med enheter og hvilke skjermstørrelse de har, så når noen lander på siden så får de servert riktig template.

 

[kongen]

Hvis jeg installerer V8js kan serveren da kunne rendere siden med javascript og måle høyde på div?

http://php.net/manual/en/book.v8js.php

 

[xdex]

Kun på skjerm. Jeg vil ikke bruke javascript på det klienten laster. Jeg vil at serveren skal rendere siden i forskjellige bredder, regne ut høyden på venstre kolonne, så finne "ting" å fylle opp høyre kolonne med. Deretter så caches en template for denne siden i forskjellige bredder.

Jeg har en database med enheter og hvilke skjermstørrelse de har, så når noen lander på siden så får de servert riktig template.

Så hvis jeg besøker nettstedet ditt med ett mindre nettleser vindu, hvor jeg så blåser opp dette til full størrelse, hva skjer da egentlig? Siden du tydeligvis ikke går for noe som er responsivt, men rendrer noe basert på besøk? Da må du jo uansett bruke en haug av client-side informasjon, til å sjekke om bredde/høyre på nettleser-vinduet ditt endrer seg, om det skal være real-time og korrekt.

Skal du måle noe i real time, kan du likså godt installere nodejs på serveren, kombinert med socket io, men igjen, dette er jo katastrofetenking. Du snakker om at siden skal lastes raskere lengre oppe, men likevel skal du gjøre det så tungvindt som mulig. Skal du ha lik høyde på venstre og høyre kolonne, kan du bruke flex. Hva er poenget med at klienten skal utføre minst mulig, og at serveren din belastes mest mulig (som skaper lenger lastetid) ?

Den dagen du kommer i mål med dette, gi oss gjerne de dramatiske tallendringene som utgjør den store forskjellen, det vil være interessant!

 

[kongen]

Hvis man bruker % i div-bredde, på bilder etc så ser vel siden likedan ut uansett hvordan du skalerer browseren opp og ned? Eller tar jeg feil her?