diff --git a/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/solution.md b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/solution.md index 01e073655..ca46f79e3 100644 --- a/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/solution.md +++ b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/solution.md @@ -1,7 +1,8 @@ -The solution is: +Løsningen er: ```js let scrollBottom = elem.scrollHeight - elem.scrollTop - elem.clientHeight; ``` -In other words: (full height) minus (scrolled out top part) minus (visible part) -- that's exactly the scrolled out bottom part. +Eller med andre ord: (fuld højde) minus (ud-scrollet top del) minus (synlig del) = den ud-scrollede bund del. + diff --git a/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md index 796039c2a..6f833bae9 100644 --- a/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md +++ b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md @@ -2,10 +2,10 @@ importance: 5 --- -# What's the scroll from the bottom? +# Hvad er scroll fra bunden? -The `elem.scrollTop` property is the size of the scrolled out part from the top. How to get the size of the bottom scroll (let's call it `scrollBottom`)? +Egenskaben `elem.scrollTop` viser den del af indholdet, der er scroll'et ud fra toppen. Hvordan får man størrelsen på den del af indholdet, der er scroll'et ud fra bunden (lad os kalde den `scrollBottom`)? -Write the code that works for an arbitrary `elem`. +Skriv en kode der virker for et vilkårligt element. -P.S. Please check your code: if there's no scroll or the element is fully scrolled down, then it should return `0`. +P.S. Tjek din kode: hvis der ikke er nogen scroll eller elementet er fuldt scroll'et ud, så skal den returnere `0`. diff --git a/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/solution.md b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/solution.md index 1ba1e5e57..44781265b 100644 --- a/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/solution.md +++ b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/solution.md @@ -1,16 +1,16 @@ -To get the scrollbar width, we can create an element with the scroll, but without borders and paddings. +For at få bredden på en scrollbjælke kan vi oprette et element med scroll, men uden rammer og padding. -Then the difference between its full width `offsetWidth` and the inner content area width `clientWidth` will be exactly the scrollbar: +Forskellen mellem dets fulde bredde `offsetWidth` og den indre indholdsarealbredde `clientWidth` vil være præcis scrollbjælken: ```js run -// create a div with the scroll +// Opret et div element med scroll let div = document.createElement('div'); div.style.overflowY = 'scroll'; div.style.width = '50px'; div.style.height = '50px'; -// must put it in the document, otherwise sizes will be 0 +// Vi skal indsætte elementet i dokumentet, ellers vil dimensionerne være 0 document.body.append(div); let scrollWidth = div.offsetWidth - div.clientWidth; diff --git a/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md index b39004cbf..c37eb0621 100644 --- a/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md +++ b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md @@ -2,10 +2,10 @@ importance: 3 --- -# What is the scrollbar width? +# Hvad er bredden på en scrollbjælke? -Write the code that returns the width of a standard scrollbar. +Skriv koden der returnerer bredden på en standard scrollbjælke. -For Windows it usually varies between `12px` and `20px`. If the browser doesn't reserve any space for it (the scrollbar is half-translucent over the text, also happens), then it may be `0px`. +For Windows varierer den normalt mellem `12px` og `20px`. Hvis browseren ikke reserverer plads til den (scrollbjælken er halvt gennemsigtig over teksten, hvilket også sker), kan den være `0px`. -P.S. The code should work for any HTML document, do not depend on its content. +P.S. Koden skal virke for et vilkårligt HTML dokument og må ikke afhæng af dets indhold. diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/ball-half/index.html b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/ball-half/index.html index 8f855ecfa..d9e09dcb5 100755 --- a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/ball-half/index.html +++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/ball-half/index.html @@ -20,8 +20,11 @@
- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . . . . .
@@ -29,8 +32,8 @@ let ball = document.getElementById('ball') let field = document.getElementById('field') - // ball.offsetWidth=0 before image loaded! - // to fix: set width + // ball.offsetWidth=0 før billedet er hentet + // for at rette: sæt bredden ball.style.left = Math.round(field.clientWidth / 2) + 'px' ball.style.top = Math.round(field.clientHeight / 2) + 'px' @@ -38,4 +41,4 @@ - + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.view/index.html b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.view/index.html index 9f21e5421..823118356 100755 --- a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.view/index.html +++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.view/index.html @@ -20,14 +20,17 @@
- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . + . . . . . . . . . + . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
@@ -35,4 +38,4 @@ - + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/task.md b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/task.md index f56e0858b..c939e3703 100644 --- a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/task.md +++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/task.md @@ -2,19 +2,19 @@ importance: 5 --- -# Place the ball in the field center +# Placer bolden i midten af feltet -Here's how the source document looks: +Her er hvordan kilde dokumentet ser ud: [iframe src="source" edit link height=180] -What are coordinates of the field center? +Hvad er koordinaterne for midten af feltet? -Calculate them and use to place the ball into the center of the green field: +Beregn det og brug det til at placere bolden i midten af det grønne felt: [iframe src="solution" height=180] -- The element should be moved by JavaScript, not CSS. -- The code should work with any ball size (`10`, `20`, `30` pixels) and any field size, not be bound to the given values. +- Elementet skal flyttes af JavaScript, ikke CSS. +- Koden skal virke med enhver boldstørrelse (`10`, `20`, `30` pixels) og enhver feltstørrelse. Den må ikke være bundet til de givne værdier. -P.S. Sure, centering could be done with CSS, but here we want exactly JavaScript. Further we'll meet other topics and more complex situations when JavaScript must be used. Here we do a "warm-up". +P.S. Selvfølgelig kunne centrering gøres med CSS, men her vil vi specifikt have JavaScript. Senere møder vi andre og mere komplekse situationer, hvor JavaScript skal bruges. Betragt dette som en "opvarmning". diff --git a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md index 0a18bd86e..f0aa28bc6 100644 --- a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md +++ b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md @@ -1,6 +1,6 @@ -Differences: +Forskelle: -1. `clientWidth` is numeric, while `getComputedStyle(elem).width` returns a string with `px` at the end. -2. `getComputedStyle` may return non-numeric width like `"auto"` for an inline element. -3. `clientWidth` is the inner content area of the element plus paddings, while CSS width (with standard `box-sizing`) is the inner content area *without paddings*. -4. If there's a scrollbar and the browser reserves the space for it, some browser substract that space from CSS width (cause it's not available for content any more), and some do not. The `clientWidth` property is always the same: scrollbar size is substracted if reserved. +1. `clientWidth` er et tal, mens `getComputedStyle(elem).width` returnerer en streng med `px` til sidst. +2. `getComputedStyle` kan returnere ikke-numerisk bredde som `"auto"` for et inline-element. +3. `clientWidth` er det indre område for elementet plus padding, mens CSS-bredden (med standard `box-sizing`) er det indre område *uden* padding. +4. Hvis der er en scrollbjælke, og browseren reserverer plads til den, trækker nogle browsere den plads fra CSS-bredden (da den ikke længere er tilgængelig for indhold), og andre gør ikke. Egenskaben `clientWidth` er altid den samme: scrollbjælkens størrelse trækkes fra, hvis den er reserveret. diff --git a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md index 5378c5915..6570db60a 100644 --- a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md +++ b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md @@ -2,8 +2,8 @@ importance: 5 --- -# The difference: CSS width versus clientWidth +# Forskellen: CSS width versus clientWidth -What's the difference between `getComputedStyle(elem).width` and `elem.clientWidth`? +Hvad er forskellen mellem `getComputedStyle(elem).width` og `elem.clientWidth`? -Give at least 3 differences. The more the better. +Angiv mindst 3 forskelle. Jo flere jo bedre. diff --git a/2-ui/1-document/09-size-and-scroll/article.md b/2-ui/1-document/09-size-and-scroll/article.md index 66f28115f..58526c108 100644 --- a/2-ui/1-document/09-size-and-scroll/article.md +++ b/2-ui/1-document/09-size-and-scroll/article.md @@ -1,16 +1,16 @@ -# Element size and scrolling +# Størrelsen på elementer og scrolling -There are many JavaScript properties that allow us to read information about element width, height and other geometry features. +Der er mange JavaScript-egenskaber, der giver os mulighed for at læse information om elementets bredde, højde og andre geometriske træk. -We often need them when moving or positioning elements in JavaScript. +Vi har ofte brug for dem, når vi flytter eller placerer elementer i JavaScript. -## Sample element +## Eksempel-element -As a sample element to demonstrate properties we'll use the one given below: +Lad os bruge elementet herunder som eksempel til at demonstrere egenskaberne: ```html no-beautify
- ...Text... + ...Tekst...
``` -It has the border, padding and scrolling. The full set of features. There are no margins, as they are not the part of the element itself, and there are no special properties for them. +Det har kant, padding og scroll-mulighed. Det har ingen margin, da de ikke er en del af elementet selv, og der er ingen specielle egenskaber for dem. -The element looks like this: +Elementet ser sådan ud: ![](metric-css.svg) -You can [open the document in the sandbox](sandbox:metric). +Du kan [åbne dokumentet i sandbox](sandbox:metric). ```smart header="Mind the scrollbar" -The picture above demonstrates the most complex case when the element has a scrollbar. Some browsers (not all) reserve the space for it by taking it from the content (labeled as "content width" above). +Billedet ovenfor viser det mest komplekse tilfælde, hvor elementet har en scrollbjælke. Nogle browsere (ikke alle) reserverer plads til den ved at tage den fra indholdet (angivet som "content width" ovenfor). -So, without scrollbar the content width would be `300px`, but if the scrollbar is `16px` wide (the width may vary between devices and browsers) then only `300 - 16 = 284px` remains, and we should take it into account. That's why examples from this chapter assume that there's a scrollbar. Without it, some calculations are simpler. +Så uden en scrollbjælke ville indholdsbredden være `300px`, men hvis scrollbjælken er `16px` bred (bredden kan variere mellem enheder og browsere), er der kun `300 - 16 = 284px` tilbage, og vi bør tage det med i betragtning. Det er derfor, eksemplerne i dette kapitel antager, at der er en scrollbjælke. Uden den er nogle beregninger enklere. ``` -```smart header="The `padding-bottom` area may be filled with text" -Usually paddings are shown empty on our illustrations, but if there's a lot of text in the element and it overflows, then browsers show the "overflowing" text at `padding-bottom`, that's normal. +```smart header="Området `padding-bottom` kan fyldes med tekst" +Normalt vil padding være tom som det ses på illustrationerne, men hvis der er meget tekst i elementet og det overløber, vil browseren vise den " overløbende" tekst på `padding-bottom`, det er normalt. ``` -## Geometry +## Geometri -Here's the overall picture with geometry properties: +Her er et billede, der viser alle geometriske egenskaber: ![](metric-all.svg) -Values of these properties are technically numbers, but these numbers are "of pixels", so these are pixel measurements. +Værdierne af disse egenskaber er teknisk set bare talværdier, men værdierne er i pixels, så det er pixelmålinger. -Let's start exploring the properties starting from the outside of the element. +Lad os starte med at udforske egenskaberne startende fra elementets yderside. ## offsetParent, offsetLeft/Top -These properties are rarely needed, but still they are the "most outer" geometry properties, so we'll start with them. +Disse egenskaber er sjældent nødvendige, men de er stadig de "yderste" geometriske egenskaber, så vi starter med dem. -The `offsetParent` is the nearest ancestor that the browser uses for calculating coordinates during rendering. +`offsetParent` er den nærmeste forfader, som browseren bruger til at beregne koordinater under rendering. -That's the nearest ancestor that is one of the following: +Det er den nærmeste forfader, der er en af følgende: -1. CSS-positioned (`position` is `absolute`, `relative`, `fixed` or `sticky`), or -2. ``, ``, or ``, or +1. CSS-positioneret (`position` er enten `absolute`, `relative`, `fixed` eller `sticky`), eller +2. `
`, ``, eller ``, eller 3. ``. -Properties `offsetLeft/offsetTop` provide x/y coordinates relative to `offsetParent` upper-left corner. +Egenskaberne `offsetLeft` og `offsetTop` giver x/y koordinater i forhold til `offsetParent`'s øverste venstre hjørne. -In the example below the inner `
` has `
` as `offsetParent` and `offsetLeft/offsetTop` shifts from its upper-left corner (`180`): +I eksemplet nedenfor har det indre `
` `
` som `offsetParent` og `offsetLeft/offsetTop` viser forskydningen fra dets øverste venstre hjørne (`180`): ```html run height=10
@@ -75,40 +75,40 @@ In the example below the inner `
` has `
` as `offsetParent` and `offse
``` ![](metric-offset-parent.svg) -There are several occasions when `offsetParent` is `null`: +Der er lejligheder hvor `offsetParent` er `null`: -1. For not shown elements (`display:none` or not in the document). -2. For `` and ``. -3. For elements with `position:fixed`. +1. For ikke viste elementer (`display:none` eller ikke i dokumentet). +2. For `` og ``. +3. For elementer med `position:fixed`. ## offsetWidth/Height -Now let's move on to the element itself. +Nu til selve elementet. -These two properties are the simplest ones. They provide the "outer" width/height of the element. Or, in other words, its full size including borders. +Disse to egenskaber er de simpleste. De giver elementets "ydre" bredde/højde. Eller med andre ord, dets fulde størrelse inklusive rammer. ![](metric-offset-width-height.svg) -For our sample element: +For vores eksempel gælder det at: -- `offsetWidth = 390` -- the outer width, can be calculated as inner CSS-width (`300px`) plus paddings (`2 * 20px`) and borders (`2 * 25px`). -- `offsetHeight = 290` -- the outer height. +- `offsetWidth = 390` -- den ydre bredde, kan beregnes som indre CSS-bredde (`300px`) plus padding (`2 * 20px`) og rammer (`2 * 25px`). +- `offsetHeight = 290` -- den ydre højde. -````smart header="Geometry properties are zero/null for elements that are not displayed" -Geometry properties are calculated only for displayed elements. +````smart header="Geometriske egenskaber er nul/null for elementer, der ikke vises" +Geometriske egenskaber beregnes kun for viste elementer. -If an element (or any of its ancestors) has `display:none` or is not in the document, then all geometry properties are zero (or `null` for `offsetParent`). +Hvis et element (eller en af dets forfædre) har `display:none` eller ikke er i dokumentet, er alle geometriske egenskaber nul (eller `null` for `offsetParent`). -For example, `offsetParent` is `null`, and `offsetWidth`, `offsetHeight` are `0` when we created an element, but haven't inserted it into the document yet, or it (or its ancestor) has `display:none`. +For eksempel er `offsetParent` `null`, og `offsetWidth` og `offsetHeight` er `0`, når vi har oprettet et element, men ikke har indsat det i dokumentet endnu, eller hvis det (eller en af dets forfædre) har `display:none`. -We can use this to check if an element is hidden, like this: +Vi kan bruge dette til at tjekke, om et element er skjult, sådan her: ```js function isHidden(elem) { @@ -116,122 +116,122 @@ function isHidden(elem) { } ``` -Please note that such `isHidden` returns `true` for elements that are on-screen, but have zero sizes. +Bemærk at sådan en `isHidden` returnerer `true` for elementer, der er på skærmen, men har nul størrelser. ```` ## clientTop/Left -Inside the element we have the borders. +Inde i elementet har vi rammerne. -To measure them, there are properties `clientTop` and `clientLeft`. +For at måle dem, er der egenskaberne `clientTop` og `clientLeft`. -In our example: +I vores eksempel: -- `clientLeft = 25` -- left border width -- `clientTop = 25` -- top border width +- `clientLeft = 25` -- venstre rammes bredde +- `clientTop = 25` -- øverste rammes bredde ![](metric-client-left-top.svg) -...But to be precise -- these properties are not border width/height, but rather relative coordinates of the inner side from the outer side. +...Men for at være præcis -- disse egenskaber er ikke rammens bredde/højde, men snarere relative koordinater af den indre side fra den ydre side. -What's the difference? +Hvad er forskellen? -It becomes visible when the document is right-to-left (the operating system is in Arabic or Hebrew languages). The scrollbar is then not on the right, but on the left, and then `clientLeft` also includes the scrollbar width. +Det bliver synligt, når dokumentet er højre-til-venstre (operativsystemet er på arabisk eller hebraisk). Scrollbjælken er så ikke til højre, men til venstre, og så inkluderer `clientLeft` også scrollbjælkens bredde. -In that case, `clientLeft` would be not `25`, but with the scrollbar width `25 + 16 = 41`. +I det tilfælde vil `clientLeft` være ikke `25`, men med scrollbjælkens bredde `25 + 16 = 41`. -Here's the example in hebrew: +Hér er eksemplet på hebraisk: ![](metric-client-left-top-rtl.svg) ## clientWidth/Height -These properties provide the size of the area inside the element borders. +Disse egenskaber giver størrelsen af området inde i elementets rammer. -They include the content width together with paddings, but without the scrollbar: +De inkluderer indholdsbredden sammen med padding, men uden scrollbjælken: ![](metric-client-width-height.svg) -On the picture above let's first consider `clientHeight`. +I forhold til billedet ovenfor, lad os først se på `clientHeight`. -There's no horizontal scrollbar, so it's exactly the sum of what's inside the borders: CSS-height `200px` plus top and bottom paddings (`2 * 20px`) total `240px`. +Der er ingen vandret scrollbjælke, så det er præcis summen af det, der er inde i rammerne: CSS-højde (`200px`) plus top og bund padding (`2 * 20px`), i alt `240px`. -Now `clientWidth` -- here the content width is not `300px`, but `284px`, because `16px` are occupied by the scrollbar. So the sum is `284px` plus left and right paddings, total `324px`. +Nu `clientWidth` -- her er indholdsbredden ikke `300px`, men `284px`, fordi `16px` er optaget af scrollbjælken. Så summen er `284px` plus venstre og højre padding, i alt `324px`. -**If there are no paddings, then `clientWidth/Height` is exactly the content area, inside the borders and the scrollbar (if any).** +**Hvis der ikke er nogen padding, så er `clientWidth/Height` præcis indholdsområdet, inde i rammerne og scrollbjælken (hvis nogen).** ![](metric-client-width-nopadding.svg) -So when there's no padding we can use `clientWidth/clientHeight` to get the content area size. +Så når der ikke er nogen padding, kan vi bruge `clientWidth/clientHeight` til at få størrelsen af indholdsområdet. ## scrollWidth/Height -These properties are like `clientWidth/clientHeight`, but they also include the scrolled out (hidden) parts: +Disse egenskaber er som `clientWidth/clientHeight`, men de inkluderer også de "ud-scrollede" dele (som jo egentligt er skjulte): ![](metric-scroll-width-height.svg) -On the picture above: +I forhold til billedet ovenfor: -- `scrollHeight = 723` -- is the full inner height of the content area including the scrolled out parts. -- `scrollWidth = 324` -- is the full inner width, here we have no horizontal scroll, so it equals `clientWidth`. +- `scrollHeight = 723` -- er den fulde indre højde af indholdsområdet inklusive de ud-scrollede dele. +- `scrollWidth = 324` -- er den fulde indre bredde, her har vi ingen vandret scroll, så den er lig med `clientWidth`. -We can use these properties to expand the element wide to its full width/height. +Vi kan bruge disse egenskaber til at udvide elementet til dets fulde bredde/højde. -Like this: +Sådan her: ```js -// expand the element to the full content height +// Udvid elementet til dets fulde højde element.style.height = `${element.scrollHeight}px`; ``` ```online -Click the button to expand the element: +Klik på knappen for at udvide elementet: -
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
+
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
``` ## scrollLeft/scrollTop -Properties `scrollLeft/scrollTop` are the width/height of the hidden, scrolled out part of the element. +Egenskaberne `scrollLeft/scrollTop` er bredden/højden af den skjulte, ud-scrollede del af elementet. -On the picture below we can see `scrollHeight` and `scrollTop` for a block with a vertical scroll. +På billedet nedenfor kan vi se `scrollHeight` og `scrollTop` for en blok med en lodret scroll. ![](metric-scroll-top.svg) -In other words, `scrollTop` is "how much is scrolled up". +Med andre ord er `scrollTop` "hvor meget der er scrollet op". -````smart header="`scrollLeft/scrollTop` can be modified" -Most of the geometry properties here are read-only, but `scrollLeft/scrollTop` can be changed, and the browser will scroll the element. +````smart header="`scrollLeft/scrollTop` kan ændres" +De fleste geometriske egenskaber her kan kun læses, men `scrollLeft/scrollTop` kan ændres, og browseren vil så rulle elementet. ```online -If you click the element below, the code `elem.scrollTop += 10` executes. That makes the element content scroll `10px` down. +Hvis du klikker på elementet nedenfor, udføres koden `elem.scrollTop += 10`. Det får elementets indhold til at rulle `10px` ned. -
Click
Me
1
2
3
4
5
6
7
8
9
+
Klik
Mig
1
2
3
4
5
6
7
8
9
``` -Setting `scrollTop` to `0` or a big value, such as `1e9` will make the element scroll to the very top/bottom respectively. +Ved at sætte `scrollTop` til `0` eller en stor værdi, som `1e9`, får vi elementet til at rulle til toppen/bunden. ```` -## Don't take width/height from CSS +## Tag ikke højde/bredde fra CSS -We've just covered geometry properties of DOM elements, that can be used to get widths, heights and calculate distances. +Vi har netop dækket geometriske egenskaber af DOM-elementer, der kan bruges til at få bredder, højder og beregne afstande. -But as we know from the chapter , we can read CSS-height and width using `getComputedStyle`. +Men som vi ved fra kapitlet , kan vi læse CSS-højde og bredde ved hjælp af `getComputedStyle`. -So why not to read the width of an element with `getComputedStyle`, like this? +Hvorfor ikke så bruge `getComputedStyle` til at få bredden af et element, sådan her? ```js run let elem = document.body; -alert( getComputedStyle(elem).width ); // show CSS width for elem +alert( getComputedStyle(elem).width ); // vis CSS-bredde for elem ``` -Why should we use geometry properties instead? There are two reasons: +Hvorfor skulle vi så bruge geometriske egenskaber i stedet? Der er to grunde: -1. First, CSS `width/height` depend on another property: `box-sizing` that defines "what is" CSS width and height. A change in `box-sizing` for CSS purposes may break such JavaScript. -2. Second, CSS `width/height` may be `auto`, for instance for an inline element: +1. Først afhænger CSS `width/height` af en anden egenskab: `box-sizing`, der definerer, "hvad" CSS-bredden og -højden omfatter. En ændring i `box-sizing` til CSS-formål kan ødelægge sådan et stykke JavaScript. +2. Dernæst kan CSS `width/height` være `auto`, for eksempel for et inline element: ```html run Hello! @@ -243,34 +243,34 @@ Why should we use geometry properties instead? There are two reasons: ``` - From the CSS standpoint, `width:auto` is perfectly normal, but in JavaScript we need an exact size in `px` that we can use in calculations. So here CSS width is useless. + Set fra et CSS-perspektiv er `width:auto` helt normalt, men i JavaScript har vi brug for en præcis størrelse i `px`, som vi kan bruge i beregninger. Så her er CSS-bredden ubrugelig. -And there's one more reason: a scrollbar. Sometimes the code that works fine without a scrollbar becomes buggy with it, because a scrollbar takes the space from the content in some browsers. So the real width available for the content is *less* than CSS width. And `clientWidth/clientHeight` take that into account. +Og så er der endnu en grund: scrollbjælken. Nogle gange bliver kode, der fungerer fint uden en scrollbjælke, fejlbehæftet med en scrollbjælke, fordi en scrollbjælke optager plads fra indholdet i nogle browsere. Så den reelle bredde, der er til rådighed for indholdet, er *mindre* end CSS-bredden. Og `clientWidth/clientHeight` tager højde for det. -...But with `getComputedStyle(elem).width` the situation is different. Some browsers (e.g. Chrome) return the real inner width, minus the scrollbar, and some of them (e.g. Firefox) -- CSS width (ignore the scrollbar). Such cross-browser differences is the reason not to use `getComputedStyle`, but rather rely on geometry properties. +...Men med `getComputedStyle(elem).width` er situationen anderledes. Nogle browsere (f.eks. Chrome) returnerer den reelle indre bredde, minus scrollbjælken, og nogle af dem (f.eks. Firefox) -- CSS-bredden (ignorerer scrollbjælken). Sådan en tværbrowser-forskel er grunden til ikke at bruge `getComputedStyle`, men snarere stole på geometriske egenskaber. ```online -If your browser reserves the space for a scrollbar (most browsers for Windows do), then you can test it below. +Hvis din browser reserverer plads til en scrollbjælke (de fleste browsere til Windows gør), så kan du teste det nedenfor. [iframe src="cssWidthScroll" link border=1] -The element with text has CSS `width:300px`. +Elementet med tekst har CSS `width:300px`. -On a Desktop Windows OS, Firefox, Chrome, Edge all reserve the space for the scrollbar. But Firefox shows `300px`, while Chrome and Edge show less. That's because Firefox returns the CSS width and other browsers return the "real" width. +På et Desktop Windows-operativsystem reserverer Firefox, Chrome og Edge alle plads til scrollbjælken. Men Firefox viser `300px`, mens Chrome og Edge viser mindre. Det skyldes, at Firefox returnerer CSS-bredden, mens andre browsere returnerer den "reelle" bredde. ``` -Please note that the described difference is only about reading `getComputedStyle(...).width` from JavaScript, visually everything is correct. +Bemærk, at den beskrevne forskel kun gælder for at læse `getComputedStyle(...).width` fra JavaScript; visuelt er alt korrekt. -## Summary +## Opsummering -Elements have the following geometry properties: +Elementer har følgende geometriske egenskaber: -- `offsetParent` -- is the nearest positioned ancestor or `td`, `th`, `table`, `body`. -- `offsetLeft/offsetTop` -- coordinates relative to the upper-left edge of `offsetParent`. -- `offsetWidth/offsetHeight` -- "outer" width/height of an element including borders. -- `clientLeft/clientTop` -- the distances from the upper-left outer corner to the upper-left inner (content + padding) corner. For left-to-right OS they are always the widths of left/top borders. For right-to-left OS the vertical scrollbar is on the left so `clientLeft` includes its width too. -- `clientWidth/clientHeight` -- the width/height of the content including paddings, but without the scrollbar. -- `scrollWidth/scrollHeight` -- the width/height of the content, just like `clientWidth/clientHeight`, but also include scrolled-out, invisible part of the element. -- `scrollLeft/scrollTop` -- width/height of the scrolled out upper part of the element, starting from its upper-left corner. +- `offsetParent` -- er den nærmeste positionerede ancestor eller `td`, `th`, `table`, `body`. +- `offsetLeft/offsetTop` -- koordinater i forhold til den øverste venstre kant af `offsetParent`. +- `offsetWidth/offsetHeight` -- "ydre" bredde/højde af et element inklusive rammer. +- `clientLeft/clientTop` -- afstandene fra det øverste venstre ydre hjørne til det øverste venstre indre hjørne (indhold + padding). For venstre-til-højre operativsystemer er det altid bredden af venstre/øverste ramme. For højre-til-venstre operativsystemer er den lodrette scrollbjælke til venstre, så `clientLeft` inkluderer også dens bredde. +- `clientWidth/clientHeight` -- bredden/højden af indholdet inklusive padding, men uden scrollbjælken. +- `scrollWidth/scrollHeight` -- bredden/højden af indholdet, ligesom `clientWidth/clientHeight`, men inkluderer også den ud-scrollede, usynlige del af elementet. +- `scrollLeft/scrollTop` -- bredden/højden af den ud-scrollede øverste del af elementet, startende fra dets øverste venstre hjørne. -All properties are read-only except `scrollLeft/scrollTop` that make the browser scroll the element if changed. +Alle egenskaber kan kun læses undtagen `scrollLeft/scrollTop`, som får browseren til at rulle elementet, hvis de ændres. diff --git a/2-ui/1-document/09-size-and-scroll/cssWidthScroll.view/index.html b/2-ui/1-document/09-size-and-scroll/cssWidthScroll.view/index.html index 2869c7ed9..5ce8fad0a 100755 --- a/2-ui/1-document/09-size-and-scroll/cssWidthScroll.view/index.html +++ b/2-ui/1-document/09-size-and-scroll/cssWidthScroll.view/index.html @@ -1,16 +1,23 @@ +
- text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text - text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text - text text text text text text text text text text text text text text text text text text text text text text text text text text + tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst + tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst + tekst tekst tekst tekst + tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst + tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst + tekst tekst tekst tekst + tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst + tekst tekst tekst tekst tekst tekst tekst
- The element has style="width:300px" + Elementet har style="width:300px"
- + + \ No newline at end of file diff --git a/2-ui/1-document/09-size-and-scroll/metric.view/index.html b/2-ui/1-document/09-size-and-scroll/metric.view/index.html index 4ac208164..4a301e9b8 100755 --- a/2-ui/1-document/09-size-and-scroll/metric.view/index.html +++ b/2-ui/1-document/09-size-and-scroll/metric.view/index.html @@ -30,15 +30,25 @@

