/    Sign up×
Community /Pin to ProfileBookmark

How to open new "window" on same page?

Copy linkTweet thisAlerts:
Nov 26.2004

I have a javascript to let you see a preview of text entered in a textarea. It opens a new window showning the preview. What I would like to do is have the preview displayed on the same page instead of opening a new window, sort of the way the preview feature works on this forum. Here’s the script I use.

[code=php]
<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>Preview Message</TITLE></HEAD>’);

hWndPreviewWindow.document.writeln(‘<BODY BGCOLOR=”lightyellow”>’);
hWndPreviewWindow.document.writeln(‘<B>This is how your post will look</B>’);
hWndPreviewWindow.document.writeln(‘<A HREF=”javascript:window.close()”>Close Preview</A><BR><BR><BR>’);

var Cont = document.msgform.message.value;
Cont = Cont.replace(/[B]/ig,'<b>’)
Cont = Cont.replace(/[/B]/ig,'</b>’)
Cont = Cont.replace(/[I]/ig,'<i>’)
Cont = Cont.replace(/[/I]/ig,'</i>’)
Cont = Cont.replace(/[U]/ig,'<U>’)
Cont = Cont.replace(/[/U]/ig,'</U>’)
Cont = Cont.replace(/\n/ig,'<br />’)

hWndPreviewWindow.document.writeln(Cont);
hWndPreviewWindow.document.writeln(‘</BODY></HTML>’);
hWndPreviewWindow.document.close();
}

</SCRIPT>
[/code]

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@CharlesNov 26.2004 — Write to an IFRAME. It's simple, requires little change from what you have and it will keep errors from trickling down the rest of the page.
Copy linkTweet thisAlerts:
@wvmltauthorNov 26.2004 — How do I write it to an IFRAME?
Copy linkTweet thisAlerts:
@Warren86Nov 26.2004 — <HTML>

<Head>

<Script Language=JavaScript>

var Cont = "Sample text for Cont";

function dispPreview(){

previewPane.style.display = "";
Cont = document.msgform.message.value;
Cont = Cont.replace(/[B]/ig,'<b>')
Cont = Cont.replace(/[/B]/ig,'</b>')
Cont = Cont.replace(/[I]/ig,'<i>')
Cont = Cont.replace(/[/I]/ig,'</i>')
Cont = Cont.replace(/[U]/ig,'<U>')
Cont = Cont.replace(/[/U]/ig,'</U>')
Cont = Cont.replace(/n/ig,'<br />')
Cont = "<center>This is how your post will look</center><br>"+Cont;
previewPane.innerHTML = Cont;
prevBtn.disabled = true;
clearBtn.disabled = false;
Cont = "";

}

function clearPreview(){

previewPane.innerHTML = "";
previewPane.style.display = "none";
prevBtn.disabled = false;
clearBtn.disabled = true;

}

window.onload=function(){previewPane.style.display="none";clearBtn.disabled=true}

</Script>

</Head>

<Body>

<Table cellpadding='3' style='position:absolute;top:50px;left:300px'>

<TR>

<TD colspan='2'><Div id='previewPane' style='width:400px;height:250px;overflow:auto;border:solid black 1px;background-color:lightyellow;padding-left:10px;padding-top:10px;padding-right:10px;padding-left:10px'></TD>

</Div>

<TR>

<TD align='right' width='59%'><input type=button id='prevBtn' value="Display Preview" onclick="dispPreview()"></TD>

<TD align='left' ><input type=button id='clearBtn' value="Clear" onclick="clearPreview()"></TD>

</TR>

</Table>

</Body>

</HTML>
×

Success!

Help @wvmlt spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...