Source Code:
(back to article)
Submit
Result:
Report an issue
<!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'; } } </script> </body> </html>