diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md b/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md index 4101d4915..5c0e83b81 100644 --- a/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md +++ b/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md @@ -1,8 +1,8 @@ -# Outer corners +# Ydre hjørner -Outer corners are basically what we get from [elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect). +Ydre hjørner er det, vi får fra [elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect). -Coordinates of the upper-left corner `answer1` and the bottom-right corner `answer2`: +Koordinaterne for det øverste venstre hjørne `answer1` og det nederste højre hjørne `answer2`: ```js let coords = elem.getBoundingClientRect(); @@ -11,19 +11,19 @@ let answer1 = [coords.left, coords.top]; let answer2 = [coords.right, coords.bottom]; ``` -# Left-upper inner corner +# Indre øverste venstre hjørne -That differs from the outer corner by the border width. A reliable way to get the distance is `clientLeft/clientTop`: +Det adskiller sig fra det ydre hjørne ved bredden af kanten. En pålidelig måde at få afstanden er `clientLeft/clientTop`: ```js let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop]; ``` -# Right-bottom inner corner +# Nederste højre indre hjørne -In our case we need to substract the border size from the outer coordinates. +I dette tilfælde skal vi trække bredden af kanten fra de ydre koordinater. -We could use CSS way: +Vi kunne bruge CSS-måden: ```js let answer4 = [ @@ -32,7 +32,7 @@ let answer4 = [ ]; ``` -An alternative way would be to add `clientWidth/clientHeight` to coordinates of the left-upper corner. That's probably even better: +En alternativ måde ville være at tilføje `clientWidth/clientHeight` til koordinaterne for det øverste venstre hjørne. ```js let answer4 = [ diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html b/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html index 229c87186..0317d7115 100755 --- a/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html +++ b/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html @@ -5,7 +5,7 @@ @@ -13,15 +13,18 @@ - Click anywhere to get window coordinates. -
That's for testing, to check the result you get by JavaScript. + Klik hvor som helst for at få vindueskoordinaterne. +
Det er til test, for at tjekke det resultat du får fra JavaScript.
-

(click coordinates show up here)

(koordinaterne for museklikket vises her)

- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . + . . . . . . . . . . + . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . + . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

@@ -56,4 +59,5 @@ - + + \ No newline at end of file diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.html b/2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.html index dd168f783..6c4066e8e 100755 --- a/2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.html +++ b/2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.html @@ -5,7 +5,7 @@ @@ -13,15 +13,18 @@ - Click anywhere to get window coordinates. -
That's for testing, to check the result you get by JavaScript. + Klik hvor som helst for at få vindueskoordinaterne. +
Det er til test, for at tjekke det resultat du får fra JavaScript.
-

(click coordinates show up here)

(koordinaterne for museklikket vises her)

