diff --git a/files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html index 0a7c4d25a38b176..4767a45d6810752 100644 --- a/files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html +++ b/files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html @@ -174,7 +174,7 @@

An example using rgba()

-

{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "canvas_rgba.png")}}

+

{{EmbedLiveSample("An_example_using_rgba", "180", "180", "canvas_rgba.png")}}

Line styles

diff --git a/files/en-us/web/api/css_object_model/using_dynamic_styling_information/index.html b/files/en-us/web/api/css_object_model/using_dynamic_styling_information/index.html index 83aa1cf4dbedfd1..cade5b11719ffd4 100644 --- a/files/en-us/web/api/css_object_model/using_dynamic_styling_information/index.html +++ b/files/en-us/web/api/css_object_model/using_dynamic_styling_information/index.html @@ -48,7 +48,7 @@

Result

To modify styles to a document using CSS syntax, one can insert rules or insert {{HTMLElement("style")}} tags whose innerHTML property is set to the desired CSS.

-

Modify an element's style

+

Modify an element's style

The element {{domxref("HTMLElement.style", "style")}} property (see also the section "DOM Style Object" below) can also be used to get and set the styles on an element. However, this property only returns style attributes that have been set in-line (e.g, <td style="background-color: lightblue"> returns the string "background-color:lightblue", or directly for that element using element.style.propertyName, even though there may be other styles on the element from a stylesheet).

@@ -93,7 +93,7 @@

Modify an element's style

</html> -

{{ EmbedLiveSample('Modify_an_element_style') }}

+

{{ EmbedLiveSample('Modify_an_elements_style') }}

The {{domxref("window.getComputedStyle", "getComputedStyle()")}} method on the document.defaultView object returns all styles that have actually been computed for an element.

diff --git a/files/en-us/web/api/datatransferitemlist/index.html b/files/en-us/web/api/datatransferitemlist/index.html index a2e1f787567b296..c4b08afb032a76c 100644 --- a/files/en-us/web/api/datatransferitemlist/index.html +++ b/files/en-us/web/api/datatransferitemlist/index.html @@ -39,7 +39,7 @@

Methods

Getter that returns a {{domxref("DataTransferItem")}} at the given index.
-

Example

+

Example

This example shows how to use drag and drop.

@@ -125,9 +125,7 @@

CSS

Result

-

{{EmbedLiveSample('Example_Drag_and_Drop', '35%', '250px')}}

- -

{{LiveSampleLink('Example_Drag_and_Drop', 'Drag and Drop demo link')}}

+

{{EmbedLiveSample('Example', '35%', '250px')}}

Specifications

diff --git a/files/en-us/web/api/datatransferitemlist/length/index.html b/files/en-us/web/api/datatransferitemlist/length/index.html index cc2faf197ff7b9e..5467289d0b10f20 100644 --- a/files/en-us/web/api/datatransferitemlist/length/index.html +++ b/files/en-us/web/api/datatransferitemlist/length/index.html @@ -31,7 +31,7 @@

Value

drag item list is considered to be disabled if the item list's {{domxref("DataTransfer")}} object is not associated with a drag data store.

-

Example

+

Example

This example shows the use of the length property.

@@ -117,9 +117,7 @@

CSS

Result

-

{{EmbedLiveSample('Example_Drag_and_Drop')}}

- -

{{LiveSampleLink('Example_Drag_and_Drop', 'Drag and Drop demo link')}}

+

{{EmbedLiveSample('Example', 100, 250)}}

Specifications

diff --git a/files/en-us/web/api/document_object_model/introduction/index.html b/files/en-us/web/api/document_object_model/introduction/index.html index 427e5bb1d5b5508..907d109c87959e8 100644 --- a/files/en-us/web/api/document_object_model/introduction/index.html +++ b/files/en-us/web/api/document_object_model/introduction/index.html @@ -212,7 +212,7 @@

