10-22-2008, 12:28 PM
|
|||
|
|||
Controlling Window Sizes Using JavaScript
The script is triggered when the page loads in the browser. You also add a link to return to the frameset. Finally, you add a script to the frameset to resize it as well.
1. In Notepad, choose File>Open. Choose sitemap.html, and click Open. You add a script and a link to the page. 2. Go to line 9, and press Enter to add a line. You add a script to the page. 3. 3.On lines 9 and 10, type: <script type="text/javascript"> <!-- You open the script tag and comment 4. On line 11, type: function document_onload() You name the function. The function is later called from the <body> tag. 5. On lines 12 through 14, type: { self.resizeTo(350,500); self.moveTo(0,0); } The two statements, surrounded by curly braces, are both applicable to the self object, the sitemap.html page. The resizeTo property of the self object is given values of 350 and 500 pixels (pixels are the default and are understood; you don’t have to specify). When the script is run, the page is sized to 350 x 500 pixels. The moveTo property of the self object is given values of 0 and 0 pixels; when the script is run, the window moves to the top left of the screen. Each statement is ended with a semicolon. 6. On lines 15 and 16, type: // --> </script> You close the comment and script tags. 7. On line 18, press Enter to add a blank line. Separate the <head> content from the <body> content. 8. On line 19, type: <body onload="document_onload()"> You add the event to the <body> tag. When the body of the page is loaded in the browser, the function is called and the page is resized. 10. Go to line 43, and press Enter to add a blank line. On line 44, type: <a class="red" href="index.html">CLOSE SITE MAP</a> You add a blank line for visibility; you add a link to close the site map page and return to the frameset. For added visibility, the link uses the link colors that you set for the slideshow pages. 11. In Notepad, choose File>Save to save the sitemap.html page. You added a function to control the size of the window when it displays in a browser. 12. Open Internet Explorer, and then open index.html. You test the pages. 13. Click Site Map in the navigation frame. The sitemap.html page loads into the same browser window. The page resizes itself and moves to the upper left of the screen. 14. Scroll down the site map page to the new link. Click CLOSE SITE MAP. The index.html frameset loads into the same window. Close the browser. If the script doesn’t run, check the code you added earlier in this tutorial. 15. Choose File>Open, and then choose index.html. You add a sizing function to the frameset. 16. Go to line 8, and press Enter to add a line. You add a script to the page. 17. On lines 8 through 13, type: <script type="text/javascript"> <!-- { self.resizeTo(800,600); } // --> </script> The script runs when the page loads into the browser. The window size is reset to a large screen size (using an 800x600-pixel window resolution, the window is full-size) and is already located at the upper left of the window. 18. Choose File>Save and save index.html. You added a function to the sitemap.html page to resize the window when the page loads. You added a script to the index.html page to resize the window again when the user closes the site map to return to the site. 19. Open Internet Explorer, and then open index.html. The page loads at the large size. 20. Click Site Map in the navigation frame to load sitemap.html in the browser window. The page loads at its custom size. 21. Scroll down the site map page. Click CLOSE SITE MAP. The frameset reloads at the specified larger window size. 22. Close the browser. You tested the sequence of scripts. 23. In Notepad, choose File>Save to save the index.html page. 
|
Linear Mode