@@ -36,4 +39,5 @@ - + + \ No newline at end of file diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md b/2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md index 6bbb9fe13..5c6d740bb 100644 --- a/2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md +++ b/2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md @@ -2,23 +2,23 @@ importance: 5 --- -# Find window coordinates of the field +# Find vindueskoordinaterne for feltet -In the iframe below you can see a document with the green "field". +I iframen nedenfor kan du se et dokument med det grønne "felt". -Use JavaScript to find window coordinates of corners pointed by with arrows. +Brug JavaScript til at finde vindueskoordinaterne for hjørnerne, der peges på med pilene. -There's a small feature implemented in the document for convenience. A click at any place shows coordinates there. +Der er en lille funktion implementeret i dokumentet for nemheds skyld. Et klik ethvert sted viser koordinaterne der. [iframe border=1 height=360 src="source" link edit] -Your code should use DOM to get window coordinates of: +Din kode skal bruge DOM til at finde vindueskoordinaterne for: -1. Upper-left, outer corner (that's simple). -2. Bottom-right, outer corner (simple too). -3. Upper-left, inner corner (a bit harder). -4. Bottom-right, inner corner (there are several ways, choose one). +1. Øverste venstre, ydre hjørne (det er simpelt). +2. Nederste højre, ydre hjørne (også simpelt). +3. Øverste venstre, indre hjørne (lidt sværere). +4. Nederste højre, indre hjørne (der er flere måder, vælg en). -The coordinates that you calculate should be the same as those returned by the mouse click. +De koordinater du beregner, skal være de samme som dem, der returneres af museklikket. -P.S. The code should also work if the element has another size or border, not bound to any fixed values. +P.S. Koden skal også virke, hvis elementet har en anden størrelse eller kant, der ikke er bundet til nogen faste værdier. diff --git a/2-ui/1-document/11-coordinates/2-position-at/solution.md b/2-ui/1-document/11-coordinates/2-position-at/solution.md index 353eb65dd..73e2d5425 100644 --- a/2-ui/1-document/11-coordinates/2-position-at/solution.md +++ b/2-ui/1-document/11-coordinates/2-position-at/solution.md @@ -1,4 +1,4 @@ -In this task we only need to accurately calculate the coordinates. See the code for details. +I denne opgave handler det mest om at udregne koordinaterne korrekt. Se kildekoden for detaljer. -Please note: the elements must be in the document to read `offsetHeight` and other properties. -A hidden (`display:none`) or out of the document element has no size. +Bemærk: elementerne skal være i dokumentet for at kunne læse `offsetHeight` og andre egenskaber. +Et skjult (`display:none`) eller uden for dokumentet element har ingen størrelse. diff --git a/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html b/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html index f931fbeac..a7ece8336 100755 --- a/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html +++ b/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html @@ -8,29 +8,33 @@ -

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt + voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident + molestias sit tempore omnis recusandae esse sequi officia sapiente.

- Teacher: Why are you late? - Student: There was a man who lost a hundred dollar bill. - Teacher: That's nice. Were you helping him look for it? - Student: No. I was standing on it. + Underviser: Hvorfor kommer du for sent? + Studerende: Der var en mand der tabte en 100 kr. seddel. + Underviser: Det er da betænksomt at du ville hjælpe med at lede efter den? + Studerende: Nej, jeg stod på den!

- + + \ No newline at end of file diff --git a/2-ui/1-document/11-coordinates/2-position-at/source.view/index.html b/2-ui/1-document/11-coordinates/2-position-at/source.view/index.html index 675573450..b25406b3f 100755 --- a/2-ui/1-document/11-coordinates/2-position-at/source.view/index.html +++ b/2-ui/1-document/11-coordinates/2-position-at/source.view/index.html @@ -8,37 +8,41 @@ -

- Teacher: Why are you late? - Student: There was a man who lost a hundred dollar bill. - Teacher: That's nice. Were you helping him look for it? - Student: No. I was standing on it. + Underviser: Hvorfor kommer du for sent? + Studerende: Der var en mand der tabte en 100 kr. seddel. + Underviser: Det er da betænksomt at du ville hjælpe med at lede efter den? + Studerende: Nej, jeg stod på den!

- + + \ No newline at end of file diff --git a/2-ui/1-document/11-coordinates/2-position-at/task.md b/2-ui/1-document/11-coordinates/2-position-at/task.md index 3aaa47f03..9c5df59e5 100644 --- a/2-ui/1-document/11-coordinates/2-position-at/task.md +++ b/2-ui/1-document/11-coordinates/2-position-at/task.md @@ -2,17 +2,17 @@ importance: 5 --- -# Show a note near the element +# Vis en note ved siden af elementet -Create a function `positionAt(anchor, position, elem)` that positions `elem`, depending on `position` near `anchor` element. +Lav en funktion `positionAt(anchor, position, elem)`, som placerer `elem`, afhængig af `position`, i nærheden af `anchor` elementet. -The `position` must be a string with any one of 3 values: -- `"top"` - position `elem` right above `anchor` -- `"right"` - position `elem` immediately at the right of `anchor` -- `"bottom"` - position `elem` right below `anchor` +`position` skal være en streng med en af 3 værdier: +- `"top"` - position `elem` lige over `anchor` +- `"right"` - position `elem` lige ved siden af `anchor` til højre +- `"bottom"` - position `elem` lige under `anchor` -It's used inside function `showNote(anchor, position, html)`, provided in the task source code, that creates a "note" element with given `html` and shows it at the given `position` near the `anchor`. +Det bruges inde i funktionen `showNote(anchor, position, html)`, som leveres i opgavens kildekode, som opretter en "note"-element med den givne `html` og viser den på den givne `position` nær `anchor`. -Here's the demo of notes: +Her er en demonstration af notes: [iframe src="solution" height="350" border="1" link] diff --git a/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.md b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.md index 014e505ed..9e360706b 100644 --- a/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.md +++ b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.md @@ -1,4 +1,4 @@ -The solution is actually pretty simple: +Løsningen er egentlig ret simpel: -- Use `position:absolute` in CSS instead of `position:fixed` for `.note`. -- Use the function [getCoords()](info:coordinates#getCoords) from the chapter to get document-relative coordinates. +- Brug `position:absolute` i CSS i stedet for `position:fixed` for `.note`. +- Brug funktionen [getCoords()](info:coordinates#getCoords) fra kapitel til at få dokument-relative koordinater. diff --git a/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.html b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.html index 56c95d5ec..8a737e4d4 100644 --- a/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.html +++ b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.html @@ -8,17 +8,21 @@ -

