Note that there are some explanatory texts on larger screens.

plurals
  1. POIs it safe to save html in database without sanitizing and then display it in code tag just like stackoverflow?
    primarykey
    data
    text
    <p>i am storing html in database but database but server responds with 403 forbidden error... and i am storing html just as code not for actual rendering... for example, this question is posted successfully and on my server it would give 403 error...</p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; body { margin: 0px; padding: 0px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt;&lt;/div&gt; &lt;script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.3-beta.js"&gt;&lt;/script&gt; &lt;script&gt; var angularVelocity = 6; var angularVelocities = []; var lastRotations = 0; var controlled = false; var numWedges = 25; var angularFriction = 0.2; var target, activeWedge, stage, layer, wheel, pointer; function getAverageAngularVelocity() { var total = 0; var len = angularVelocities.length; if(len === 0) { return 0; } for(var n = 0; n &lt; len; n++) { total += angularVelocities[n]; } return total / len; } function purifyColor(color) { var randIndex = Math.round(Math.random() * 3); color[randIndex] = 0; return color; } function getRandomColor() { var r = 100 + Math.round(Math.random() * 55); var g = 100 + Math.round(Math.random() * 55); var b = 100 + Math.round(Math.random() * 55); var color = [r, g, b]; color = purifyColor(color); color = purifyColor(color); return color; } function bind() { wheel.on('mousedown', function(evt) { angularVelocity = 0; controlled = true; target = evt.shape; }); // add listeners to container document.body.addEventListener('mouseup', function() { controlled = false; angularVelocity = getAverageAngularVelocity() * 5; if(angularVelocity &gt; 20) { angularVelocity = 20; } else if(angularVelocity &lt; -20) { angularVelocity = -20; } angularVelocities = []; }, false); document.body.addEventListener('mousemove', function(evt) { var mousePos = stage.getMousePosition(); if(controlled &amp;&amp; mousePos &amp;&amp; target) { var x = mousePos.x - wheel.getX(); var y = mousePos.y - wheel.getY(); var atan = Math.atan(y / x); var rotation = x &gt;= 0 ? atan : atan + Math.PI; var targetGroup = target.getParent(); wheel.setRotation(rotation - targetGroup.startRotation - (target.getAngle() / 2)); } }, false); } function getRandomReward() { var mainDigit = Math.round(Math.random() * 9); return mainDigit + '\n0\n0'; } function addWedge(n) { var s = getRandomColor(); var reward = getRandomReward(); var r = s[0]; var g = s[1]; var b = s[2]; var angle = 2 * Math.PI / numWedges; var endColor = 'rgb(' + r + ',' + g + ',' + b + ')'; r += 100; g += 100; b += 100; var startColor = 'rgb(' + r + ',' + g + ',' + b + ')'; var wedge = new Kinetic.Group({ rotation: 2 * n * Math.PI / numWedges, }); var wedgeBackground = new Kinetic.Wedge({ radius: 400, angle: angle, fillRadialGradientStartPoint: 0, fillRadialGradientStartRadius: 0, fillRadialGradientEndPoint: 0, fillRadialGradientEndRadius: 400, fillRadialGradientColorStops: [0, startColor, 1, endColor], fill: '#64e9f8', fillPriority: 'radial-gradient', stroke: '#ccc', strokeWidth: 2 }); wedge.add(wedgeBackground); var text = new Kinetic.Text({ text: reward, fontFamily: 'Calibri', fontSize: 50, fill: 'white', align: 'center', stroke: 'yellow', strokeWidth: 1 }); // cache text as an image to improve performance text.toImage({ width: text.getWidth(), height: text.getHeight(), callback: function(img) { var cachedText = new Kinetic.Image({ image: img, listening: false, rotation: (Math.PI + angle) / 2, x: 380, y: 30 }); wedge.add(cachedText); layer.draw(); } }); wedge.startRotation = wedge.getRotation(); wheel.add(wedge); } function animate(frame) { // handle wheel spin var angularVelocityChange = angularVelocity * frame.timeDiff * (1 - angularFriction) / 1000; angularVelocity -= angularVelocityChange; if(controlled) { if(angularVelocities.length &gt; 10) { angularVelocities.shift(); } angularVelocities.push((wheel.getRotation() - lastRotation) * 1000 / frame.timeDiff); } else { wheel.rotate(frame.timeDiff * angularVelocity / 1000); } lastRotation = wheel.getRotation(); // activate / deactivate wedges based on point intersection var intersection = stage.getIntersection({ x: stage.getWidth() / 2, y: 100 }); if(intersection) { var shape = intersection.shape; if(shape &amp;&amp; (!activeWedge || (shape._id !== activeWedge._id))) { pointer.setY(20); pointer.transitionTo({ y: 30, easing: 'elastic-ease-out', duration: 0.3 }); if(activeWedge) { activeWedge.setFillPriority('radial-gradient'); } shape.setFillPriority('fill'); activeWedge = shape; } } } function init() { stage = new Kinetic.Stage({ container: 'container', width: 578, height: 200 }); layer = new Kinetic.Layer(); wheel = new Kinetic.Group({ x: stage.getWidth() / 2, y: 410 }); for(var n = 0; n &lt; numWedges; n++) { addWedge(n); } pointer = new Kinetic.Wedge({ fillRadialGradientStartPoint: 0, fillRadialGradientStartRadius: 0, fillRadialGradientEndPoint: 0, fillRadialGradientEndRadius: 30, fillRadialGradientColorStops: [0, 'white', 1, 'red'], stroke: 'white', strokeWidth: 2, lineJoin: 'round', angleDeg: 30, radius: 30, x: stage.getWidth() / 2, y: 30, rotationDeg: -105, shadowColor: 'black', shadowOffset: 3, shadowBlur: 2, shadowOpacity: 0.5 }); // add components to the stage layer.add(wheel); layer.add(pointer); stage.add(layer); // bind events bind(); var anim = new Kinetic.Animation(animate, layer); // wait one second and then spin the wheel setTimeout(function() { anim.start(); }, 1000); } init(); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    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.
 

Querying!

 
Guidance

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