Source Code: (back to article)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simulate Window Adjustments</title>
<style>
#simulatedWindow {
width: 300px;
height: 300px;
position: relative;
background-color: #f3f3f3;
border: 2px solid #ccc;
margin: 20px;
padding: 10px;
transition: all 0.5s ease; /* Smooth transition for size and position changes */
}
</style>
</head>
<body>
<button onclick="adjustSimulatedWindow()">Adjust Window</button>
<div id="simulatedWindow">This is a simulated window. Click the button to adjust its size and position.</div>

<script>
function adjustSimulatedWindow() {
const elem = document.getElementById('simulatedWindow');
// Toggle size and position to demonstrate the effect
if (elem.style.width === '500px') {
elem.style.width = '300px';
elem.style.height = '300px';
elem.style.top = '0px';
elem.style.left = '0px';
} else {
elem.style.width = '500px';
elem.style.height = '500px';
elem.style.top = '100px';
elem.style.left = '100px';
}