Sams Teach Yourself JavaScript in 24 Hours
- Table of Contents
- Copyright
- About the Author
- Acknowledgments
- We Want to Hear from You!
- Reader Services
- Introduction
- Part I: Getting Started
- Hour 1. Understanding JavaScript
- Hour 2. Creating a Simple Script
- Hour 3. How JavaScript Programs Work
- Part II: Learning JavaScript Basics
- Hour 4. Using Functions and Variables
- Hour 5. Using Strings and Arrays
- Hour 6. Testing and Comparing Values
- Hour 7. Repeating Yourself: Using Loops
- Hour 8. Using Math and Date Functions
- Part III: The Document Object Model (DOM)
- Hour 9. Working with the Document Object Model
- Hour 10. Responding to Events
- Hour 11. Using Windows and Frames
- Hour 12. Getting Data with Forms
- Hour 13. Using Graphics and Animation
- Part IV: Moving on to Advanced JavaScript Features
- Hour 14. Creating Cross-Browser Scripts
- Hour 15. Creating Custom Objects
- Hour 16. Working with Sounds and Plug-Ins
- Hour 17. Debugging JavaScript Applications
- Part V: Working with Dynamic HTML (DHTML)
- Hour 18. Working with Style Sheets
- Hour 19. Using Dynamic HTML (DHTML)
- Hour 20. Using Advanced DOM Features
- Part VI: Putting It All Together
- Hour 21. Improving a Web Page with JavaScript
- Hour 22. Creating a JavaScript Game
- Hour 23. Creating DHTML Applications
- Hour 24. JavaScript Tips and Tricks
- Part VII: Appendices
- Appendix A. Other JavaScript Resources
- Appendix B. Tools for JavaScript Developers
- Appendix C. Glossary
- Appendix D. JavaScript Quick Reference
- Appendix E. DOM Quick Reference
Moving and Resizing Windows
New to JavaScript 1.2 is the ability to move or resize windows. While Netscape 4 placed some restrictions on this, Netscape 6 and Internet Explorer 5 and later allow you to move and resize any window freely. You can do this using the following methods for any window object:
- window.moveTo() moves the window to a new position. The parameters specify the x (column) and y (row) position.
- window.moveBy()moves the window relative to its current position. The x and y parameters can be positive or negative, and are added to the current values to reach the new position.
- window.resizeTo()resizes the window to the width and height specified as parameters.
- window.resizeBy() resizes the window relative to its current size. The parameters are used to modify the current width and height.
As an example, Listing 11.2 shows an HTML document with a simple script that allows you to resize or move the main window.
Example 11.2. Moving and resizing the current window
<html>
<head>
<title>Moving and resizing windows</title>
<script language="javascript1.2" type="text/javascript1.2">
function DoIt() {
if (document.form1.w.value && document.form1.h.value)
self.resizeTo(document.form1.w.value, document.form1.h.value);
if (document.form1.x.value && document.form1.y.value)
self.moveTo(document.form1.x.value, document.form1.y.value);
}
</script>
</head>
<body>
<h1>Moving and Resizing Windows</h1>
<form name="form1">
<b>Width:</b> <input type="text" name="w"><br>
<b>Height:</b> <input type="text" name="h"><br>
<b>X-position:</b> <input type="text" name="x"><br>
<b>Y-position:</b> <input type="text" name="y"><br>
<input type="button" value="Change Window" onClick="DoIt()">
</form>
</body>
</html>
In this example, the DoIt function is called as an event handler when you click the Change Window button. This function checks if you have specified width and height values. If you have, it uses the self.resizeTo() method to resize the current window. Similarly, if you have specified x and y values, it uses self.moveTo() to move the window.
Using Timeouts | Next Section
Account Sign In
View your cart