Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


Tip of the Day
Language: Web
Expertise: Beginner
Sep 8, 1999

Create Preview Windows in HTML Pages

Here is a simple way to provide preview window functionality in your Web pages. The idea is to have some kind of text area on the HTML page where user can key in the data that needs to be previewed before printing or submitting the request to the Web server. Function ShowPreview() in the following code creates a new instance of the browser window and stuffs data from the text area which is embedded in the <FORM> object. This method can be easily extended to provide more features in the preview window.
 
<HTML>
<HEAD><TITLE>How to create Preview Window:</TITLE></HEAD>
<BODY>
<FORM action="" method=POST name="SampleForm"><BR>
<INPUT TYPE=BUTTON VALUE="Preview" ONCLICK="javascript:ShowPreview()"
id=PreviewButton name=PreviewButton>
<TEXTAREA NAME=MessageText ROWS=10 COLS=45 WRAP=VIRTUAL></TEXTAREA>
</FORM>

<SCRIPT language="JavaScript">
function ShowPreview()
{
 var hWndPreviewWindow =
window.open("","Preview","width=400,height=250,scrollbars=yes,resizable=yes,
status=0");

    hWndPreviewWindow.document.open();
    hWndPreviewWindow.document.writeln('<HTML><HEAD><TITLE>Your Preview
Window</TITLE></HEAD>');
    hWndPreviewWindow.document.writeln('<BODY BGCOLOR="lightyellow">');
    hWndPreviewWindow.document.writeln('<B>Here is your text</B>');
    hWndPreviewWindow.document.writeln('<A
HREF="javascript:window.close()">Close Preview</A><BR>');

hWndPreviewWindow.document.writeln(document.SampleForm.MessageText.value);
    hWndPreviewWindow.document.writeln('</BODY></HTML>');
    hWndPreviewWindow.document.close();
}
</SCRIPT>
</BODY>
</HTML>
Deepak Pant
 
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date