- Teacher: Why are you late? - Student: There was a man who lost a hundred dollar bill. - Teacher: That's nice. Were you helping him look for it? - Student: No. I was standing on it. + Underviser: Hvorfor kommer du for sent? + Studerende: Der var en mand der tabte en 100 kr. seddel. + Underviser: Det er da betænksomt at du ville hjælpe med at lede efter den? + Studerende: Nej, jeg stod på den!

@@ -66,14 +70,15 @@ positionAt(anchor, position, note); } - // test it + // test det let blockquote = document.querySelector('blockquote'); - showNote(blockquote, "top", "note above"); - showNote(blockquote, "right", "note at the right"); - showNote(blockquote, "bottom", "note below"); + showNote(blockquote, "top", "note over"); + showNote(blockquote, "right", "note til højre"); + showNote(blockquote, "bottom", "note under"); - + + \ No newline at end of file diff --git a/2-ui/1-document/11-coordinates/3-position-at-absolute/task.md b/2-ui/1-document/11-coordinates/3-position-at-absolute/task.md index 0554da862..e86bd4427 100644 --- a/2-ui/1-document/11-coordinates/3-position-at-absolute/task.md +++ b/2-ui/1-document/11-coordinates/3-position-at-absolute/task.md @@ -2,10 +2,12 @@ importance: 5 --- -# Show a note near the element (absolute) +# Vis en note tæt på elementet (absolut) -Modify the solution of the [previous task](info:task/position-at) so that the note uses `position:absolute` instead of `position:fixed`. +Ret løsningen fra den [forrige opgave](info:task/position-at) sådan at noten anvender `position:absolute` i stedet for `position:fixed`. -That will prevent its "runaway" from the element when the page scrolls. +Dette vil forhindre at den bevæger sig væk fra elementet, når siden scroller. -Take the solution of that task as a starting point. To test the scroll, add the style ``. +Tag udgangspunkt i løsningen fra den forrige opgave. + +For at teste rulningen kan du tilføje denne stil til body-tag'et: `` diff --git a/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.html b/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.html index b89db3790..d28c7b0cb 100644 --- a/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.html +++ b/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.html @@ -8,17 +8,21 @@ -

- Teacher: Why are you late? - Student: There was a man who lost a hundred dollar bill. - Teacher: That's nice. Were you helping him look for it? - Student: No. I was standing on it. + Underviser: Hvorfor kommer du for sent? + Studerende: Der var en mand der tabte en 100 kr. seddel. + Underviser: Det er da betænksomt at du ville hjælpe med at lede efter den? + Studerende: Nej, jeg stod på den!

