Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML Window screenLeft Property
The HTML Window screenLeft property returns the horizontal distance in pixels from the left edge of the user's screen to the left edge of the browser window. This property is useful for determining window positioning and creating multi-window applications.
Note: The screenLeft property is not supported in Firefox. Firefox uses screenX instead for the same functionality.
Syntax
Following is the syntax for the screenLeft property −
window.screenLeft
Return Value
The screenLeft property returns a number representing the horizontal distance in pixels from the left edge of the screen to the left edge of the browser window. If the window is positioned to the left of the primary screen, the value can be negative.
Browser Compatibility
Following table shows the browser support for the screenLeft property −
| Browser | Support | Alternative |
|---|---|---|
| Chrome | Yes | - |
| Firefox | No | screenX |
| Safari | Yes | - |
| Edge | Yes | - |
| Internet Explorer | Yes | - |
Example
Following example demonstrates the HTML Window screenLeft property −
<!DOCTYPE html>
<html>
<head>
<title>Window screenLeft Property</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
color: #000;
min-height: 100vh;
}
.btn {
background: #db133a;
color: white;
border: none;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin: 10px;
}
.btn:hover {
background: #a00f2e;
}
.result {
font-size: 18px;
margin: 20px;
padding: 15px;
background: rgba(255, 255, 255, 0.8);
border-radius: 8px;
display: inline-block;
}
</style>
</head>
<body>
<h1>HTML Window screenLeft Property Demo</h1>
<button onclick="showScreenLeft()" class="btn">Show screenLeft Value</button>
<button onclick="showCrossBrowser()" class="btn">Show Cross-Browser Position</button>
<div id="output" class="result" style="display: none;"></div>
<script>
function showScreenLeft() {
const output = document.getElementById('output');
output.style.display = 'block';
output.innerHTML = 'The horizontal coordinate of the window relative to the screen is: ' + window.screenLeft + 'px';
}
function showCrossBrowser() {
const output = document.getElementById('output');
const leftPos = window.screenLeft !== undefined ? window.screenLeft : window.screenX;
output.style.display = 'block';
output.innerHTML = 'Window left position (cross-browser): ' + leftPos + 'px<br>' +
'Using: ' + (window.screenLeft !== undefined ? 'screenLeft' : 'screenX');
}
</script>
</body>
</html>
The output displays buttons to show the window's horizontal position. The cross-browser button demonstrates how to handle Firefox compatibility −
HTML Window screenLeft Property Demo [Show screenLeft Value] [Show Cross-Browser Position] (After clicking "Show screenLeft Value"): The horizontal coordinate of the window relative to the screen is: 100px (After clicking "Show Cross-Browser Position"): Window left position (cross-browser): 100px Using: screenLeft
Cross-Browser Compatibility Example
Since Firefox uses screenX instead of screenLeft, here's how to write cross-browser compatible code −
<!DOCTYPE html>
<html>
<head>
<title>Cross-Browser Window Position</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Cross-Browser Window Position</h2>
<button onclick="getWindowPosition()">Get Window Position</button>
<p id="result"></p>
<script>
function getWindowPosition() {
// Cross-browser way to get horizontal position
const leftPosition = window.screenLeft !== undefined ? window.screenLeft : window.screenX;
const topPosition = window.screenTop !== undefined ? window.screenTop : window.screenY;
document.getElementById('result').innerHTML =
'Window Left Position: ' + leftPosition + 'px<br>' +
'Window Top Position: ' + topPosition + 'px<br>' +
'Browser: ' + navigator.userAgent.split(' ')[0];
}
</script>
</body>
</html>
This approach ensures the code works across all browsers by checking for screenLeft first, then falling back to screenX if unavailable.
Common Use Cases
The screenLeft property is commonly used for −
Multi-window applications − Positioning multiple browser windows relative to each other.
Popup positioning − Opening popup windows at specific locations on the screen.
Window state detection − Determining if a window has been moved by the user.
Screen resolution awareness − Creating responsive layouts based on window position and screen size.
Conclusion
The window.screenLeft property provides the horizontal distance from the screen's left edge to the browser window's left edge. For cross-browser compatibility, always check for screenLeft first, then fall back to Firefox's screenX property. This ensures your code works consistently across all major browsers.
244 Views
