1 / 13

Windows

Windows . Review: Basic Window parameters. MyWindow = window.open (); Opens a blank new window Windows have many properties Width, height, content, name You can set those properties When you create a window, pass parameters into the open() function E.g.,

berit
Download Presentation

Windows

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Windows

  2. Review: Basic Window parameters MyWindow= window.open(); • Opens a blank new window • Windows have many properties • Width, height, content, name • You can set those properties • When you create a window, pass parameters into the open() function • E.g., MyWindow = window.open(‘http://www.google.com’, ’GoogleWindow’, ‘height = 250, width = 250’) • Parameter 1: URL to be opened in new window • Parameter 2: name you assign the window • Parameter 3: style settings for the window

  3. Style Descriptions • Status: status bar (1 = 0n, 0 = off) • Toolbar: standard browser toolbar (1 = on, 0 = off) • Location: location entry field (1 = on, 0 = off) • Menubar: menubar (1 = on, 0 = off) • Directories : the standard browser directories buttons (1 = on, 0 = off) • Resizable: allow/disallow the window to be resized (1 = allow, 0 = disallow) • Scrollbars: enable scrollbars (1 = enable, 0 = disable) • Height: the height of the window in pixels • Width: the width of the window in pixels

  4. Example: <html> <head> <title> Opening Windows </title> <script language = "JavaScript"> <!-- function OpenNewWindow() { MyWindow = window.open('http://www.google.com', 'myWindow', 'height = 350, width = 350') } --> </script> </head> <body> <form method = "post"> <p> <input name = "OpenWindow" value = "Open Window" type = "button" onclick = "OpenNewWindow()"/> </p> </form> </body> </html>

  5. Giving Windows Focus focus() function gives window focus Default: give the new window focus. You can do this manually using MyWindow.focus() To keep focus on original window, use: <html> <head> <title> Opening Windows </title> <script language = "JavaScript"> <!-- function OpenNewWindow() { MyWindow = window.open('http://www.google.com', 'myWindow', 'height = 350, width = 350') this.focus(); // puts focus on this window, which is the original window, not the window we just created } --> </script> </head> <body> <form method = "post"> <p> <input name = "OpenWindow" value = "Open Window" type = "button" onclick = "OpenNewWindow()"/> </p> </form> </body> </html>

  6. Positioning Window • You can position the window on the screen • Use the left and top properties • x and y coordinates, in pixels • of the upper left corner of the new window • E.g., <script language = "JavaScript"> <!-- function OpenNewWindow() { MyWindow = window.open('http://www.google.com', 'myWindow', 'height = 350, width = 350, left = 0, top = 0’) } --> </script>

  7. Changing the Contents of a Window <html> <head> <title> Opening Windows </title> <script language = "JavaScript"> <!-- function OpenNewWindow(Ad) { MyWindow = window.open(Ad, 'myWindow', 'height = 350, width = 350') } --> </script> </head> <body> <form method = "post"> <p> <input name = “PicA" value = "Open Window“ type = "button" onclick = "OpenNewWindow(‘pic2.jpg’)"/> <input name = “PicB" value = "Open Window“ type = "button" onclick = "OpenNewWindow(‘pic4.jpg’)"/> </p> </form> </body> </html>

  8. Closing a Window close() method <html> <head> <title> Opening Windows </title> <script language = "JavaScript"> <!-- varWindowStatus; function Window() { if (WindowStatus != '1') { MyWindow = window.open('pic2.jpg', 'myWindow', 'status = 0, height = 350, width = 350') WindowStatus = '1'; } else { MyWindow.close(); WindowStatus = '0'; } } --> </script> </head> <body> <form method = "post"> <p> <input name = "OpenWindow" value = "Click for Window“ type = "button" onclick = "Window()“ /> </p> </form> </body> </html>

  9. Scrolling a Window • ScrollTo() function • Only works if the window’s scrollbar property is set to true (1) <html> <head> <title> Opening Windows </title> <script language = "JavaScript"> <!-- function Top() { self.scrollTo(0,0); } --> </script> </head> <body> <form method = "post"> <p> <input name = “GoToTop" value = “Go To Top“ type = "button" onclick = “Top()"/> </p> </form> </body> </html>

  10. Opening Multiple Windows <html> <head> <title> Opening Windows </title> <script language = "JavaScript"> <!-- function Launch() { vari; for (i = 0; i < 5; i++) { Win = window.open('pics'+i+'.jpg','win'+i,'width =300, height = 300'); } } --> </script> </head> <body> <form method = "post"> <p> <input name = "WindowsGoneWild" value = "Windows Gone Wild" type = "button" onclick = "Launch()"/> </p> </form> </body> </html>

  11. Creating a Web Page in a New Window <html> <head> <title> Changing content of a Window</title> <script language = "Javascript"> <!-- function Window (ourtitle) { MyWindow = window.open('','mywin','height = 250, width = 250'); MyWindow.document.write('<html>'); MyWindow.document.write('<head>'); MyWindow.document.write('<title> Creating Content </title>'); MyWindow.document.write('<\/head>'); MyWindow.document.write('<body'); MyWindow.document.write('<h1>'+ ourtitle + '\'s Form<\/h1>'); MyWindow.document.write('<form method = "post">'); MyWindow.document.write('<p>'); MyWindow.document.write('Customer: <br>'); MyWindow.document.write('Firstname: <input name = "firstname" type = "text" \/>'); MyWindow.document.write('<br />'); MyWindow.document.write('Lastname: <input name = "lastname" type = "text" \/>'); MyWindow.document.write('<br />'); MyWindow.document.write('<input name = "submit" type = "submit" \/>'); MyWindow.document.write('</p>'); MyWindow.document.write('<\/form>'); MyWindow.document.write('<\/body>'); MyWindow.document.write('<\/html>'); MyWindow.focus(); } --> </script> </head> <body> <form method = "post"> <p> <input name = "OpenWindow" value = "Open Window" type = "button" onclick = "Window ('Debbie Smith')" /> </p> </form> </body> </html>

  12. Rollover that opens Window • Suppose we want to open a new window with more information about a product when we roll over an image. • First: define function OpenNewWindow in the head • OpenNewWindow takes one argument (parameter, variable) that tells what to display in the new window

  13. <html> <head> <title> Changing content of a Window</title> <script language = "Javascript"> <!-- function OpenNewWindow (pic) { if (pic == 1) { document.images.pic1.src = "kit1.jpg"; MyWindow = window.open('','mywin','height = 250, width = 250, top = 0, left = 500'); MyWindow.document.write('<h1>Picture of Cheezeburger Kitty 1<\/h1>'); MyWindow.document.write('<p>I can put more infor about this kitty here.<\/p>'); } else if (pic == 2) { document.images.pic1.src = "kit2.jpg"; MyWindow = window.open('','mywin','height = 250, width = 250, top = 0, left = 500'); MyWindow.document.write('<h1>Picture of Cheezeburger Kitty 2<\/h1>'); MyWindow.document.write('<p>This would have info about kitty 2<\/>.'); } else if (pic == 3) { document.images.pic1.src = "kit3.jpg"; MyWindow = window.open('','mywin','height = 250, width = 250, top = 0, left = 500'); MyWindow.document.write('<h1>Picture of Cheezeburger Kitty 3<\/h1>'); MyWindow.document.write('<p>And here we have info on Kitty 3 <\/p>'); } } --> </script> </head> <body> <table width = "90%" border = 0> <trvalign = "top"> <td width = "50"> <a> <img height = "400" width = "370" src = "kit0.jpg" name = "pic1"> </a> </td><td> <img height = "1" src = "" width = "10"> </td><td> <a onmouseover = "OpenNewWindow(1)" onmouseout = "MyWindow.close()"> <b>This should show pic2</b> </a> <br> <a onmouseover = "OpenNewWindow(2)" onmouseout = "MyWindow.close()"> <b>This should show pic3</b> </a> <br> <a onmouseover = "OpenNewWindow(3)" onmouseout = "MyWindow.close()"> <b>This should show pic4</b> </a> </td></tr> </table> </body> </html>

More Related