-If you scroll the page and repeat, you'll notice that as window-relative button position changes, its window coordinates (`y/top/bottom` if you scroll vertically) change as well. +Hvis du ruller siden og gentager, vil du bemærke, at når knapens vinduesrelative position ændres, ændres dens vindueskoordinater (`y/top/bottom`, hvis du ruller lodret) også. ``` -Here's the picture of `elem.getBoundingClientRect()` output: +Her er billedet af `elem.getBoundingClientRect()` output: ![](coordinates.svg) -As you can see, `x/y` and `width/height` fully describe the rectangle. Derived properties can be easily calculated from them: +Som du kan se, beskriver `x/y` og `width/height` rektanglet fuldt ud. Afledte egenskaber kan nemt beregnes ud fra dem: - `left = x` - `top = y` - `right = x + width` - `bottom = y + height` -Please note: +Bemærk venligst: -- Coordinates may be decimal fractions, such as `10.5`. That's normal, internally browser uses fractions in calculations. We don't have to round them when setting to `style.left/top`. -- Coordinates may be negative. For instance, if the page is scrolled so that `elem` is now above the window, then `elem.getBoundingClientRect().top` is negative. +- Koordinater kan være decimalfraktioner, såsom `10.5`. Det er normalt, internt bruger browseren fraktioner i beregninger. Vi behøver ikke runde dem af, når vi sætter dem til `style.left/top`. +- Koordinater kan være negative. For eksempel, hvis siden er scrollet således at `elem` nu er over vinduet, så er `elem.getBoundingClientRect().top` negativ. -```smart header="Why derived properties are needed? Why does `top/left` exist if there's `x/y`?" -Mathematically, a rectangle is uniquely defined with its starting point `(x,y)` and the direction vector `(width,height)`. So the additional derived properties are for convenience. +```smart header="Hvorfor er afledte egenskaber nødvendige? Hvorfor findes `top/left` hvis `x/y` allerede eksisterer?" +Matematisk set er et rektangel entydigt defineret med dets startpunkt `(x,y)` og retningsvektoren `(width,height)`. De ekstra afledte egenskaber er altså for bekvemmelighedens skyld. -Technically it's possible for `width/height` to be negative, that allows for "directed" rectangle, e.g. to represent mouse selection with properly marked start and end. +Teknisk set er det muligt for `width/height` at være negative, hvilket muliggør et "retningsbestemt" rektangel, f.eks. til at repræsentere musevalg med korrekt markerede start- og slutpunkter. -Negative `width/height` values mean that the rectangle starts at its bottom-right corner and then "grows" left-upwards. +Negative værdier for `width/height` betyder, at rektanglet starter ved sit nederste højre hjørne og derefter "vokser" mod venstre og opad. -Here's a rectangle with negative `width` and `height` (e.g. `width=-200`, `height=-100`): +Her er et rektangel med negativ `width` og `height` (f.eks. `width=-200`, `height=-100`): ![](coordinates-negative.svg) -As you can see, `left/top` do not equal `x/y` in such case. +Som du kan se, er `left/top` ikke lig med `x/y` i dette tilfælde. -In practice though, `elem.getBoundingClientRect()` always returns positive width/height, here we mention negative `width/height` only for you to understand why these seemingly duplicate properties are not actually duplicates. +I praksis returnerer `elem.getBoundingClientRect()` dog altid positive værdier for width/height. Vi nævner negative width/height kun for at hjælpe dig med at forstå, hvorfor disse tilsyneladende duplikerede egenskaber ikke er faktiske duplikater. ``` -```warn header="Internet Explorer: no support for `x/y`" -Internet Explorer doesn't support `x/y` properties for historical reasons. +```warn header="Internet Explorer: ingen understøttelse for `x/y`" +Internet Explorer understøtter af historiske årsager ikke `x/y` egenskaberne. -So we can either make a polyfill (add getters in `DomRect.prototype`) or just use `top/left`, as they are always the same as `x/y` for positive `width/height`, in particular in the result of `elem.getBoundingClientRect()`. +Vi kan derfor enten lave en polyfill (tilføje getters i `DomRect.prototype`) eller blot bruge `top/left`, da de altid er lig med `x/y` for positive `width/height`, især i resultatet af `elem.getBoundingClientRect()`. ``` -```warn header="Coordinates right/bottom are different from CSS position properties" -There are obvious similarities between window-relative coordinates and CSS `position:fixed`. +```warn header="Koordinaterne right/bottom er forskellige fra CSS positionsegenskaberne" +Der er tydelige ligheder mellem vinduesrelative koordinater og CSS `position:fixed`. -But in CSS positioning, `right` property means the distance from the right edge, and `bottom` property means the distance from the bottom edge. +Men i CSS positionering betyder `right`-egenskaben afstanden fra højre kant, og `bottom`-egenskaben betyder afstanden fra bundkanten. -If we just look at the picture above, we can see that in JavaScript it is not so. All window coordinates are counted from the top-left corner, including these ones. +Hvis vi bare ser på billedet ovenfor, kan vi se, at det ikke er sådan i JavaScript. Alle vindueskoordinater tælles fra øverste venstre hjørne, inklusive disse. ``` ## elementFromPoint(x, y) [#elementFromPoint] -The call to `document.elementFromPoint(x, y)` returns the most nested element at window coordinates `(x, y)`. +Kaldet `document.elementFromPoint(x, y)` returnerer det mest indlejrede element i vindueskoordinaterne `(x, y)`. -The syntax is: +Syntaksen er: ```js let elem = document.elementFromPoint(x, y); ``` -For instance, the code below highlights and outputs the tag of the element that is now in the middle of the window: +For eksempel fremhæver og viser koden nedenfor tagget for det element, der nu er i midten af vinduet: ```js run let centerX = document.documentElement.clientWidth / 2; @@ -124,43 +124,43 @@ elem.style.background = "red"; alert(elem.tagName); ``` -As it uses window coordinates, the element may be different depending on the current scroll position. +Da det bruger vindueskoordinater, kan elementet være forskelligt afhængigt af den aktuelle scrolleposition. -````warn header="For out-of-window coordinates the `elementFromPoint` returns `null`" -The method `document.elementFromPoint(x,y)` only works if `(x,y)` are inside the visible area. +````warn header="For koordinater uden for vinduet returnerer `elementFromPoint` `null`" +Metoden `document.elementFromPoint(x,y)` virker kun, hvis `(x,y)` er inden for det synlige område. -If any of the coordinates is negative or exceeds the window width/height, then it returns `null`. +Hvis en af koordinaterne er negativ eller overstiger vinduets bredde/højde, returneres `null`. -Here's a typical error that may occur if we don't check for it: +Her er en typisk fejl, der kan opstå, hvis vi ikke kontrollerer for dette: ```js let elem = document.elementFromPoint(x, y); -// if the coordinates happen to be out of the window, then elem = null +// hvis koordinaterne tilfældigvis er uden for vinduet, så er elem = null *!* -elem.style.background = ''; // Error! +elem.style.background = ''; // Fejl! */!* ``` ```` -## Using for "fixed" positioning +## Brug til "fast" positionering -Most of time we need coordinates in order to position something. +Langt de fleste gange har vi brug for koordinater for at placere noget. -To show something near an element, we can use `getBoundingClientRect` to get its coordinates, and then CSS `position` together with `left/top` (or `right/bottom`). +For at vise noget nær et element kan vi bruge `getBoundingClientRect` til at få dets koordinater, og derefter CSS `position` sammen med `left/top` (eller `right/bottom`). -For instance, the function `createMessageUnder(elem, html)` below shows the message under `elem`: +For eksempel viser funktionen `createMessageUnder(elem, html)` nedenfor beskeden under `elem`: ```js let elem = document.getElementById("coords-show-mark"); function createMessageUnder(elem, html) { - // create message element + // Opret et besked element let message = document.createElement('div'); - // better to use a css class for the style here + // Nok bedre at bruge en css klasse for stilen her message.style.cssText = "position:fixed; color: red"; *!* - // assign coordinates, don't forget "px"! + // Tildel koordinater, husk "px"! let coords = elem.getBoundingClientRect(); message.style.left = coords.left + "px"; @@ -172,45 +172,45 @@ function createMessageUnder(elem, html) { return message; } -// Usage: -// add it for 5 seconds in the document +// Anvendelse: +// tilføj den i 5 sekunder i dokumentet let message = createMessageUnder(elem, 'Hello, world!'); document.body.append(message); setTimeout(() => message.remove(), 5000); ``` ```online -Click the button to run it: +Prøv at trykke på knappen for at se den køre: - + ``` -The code can be modified to show the message at the left, right, below, apply CSS animations to "fade it in" and so on. That's easy, as we have all the coordinates and sizes of the element. +Koden kan ændres til at vise beskeden til venstre, højre, nedenunder, anvende CSS animationer til at "fade den ind" og så videre. Det er nemt, da vi har alle koordinater og størrelser af elementet. -But note the important detail: when the page is scrolled, the message flows away from the button. +Bemærk dog den vigtige detalje: når siden scroller væk, flyder beskeden væk fra knappen. -The reason is obvious: the message element relies on `position:fixed`, so it remains at the same place of the window while the page scrolls away. +Årsagen er åbenlys: besked elementet er afhængigt af `position:fixed`, så det forbliver på det samme sted i vinduet, mens siden scroller væk. -To change that, we need to use document-based coordinates and `position:absolute`. +For at ændre det, skal vi bruge dokumentbaserede koordinater og `position:absolute`. -## Document coordinates [#getCoords] +## Dokument-relative koordinater [#getCoords] -Document-relative coordinates start from the upper-left corner of the document, not the window. +Dokument-relative koordinater starter fra dokumentets øverste venstre hjørne, ikke vinduet. -In CSS, window coordinates correspond to `position:fixed`, while document coordinates are similar to `position:absolute` on top. +I CSS svarer vindueskoordinater til `position:fixed`, mens dokumentkoordinater ligner `position:absolute` placeret øverst i dokumentet. -We can use `position:absolute` and `top/left` to put something at a certain place of the document, so that it remains there during a page scroll. But we need the right coordinates first. +Vi kan bruge `position:absolute` og `top/left` til at placere noget et bestemt sted i dokumentet, så det forbliver der under en side scroll. Men vi har brug for de rigtige koordinater først. -There's no standard method to get the document coordinates of an element. But it's easy to write it. +Der er ingen standard metode til at få elementets dokumentkoordinater. Men det er ret nemt at skrive sig frem til dem. -The two coordinate systems are connected by the formula: -- `pageY` = `clientY` + height of the scrolled-out vertical part of the document. -- `pageX` = `clientX` + width of the scrolled-out horizontal part of the document. +De to koordinatsystemer er forbundet med formlen: +- `pageY` = `clientY` + højden af det ud-scrollede del af dokumentet. +- `pageX` = `clientX` + bredden af det ud-scrollede del af dokumentet. -The function `getCoords(elem)` will take window coordinates from `elem.getBoundingClientRect()` and add the current scroll to them: +Funktionen `getCoords(elem)` tager vindueskoordinaterne fra `elem.getBoundingClientRect()` og lægger det nuværende scroll til dem: ```js -// get document coordinates of the element +// Funktion til at hente dokumentkoordinaterne for et element function getCoords(elem) { let box = elem.getBoundingClientRect(); @@ -223,9 +223,9 @@ function getCoords(elem) { } ``` -If in the example above we used it with `position:absolute`, then the message would stay near the element on scroll. +Hvis vi i eksemplet ovenfor brugte `position:absolute`, så ville beskeden forblive nær elementet under scroll. -The modified `createMessageUnder` function: +Den ændrede `createMessageUnder` funktion: ```js function createMessageUnder(elem, html) { @@ -243,13 +243,13 @@ function createMessageUnder(elem, html) { } ``` -## Summary +## Opsamling -Any point on the page has coordinates: +Ethvert punkt på siden har koordinater: -1. Relative to the window -- `elem.getBoundingClientRect()`. -2. Relative to the document -- `elem.getBoundingClientRect()` plus the current page scroll. +1. Relativt til vinduet -- `elem.getBoundingClientRect()`. +2. Relativt til dokumentet -- `elem.getBoundingClientRect()` plus det nuværende scroll af siden. -Window coordinates are great to use with `position:fixed`, and document coordinates do well with `position:absolute`. +Vindueskoordinater er gode at bruge med `position:fixed`, og dokumentkoordinater virker godt med `position:absolute`. -Both coordinate systems have their pros and cons; there are times we need one or the other one, just like CSS `position` `absolute` and `fixed`. +Begge koordinatsystemer har deres fordele og ulemper; der er tidspunkter, hvor vi har brug for den ene eller den anden, ligesom med CSS `position` `absolute` og `fixed`.