Databases
StackOverflow2013
Postsdbo
POCan't print elements in a DIV tag
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCan't print elements in a DIV tag
    primarykey
    data
    text
    <p>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.</p> <p>JAVASCRIPT &amp; CSS</p> <pre><code>&lt;link rel="stylesheet" type="text/css" href="byrei-dyndiv_0.5.css"&gt; &lt;script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" &gt; &lt;/script&gt; &lt;script type="text/javascript" src="byrei-dyndiv_1.0rc1.js"&gt;&lt;/script&gt; &lt;script language="javascript" type="text/javascript"&gt; function change(boxid,divtoaffect) { content = document.getElementById("" + boxid + "").value.replace(/\n/g, '&lt;br&gt;'); 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('&lt;html&gt;&lt;head&gt;&lt;title&gt;my div&lt;/title&gt;'); /*optional stylesheet*/ //mywindow.document.write('&lt;link rel="stylesheet" href="main.css" type="text/css" /&gt;'); mywindow.document.write('&lt;/head&gt;&lt;body &gt;'); mywindow.document.write(data); mywindow.document.write('&lt;/body&gt;&lt;/html&gt;'); 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('&lt;HTML&gt;\n&lt;HEAD&gt;\n') newwin.document.write('&lt;TITLE&gt;Print Page&lt;/TITLE&gt;\n') newwin.document.write('&lt;script&gt;\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('&lt;\/script&gt;\n') newwin.document.write('&lt;/HEAD&gt;\n') newwin.document.write('&lt;BODY onload="print_win()"&gt;\n') newwin.document.write(str) newwin.document.write('&lt;/BODY&gt;\n') newwin.document.write('&lt;/HTML&gt;\n') newwin.document.close() } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;style type="text/css"&gt; #output1,#output2 ,#output3 { width: 300px; word-wrap: break-word; border: solid 1px black; } &lt;/style&gt; </code></pre> <p>HTML</p> <pre><code>&lt;div style="width:650px;height:300px;" id="changeMe" &gt; &lt;table cellpadding="5" cellspacing="0" width="100%" style="margin:auto;"&gt; &lt;tr&gt; &lt;td&gt;&lt;div class="dynDiv_moveDiv" id="output1" style="font-weight:bold;height:20px;margin-top:40px;"&gt; &lt;div class="dynDiv_resizeDiv_tl"&gt;&lt;/div&gt; &lt;div class="dynDiv_resizeDiv_tr"&gt;&lt;/div&gt; &lt;div class="dynDiv_resizeDiv_bl"&gt;&lt;/div&gt; &lt;div class="dynDiv_resizeDiv_br"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;div class="dynDiv_moveDiv" id="output2" style="height:40px;margin-top:30px;"&gt; &lt;div class="dynDiv_resizeDiv_tl"&gt;&lt;/div&gt; &lt;div class="dynDiv_resizeDiv_tr"&gt;&lt;/div&gt; &lt;div class="dynDiv_resizeDiv_bl"&gt;&lt;/div&gt; &lt;div class="dynDiv_resizeDiv_br"&gt;&lt;/div&gt; &lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;div class="dynDiv_moveDiv" id="output3" style="height:50px;margin-top:40px;"&gt; &lt;div class="dynDiv_resizeDiv_tl"&gt;&lt;/div&gt; &lt;div class="dynDiv_resizeDiv_tr"&gt;&lt;/div&gt; &lt;div class="dynDiv_resizeDiv_bl"&gt;&lt;/div&gt; &lt;div class="dynDiv_resizeDiv_br"&gt;&lt;/div&gt; &lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;tr&gt; &lt;td align="center"&gt;&lt;input type="button" value="Print Div" onClick="printContent('changeMe')" /&gt; &lt;/td&gt; &lt;/tr&gt; </code></pre> <p>here is the image to be more clearer <img src="https://i.stack.imgur.com/4UzEX.jpg" alt="enter image description here"> <img src="https://i.stack.imgur.com/yQMiQ.jpg" alt="enter image description here"></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USLeroy Mikenzi
    1. USLeroy Mikenzi
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POCan't print elements in a DIV tag
      1. This table or related slice is empty.
      1. VTUpMod
    1. COBy default, background images are not printed. Also, so much code... it would be helpful if you could make a JSFiddle to demonstrate.
      singulars
      1. POCan't print elements in a DIV tag
      1. USUtkanos
    2. CO@Utkanos I'm new to JSFIDDLE I could edit on this much in it can you help , how do I go about it...http://jsfiddle.net/JpUuk/
      singulars
      1. POCan't print elements in a DIV tag
      1. USLeroy Mikenzi
    3. CO@Utkanos PLS see the images that I have uploaded .....
      singulars
      1. POCan't print elements in a DIV tag
      1. USLeroy Mikenzi
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload