Can't print elements in a DIV tag
- by Mckenzi
I am using a Drag-able and re-sizeable DIV's in this HTML file. Where the user will place the DIV tag to his desired place in a main parent DIV tag. Now I want to print this main DIV tag, but the problem is that the code which I'm using to PRINT this main DIV is printing in a sequence, like not the way user has arranged the DIV's. Also it doesn't take up the main DIV background IMAGE.
here is the code.
JAVASCRIPT & CSS
<link rel="stylesheet" type="text/css" href="byrei-dyndiv_0.5.css">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script>
<script type="text/javascript" src="byrei-dyndiv_1.0rc1.js"></script>
<script language="javascript" type="text/javascript">
function change(boxid,divtoaffect) {
content = document.getElementById("" + boxid + "").value.replace(/\n/g, '<br>');
document.getElementById(divtoaffect).innerHTML = content;
}
function select1() {
test=document.getElementById("changeMe");
test.style.backgroundImage="url('Sunset.jpg')";
}
function select2() {
test=document.getElementById("changeMe");
test.style.backgroundImage="url('Blue hills.jpg')";
}
function PrintElem(elem)
{
Popup($(elem).text());
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
/*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.print();
return true;
}
// Print DIV
function printContent(id){
str=document.getElementById(id).innerHTML
newwin=window.open('','printwin','left=100,top=100,width=400,height=400')
newwin.document.write('<HTML>\n<HEAD>\n')
newwin.document.write('<TITLE>Print Page</TITLE>\n')
newwin.document.write('<script>\n')
newwin.document.write('function chkstate(){\n')
newwin.document.write('if(document.readyState=="complete"){\n')
newwin.document.write('window.close()\n')
newwin.document.write('}\n')
newwin.document.write('else{\n')
newwin.document.write('setTimeout("chkstate()",2000)\n')
newwin.document.write('}\n')
newwin.document.write('}\n')
newwin.document.write('function print_win(){\n')
newwin.document.write('window.print();\n')
newwin.document.write('chkstate();\n')
newwin.document.write('}\n')
newwin.document.write('<\/script>\n')
newwin.document.write('</HEAD>\n')
newwin.document.write('<BODY onload="print_win()">\n')
newwin.document.write(str)
newwin.document.write('</BODY>\n')
newwin.document.write('</HTML>\n')
newwin.document.close()
}
</script>
</head>
<body>
<style type="text/css">
#output1,#output2 ,#output3 {
width: 300px;
word-wrap: break-word;
border: solid 1px black;
}
</style>
HTML
<div style="width:650px;height:300px;" id="changeMe" >
<table cellpadding="5" cellspacing="0" width="100%" style="margin:auto;">
<tr>
<td><div class="dynDiv_moveDiv" id="output1" style="font-weight:bold;height:20px;margin-top:40px;">
<div class="dynDiv_resizeDiv_tl"></div>
<div class="dynDiv_resizeDiv_tr"></div>
<div class="dynDiv_resizeDiv_bl"></div>
<div class="dynDiv_resizeDiv_br"></div>
</div>
</td>
</tr>
<tr>
<td><div class="dynDiv_moveDiv" id="output2" style="height:40px;margin-top:30px;">
<div class="dynDiv_resizeDiv_tl"></div>
<div class="dynDiv_resizeDiv_tr"></div>
<div class="dynDiv_resizeDiv_bl"></div>
<div class="dynDiv_resizeDiv_br"></div>
</div></td>
</tr>
<tr>
<td><div class="dynDiv_moveDiv" id="output3" style="height:50px;margin-top:40px;">
<div class="dynDiv_resizeDiv_tl"></div>
<div class="dynDiv_resizeDiv_tr"></div>
<div class="dynDiv_resizeDiv_bl"></div>
<div class="dynDiv_resizeDiv_br"></div>
</div></td>
</tr>
</table>
</div>
<tr>
<td align="center"><input type="button" value="Print Div" onClick="printContent('changeMe')" />
</td>
</tr>
