Skip to content
New issue

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

Fix Fullscreen API guide & Add missing members to GroupData #36012

Merged
merged 2 commits into from
Sep 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ page-type: web-api-event
browser-compat: api.Document.fullscreenchange_event
---

{{APIRef}}
{{APIRef("Fullscreen API")}}

The `fullscreenchange` event is fired immediately after the browser switches into or out of fullscreen mode.
The **`fullscreenchange`** event is fired immediately after the browser switches into or out of fullscreen mode.

The event is sent to the `Element` that is transitioning into or out of fullscreen mode, and this event then bubbles up to the `Document`.

Expand Down Expand Up @@ -38,9 +38,9 @@ In this example, a handler for the `fullscreenchange` event is added to the {{do

If the user clicks on the "Toggle Fullscreen Mode" button, the `click` handler will toggle fullscreen mode for the `div`. If `document.fullscreenElement` has a value it will exit fullscreen mode. If not, the div will be placed into fullscreen mode.

Remember that by the time the `fullscreenchange` event is handled, the status of the element has already changed. So if the change is to fullscreen mode, `document.fullscreenElement` will point to the element that is now in fullscreen mode. On the other hand, if `document.fullscreenElement` is null, fullscreen mode has been canceled.
Remember that by the time the `fullscreenchange` event is handled, the status of the element has already changed. So if the change is to fullscreen mode, `document.fullscreenElement` will point to the element that is now in fullscreen mode. On the other hand, if `document.fullscreenElement` is `null`, fullscreen mode has been canceled.

What that means to the example code is that, if an element is currently in fullscreen mode, the `fullscreenchange` handler logs the `id` of the fullscreen element to the console. If `document.fullscreenElement` is null, the code logs a message that the change is to leave fullscreen mode.
What that means to the example code is that, if an element is currently in fullscreen mode, the `fullscreenchange` handler logs the `id` of the fullscreen element to the console. If `document.fullscreenElement` is `null`, the code logs a message that the change is to leave fullscreen mode.

#### HTML

Expand Down
4 changes: 2 additions & 2 deletions files/en-us/web/api/document/fullscreenerror_event/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ page-type: web-api-event
browser-compat: api.Document.fullscreenerror_event
---

{{APIRef}}
{{APIRef("Fullscreen API")}}

The `fullscreenerror` event is fired when the browser cannot switch to fullscreen mode.
The **`fullscreenerror`** event is fired when the browser cannot switch to fullscreen mode.

As with the [`fullscreenchange` event](/en-US/docs/Web/API/Document/fullscreenchange_event), two `fullscreenerror` events are fired; the first is sent to the {{domxref("Element")}} which failed to change modes, and the second is sent to the {{domxref("Document")}} which owns that element.

Expand Down
8 changes: 4 additions & 4 deletions files/en-us/web/api/element/fullscreenchange_event/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ page-type: web-api-event
browser-compat: api.Element.fullscreenchange_event
---

{{APIRef}}
{{APIRef("Fullscreen API")}}

The `fullscreenchange` event is fired immediately after an {{domxref("Element")}} switches into or out of fullscreen mode.
The **`fullscreenchange`** event is fired immediately after an {{domxref("Element")}} switches into or out of fullscreen mode.

This event is sent to the `Element` which is transitioning into or out of fullscreen mode.

Expand Down Expand Up @@ -36,9 +36,9 @@ In this example, a handler for the `fullscreenchange` event is added to the elem

If the user clicks on the "Toggle Fullscreen Mode" button, the `click` handler will toggle fullscreen mode for the `div`. If `document.fullscreenElement` has a value it will exit fullscreen mode. If not, the div will be placed into fullscreen mode.

Remember that by the time the `fullscreenchange` event is handled, the status of the element has already changed. So if the change is to fullscreen mode, `document.fullscreenElement` will point to the element that is now in fullscreen mode. On the other hand, if `document.fullscreenElement` is null, fullscreen mode has been canceled.
Remember that by the time the `fullscreenchange` event is handled, the status of the element has already changed. So if the change is to fullscreen mode, `document.fullscreenElement` will point to the element that is now in fullscreen mode. On the other hand, if `document.fullscreenElement` is `null`, fullscreen mode has been canceled.

What that means to the example code is that, if an element is currently in fullscreen mode, the `fullscreenchange` handler logs the `id` of the fullscreen element to the console. If `document.fullscreenElement` is null, the code logs a message that the change is to leave fullscreen mode.
What that means to the example code is that, if an element is currently in fullscreen mode, the `fullscreenchange` handler logs the `id` of the fullscreen element to the console. If `document.fullscreenElement` is `null`, the code logs a message that the change is to leave fullscreen mode.

### HTML

Expand Down
4 changes: 2 additions & 2 deletions files/en-us/web/api/element/fullscreenerror_event/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ page-type: web-api-event
browser-compat: api.Element.fullscreenerror_event
---

{{APIRef}}
{{APIRef("Fullscreen API")}}

The `fullscreenerror` event is fired when the browser cannot switch to fullscreen mode.
The **`fullscreenerror`** event is fired when the browser cannot switch to fullscreen mode.

As with the [`fullscreenchange` event](/en-US/docs/Web/API/Element/fullscreenchange_event), two `fullscreenerror` events are fired; the first is sent to the {{domxref("Element")}} which failed to change modes, and the second is sent to the {{domxref("Document")}} which owns that element.

Expand Down
4 changes: 2 additions & 2 deletions files/en-us/web/api/fullscreen_api/guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ When fullscreen mode is successfully engaged, the document which contains the el

### When a fullscreen request fails

It's not guaranteed that you'll be able to switch into fullscreen mode. For example, {{HTMLElement("iframe")}} elements have the [`allowfullscreen`](/en-US/docs/Web/HTML/Element/iframe#allowfullscreen) attribute in order to opt-in to allowing their content to be displayed in fullscreen mode. In addition, certain kinds of content, such as windowed plug-ins, cannot be presented in fullscreen mode. Attempting to put an element which can't be displayed in fullscreen mode (or the parent or descendant of such an element) won't work. Instead, the element which requested fullscreen will receive a `mozfullscreenerror` event. When a fullscreen request fails, Firefox will log an error message to the Web Console explaining why the request failed. In Chrome and newer versions of Opera however, no such warning is generated.
It's not guaranteed that you'll be able to switch into fullscreen mode. For example, {{HTMLElement("iframe")}} elements have the [`allowfullscreen`](/en-US/docs/Web/HTML/Element/iframe#allowfullscreen) attribute in order to opt-in to allowing their content to be displayed in fullscreen mode. In addition, certain kinds of content, such as windowed plug-ins, cannot be presented in fullscreen mode. Attempting to put an element which can't be displayed in fullscreen mode (or the parent or descendant of such an element) won't work. Instead, the element which requested fullscreen will receive a `fullscreenerror` event. When a fullscreen request fails, Firefox will log an error message to the Web Console explaining why the request failed. In Chrome and newer versions of Opera however, no such warning is generated.

> [!NOTE]
> Fullscreen requests need to be called from within an event handler or otherwise they will be denied.
Expand Down Expand Up @@ -105,7 +105,7 @@ function toggleFullScreen() {
}
```

This starts by looking at the value of the `fullscreenElement` attribute on the {{DOMxRef("document")}}. If it's `null`, the document is currently in windowed mode, so we need to switch to fullscreen mode. Switching to fullscreen mode is done by calling {{DOMxRef("element.requestFullscreen()")}}.
This starts by looking at the value of the `fullscreenElement` attribute on the {{DOMxRef("document")}}. If it's `null`, the document is currently in windowed mode, so we need to switch to fullscreen mode. Switching to fullscreen mode is done by calling {{DOMxRef("Element.requestFullscreen()")}}.

If fullscreen mode is already active (`fullscreenElement` is non-`null`), we call {{DOMxRef("document.exitFullscreen()")}}.

Expand Down
7 changes: 6 additions & 1 deletion files/jsondata/GroupData.json
Original file line number Diff line number Diff line change
Expand Up @@ -609,7 +609,12 @@
"guides": ["/docs/Web/API/Fullscreen_API/Guide"],
"interfaces": [],
"methods": ["Document.exitFullscreen()", "Element.requestFullscreen()"],
"properties": ["Document.fullscreen", "Document.fullscreenElement"],
"properties": [
"Document.fullscreen",
"Document.fullscreenElement",
"Document.fullscreenEnabled",
"ShadowRoot.fullscreenElement"
],
"events": [
"Document: fullscreenchange",
"Document: fullscreenerror",
Expand Down