| Table of Contents | Previous Next |
8.4 Browser window(s) II8.4.1 Locating page objects with window scrollingWhen dealing with browser controls (single or multiple windows), another useful function is window scrolling. Window scrolling moves the window to particular x,y coordinates. Consider the command <script> window.scroll(150,250)</script> This moves the current window's left top corner to the location (150, 250) measured by pixels. When working with multiple windows, window handles are often used as identities. In the next example, a page is developed to control the scrolling of a strip of pictures so that only one picture can be seen at any one time. The controlling page is listed in ex08-17.htm.
Example: ex08-17.htm - Window Scrolling I
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title> Window Scrolling I ex0817.htm </title></head>
6: <style>
7: .mSt{font-family:arial;font-size:18pt;font-weight:bold;color:#00ffff}
8: .bSt{background-color:#aaffaa;font-family:arial;font-weight:bold;
9: font-size:12pt;color:#ff0000;width:248px;height:30px}
10: </style>
11:
12: <script>
13: window.resizeTo(440,340)
14: function scrollDown(lineLeft,lineDown)
15: {
16: lookSt="menubar=no,toolbar=no,location=no,status=no,scrollbars=yes,"+
17: "resizable=no"
18: winH=window.open("ex08-17a.htm","myWin",lookSt)
19: winH.resizeTo(430,380)
20: winH.focus()
21: setTimeout("winH.scroll("+lineLeft+","+lineDown+")",1000)
22: }
23: </script>
24:
25: <body style="background:#000088;text-align:center">
26: <div class="mSt">Window Scrolling</div><br /><br /><br />
27: <input type="button" onclick="scrollDown(5,80)"
28: value="Scroll To Butterfly_I" class="bSt" /><br /><br />
29: <input type="button" onclick="scrollDown(405,80)"
30: value="Scroll To Butterfly_II" class="bSt" /><br /><br />
31: </body>
32: </html>
This page contains two buttons (lines 2730). When the first button, Scroll To Butterfly_I, is pressed, the function scrollDown()with parameters 5 and 80 is called. The parameters are used to locate the coordinates (5, 80) in a child window and display them at the top left corner. This technique is often used in commercial Web sites to locate small products. The child window you are going to open is a plain one and without most of the controls (lines 1617). After resizing the child window to 430 x 380 pixels (line 19), the setTimout() function is called to execute the scrolling via the handle winH (i.e., winH.scroll). The child window page ex08-17a.htm is given below:
Example: ex08-17a.htm - The Child Window Page For ex08-07.htm
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>File: ex0817a.htm</title></head>
6: <style>
7: .mSt{font-family:arial;font-size:18pt;font-weight:bold;color:#ffff00}
8: </style>
9: <body style="background:#000088;text-align:center">
10: <script>
11: lMsg=""
12: document.write('<pre style="color:#666600" text-align="left"><br />')
13: for(i=0;i<=60;i++)
14: {
15: for (j=0;j<=5;j++)
16: {
17: lMsg = lMsg +"P r a c t i c a L W e B "+
18: " T e c h n o l o g i e s "
19: }
20: lMsg = lMsg +"<br />"
21: }
22: document.write(lMsg+"</pre>")
23: </script>
24:
25: <div class="mSt" style="position:absolute;left:45px;top:100px">
26: Butterfly_I<br /><br /><img src="s_04_img.jpg" alt="pic" /></div>
27: <div class="mSt" style="position:absolute;left:445px;top:100px">
28: Butterfly_II<br /><br /><img src="s_05_img.jpg" alt="pic" /></div>
29: </body>
30: </html>
As you can see from lines 2528, this is a page with two pictures. The first picture is located at (45, 100) and the second one at (445, 100). Note also that we have used XHTML preformat element <pre> to create background text in lines 1223. Some screen shots are shown in Figs 8.23 and 8.24. Figure 8.23. ex08-17.htm
Figure 8.24. Scrolling butterfly
8.4.2 Image transition using scrolling effectsIf you want to open multiple windows and have simple animations on each of them, then the scrolling technique is a good tool. In particular, a single parent window can control all child windows. As a demonstration, you are going to develop a page for one parent with two child windows. Each child window incorporates some images and performs simple animations by using scrolling effects. The parent page (or window) has the following listing:
Example: ex08-18.htm - Window Scrolling II
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title> Window Scrolling II ex0818.htm </title></head>
6: <style>
7: .mSt{font-family:arial;font-size:18pt;font-weight:bold;color:#00ffff}
8: .bSt{background-color:#aaffaa;font-family:arial;font-weight:bold;
9: font-size:12pt;color:#ff0000;width:248px;height:30px}
10: </style>
11: <script>
12: window.resizeTo(440,340)
13:
14: function scrollL(lineLeft,lineDown)
15: {
16: lookSt="menubar=no,toolbar=no,location=no,status=no,scrollbars=yes,"+
17: "resizable=no"
18: winH=window.open("ex08-18a.htm","myWin1",lookSt)
19: winH.resizeTo(350,250)
20: winH.focus()
21: for (i=1;i<lineLeft;i++)
22: setTimeout("winH.scroll("+i+","+lineDown+")",400)
23: for (i=lineLeft;i > 1;i--)
24: setTimeout("winH.scroll("+i+","+lineDown+")",400)
25: }
26:
27: function scrollD(lineLeft,lineDown)
28: {
29: lookSt="menubar=no,toolbar=no,location=no,status=no,scrollbars=yes,"+
30: "resizable=no"
31: winH2=window.open("ex08-18b.htm","myWin2",lookSt)
32: winH2.resizeTo(350,250)
33: winH2.focus()
34: for (i=1;i<lineDown;i++)
35: setTimeout("winH2.scroll("+lineLeft+","+i+")",400)
36: for (i=lineDown;i > 1;i--)
37: setTimeout("winH2.scroll("+lineLeft+","+i+")",400)
38: }
39: </script>
40: <body style="background:#000088;text-align:center">
41: <div class="mSt">Image Transitions</div><br /><br /><br />
42: <input type="button" onclick="scrollL(350,1)"
43: value="(Window 1) Left & Right" class="bSt" /><br /><br />
44: <input type="button" onclick="scrollD(1,225)"
45: value="(Window 2) Up & Down" class="bSt" /><br /><br />
46: </body>
47: </html>
This main window has two buttons (lines 4245). The first button named "(Window 1)Left & Right" opens a child window and control the left and right motion. The second button controls the up and down movement. The script function scrollL() in lines 1425 is the power source. Inside this function, two for-loops (lines 2124) are used for the animations. By increasing the value of the variable i as in line 21, you will have motion moving toward the left. By decreasing the variable i as in line 23, you will have motion moving toward the right. The up and down animations are similar and listed in lines 2738. The body elements of the two child pages ex08-18a.htm and ex08-18b.htm are listed in ex08-04.txt and ex08-05.txt respectively. Listing ex08-04.txt - Code Fragment For ex08-18a.htm 1: <body> 2: <div class="mSt" style="position:absolute;left:1px;top:1px"> 3: <img src="s_04_img.jpg" alt="pic" /></div> 4: <div class="mSt" style="position:absolute;left:350px;top:1px"> 5: <img src="s_05_img.jpg" alt="pic" /></div> 6: </body> This page contains two images and arranges them horizontally with the CSS positioning method. The next page contains two vertical images. Some of the results are captured in Figs 8.25 and 8.26. Listing ex08-05.txt - Code Fragment For ex08-18b.htm 1: <body> 2: <div class="mSt" style="position:absolute;left:1px;top:1px"> 3: <img src="s_01_img.jpg" alt="pic" /></div> 4: <div class="mSt" style="position:absolute;left:1px;top:225px"> 5: <img src="s_06_img.jpg" alt="pic" /></div> 6: </body> Figure 8.25. Left and right motion
Figure 8.26. Up and down motion
8.4.3 Browser window interaction (an XHTML interpreter)Have you ever considered writing a Web page that can understand the XHTML language, CSS, and ECMAScript? With browser window interaction, i.e., sending data from one browser window to another, an XHTML interpreter can be developed with minimal effort. Sending data from one window to another requires the following steps:
In terms of ECMAScript, we have:
For simplicity, our XHTML interpreter is a Web page (ex08-19.htm) containing a simple interface to collect data (XHTML statements). This interface consists of two text boxes and one textarea. The text boxes are used to collect "Name" and "Email" address whereas the textarea is to collect the XHTML statements. The interface part of the page is listed as follows:
Example: ex08-19.htm - An XHTML Statement Interpreter (Part One)
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>An XHTML Interpreter ex0819.htm</title>
6: <style>
7: .mSt{font-family:arial;font-size:12pt;font-weight:bold}
8: .butSt{background-color:#aaffaa;font-family:arial;font-weight:bold;
9: font-size:12pt;color:#ff0000;width:270px;height:30px}
10: .areaSt{background-color:#aaffaa;font-family:arial;font-weight:bold;
11: font-size:12pt;color:#ff0000;width:550px;height:240px}
12: </style>
13: </head>
14: <body style="background:#000088;color:#ffff00">
15:
16: <div class="mSt">An XHTML Statement Interpreter<br /><br />
17: <table align="center">
18: <tr class="mSt"><td>Name:</td>
19: <td><input type="text" id="in1" name="in1" class="butSt"
20: value="John Smith" /></td></tr>
21: <tr class="mSt"><td>Email:</td>
22: <td><input type="text" id="in2" name="in2" class="butSt"
23: value="JohnSmith@isp.com" /></td></tr>
24: </table><br />
25: Please Enter XHTML In The Box:<br /><br />
26: </div>
27:
28: <div class="mSt" align="center">
29: <textarea class="areaSt" rows="12" cols="50" id="com1" name="com1">
30: </textarea><br /><br />
31: <input type="button" onclick="wPage()" value="Send Data" class="butSt" />
32: <input type="button" onclick="someSt()" value="Some Data" class="butSt" />
33: </div>
34:
The table defined in lines 1724 contains two text boxes and is a simple interface used to collect data Name and Email. The textarea in lines 2930 defines an area for the user to input XHTML statements. After the textarea, two buttons are defined. The first button "Send Data" (line 31) is used to send the XHTML statements to another browser window to be interpreted. The second button is used to create some testing data in the textarea. The programming part of this example is listed below:
Listing Continuation Of The Page ex08-19.htm (Part Two)
35: <script>
36: window.resizeTo(650,650)
37: var newH = false
38:
39: function someSt()
40: {
41: butMsg ='<div align="center">\nThis is an XHTML button<br \/>\n'+
42: '\t<input type="button" value="My Button" \/> <br \/><br \/>'
43: imgMsg='\nI know image too<br \/>\n'+
44: '<img src="logo_web.jpg" width="160" height="100" alt="pic" \/>'
45: scriptMsg='\n\n<br \/><br \/>Some ECMAScript<br \/>\n<script>\n\t'+
46: 'for(i=0;i<4;i++)\n\t document.write("Practical Web Technologies'+
47: '<br \/>")\n <\/script>\n<\/div>'
48: lMsg = butMsg + imgMsg + scriptMsg
49: document.getElementById("com1").value=lMsg
50: }
51:
52: function writeWindow(x)
53: {
54: bmSt='<body style="background:#000088;font-family:arial;'+
55: 'font-size:14pt;color:#ffff00;text-align:left>"'
56: emSt='</body>'
57: if (!newH)
58: {
59: newH=window.open()
60: newH.document.open()
61: newH.document.write(bmSt+x+emSt)
62: newH.document.close()
63: } else {
64: newH.document.open()
65: newH.document.write(bmSt+x+emSt)
66: newH.document.close()
67: }
68: }
69:
70: function wPage()
71: {
72: lMsg="<div>Name: "+document.getElementById("in1").value+"<br />"+
73: "Email: "+document.getElementById("in2").value+"<br /><br />"+
74: "Your Testing Result: <br />"+
75: "<img src='line1.gif' width='400' height='6' alt='pic' /><br /><br />"+
76: document.getElementById("com1").value+"</div>"
77: writeWindow(lMsg)
78: }
79: </script>
80: </body>
81: </html>
The wPage()function (lines 7079) is called when the user presses the Send Data button. This function collects Name, Email, and the data in the textarea. It then calls the writeWindow()function (lines 5268) which will open a new window and send the data as an XHTML document to that window. When the user presses the second button, Some Data, the function someSt()in lines 3950 is called. This function generates some default data including a button, an image, and some script statements for testing. Some screen shots are shown in Figs 8.27 and 8.28. Figure 8.27. ex08-19.htm
Figure 8.28. Some test results
8.4.4 Last modified property and printing a pageOne of the popular document properties on the Web is the "last modified" property. This property is a string containing date and time information to remember when the page was last modified. Many Web sites use this record as a reminder as to when the page should be updated. To display this property, all you need is the code <script> document.write(document.lastModified) </script> Consider the following example ex08-20.htm:
Example: ex08-20.htm - Last Modified Property
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title> Last Modified Property ex0820.htm </title></head>
6: <style>
7: .mSt{font-family:arial;font-size:18pt;font-weight:bold;color:#00ffff}
8: </style>
9:
10: <body style="background:#000088;text-align:center">
11: <div class="mSt" style="font-size:10pt;color:#ffff00;text-align:right">
12: Last Modified At:<br />
13: <script> document.write(document.lastModified) </script><br /><br />
14: </div>
15: <div class="mSt" >Practical Web Technologies<br />
16: This Page Has A Last Modified Date </div>
17: </body>
18: </html>
This page has the "last modified" date and time attached at the top right hand corner as indicated in lines 1114 (see Fig. 8.29). Figure 8.29. ex08-20.htm
Occasionally, you may want to control the printing of a page yourself. This is true particularly when you deal with multiple windows or a window with no menu bar available. The command to print is a method of the window object and can be activated by the coding <script> window.print() </script> This function calls the printing facilities of your system (operating system) and therefore is independent of the printing devices. To deal with multiple windows, the window.print() can be replaced by the window handle (e.g., newH.print()). Consider the following example:
Example: ex08-21.htm - Printing A Page
1: <?xml version="1.0" encoding="UTF8"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title> Printing A Page ex0821.htm </title></head>
6: <style>
7: .mSt{font-family:arial;font-size:18pt;font-weight:bold;color:#00ffff}
8: .bSt{background-color:#aaffaa;font-family:arial;font-weight:bold;
9: font-size:12pt;color:#ff0000;width:200px;height:30px}
10: </style>
11: <body style="background:#000088;text-align:center">
12:
13: <script>
14: window.resizeTo(400,360)
15: lookSt="menubar=no,toolbar=no,status=no,resizable=yes,"+
16: "scrollbars=yes,width=380,height=250"
17:
18: newH1=window.open("s_02_img.jpg","win1",lookSt)
19: newH2=window.open("s_06_img.jpg","win2",lookSt)
20: newH3=window.open("s_07_img.jpg","win3",lookSt)
21:
22: function imgPr(varL)
23: {
24: if (varL ==1) newH1.print()
25: if (varL ==2) newH2.print()
26: if (varL ==3) newH3.print()
27: }
28: </script>
29:
30: <div class="mSt">
31: Printing Control Page<br />Press The Button To Print<br /><br />
32: </div>
33: <input type="button" class="bSt" value="Peacock"
34: onclick="imgPr(1)" /><br />
35: <input type="button" class="bSt" value="Wild Duck"
36: onclick="imgPr(2)" /><br />
37: <input type="button" class="bSt" value="Eagle"
38: onclick="imgPr(3)" />
39: </body>
40: </html>
After the window format string defined in line 15, three child windows are opened. Each window has a picture inside and is associated with a window handle (lines 1820). These handles are used inside the print function imgPr() in lines 2227 to identify the picture and print. In this case, three buttons (lines 3338) are used to control the printing process. When the first button, Peacock, is pressed (Fig. 8.30), the function imgPr(1) is called. The argument 1 activates the first function newH1.print() in line 24. The standard print window appears as in Fig. 8.31. From this print window you can select your printer and other settings. When the Print button is pressed, the selected picture will be printed. Figure 8.30. ex08-21.htm
Figure 8.31. The print window
|
| Table of Contents | Previous Next |
