Databases
StackOverflow2013
Postsdbo
POrender one div and it's interactive content by clicking on another div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POrender one div and it's interactive content by clicking on another div
    text
    copied!<pre><code>&lt;div id="1" class="aaa" style="position: relative; left: 50px; top: 50px; width: 300px; height: 200px; border: solid 1px; background: #dddddd; overflow: hidden;"&gt; &lt;div style="position: relative; left: 30px; top: 25px; width: 100px; height: 50px; background: blue;" onmouseenter="this.style.background='red';"&gt;&lt;/div&gt; &lt;div style="position: relative; left: 160px; top: 70px; width: 100px; height: 50px; background: blue;" onmouseenter="this.style.background='orange';"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="2" class="bbb" style="position: relative; left: 250px; top: 100px; width: 50px; height: 20px; border: solid 1px; background: #cccccc; text-align: center; overflow: hidden;"&gt;click&lt;/div&gt; </code></pre> <p><a href="http://jsfiddle.net/FWyBQ/" rel="nofollow noreferrer">http://jsfiddle.net/FWyBQ/</a></p> <p>I have one div (id="1" class="aaa") which contains multiple interactive divs. State of this interactive content should be able to be rendered as image (gif?) with the click on the other div (id="2" class="bbb").</p> <p>That image should preferably be opened in a new tab or window. Or maybe just right click > save as in place.</p> <p>p.s. I am aware of scripts like html2canvas and phantomjs, but I have no idea how to implement them in my case.</p> <p><strong>edit:</strong></p> <p>Now I'm trying to implement <a href="https://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf"><strong>this solution</strong></a>, which with a little tweaking should work with processing.js (<a href="http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js" rel="nofollow noreferrer">http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js</a>).</p> <p>I guess I just need the right jquery code with processing.js in order to achieve the functionality I need. I've tried this and it doesn't work:</p> <pre><code>$('.bbb').click(function (e) { var canvas = document.getElementById("1"), img = canvas.toDataURL("image/png"); $('.aaa').document.write('&lt;img src="'+img+'"/&gt;'); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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