130 likes | 358 Views
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.,
E N D
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
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
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>
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>
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>
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>
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>
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>
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>
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>
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
<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>