Link to home
Start Free TrialLog in
Avatar of lala74
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.getElementsByTagName("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("printReady");
       if (printReadyElem != null)
       {
             document.hiddenFrame.document.body.innerHTML=document.getElementById("printReady").innerHTML;
       }

      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
Avatar of jaysolomon
jaysolomon

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Nushi
Nushi

lala74:

are you still there?
Avatar of lala74

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.
Avatar of lala74

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
does using CSS isnt good for you?
do you wish to print the page as landscape?

Nushi.
Avatar of lala74

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
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.