This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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`.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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".
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 inlineelement.
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Element size and scrolling #297
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Uh oh!
There was an error while loading. Please reload this page.
Element size and scrolling #297
Filter by extension
Viewed files
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
There are no files selected for viewing
Uh oh!
There was an error while loading. Please reload this page.