Core interfaces in the DOM

  • {{domxref("window.scrollTo", "", "", "1")}}()
    • -

    Example

    +

    Example

    The following simple example illustrates using the DOM {{domxref("Document")}} API — specifically, it illustrates using the {{domxref("Document.body", "body")}} property of the {{domxref("Document")}} API to change:

    @@ -266,7 +266,7 @@

    Example

    Result

    -{{EmbedLiveSample("example", "85ch", "263px")}} +{{EmbedLiveSample("Example", "85ch", "263px")}}

    Specifications

    diff --git a/files/en-us/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html b/files/en-us/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html index 66d5fc36ef54d3a..adf49e1497c5063 100644 --- a/files/en-us/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html +++ b/files/en-us/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html @@ -19,7 +19,7 @@

    Introduction

    Note: The DOM methods presented here are part of the Document Object Model (Core) level 1 specification. DOM level 1 includes both methods for generic document access and manipulation (DOM 1 Core) as well as methods specific to HTML documents (DOM 1 HTML).

    -

    Example: Creating an HTML table dynamically (Sample1.html)

    +

    Example: Creating an HTML table dynamically

    HTML

    @@ -63,7 +63,7 @@

    JavaScript

    tbl.setAttribute("border", "2"); } -

    {{ EmbedLiveSample('Overview_of_Sample1.html') }}

    +

    {{ EmbedLiveSample('Example_Creating_an_HTML_table_dynamically') }}

    Note the order in which we created the elements and the text node:

    @@ -116,7 +116,7 @@

    JavaScript

    You can build this table and its internal child elements by using just a few DOM methods. Remember to keep in mind the tree model for the structures you are planning to create; this will make it easier to write the necessary code. In the <table> tree of Figure 1 the element <table> has one child: the element <tbody>. <tbody> has two children. Each <tbody>'s child (<tr>) has two children (<td>). Finally, each <td> has one child: a text node.

    -

    Example: Setting the background color of a paragraph

    +

    Example: Setting the background color of a paragraph

    getElementsByTagName(tagNameValue) is a method available in any DOM {{domxref("Element")}} or the root {{domxref("Document")}} element. When called, it returns an array with all of the element's descendants matching the tag name. The first element of the list is located at position [0] in the array.

    @@ -143,7 +143,7 @@

    JavaScript

    myP.style.background = "rgb(255,0,0)"; } -

    {{ EmbedLiveSample('Setting_background_of_a_paragraph') }}

    +

    {{ EmbedLiveSample('Example_Setting_the_background_color_of_a_paragraph') }}

    In this example, we set the myP variable to the DOM object for the second p element inside the body:

    diff --git a/files/en-us/web/api/element/queryselector/index.html b/files/en-us/web/api/element/queryselector/index.html index cdd89f62b7ca2b0..3300bcccbddc2f5 100644 --- a/files/en-us/web/api/element/queryselector/index.html +++ b/files/en-us/web/api/element/queryselector/index.html @@ -73,7 +73,7 @@

    Find a spe 
    var el = document.body.querySelector("style[type='text/css'], style:not([type])");
    -

    Get direct descendants using the :scope pseudo-class

    +

    Get direct descendants using the :scope pseudo-class

    This example uses the {{cssxref(":scope")}} pseudo-class to retrieve direct children of the parentElement element.

    @@ -112,7 +112,7 @@

    JavaScript

    Result

    -

    {{ EmbedLiveSample('get_direct_descendants_using_the_scope_pseudo_class', 600, 160) }}

    +

    {{ EmbedLiveSample('Get_direct_descendants_using_the_scope_pseudo-class', 600, 160) }}

    The entire hierarchy counts

    diff --git a/files/en-us/web/api/eventtarget/addeventlistener/index.html b/files/en-us/web/api/eventtarget/addeventlistener/index.html index baf6a344d51c7d3..5763cb518c5bae8 100644 --- a/files/en-us/web/api/eventtarget/addeventlistener/index.html +++ b/files/en-us/web/api/eventtarget/addeventlistener/index.html @@ -250,7 +250,7 @@

    Result

    {{EmbedLiveSample('Add_a_simple_listener')}}

    -

    Add an abortable listener

    +

    Add an abortable listener

    This example demonstrates how to add an addEventListener() that can be aborted with an {{domxref("AbortSignal")}}.

    @@ -286,7 +286,7 @@

    JavaScript

    Result

    -

    {{EmbedLiveSample('add_a_abortable_listener')}}

    +

    {{EmbedLiveSample('Add_an_abortable_listener')}}

    Event listener with anonymous function

    diff --git a/files/en-us/web/api/globaleventhandlers/onselectionchange/index.html b/files/en-us/web/api/globaleventhandlers/onselectionchange/index.html index 4124e45169d173e..20cd9da5003b0fc 100644 --- a/files/en-us/web/api/globaleventhandlers/onselectionchange/index.html +++ b/files/en-us/web/api/globaleventhandlers/onselectionchange/index.html @@ -75,7 +75,7 @@

    JavaScript

    Result

    -

    {{EmbedLiveSample("Using selectionchange with a text control")}}

    +

    {{EmbedLiveSample("Using_selectionchange_with_a_text_control")}}

    diff --git a/files/en-us/web/api/htmlelement/focus/index.html b/files/en-us/web/api/htmlelement/focus/index.html index 0b42763dea1bd40..c314652b1179ab6 100644 --- a/files/en-us/web/api/htmlelement/focus/index.html +++ b/files/en-us/web/api/htmlelement/focus/index.html @@ -83,7 +83,7 @@

    Result

    {{ EmbedLiveSample('Focus_on_a_button') }}

    -

    Focus with focusOption

    +

    Focus with focusOption

    JavaScript

    @@ -109,7 +109,7 @@

    HTML

    Result

    -

    {{ EmbedLiveSample('Focus_prevent_scroll') }}

    +

    {{ EmbedLiveSample('Focus_with_focusOption') }}

    Specifications

    diff --git a/files/en-us/web/api/navigator/canshare/index.html b/files/en-us/web/api/navigator/canshare/index.html index 20f46c7ea382a31..202c1fcfc7847cd 100644 --- a/files/en-us/web/api/navigator/canshare/index.html +++ b/files/en-us/web/api/navigator/canshare/index.html @@ -21,7 +21,7 @@
  • Files are specified but the implementation does not support file sharing.
  • Sharing the specified data would be considered a "hostile share" by the user-agent.
    • - +

    The Web Share API is gated by the web-share permission policy. The canShare() method will return false if the permission is supported but has not been granted.

    @@ -58,7 +58,7 @@

    Return value

    Examples

    -

    Sending the MDN URL

    +

    Sending the MDN URL

    The example uses navigator.canShare() to check whether navigator.share() can share the specified data.

    @@ -92,7 +92,7 @@

    Result

    The box below should state whether navigator.canShare() is supported on this browser, and if so, whether or not we can use navigator.share() to share the specified data:

    -

    {{EmbedLiveSample('sending_the_mdn_url')}}

    +

    {{EmbedLiveSample('Sending_the_MDN_URL')}}

    Feature checking example

    diff --git a/files/en-us/web/api/settimeout/index.html b/files/en-us/web/api/settimeout/index.html index 96e54c8fe986c7b..67f8dc94de98a46 100644 --- a/files/en-us/web/api/settimeout/index.html +++ b/files/en-us/web/api/settimeout/index.html @@ -167,7 +167,7 @@

    Reasons for delays longer than specified

    There are a number of reasons why a timeout may take longer to fire than anticipated. This section describes the most common reasons.

    -

    Nested timeouts

    +

    Nested timeouts

    As specified in the HTML standard, browsers will enforce a minimum timeout of 4 milliseconds once a nested call to setTimeout has been scheduled 5 times.

    @@ -225,7 +225,7 @@

    Nested timeouts

    document.querySelector("#run").addEventListener("click", run); -

    {{EmbedLiveSample("nested_timeouts", 100, 420)}}

    +

    {{EmbedLiveSample("Nested_timeouts", 100, 420)}}

    Timeouts in inactive tabs

    @@ -297,7 +297,7 @@

    Maximum delay value

    Examples

    -

    Setting and clearing timeouts

    +

    Setting and clearing timeouts

    The following example sets up two simple buttons in a web page and hooks them to the setTimeout() and clearTimeout() routines. Pressing the first @@ -340,7 +340,7 @@

    JavaScript

    Result

    -

    {{EmbedLiveSample('setting_and_clearing_timeouts')}}

    +

    {{EmbedLiveSample('Setting_and_clearing_timeouts')}}

    See also the clearTimeout()