Java script frame window

Lecture 18 In this lecture, we will learn -> Validating Radio Button Validating Radio Button Selections A radio button, provide a set of options, out of which only one can be selected. Infact, there are lot of simillarities between radio button and check box. Except one dissimillarity, which is, check box provide a lot of options to be selected whereas you can only select one option with radio button. To know which option is selected, the following statement can be used document.name of the form.name of the button[i].checked, The above statement returns true if the button is selected otherwise false. The value of 'i' ranges from (0 to number_of_radio_buttons - 1 ). Let us take an example. <HTML> <HEAD> <TITLE> New Document </TITLE> <script language="JavaScript"> function validate() { number_of_radio_buttons=document.myForm.hobby.length; for (i=0;i<=number_of_radio_buttons-1;i++) { if (document.myForm.hobby[i].checked) { flag=1; you_selected=document.myForm.hobby[i].value; window.alert(you_selected); return true; } else flag=0; } if (flag==0) { window.alert("Error! You should select one of the options"); return false; } } </script>

</HEAD> <BODY> My hobbies are <form method="get" action="display.asp" name="myForm" onSubmit="return validate()"> <input type="radio" name="hobby" value="soccer"> Soccer <br> <input type="radio" name="hobby" value="read"> Reading <br> <input type="radio" name="hobby" value="music"> Listening Music <br> <input type="radio" name="hobby" value="travel"> Travelling <br> <input type="submit" value="Validate"> </form> </BODY> </HTML> Let us summarize, what we have learned by the above program 1. To know the number of radio buttons: document.name of form.name of radio button.length 2. To know index of radio button selected: document.name of form.name of radio button[i].selected 3. To know the value of radio button selected: document.name of form.name of radio button[i].value Using the Window Object We will discuss more about the Window object. We have been already using the Window object before. Some of the features of Window object are 1. Creating Alert Dialog Boxes: window.alert() 2. Creating Confirmation Dialog Boxes: window.confirm() 3. Creating Dialog Boxes to get: window.prompt() information from the user. 4. Opening Pages in new window: window.open() 5. Determining window size 6. Controlling scrolling of the document displayed in window 7. Scheduling the execution of function: window.setTimeout() So, we have done all this before. This is all we have to learn about window object.

Open a Full Screen window The following is the code to open a full screen window <HTML> <HEAD> <TITLE> New Document </TITLE> <script language="JavaScript"> function showWindow() { window.open("","myNewWindow","fullScreen=yes"); } </script> </HEAD> <BODY> <a href="a.html" onMouseOver="showWindow()" >Click1</a> </BODY> </HTML> Handling the Parent-Child Relationship of Windows When the window.open() method is used to open a new window from JavaScript, a relationship exist between the original window and new window so that it is possible to refer to both the windows from within JavaScript. Well, to refer to the child window, simply do this var newWindow=window.open(“URL”,window name); Now you can refer to the new window, by newWindow. Let us take an example <HTML> <HEAD> <TITLE> New Document </TITLE> <script language="JavaScript"> function showWindow() { myNewWindow=window.open("","myNewWindow"); } function closeWindow()

{ myNewWindow.close(); } function closeThisWindow() { window.close(); } </script> </HEAD> <BODY> <a href="" onMouseOver="showWindow()" >Take the Mouse here to open a New window</a> <br> <a href="" onMouseOver='closeWindow()' >Take the Mouse here to close the Opened Window</a><br> <a href="" onMouseOver="closeThisWindow()">Take the Mouse here to close this Window</a> </BODY> </HTML> Let us take another example, where you will open a new window. The new window have the option for closing the parent window. <HTML> <HEAD> <TITLE> New Document </TITLE> <script language="JavaScript"> function showWindow() { myNewWindow=window.open("a.html","myNewWindow"); } function closeWindow() { myNewWindow.close(); } function closeThisWindow() { window.close(); } </script> </HEAD> <BODY> <a href="" onMouseOver="showWindow()" >Take the Mouse here to open

