lala74
asked on
Printing the contents of a screen having horizontal scrollbar
Hi,
I have a requirement in which I have to hard print the contents of a screen that has a horizontal scroll bar.
I have the contents in the screen present inside <DIV> tags. The problem is the contents of the page are not printing beyond the first page. The same problem does not arise for vertical scroll bars.
The sample HTML file that can be used to simulate this problem is as follows.
Can anybody please let me know if I am missing out something here or if there is any other way to achieve this.
------------------------
<HTML>
<HEAD>
<TITLE> Print Document </TITLE>
<iframe ID="hiddenFrame" NAME="pri" WIDTH="0" HEIGHT="0"></iframe>
<SCRIPT LANGUAGE="JavaScript">
function onPrint() {
var newarray = document.getElementsByTagN ame("DIV") ;
var divVar;
var i = 0;
for (i=0; i < newarray.length; i++)
{
divVar = newarray.item(i);
divVar.style.overflowX = "scroll";
divVar.style.overflowY = "scroll";
}
var printReadyElem = document.getElementById("p rintReady" );
if (printReadyElem != null)
{
document.hiddenFrame.docum ent.body.i nnerHTML=d ocument.ge tElementBy Id("printR eady").inn erHTML;
}
hiddenFrame.focus();
hiddenFrame.print();
}
</SCRIPT>
</HEAD>
<BODY>
<DIV ID="printReady" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: auto; PADDING-TOP: 0px; WIDTH: 500px; HEIGHT: 230px">
<TABLE width="100%" cellpadding="3" cellspacing="2" border="0" >
<tr height="30">
<td nowrap>Product</td>
<td nowrap>Product Type</td>
<td nowrap>Service Type</td>
<td nowrap>Product Category</td>
<td nowrap>Location Type</td>
<td nowrap>Tradable</td>
<td nowrap>Scalable</td>
<td nowrap>Transferable</td>
<td nowrap>Unit</td>
<td nowrap>Effective Start Date</td>
<td nowrap>Effective End Date</td>
<td nowrap>Timestamp</td>
<td nowrap>User ID</td>
<td nowrap>Remarks</td>
</tr>
</TABLE>
</DIV>
<input type="BUTTON" value="Print" onClick="onPrint();" name="Print"></input>
</BODY>
</HTML>
------------------------
Thanks in advance
Lala
I have a requirement in which I have to hard print the contents of a screen that has a horizontal scroll bar.
I have the contents in the screen present inside <DIV> tags. The problem is the contents of the page are not printing beyond the first page. The same problem does not arise for vertical scroll bars.
The sample HTML file that can be used to simulate this problem is as follows.
Can anybody please let me know if I am missing out something here or if there is any other way to achieve this.
------------------------
<HTML>
<HEAD>
<TITLE> Print Document </TITLE>
<iframe ID="hiddenFrame" NAME="pri" WIDTH="0" HEIGHT="0"></iframe>
<SCRIPT LANGUAGE="JavaScript">
function onPrint() {
var newarray = document.getElementsByTagN
var divVar;
var i = 0;
for (i=0; i < newarray.length; i++)
{
divVar = newarray.item(i);
divVar.style.overflowX = "scroll";
divVar.style.overflowY = "scroll";
}
var printReadyElem = document.getElementById("p
if (printReadyElem != null)
{
document.hiddenFrame.docum
}
hiddenFrame.focus();
hiddenFrame.print();
}
</SCRIPT>
</HEAD>
<BODY>
<DIV ID="printReady" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: auto; PADDING-TOP: 0px; WIDTH: 500px; HEIGHT: 230px">
<TABLE width="100%" cellpadding="3" cellspacing="2" border="0" >
<tr height="30">
<td nowrap>Product</td>
<td nowrap>Product Type</td>
<td nowrap>Service Type</td>
<td nowrap>Product Category</td>
<td nowrap>Location Type</td>
<td nowrap>Tradable</td>
<td nowrap>Scalable</td>
<td nowrap>Transferable</td>
<td nowrap>Unit</td>
<td nowrap>Effective Start Date</td>
<td nowrap>Effective End Date</td>
<td nowrap>Timestamp</td>
<td nowrap>User ID</td>
<td nowrap>Remarks</td>
</tr>
</TABLE>
</DIV>
<input type="BUTTON" value="Print" onClick="onPrint();" name="Print"></input>
</BODY>
</HTML>
------------------------
Thanks in advance
Lala
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for the inputs folks. Will test this and confirm.
lala
a week has past since your last comment.
please feel free to ask any thing that isnt clear to you
and ill help you as much as i can.
or close the question.
Nushi.
a week has past since your last comment.
please feel free to ask any thing that isnt clear to you
and ill help you as much as i can.
or close the question.
Nushi.
ASKER
Nushi.
Sorry for being out of touch.
Your inputs gave me some idea but not solving my problem. I am still on it. Will update you as soon as I find a solution.
Thanks,
Lala
Sorry for being out of touch.
Your inputs gave me some idea but not solving my problem. I am still on it. Will update you as soon as I find a solution.
Thanks,
Lala
does using CSS isnt good for you?
do you wish to print the page as landscape?
Nushi.
do you wish to print the page as landscape?
Nushi.
ASKER
Hi Nushi, jaysolomon
Thanks very much for your valuable inputs. However this is not solving my problem.
Printing in landscape is not an option for me as the number of columns that I have might go beyond even a landscape-printed page. I am now now thinking to use (subject to my client's approval) the "zoom" style property in the @media print tag that will print the contents of the page in a single page. For each of the page that has to be printed I will have to find out the best fit zoom value use it in the @mdeia print tag. The code will look something like
@media print{
BODY{
width:500px;
zoom:80%
}
}
The disadvantage in this approach is different pages will have different zoom values as they contain different amount of data. Hence the print outs will come in different font sizes. Our client might not accept this.
Though the problem was not solved, I have got some valuable input from both of you. Hence am sharing the point to both of you.
Cheers
Thanks very much for your valuable inputs. However this is not solving my problem.
Printing in landscape is not an option for me as the number of columns that I have might go beyond even a landscape-printed page. I am now now thinking to use (subject to my client's approval) the "zoom" style property in the @media print tag that will print the contents of the page in a single page. For each of the page that has to be printed I will have to find out the best fit zoom value use it in the @mdeia print tag. The code will look something like
@media print{
BODY{
width:500px;
zoom:80%
}
}
The disadvantage in this approach is different pages will have different zoom values as they contain different amount of data. Hence the print outs will come in different font sizes. Our client might not accept this.
Though the problem was not solved, I have got some valuable input from both of you. Hence am sharing the point to both of you.
Cheers
try this out.
its a nice thing i found which might help you.
<HTML XMLNS:IE>
<HEAD>
<?IMPORT NAMESPACE="IE" IMPLEMENTATION="#default">
<STYLE TYPE="text/css">
.contentstyle
{
width:5.5in;
height:8in;
margin:1in;
background:white;
border:1 dashed gray;
}
.masterstyle
{
width:8.5in;
height:11in;
background:#FFFF99;
border-left:1 solid black;
border-top:1 solid black;
border-right:4 solid black;
border-bottom:4 solid black;
margin:10px;
}
</STYLE>
</HEAD>
<BODY>
<IE:DEVICERECT ID="page1" CLASS="masterstyle" MEDIA="print">
<IE:LAYOUTRECT ID="layoutrect1" CONTENTSRC="2.html" CLASS="contentstyle" NEXTRECT="layoutrect2"/>
</IE:DEVICERECT>
<IE:DEVICERECT ID="page2" CLASS="masterstyle" MEDIA="print">
<IE:LAYOUTRECT ID="layoutrect2" CLASS="contentstyle"/>
</IE:DEVICERECT>
</BODY>
</HTML>
Nushi.
its a nice thing i found which might help you.
<HTML XMLNS:IE>
<HEAD>
<?IMPORT NAMESPACE="IE" IMPLEMENTATION="#default">
<STYLE TYPE="text/css">
.contentstyle
{
width:5.5in;
height:8in;
margin:1in;
background:white;
border:1 dashed gray;
}
.masterstyle
{
width:8.5in;
height:11in;
background:#FFFF99;
border-left:1 solid black;
border-top:1 solid black;
border-right:4 solid black;
border-bottom:4 solid black;
margin:10px;
}
</STYLE>
</HEAD>
<BODY>
<IE:DEVICERECT ID="page1" CLASS="masterstyle" MEDIA="print">
<IE:LAYOUTRECT ID="layoutrect1" CONTENTSRC="2.html" CLASS="contentstyle" NEXTRECT="layoutrect2"/>
</IE:DEVICERECT>
<IE:DEVICERECT ID="page2" CLASS="masterstyle" MEDIA="print">
<IE:LAYOUTRECT ID="layoutrect2" CLASS="contentstyle"/>
</IE:DEVICERECT>
</BODY>
</HTML>
Nushi.
are you still there?