|
Subject:
|
Open new window with content
|
|
Posted By:
|
blkskullwork
|
Post Date:
|
1/19/2007 1:52:45 PM
|
Is it possible to open a new window and then add a button and a text box, if so how?
Thanks
|
|
Reply By:
|
vinod_yadav1919
|
Reply Date:
|
1/22/2007 3:15:34 AM
|
Hii blkskullwork!!!
<script>
newwin=window.open("","newwindow");
newwin.document.write("<input type=text name='fname'>")
newwin.document.write("<input type=button name='mybutton' value='mybuttonname'>")
</script>
Hope this will help you
Cheers :)
vinod
|
|
Reply By:
|
blkskullwork
|
Reply Date:
|
1/22/2007 11:08:00 AM
|
Thanks very much vinod, I'll give this a try.
|
|
Reply By:
|
blkskullwork
|
Reply Date:
|
1/23/2007 1:50:52 PM
|
Well that worked great but now I've run into another problem. I'm trying to enter text into a textbox in the original window and when I click a button have that text entered in the textbox of the new window I just opened. I keep getting the following error : 'newwin.document.txt2' is null or not an object
here is my code
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>
</TITLE>
<META NAME="Generator" CONTENT="TextPad 4.4">
<META NAME="Author" CONTENT="?">
<META NAME="Keywords" CONTENT="?">
<META NAME="Description" CONTENT="?">
<script type="text/javascript" src="Final Exam Question 7A and 7B.js"></script>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#FF00FF" BACKGROUND="?">
<HR>
<table align="center">
<form name="f1">
<tr><td>
<ol>
<li>Select a file
<ul>
<li>YOU WILL NEED TO CREATE THOSE FILES
<li>the file names on the buttons below indicate what the files initial background colours should be.
</ul>
<li>Select its location on the screen
<li>Press the open window button.
<ul>
<li>The file should open in a window that is 200 by 200 with no tools.
</ul>
<li>Once open the user can then
<UL>
<LI>close the window using the same button they used to open it (the label
should then say close window)
<LI>change the background colour of that page.
<li>While open the small window should ALWAYS stay on top of the big window
</UL>
</ol>
<br>
<center>
<BR><font color="green" size="5">Part 7b </font>
<br>5 marks
</center>
<ul>
<LI>enter text in the input box and press a button to display it in a text box in the page being displayed in the new window and its status bar
<li>the buttons should not be clickable until the new window is open.
<LI>enter text in the input box of the page in the new window and press a button(on that page) to display text the window status bar of this big window
</ul>
</td></tr>
</table>
<BR>
<TABLE width="90%" border=1>
<TBODY>
<TR>
<TH>file
<TH>location
<TR>
<TD width="50%">
<INPUT type=button name="colour_butt1" value="red.htm" onClick="file_name='red.htm'">
<BR><INPUT type=button name="colour_butt2" value=blue.htm onClick="file_name='blue.htm'">
<BR><INPUT type=button name="colour_butt3" value=green.htm onClick="file_name='green.htm'">
<BR><INPUT type=button name="colour_butt4" value=yellow.htm onClick="file_name='yellow.htm'">
</TD>
<TD width="50%">
<INPUT type="button" value="top left" onClick="sel_loc='top left'">
<BR><INPUT type=button value="bottom left" onClick="sel_loc='bottom left'">
<BR><INPUT type=button value="top right" onClick="sel_loc='top right'">
<BR><INPUT type=button value="bottom right" onClick="sel_loc='bottom right'">
</TD>
</TR>
<TR>
<TD align=middle colSpan=2>
<INPUT type=button value="open window" name=butt1 onClick="win_open()">
</TD>
</TR>
<TR>
<TD width="50%">
<CENTER>background colour</CENTER>
<INPUT type=button value=gold onClick="newwin.focus(), newwin.document.bgColor='gold'">
<BR><INPUT type=button value=purple onClick="newwin.focus(), newwin.document.bgColor='purple'">
<BR><INPUT type=button value=orange onClick="newwin.focus(), newwin.document.bgColor='orange'">
<BR><INPUT type=button value=white onClick="newwin.focus(), newwin.document.bgColor='white'"><BR>
</TD>
<TD width="50%">
<INPUT type=input name=txt1>
<BR><INPUT type=button value="text in new windows' text box" onClick="txtntxt()">
<BR><INPUT type=button value="text in new windows' status bar" onClick="txtnstatus()">
<BR><BR>also check if the field is not filled when a button is pushed
</TD>
</TR>
</TBODY>
</form>
</TABLE>
</BODY>
</HTML>
Javascript:
alert("Starting script")
var file_name,win_loc,loc_left,loc_top,scr_height,scr_width,sel_loc;
function win_open()
{
if (document.f1.butt1.value == "Close Window")
{
newwin.window.close()
document.f1.butt1.value="open window";
return false
}
else
{
document.f1.butt1.value="Close Window";
}
scr_height=screen.height
scr_width=screen.width
if (sel_loc=="top left")
{
loc_top="0"
loc_left=(scr_width-scr_width)
}
if (sel_loc=="bottom left")
{
loc_top=(scr_height-200)
loc_left=(scr_width-scr_width)
}
if (sel_loc=="top right")
{
loc_top="0"
loc_left=(scr_width-200)
}
if (sel_loc=="bottom right")
{
loc_top=(scr_height-200)
loc_left=(scr_width-200)
}
win_loc=(",top="+loc_top+",left="+loc_left)
newwin=window.open("","newwin","width=200,height=200"+win_loc)
newwin.document.write("<input type=text name='txt2'>")
newwin.document.write("<input type=button name='mybutton' value='mybuttonname'>")
if (file_name=="red.htm")
{
newwin.document.bgColor="red"
}
if (file_name=="blue.htm")
{
newwin.document.bgColor="blue"
}
if (file_name=="green.htm")
{
newwin.document.bgColor="green"
}
if (file_name=="yellow.htm")
{
newwin.document.bgColor="yellow"
}
newwin.focus
}
var text_in
function txtntxt()
{
text_in=document.f1.txt1.value
newwin.document.txt2.value=text_in
}
|
|
Reply By:
|
vinod_yadav1919
|
Reply Date:
|
1/24/2007 1:45:49 AM
|
Hiii blkskullwork!!
following are the changes
//0**New Code For newwin to hold the window object used to open
//1**New Code For Form
//2**New Code For Form
//3**New Code For Form childForm is added
also put ur <script type="text/javascript" src="Final Exam Question 7A and 7B.js"></script> ,
since i dont have that file , i have removed the code for it in ur original File :)
Hope this will help you
*********original html file start**************
<HTML>
<HEAD>
<TITLE>
</TITLE>
<META NAME="Generator" CONTENT="TextPad 4.4">
<META NAME="Author" CONTENT="?">
<META NAME="Keywords" CONTENT="?">
<META NAME="Description" CONTENT="?">
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#FF00FF" BACKGROUND="?">
<HR>
<table align="center">
<form name="f1">
<tr><td>
<ol>
<li>Select a file
<ul>
<li>YOU WILL NEED TO CREATE THOSE FILES
<li>the file names on the buttons below indicate what the files initial background colours should be.
</ul>
<li>Select its location on the screen
<li>Press the open window button.
<ul>
<li>The file should open in a window that is 200 by 200 with no tools.
</ul>
<li>Once open the user can then
<UL>
<LI>close the window using the same button they used to open it (the label
should then say close window)
<LI>change the background colour of that page.
<li>While open the small window should ALWAYS stay on top of the big window
</UL>
</ol>
<br>
<center>
<BR><font color="green" size="5">Part 7b </font>
<br>5 marks
</center>
<ul>
<LI>enter text in the input box and press a button to display it in a text box in the page being displayed in the new window and its status bar
<li>the buttons should not be clickable until the new window is open.
<LI>enter text in the input box of the page in the new window and press a button(on that page) to display text the window status bar of this big window
</ul>
</td></tr>
</table>
<BR>
<TABLE width="90%" border=1>
<TBODY>
<TR>
<TH>file
<TH>location
<TR>
<TD width="50%">
<INPUT type=button name="colour_butt1" value="red.htm" onClick="file_name='red.htm'">
<BR><INPUT type=button name="colour_butt2" value=blue.htm onClick="file_name='blue.htm'">
<BR><INPUT type=button name="colour_butt3" value=green.htm onClick="file_name='green.htm'">
<BR><INPUT type=button name="colour_butt4" value=yellow.htm onClick="file_name='yellow.htm'">
</TD>
<TD width="50%">
<INPUT type="button" value="top left" onClick="sel_loc='top left'">
<BR><INPUT type=button value="bottom left" onClick="sel_loc='bottom left'">
<BR><INPUT type=button value="top right" onClick="sel_loc='top right'">
<BR><INPUT type=button value="bottom right" onClick="sel_loc='bottom right'">
</TD>
</TR>
<TR>
<TD align=middle colSpan=2>
<INPUT type=button value="open window" name=butt1 onClick="win_open()">
</TD>
</TR>
<TR>
<TD width="50%">
<CENTER>background colour</CENTER>
<INPUT type=button value=gold onClick="newwin.focus(), newwin.document.bgColor='gold'">
<BR><INPUT type=button value=purple onClick="newwin.focus(), newwin.document.bgColor='purple'">
<BR><INPUT type=button value=orange onClick="newwin.focus(), newwin.document.bgColor='orange'">
<BR><INPUT type=button value=white onClick="newwin.focus(), newwin.document.bgColor='white'"><BR>
</TD>
<TD width="50%">
<INPUT type=input name=txt1>
<BR><INPUT type=button value="text in new windows' text box" onClick="txtntxt()">
<BR><INPUT type=button value="text in new windows' status bar" onClick="txtnstatus()">
<BR><BR>also check if the field is not filled when a button is pushed
</TD>
</TR>
</TBODY>
</form>
</TABLE>
</BODY>
</HTML>
<script>
alert("Starting script")
//0**New Code For newwin to hold the window object used to open
var newwin;
var file_name,win_loc,loc_left,loc_top,scr_height,scr_width,sel_loc;
function win_open()
{
if (document.f1.butt1.value == "Close Window")
{
newwin.window.close()
document.f1.butt1.value="open window";
return false
}
else
{
document.f1.butt1.value="Close Window";
}
scr_height=screen.height
scr_width=screen.width
if (sel_loc=="top left")
{
loc_top="0"
loc_left=(scr_width-scr_width)
}
if (sel_loc=="bottom left")
{
loc_top=(scr_height-200)
loc_left=(scr_width-scr_width)
}
if (sel_loc=="top right")
{
loc_top="0"
loc_left=(scr_width-200)
}
if (sel_loc=="bottom right")
{
loc_top=(scr_height-200)
loc_left=(scr_width-200)
}
win_loc=(",top="+loc_top+",left="+loc_left)
newwin=window.open("","newwin","width=200,height=200"+win_loc)
//1**New Code For Form
newwin.document.write("<form name='childForm'>")
newwin.document.write("<input type=text name='txt2'>")
newwin.document.write("<input type=button name='mybutton' value='mybuttonname'>")
//2**New Code For Form
newwin.document.write("<\/form>")
if (file_name=="red.htm")
{
newwin.document.bgColor="red"
}
if (file_name=="blue.htm")
{
newwin.document.bgColor="blue"
}
if (file_name=="green.htm")
{
newwin.document.bgColor="green"
}
if (file_name=="yellow.htm")
{
newwin.document.bgColor="yellow"
}
newwin.focus
}
var text_in
function txtntxt()
{
text_in=document.f1.txt1.value
//3**New Code For Form childForm is added
newwin.document.childForm.txt2.value=text_in
}
</script>
*********original html file End**************
Cheers :)
vinod
|
|
Reply By:
|
blkskullwork
|
Reply Date:
|
1/24/2007 11:50:18 AM
|
Thanks very much vinod, that worked perfectly. From what I understand I was missing the variable declaration for newwin and I also had to create a form in order for it to work. Thanks again for your help.
|
