diff --git a/files/en-us/web/api/document/fullscreenchange_event/index.md b/files/en-us/web/api/document/fullscreenchange_event/index.md index d26eead545d3606..7d8714e49a17c66 100644 --- a/files/en-us/web/api/document/fullscreenchange_event/index.md +++ b/files/en-us/web/api/document/fullscreenchange_event/index.md @@ -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`. @@ -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 diff --git a/files/en-us/web/api/document/fullscreenerror_event/index.md b/files/en-us/web/api/document/fullscreenerror_event/index.md index 200312888227a05..c9173eeb08aa1b7 100644 --- a/files/en-us/web/api/document/fullscreenerror_event/index.md +++ b/files/en-us/web/api/document/fullscreenerror_event/index.md @@ -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. diff --git a/files/en-us/web/api/element/fullscreenchange_event/index.md b/files/en-us/web/api/element/fullscreenchange_event/index.md index 1a6027b21d0e324..6951271f18166e1 100644 --- a/files/en-us/web/api/element/fullscreenchange_event/index.md +++ b/files/en-us/web/api/element/fullscreenchange_event/index.md @@ -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. @@ -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 diff --git a/files/en-us/web/api/element/fullscreenerror_event/index.md b/files/en-us/web/api/element/fullscreenerror_event/index.md index 08732ea53497f6a..0e0b9cf02f3522a 100644 --- a/files/en-us/web/api/element/fullscreenerror_event/index.md +++ b/files/en-us/web/api/element/fullscreenerror_event/index.md @@ -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. diff --git a/files/en-us/web/api/fullscreen_api/guide/index.md b/files/en-us/web/api/fullscreen_api/guide/index.md index a34e15ccbbd7731..f3ce75cd477856f 100644 --- a/files/en-us/web/api/fullscreen_api/guide/index.md +++ b/files/en-us/web/api/fullscreen_api/guide/index.md @@ -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. @@ -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()")}}. diff --git a/files/jsondata/GroupData.json b/files/jsondata/GroupData.json index 264130b25527d9e..3e77f944234732c 100644 --- a/files/jsondata/GroupData.json +++ b/files/jsondata/GroupData.json @@ -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",