Forum Moderators: open
I am trying to make a print preview of a webpage using javascript. I have 2 css style sheets, one for print and one for screen. What I want to do is to show a preview of the printable version when the user clicks on a "printable version" link. I want to open a new window and have the preview of the printable version in it, but I don't know how to do that. I know that someone else was trying to do the same thing and was able to do it, but somehow when I try the same code it doesn't work for me. Here is the link to the post in which someone did the same thing:
[webmasterworld.com...] . I was wondering if someone can help me with this.
Thanks,
Sunny
[edited by: jatar_k at 11:45 pm (utc) on Aug. 29, 2005]
[edit reason] fixed link [/edit]
Sunny
Using a script to append a style sheet to the document in the window should allow you to reuse the same page while changing the layout.
Thanks,
Sunny
Contents of tst_378_sty.css:
p{font-size:1em;}
Contents of main file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
p{font:3em Verdana,sans-serif;}
</style>
<script type="text/javascript">
function winBuild(){
newWin=window.open('tst_378.htm','','height=300,width=400');
tOut=setTimeout(appSty,2);
}
function appSty(){
var win_style=newWin.document.createElement('link');
win_style.href="tst_378_sty.css";
win_style.rel="stylesheet";
win_style.type="text/css";
newWin.document.getElementsByTagName('head')[0].appendChild(win_style);
newWin.focus();
}
</script>
</head>
<body>
<p onclick="winBuild();">
TEXT
</p>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
p{font:3em Verdana,sans-serif;}
</style>
<script type="text/javascript">
if(self.opener){
window.onload=opener.appSty;
}
function winBuild(){
newWin=window.open('tst_378.htm','','height=300,width=400,top=200,left=300');
}
function appSty(){
var win_style=newWin.document.createElement('link');
win_style.href="tst_378_sty.css";
win_style.rel="stylesheet";
win_style.type="text/css";
newWin.document.getElementsByTagName('head')[0].appendChild(win_style);
newWin.focus();
}
</script>
</head>
<body>
<p onclick="winBuild();">
TEXT
</p>
</body>
</html>
cheers,
Sunny
Everything works great, one small problem though, when the style is applied to the new window there is a delay before the style sheet is switched so I see the original style sheet for a while before it switches to the next one. Any ideas on why this is happening?
Thanks,
Sunny
Thanks,
Sunny
Thanks for all your help!
Sunny
body{display:none;}
in conjunction with a script like:
window.onload=function(){
// code to modify styles if this is a child window
document.body.style.display='block';
}
What that might successfully accomplish is not having to use display:none as the default on the original page, thereby not delaying the initial page display.
tst_378.htm:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
p{font:3em Verdana,sans-serif;}
</style>
<script type="text/javascript">
if(self.opener){
window.onload=appSty;
}
function winBuild(){
newWin=window.open('tst_378.htm','','height=300,width=400,top=200,left=300');
}
function appSty(){
var win_style=document.createElement('link');
win_style.href="tst_378_sty.css";
win_style.rel="stylesheet";
win_style.type="text/css";
document.getElementsByTagName('head')[0].appendChild(win_style);
self.focus();
}
</script>
</head>
<body>
<script type="text/javascript">
if(self.opener){
var bod_disp=document.createElement('style')
var sty_txt=document.createTextNode('body{display:none;}');
bod_disp.appendChild(sty_txt);
document.getElementsByTagName('head')[0].appendChild(bod_disp);
}
</script>
<p onclick="winBuild();">
TEXT
</p>
</body>
</html>
tst_378_sty.css:
p{font-size:1em;}
body{display:block;}
tst_378_b.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
p{font:3em Verdana,sans-serif;}
</style>
<script type="text/javascript">
function winBuild(){
newWin=window.open('tst_378_b.htm','','height=300,width=400,top=200,left=300');
}
</script>
</head>
<body>
<script type="text/javascript">
if(self.opener){
var win_style=document.createElement('link');
win_style.href="tst_378_sty_b.css";
win_style.rel="stylesheet";
win_style.type="text/css";
document.getElementsByTagName('head')[0].appendChild(win_style);
self.focus();
}
</script>
<p onclick="winBuild();">
TEXT
</p>
</body>
</html>
tst_378_sty_b.css:
p{font-size:1em;}
