StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>In case this is of any use, here is the solution I ended up with:</p> <p><strong>First the HTML:</strong></p> <pre><code><canvas class="canvaslink" id="canvasId" width="50" height="50"></canvas> <canvas class="canvaslink" id="canvasIda" width="50" height="50"></canvas> <canvas class="canvaslink" id="canvasId2" width="50" height="50"></canvas> <canvas class="canvaslink" id="canvasId2a" width="50" height="50"></canvas> </code></pre> <p>I created duplicate canvas elements which I used CSS to hide with:</p> <p><strong>CSS:</strong> </p> <pre><code>#canvasIda, canvasId2a { display:none; } </code></pre> <p>Then I made the following changes to the original <strong>Jquery script:</strong></p> <pre><code><script> var counter = $('#counter div strong'); var counterH2 = $('h2 strong'); $('#box').click(function(){ $("#counter").css("display", "block"); var counterValue = counter.text(); counterValue = ++counterValue; counter.text(counterValue); counterH2.text(counterValue); if (counterValue == 3){ $('body').css({"background-color":"#9ea7b8"}); $('body').css({"color":"#11112c"}); $('a').css({"color":"#11112c"}); //remove the previous canvas elements element = document.getElementById("canvasId"); element2 = document.getElementById("canvasId2"); element.parentNode.removeChild(element); element2.parentNode.removeChild(element2); //function to draw new canvas elements with new desired colour function drawSomething2(canvas) { var context = canvas.getContext("2d"); var width = 125; // Triangle Width var height = 45; // Triangle Height var padding = 5; // Draw a path context.beginPath(); context.moveTo(padding + width-125, height + padding); // Top Corner context.lineTo(padding + width-90,height-17 + padding); // point context.lineTo(padding, height-35 + padding); // Bottom Left context.closePath(); // Fill the path context.fillStyle = "#11112c"; context.fill(); } //draw the canvas elements drawSomething2(document.getElementById("canvasIda")); drawSomething2(document.getElementById("canvasId2a")); //display the previously hidden elements containing the new canvas drawings $('#canvasIda').css({"display":"block"}); $('#canvasId2a').css({"display":"block"}); } }); </code></pre> <p> </p> <p>I'm sure many can come up with a more efficient solution but this worked and I'm not complaining. </p>

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