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.

Sign up for GitHub

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

Add "lang" to <html> - part 2 #19890

Merged
merged 3 commits into from
Aug 23, 2022
Merged

Add "lang" to <html> - part 2 #19890

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9db65d6
Add "lang" to <html> - part 2
rubiesonthesky Aug 23, 2022
7e76483
Update files/en-us/web/api/pointer_events/index.md
teoli2003 Aug 23, 2022
c8e297e
Update files/en-us/web/css/css_positioning/understanding_z_index/stac…
teoli2003 Aug 23, 2022
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
35 changes: 15 additions & 20 deletions files/en-us/web/api/keyboardevent/ctrlkey/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,26 +24,21 @@ A boolean value.
## Examples

```html
<html>
<head>
<title>ctrlKey example</title>

<script>

function showChar(e){
alert(
"Key Pressed: " + e.key + "\n"
+ "CTRL key pressed: " + e.ctrlKey + "\n"
);
}

</script>
</head>

<body onkeypress="showChar(event);">
<p>Press any character key, with or without holding down the CTRL key.<br />
You can also use the SHIFT key together with the CTRL key.</p>
</body>
<html lang="en">
<head>
<title>ctrlKey example</title>
<script>
function showChar(e) {
alert(`Key Pressed: ${e.key}\nCTRL key pressed: ${e.ctrlKey}\n`);
}
</script>
</head>
<body onkeypress="showChar(event);">
<p>
Press any character key, with or without holding down the CTRL key.<br />
You can also use the SHIFT key together with the CTRL key.
</p>
</body>
</html>
```

Expand Down
164 changes: 81 additions & 83 deletions files/en-us/web/api/mouseevent/layerx/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ tags:
- Non-standard
browser-compat: api.MouseEvent.layerX
---

{{APIRef("UI Events")}}{{Non-standard_Header}}

The **`MouseEvent.layerX`** read-only property returns the
Expand All @@ -23,93 +24,90 @@ returned value is relative to the top left of the positioned element.

## Value

An integer value in pixels for the x-coordinate of the mouse
pointer, when the mouse event fired.
An integer value in pixels for the x-coordinate of the mouse pointer, when the mouse event fired.

## Examples

```html
<html>
<head>
<title>pageX\pageY & layerX\layerY example</title>

<script>

function showCoords(evt){
const form = document.forms.form_coords;
const parent_id = evt.target.parentNode.id;
form.parentId.value = parent_id;
form.pageXCoords.value = evt.pageX;
form.pageYCoords.value = evt.pageY;
form.layerXCoords.value = evt.layerX;
form.layerYCoords.value = evt.layerY;
}
</script>

<style>

#d1 {
border: solid blue 1px;
padding: 20px;
}

#d2 {
position: absolute;
top: 180px;
left: 80%;
right:auto;
width: 40%;
border: solid blue 1px;
padding: 20px;
}

#d3 {
position: absolute;
top: 240px;
left: 20%;
width: 50%;
border: solid blue 1px;
padding: 10px;
}

</style>
</head>

<body onmousedown="showCoords(event)">

<p>To display the mouse coordinates please click anywhere on the page.</p>

<div id="d1">
<span>This is an un-positioned div so clicking it will return
layerX/layerY values almost the same as pageX/PageY values.</span>
</div>

<div id="d2">

<span>This is a positioned div so clicking it will return layerX/layerY
values that are relative to the top-left corner of this positioned
element. Note the pageX\pageY properties still return the
absolute position in the document, including page scrolling.</span>

<span>Make the page scroll more! This is a positioned div so clicking it
will return layerX/layerY values that are relative to the top-left
corner of this positioned element. Note the pageX\pageY properties still
return the absolute position in the document, including page
scrolling.</span>

</div>

<div id="d3">
<form name="form_coords" id="form1">
Parent Element id: <input type="text" name="parentId" size="7" /><br />
pageX:<input type="text" name="pageXCoords" size="7" />
pageY:<input type="text" name="pageYCoords" size="7" /><br />
layerX:<input type="text" name="layerXCoords" size="7" />
layerY:<input type="text" name="layerYCoords" size="7" />
</form>
</div>

</body>
<html lang="en">
<head>
<title>pageX\pageY & layerX\layerY example</title>

<script>
function showCoords(evt) {
const form = document.forms.form_coords;
const parent_id = evt.target.parentNode.id;
form.parentId.value = parent_id;
form.pageXCoords.value = evt.pageX;
form.pageYCoords.value = evt.pageY;
form.layerXCoords.value = evt.layerX;
form.layerYCoords.value = evt.layerY;
}
</script>

<style>
#d1 {
border: solid blue 1px;
padding: 20px;
}

#d2 {
position: absolute;
top: 180px;
left: 80%;
right: auto;
width: 40%;
border: solid blue 1px;
padding: 20px;
}

#d3 {
position: absolute;
top: 240px;
left: 20%;
width: 50%;
border: solid blue 1px;
padding: 10px;
}
</style>
</head>

<body onmousedown="showCoords(event)">
<p>To display the mouse coordinates please click anywhere on the page.</p>

<div id="d1">
<span>
This is an un-positioned div so clicking it will return layerX/layerY
values almost the same as pageX/PageY values.
</span>
</div>

<div id="d2">
<span>
This is a positioned div so clicking it will return layerX/layerY values
that are relative to the top-left corner of this positioned element.
Note the pageX\pageY properties still return the absolute position in
the document, including page scrolling.
</span>

<span>
Make the page scroll more! This is a positioned div so clicking it will
return layerX/layerY values that are relative to the top-left corner of
this positioned element. Note the pageX\pageY properties still return
the absolute position in the document, including page scrolling.
</span>
</div>

<div id="d3">
<form name="form_coords" id="form1">
Parent Element id: <input type="text" name="parentId" size="7" /><br />
pageX: <input type="text" name="pageXCoords" size="7" />
pageY: <input type="text" name="pageYCoords" size="7" /><br />
layerX: <input type="text" name="layerXCoords" size="7" />
layerY: <input type="text" name="layerYCoords" size="7" />
</form>
</div>
</body>
</html>
```

Expand Down
Loading