Introduction

-

This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that company's Navigator 2.0 browser. - It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with Internet Explorer 3.0. The development of this Standard started in November 1996. The first edition of this Ecma Standard was adopted by the +

This Ecma Standard is based on several originating technologies, the most well known being JavaScript (Netscape) + and JScript (Microsoft). The language was invented by Brendan Eich at Netscape and first appeared in that + company's Navigator 2.0 browser. + It has appeared in all subsequent browsers from Netscape and in all browsers from Microsoft starting with Internet + Explorer 3.0. The development of this Standard started in November 1996. The first edition of this Ecma Standard + was adopted by the Ecma General Assembly of June 1997.

-

That Ecma Standard was submitted to ISO/IEC JTC 1 for adoption under the fast-track procedure, and approved as international standard ISO/IEC 16262, in April 1998. The Ecma General Assembly of June 1998 approved the second edition of ECMA-262 to keep +

That Ecma Standard was submitted to ISO/IEC JTC 1 for adoption under the fast-track procedure, and approved as + international standard ISO/IEC 16262, in April 1998. The Ecma General Assembly of June 1998 approved the second + edition of ECMA-262 to keep it fully aligned with ISO/IEC 16262. Changes between the first and the second edition are editorial in nature.

-

The third edition of the Standard introduced powerful regular expressions, better string handling, new control statements, try/catch exception handling, tighter definition of errors, formatting for numeric output and minor changes in anticipation - of forthcoming internationalisation facilities and future language growth. The third edition of the ECMAScript standard was adopted by the Ecma General Assembly of December 1999 and published as ISO/IEC 16262:2002 in June 2002.

+

The third edition of the Standard introduced powerful regular expressions, better string handling, new control + statements, try/catch exception handling, tighter definition of errors, formatting for numeric output and minor + changes in anticipation + of forthcoming internationalisation facilities and future language growth. The third edition of the ECMAScript + standard was adopted by the Ecma General Assembly of December 1999 and published as ISO/IEC 16262:2002 in June + 2002.

@@ -69,7 +79,7 @@

Introduction

} } - document.onclick = function(event) { + document.onclick = function (event) { let target = event.target; if (!target.classList.contains('key')) return; @@ -80,10 +90,11 @@

Introduction

}; - document.onmousemove = function(e) { + document.onmousemove = function (e) { document.getElementById('mouse').innerHTML = Math.round(e.clientX) + ':' + Math.round(e.clientY); }; - + + \ No newline at end of file