a New window</a> <br> </BODY> </HTML> Here is the code for a.html <HTML> <HEAD> <TITLE> New Document </TITLE> <script language="JavaScript"> function closeOriginalWindow() { window.opener.close(); } </script> </HEAD> <BODY> <a href="" onMouseOver="closeOriginalWindow()">close the original Window</a> </BODY> </HTML> Writing into New Window Below is the code, to write into new Window <HTML> <HEAD> <TITLE> New Document </TITLE> <script language="JavaScript"> function showWindow() { myNewWindow=window.open("","myNewWindow","width=200, height=200, left=20, top=50"); myNewWindow.document.open(); myNewWindow.document.write("Take your mouse here to open new window"); myNewWindow.document.close(); } function closeWindow() { myNewWindow.close();

} function closeThisWindow() { window.close(); } </script> </HEAD> <BODY> <a href="" onMouseOver="showWindow()" >Take the Mouse here to open a New window</a> <br> </BODY> </HTML> Referring Frames In JavaScript If there are two frames on one page, name of left frame is frame1, and name of right frame is frame2, Then frame1 can be referred in JavaScript as parent.frame1 and similarly, frame2 can be referred as paraent.frame2. Let us take an example, first make frameset.html, which contains two frames, frame1 and frame2. <frameset cols=”50%,50%”> <frame name=”frame1” src=”frame1.html”> <frame name=”frame2” src=”frame2.html”> </framesest> Here is the code for frame1.html <HTML> <HEAD> <TITLE> New Document </TITLE> <script language="JavaScript"> function writeFrame2() { parent.frame2.document.open(); parent.frame2.document.write(document.forms[0].f1text.value); parent.frame2.document.close(); } </script> </HEAD> <BODY>

<form> <input type="text" name="f1text"> <input type="button" value="Write this to Frame 2" onClick="writeFrame2()"> <form> </BODY> </HTML> To understand more about Frame object, Let me compare Frame object with Window object. In the previous topic, we saw that, window can use the document object, for ex. window.document.open(), Simmilarly, we can say frame.document.open(), and then can write into the frame, as you can see in the abov example. Infact we can use all the functions provided by the document object. So, the moral of the story is "Frame object contain a document object". Let us take another simple example This is the code for frameset.html <frameset cols=”50%,50%”> <frame name=”frame1” src=”frame1.html”> <frame name=”frame2” src=””> </framesest> Notice that, source for frame2 doesnot exist Below is the code for frame1.html <HTML> <HEAD> <TITLE> New Document </TITLE> <script language="JavaScript"> function writeFrame2() { parent.frame2.document.location=document.forms[0].f1text.value; } </script> </HEAD> <BODY> <form> Give the name of HTML file to open in Frame2 <input type="text" name="f1text"> <input type="button" value="Open File in Frame 2" onClick="writeFrame2()"> <form> </BODY> </HTML>

If Frames have no name, they can still be referred, like we referred forms. You guessed it right, first frame is frames[0], second frame is frames[1], and so on. So we can refer to first frame as parent.frames[0]. Using Frames to Store Pseudo-Persistent Data When you are working with frames, it is sometimes useful to be able to store information in JavaScript variables in such a way that the variable is available to both the frames. <frameset cols=”50%,50%”> <frame name=”frame1” src=”frame1.html”> <frame name=”frame2” src=””> </framesest> In the above code, there are three documents. 1. Frame set document. 2. document present in frame1. 3. document present in frame2. Actually frameset document, contains within itself two more documents, (document of frame1) and (document in frame2 ). If you create any variable in document of frame1, it will not be accessible to document of frame 2. Simmilarly, if you create a variable in document of frame 2, it will not be accessible to document of frame1. So, you can create a variable in frameset document, which will be accessible to both frame 1 and frame 2. So, now create a variable in frameset.html, Below is the code for frameset.html <script language="JavaScript"> var pVariable="This is a persistent value" </script> <frameset cols=”50%,50%”> <frame name=”frame1” src=”frame1.html”> <frame name=”frame2” src=”frame2.html”> </framesest> Below is the code for frame1.html <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD>

<BODY> This is frame 1 <br> <script language="JavaScript"> document.write("The value of persistent variable is "+parent.pVariable); </script> </BODY> </HTML> Below is the code for frame2.html <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> This is frame 2 <br> <script language="JavaScript"> document.write("The value of persistent variable is "+parent.pVariable); </script> </BODY> </HTML>

Java script frame window

More Related Content

What's hot

Viewers also liked

Similar to Java script frame window

More from H K

Recently uploaded

Java script frame window