import Foundation
let pattern = #"(https?:\/\/[www]?jsfiddle\.net\/[^\"]*)"#
let regex = try! NSRegularExpression(pattern: pattern)
let testString = ##"""
Body
"<p>What you want can be done by CSS.</p>
<p>Check out the following snippet and this <a href=""http://jsfiddle.net/x797dkth/"" rel=""nofollow"">jsfiddle</a></p>
<p><div class=""snippet"" data-lang=""js"" data-hide=""false"">
<div class=""snippet-code"">
<pre class=""snippet-code-css lang-css prettyprint-override""><code>#circle64 {
cursor: url('http://www.iconsdownload.net/icons/64/16574-black-circle.png'), pointer;
}
#circle32 {
cursor: url('http://www.iconsdownload.net/icons/32/16574-black-circle.png'), pointer;
}
#circle24 {
cursor: url('http://www.iconsdownload.net/icons/24/16574-black-circle.png'), pointer;
}</code></pre>
<pre class=""snippet-code-html lang-html prettyprint-override""><code><div id='circle64'>
Cursor will
<br>be</br>different here.
</div>
<br>
<br>
<br>
<div id='circle32'>
Cursor will
<br>be</br>different here.
</div>
<br>
<br>
<br>
<div id='circle24'>
Cursor will
<br>be</br>different here.
</div></code></pre>
</div>
</div>
</p>
"
"<p>You got very close to the solution.</p>
<blockquote>
<p>I am pretty sure it has something to do with the image going out side the video div, but I could be mistaken.</p>
</blockquote>
<p>The image won't go outside the <code>div</code>.</p>
<p>For the image to look like the border of the video, we have to add <code>padding</code> to the <code>div</code>. (Also mentioned by @tylerism in comments)</p>
<p>Check out this <a href=""http://jsfiddle.net/cksk6La9/"" rel=""nofollow"">fiddle</a>.</p>
<p>Following are the changes I did in your code.
<strike></p>
<pre><code>text-align: center;
background-size: 80%;
</code></pre>
<p></strike></p>
<pre><code>padding: 10px 10px;
</code></pre>
<p>I used this <a href=""http://freedesignfile.com/upload/2012/12/Snow_backgrounds-2.jpg"" rel=""nofollow"">image</a> for testing purpose. You can replace the url.</p>
"
"<p>Add the following:</p>
<pre><code>body {
margin: 0;
}
</code></pre>
<p>in the CSS.</p>
<p>Here is the <a href=""http://jsfiddle.net/t07tccaz/"" rel=""nofollow"">fiddle</a>.</p>
<p>I replaced <code>background-image</code> with <code>background : red;</code> for testing purpose as I didn't have the image</p>
"
"<p>Check out this <a href=""http://jsfiddle.net/70qu6fk6/2/"" rel=""nofollow"">fiddle</a>.</p>
<p>It uses basic <strong>CSS</strong> and <strong>HTML</strong> and <strong>NO framework</strong>.</p>
<p>The key elements which allows this type of positioning are these css properties:
<code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>.</p>
<p>The demo uses these properties.</p>
<p>Here is the snippet.</p>
<p><div class=""snippet"" data-lang=""js"" data-hide=""false"">
<div class=""snippet-code"">
<pre class=""snippet-code-css lang-css prettyprint-override""><code>body {
background: beige;
margin: 0;
}
#header {
width: 100%;
height: 60px;
text-align: center;
background: #A7C942;
color: #fff;
font-family: ""Trebuchet MS"", Arial, Helvetica, sans-serif;
font-size: 2em;
}
#leftDiv {
position: absolute;
float: left;
width: 150px;
top: 60px;
bottom: 0;
background: aquamarine;
}
#midDiv {
position: absolute;
float: left;
top: 60px;
bottom: 0;
left: 150px;
right: 365px;
min-width: 50px;
background: lightsalmon;
}
#rightDiv {
position: absolute;
float: right;
width: 365px;
top: 60px;
bottom: 0;
right: 0;
background: green;
}
#topRow {
position: absolute;
width: 100%;
top: 0;
bottom: 50px;
min-height: 20px;
background-color: lightgoldenrodyellow;
}
#bottomRow {
position: absolute;
background-color: lightpink;
width: 100%;
height: 50px;
bottom: 0;
}</code></pre>
<pre class=""snippet-code-html lang-html prettyprint-override""><code><div id=""body"">
<div id=""main"">
<div id=""header"">my header</div>
<div id=""leftDiv"">
<p>LEFT</p>
</div>
<div id=""midDiv"">
<p>MIDDLE</p>
</div>
<div id=""rightDiv"">
<div id=""topRow"">TOP</div>
<div id=""bottomRow"">BOTTOM</div>
</div>
</div>
</div></code></pre>
</div>
</div>
</p>
"
"<p>Check out this <a href=""http://jsfiddle.net/2kev63mq/1/"" rel=""nofollow"">fiddle</a>.</p>
<p>I have used a sample video and a sample circular image for testing purpose.</p>
<p>Initially the image is hidden.</p>
<p>When you click on the video, the image appears at the position where the click is done and the video pauses.</p>
<p>I hope this helps.</p>
<p>Here is the snippet.</p>
<p><div class=""snippet"" data-lang=""js"" data-hide=""false"">
<div class=""snippet-code"">
<pre class=""snippet-code-js lang-js prettyprint-override""><code>$(""#vid"").click(function(e) {
//height and width of the container
var height = $(""#pcVideo"").height();
var width = $(""#pcVideo"").width();
//get click position inside container
var relativeX = e.pageX - this.offsetLeft;
var relativeY = e.pageY - this.offsetTop;
$('#image').css(
""left"", relativeX - 25);
$('#image').css(
""top"", relativeY - 25);
$('#image').show();
//overlay
var video = document.getElementById('vid');
video.pause();
});</code></pre>
<pre class=""snippet-code-css lang-css prettyprint-override""><code>#image {
position: absolute;
display: none;
}
#vid {
position: absolute;
}
div {
width: 100%;
}</code></pre>
<pre class=""snippet-code-html lang-html prettyprint-override""><code><script src=""https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js""></script>
<div id=""container"">
<video id=""vid"" src=""http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"" width=""500"" heigh=""400"" preload=""auto"" controls></video>
<img id=""image"" src=""http://www.gritengine.com/luaimg/circle.png"" />
</div></code></pre>
</div>
</div>
</p>
"
"<p>As mentioned in the <a href=""https://api.jquery.com/index/#index-element"" rel=""nofollow"">jQuery docs</a>,</p>
<p>The function <code>.index()</code> takes an element as a parameter like this.</p>
<pre><code>p.index($('.current'))
</code></pre>
<p>and <strong>NOT</strong> the class or id like this.</p>
<p><strike><code>p.index('.current')</code></strike> <strong>OR</strong> <strike><code>p.index('#someId')</code></strike></p>
<p>Here is the updated <a href=""http://jsfiddle.net/dmhsfds4/2/"" rel=""nofollow"">fiddle</a></p>
"
"<p>You just need to set background color to <code>outer-container</code>.</p>
<p>When you set <code>background-color</code> to <code><a></code> tag, the background color is assigned to the text only.</p>
<p>Here is you updated <a href=""http://jsfiddle.net/cr9m6k16/1/"" rel=""nofollow"">fiddle</a>.</p>
<p>Here is the snippet.</p>
<p><div class=""snippet"" data-lang=""js"" data-hide=""false"">
<div class=""snippet-code"">
<pre class=""snippet-code-css lang-css prettyprint-override""><code>.outer-container {
text-align: center;
vertical-align: middle;
position: relative;
background: #337AB7;
}
.inner-container {
background-color: #337AB7;
color: #fff;
height: 100%;
font-size: x-large;
}</code></pre>
<pre class=""snippet-code-html lang-html prettyprint-override""><code><div> <span>Some other stuff</span>
</div>
<div class=""outer-container""> <a class=""inner-container"" href=""http://www.google.com"" target=""_blank"">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum purus vel iaculis accumsan. Nulla vel massa velit. Proin a nisl vel tortor tincidunt pharetra. Nulla tristique porttitor erat. In laoreet, erat non ultricies vulputate, massa mauris tempor ligula, sed dignissim ex augue sit amet sapien. Donec malesuada massa eget turpis consectetur, at feugiat velit aliquam. Fusce dictum ornare dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer non consectetur nunc, at sollicitudin nibh.</a>
</div>
<div>More different stuff</div></code></pre>
</div>
</div>
</p>
"
"<p>Check out this <a href=""https://jsfiddle.net/fawavmbo/2/"" rel=""nofollow"">fiddle</a>.</p>
<p>I have used jQuery for the simplicity it provides.</p>
<p>I made the following changes:</p>
<ol>
<li>Added a class <code>cost</code> to the checkboxes.</li>
<li>Removed the <code>onClick</code> attribute.</li>
<li>Added jQuery.</li>
</ol>
<p>For the code to work in you system, add the code below to your <code><head></code></p>
<pre><code><script src=""https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js""></script>
</code></pre>
<p>Here is the snippet.</p>
<p><strong>HTML</strong></p>
<pre><code><table>
<tr>
<td><input class='cost' type=""checkbox"" value= ""8""></td>
<td>&euro; 8</td>
</tr>
<tr>
<td><input class='cost' type=""checkbox"" value= ""3""></td>
<td>&euro; 3</td>
</tr>
<tr>
<td><input class='cost' type=""checkbox"" value= ""19""></td>
<td>&euro; 19</td>
</tr>
<tr>
<td><input class='cost' type=""checkbox"" value= ""2""></td>
<td>&euro; 2</td>
</tr>
<tr>
<td><input class='cost' type=""checkbox"" value= ""15""></td>
<td>&euro; 15</td>
</tr>
<tr>
<td><input class='cost' type=""checkbox"" value= ""12""></td>
<td>&euro; 12</td>
</tr>
</table>
<table>
<tr>
<td width=""51""><input type=""text"" id=""bedragen_selected"" name=""bedragen_selected"" value="""" size=""10"" style=""text-align:right;background-color: #e7e7e9"" readonly=""readonly"" /></td>
</tr>
</table>
</code></pre>
<p><strong>JS</strong></p>
<pre><code>var sum = 0;
$('.cost').click(function() {
if($(this).is(':checked')) {
sum = sum + parseInt($(this).val());
} else {
sum = sum - parseInt($(this).val());
}
$('#bedragen_selected').val(sum);
});
</code></pre>
"
"<p>Error in the code you provided.</p>
<ul>
<li>wrong anchor tag</li>
<li>extra closing tags (<code><i></code>, <code><button></code>)</li>
</ul>
<p>The major changes I made in the code:</p>
<ul>
<li>removed <code>onclick</code> attribute</li>
<li>added event listener in javascript</li>
</ul>
<p>Here is the <a href=""http://jsfiddle.net/6L3mqjsL/1/"" rel=""nofollow"">fiddle</a></p>
<p>Here is the snippet.</p>
<p><div class=""snippet"" data-lang=""js"" data-hide=""false"">
<div class=""snippet-code"">
<pre class=""snippet-code-js lang-js prettyprint-override""><code>function FBLogin() {
//Fb app information//
alert(""WORKING"");
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId: 'xxxxxxxxx',
xfbml: true,
version: 'v2.3'
});
//rest of function here etc//
}
}
document.getElementById('login').addEventListener(""click"", FBLogin);</code></pre>
<pre class=""snippet-code-html lang-html prettyprint-override""><code><a id='login' href=""#"" role=""button"" class=""btn btn-successFbLi btn-lg fa fa-facebook"">
Sign in with Facebook</a></code></pre>
</div>
</div>
</p>
<p>More about Event Listeners <a href=""http://www.w3schools.com/js/js_htmldom_eventlistener.asp"" rel=""nofollow"">here</a></p>
"
"<p>Here is you updated <a href=""http://jsfiddle.net/r7dvay4o/2/"" rel=""nofollow"">fiddle</a>.</p>
<p>I calculates the grand total of all the items.</p>
<p>Here is the snippet.</p>
<p><div class=""snippet"" data-lang=""js"" data-hide=""false"">
<div class=""snippet-code"">
<pre class=""snippet-code-js lang-js prettyprint-override""><code>$(document).ready(function() {
function updateArticle1() {
var Persons = parseFloat($(""#dare_price1"").val());
var total = (Persons) * 2.00;
var total = total.toFixed(2);
if (isNaN(total)) total = 0;
$(""#total_price_amount1"").val(total);
}
function updateArticle2() {
var Animals = parseFloat($(""#dare_price2"").val());
var total = (Animals) * 3.50;
var total = total.toFixed(2);
if (isNaN(total)) total = 0;
$(""#total_price_amount2"").val(total);
}
function updateArticle3() {
var Bedlinen = parseFloat($(""#dare_price3"").val());
var total = (Bedlinen) * 8.50;
var total = total.toFixed(2);
if (isNaN(total)) total = 0;
$(""#total_price_amount3"").val(total);
}
function updateArticle4() {
var Towels = parseFloat($(""#dare_price4"").val());
var total = (Towels) * 7.50;
var total = total.toFixed(2);
if (isNaN(total)) total = 0;
$(""#total_price_amount4"").val(total);
}
function updateTotal() {
var price1 = parseFloat($(""#total_price_amount1"").val());
var price2 = parseFloat($(""#total_price_amount2"").val());
var price3 = parseFloat($(""#total_price_amount3"").val());
var price4 = parseFloat($(""#total_price_amount4"").val());
var total = price1 + price2 + price3 + price4;
if (isNaN(total)) total = 0;
$(""#totalSum"").text(total);
}
$(document).on(""change, keyup"", ""#dare_price1"", updateArticle1);
$(document).on(""change, keyup"", ""#dare_price2"", updateArticle2);
$(document).on(""change, keyup"", ""#dare_price3"", updateArticle3);
$(document).on(""change, keyup"", ""#dare_price4"", updateArticle4);
$(document).on(""click"", ""#getTotal"", updateTotal);
});</code></pre>
<pre class=""snippet-code-html lang-html prettyprint-override""><code><script src=""https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js""></script>
<table>
<tr>
<td>Persons?</td>
<td>
<input class=""span4 input-big"" id=""dare_price1"" name=""Persons"" value="""" size=""30"" type=""text"" />
</td>
</tr>
<tr>
<td>Animals?</td>
<td>
<input class=""span4 input-big"" id=""dare_price2"" name=""Animals"" value="""" size=""30"" type=""text"" />
</td>
</tr>
<tr>
<td>Bedlinen?</td>
<td>
<input class=""span4 input-big"" id=""dare_price3"" name=""Bedlinen"" value="""" size=""30"" type=""text"" />
</td>
</tr>
<tr>
<td>Towels?</td>
<td>
<input class=""span4 input-big"" id=""dare_price4"" name=""Towels"" value="""" size=""30"" type=""text"" />
</td>
</tr>
</table>
<table style=""width: 50%"">
<tr>
<td style=""width: 403px""></td>
<td></td>
</tr>
<tr>
<td style=""width: 403px"">Rentalprice</td>
<td>189.00</td>
<td>Euro</td>
</tr>
<tr>
<td style=""width: 403px"">Taxes</td>
<td style=""width: 50px"">
<input style=""border: 0px;"" class=""style11 span4 input-big"" id=""total_price_amount1"" readonly=""readonly"" name=""PricePersons"" value="""" />
</td>
<td>Euro</td>
</tr>
<tr>
<td style=""width: 403px""><span lang=""nl"">Animals</span>
</td>
<td>
<input style=""border: 0px;"" class=""style11 span4 input-big"" id=""total_price_amount2"" readonly=""readonly"" name=""PriceAnimals"" value="""" />
</td>
<td>Euro</td>
</tr>
<tr>
<td style=""width: 403px""><span lang=""nl"">Bedlinen</span>
</td>
<td>
<input style=""border: 0px;"" class=""style11 span4 input-big"" id=""total_price_amount3"" readonly=""readonly"" name=""PriceBedlinen"" value="""" />
</td>
<td>Euro</td>
</tr>
<tr>
<td style=""width: 403px""><span lang=""nl"">Towels</span>
</td>
<td>
<input style=""border: 0px;"" class=""style11 span4 input-big"" id=""total_price_amount4"" readonly=""readonly"" name=""PriceTowels"" value="""" />
</td>
<td>Euro</td>
</tr>
<tr>
<td style=""width: 403px"">Total</td>
<td id=""totalSum"">&nbsp;</td>
<td>Euro</td>
</tr>
</table>
<input id=""getTotal"" type=""button"" value=""Get Total"" /></code></pre>
</div>
</div>
</p>
<p>This code can be further optimized by replacing the 4 functions <code>replaceArticle1()</code>, <code>replaceArticle2()</code>, <code>replaceArticle3()</code>, <code>replaceArticle4()</code> with just a single function <code>replaceArticle()</code> and updating the respective elements using their <code>id</code>s.</p>
"
"<p>You can always do this..</p>
<p>Here is the <a href=""http://jsfiddle.net/gq237zzg/"" rel=""nofollow"">fiddle</a>.</p>
<p>Here is the snippet.</p>
<p><div class=""snippet"" data-lang=""js"" data-hide=""false"">
<div class=""snippet-code"">
<pre class=""snippet-code-css lang-css prettyprint-override""><code>.red {
color: red;
}
.blue {
color: blue;
}
.yellow {
color: yellow;
}</code></pre>
<pre class=""snippet-code-html lang-html prettyprint-override""><code><div>Sally found all the <span class=""red"">RED</span> seashells down by the <span class=""blue"">BLUE</span> seashore out in the <span class=""yellow"">YELLOW</span> sun</div></code></pre>
</div>
</div>
</p>
"
"<p>Check out this <a href=""http://jsfiddle.net/xu0wjukn/"" rel=""nofollow"">fiddle</a>.</p>
<p>It is just a sample.</p>
<p>It converts <code>[[Google|https://www.google.com]]</code> to <code><a href='https://www.google.com'>Google</a></code>, i.e. <a href=""https://www.google.com"" rel=""nofollow"">Google</a>.</p>
<p>I used <a href=""http://regexr.com/3bb7g"" rel=""nofollow"">this</a> Regular Expression to detect the inline markup.</p>
<p>It has some bugs, but I think it will help you to implement what you need.</p>
<p>Here is the snippet.</p>
<p><div class=""snippet"" data-lang=""js"" data-hide=""false"">
<div class=""snippet-code"">
<pre class=""snippet-code-js lang-js prettyprint-override""><code>$('.editor').keyup(function(e) {
if (e.keyCode === 221) {
var text = $('.editor').html();
var match = /\[\[(.+)\|(https?:\/\/.*\..+)\]\]/g.exec(text);
if (match !== null) {
text = text.replace(match[0], ""<span><a href='"" + match[2] + ""'>"" + match[1] + ""</a></span>"");
$('.editor').html(text);
}
}
});</code></pre>
<pre class=""snippet-code-css lang-css prettyprint-override""><code>.editor {
position: absolute;
border: black dashed 2px;
left: 5%;
right: 5%;
top: 10%;
bottom: 10%;
padding: 15px;
font-family: 'Lucida Console';
font-weight: bold;
}</code></pre>
<pre class=""snippet-code-html lang-html prettyprint-override""><code><script src=""https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js""></script>
<div class=""editor"" contenteditable='true'>This is the Editor. write something here.</div></code></pre>
</div>
</div>
</p>
"
"<p>That extra space above the text can be removed by the property <code>line-height</code>.</p>
<pre><code>line-height: 0.5em;
</code></pre>
<p>See this <a href=""http://jsfiddle.net/9tcxosv9/1/"" rel=""nofollow"">fiddle</a></p>
<p>Here is the snippet.</p>
<p><div class=""snippet"" data-lang=""js"" data-hide=""false"">
<div class=""snippet-code"">
<pre class=""snippet-code-css lang-css prettyprint-override""><code>span {
background-color: red;
color: yellow;
border: 1px solid blue;
font-size: 58px;
line-height: 0.5em;
}</code></pre>
<pre class=""snippet-code-html lang-html prettyprint-override""><code><span>Fylgpm</span></code></pre>
</div>
</div>
</p>
"
"<p>So the gist of you problem is you need a div which <strong>allows scrolling</strong> but the <strong>scrollbar should not be visible</strong>...</p>
<p>See this <a href=""http://jsfiddle.net/8QzmH/"" rel=""nofollow"">fiddle</a>.</p>
<p>Here is the snippet.</p>
<p><div class=""snippet"" data-lang=""js"" data-hide=""false"">
<div class=""snippet-code"">
<pre class=""snippet-code-css lang-css prettyprint-override""><code>#container {
height: 100%;
width: 100%;
overflow: hidden;
}
#content {
width: 100%;
height: 99%;
overflow: auto;
padding-right: 15px;
}
html,
body {
height: 99%;
overflow: hidden;
}</code></pre>
<pre class=""snippet-code-html lang-html prettyprint-override""><code><div id=""container"">
<div id=""content"">
testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />testing
<br />
</div>
</div></code></pre>
</div>
</div>
</p>
<p>Hope it helps..</p>
"
"<p>Check this <a href=""http://jsfiddle.net/68kkow8b/1/"" rel=""nofollow"">fiddle</a>.</p>
<p>It uses a function <code>DrawLine(x1,y1,x2,y2)</code> to draw a line between the given co-ordinates.</p>
<p>Basically, it creates <code>div</code>s with thin width and rotate them according the slope.</p>
<p>Looks like a wheel with spokes.</p>
<p>Here is a <a href=""http://jsfiddle.net/68kkow8b/2/"" rel=""nofollow"">wheel in action</a> if you need. </p>
<p>Here is the snippet.</p>
<p><div class=""snippet"" data-lang=""js"" data-hide=""false"">
<div class=""snippet-code"">
<pre class=""snippet-code-js lang-js prettyprint-override""><code>drawNLines(12, 40, 40, 40);
function drawNLines(N, centreX, centreY, radius) {
for (i = 0; i < N; i++) {
angle = 360 / N;
x2 = centreX + radius * Math.cos(Math.PI * angle * i / 180);
y2 = centreY + radius * Math.sin(Math.PI * angle * i / 180);
DrawLine(centreX, centreY, x2, y2);
}
}
function DrawLine(x1, y1, x2, y2) {
if (y1 < y2) {
var pom = y1;
y1 = y2;
y2 = pom;
pom = x1;
x1 = x2;
x2 = pom;
}
var a = Math.abs(x1 - x2);
var b = Math.abs(y1 - y2);
var c;
var sx = (x1 + x2) / 2;
var sy = (y1 + y2) / 2;
var width = Math.sqrt(a * a + b * b);
var x = sx - width / 2;
var y = sy;
a = width / 2;
c = Math.abs(sx - x);
b = Math.sqrt(Math.abs(x1 - x) * Math.abs(x1 - x) + Math.abs(y1 - y) * Math.abs(y1 - y));
var cosb = (b * b - a * a - c * c) / (2 * a * c);
var rad = Math.acos(cosb);
var deg = (rad * 180) / Math.PI
htmlns = ""http://www.w3.org/1999/xhtml"";
div = document.createElementNS(htmlns, ""div"");
div.setAttribute('style', 'border:1px solid black;width:' + width + 'px;height:0px;-moz-transform:rotate(' + deg + 'deg);-webkit-transform:rotate(' + deg + 'deg);position:absolute;top:' + y + 'px;left:' + x + 'px;');
document.getElementById(""circle"").appendChild(div);
}</code></pre>
<pre class=""snippet-code-css lang-css prettyprint-override""><code>#circle {
height: 80px;
width: 80px;
margin-left: 30px;
margin-top: 30px;
background-color: #fff;
border: 2px solid blue;
border-radius: 80px;
position: absolute;
}</code></pre>
<pre class=""snippet-code-html lang-html prettyprint-override""><code><div id=""circle""></div></code></pre>
</div>
</div>
</p>
<p>Hope this helps. :)</p>
"
"<p>To achieve the effect mentioned, I followed the following approach.</p>
<ol>
<li>Create an image with required text on it (<code>StackOverflow</code> for example).</li>
<li>Make the text on this image transparent. (I did it in <code>Microsoft Powerpoint</code>).</li>
</ol>
<p>This is how the image looks</p>
<p><img src=""http://i.stack.imgur.com/plKV4.png"" alt=""enter image description here""></p>
<p>Note that the text area is <strong>transparent</strong>. Download this image and open it in any image viewer to verify.</p>
<ol start=""3"">
<li>Then, Create a <a href=""http://www.w3schools.com/css/css3_gradients.asp"" rel=""nofollow"">gradient</a>. (You can use <a href=""http://angrytools.com/gradient/"" rel=""nofollow"">this</a> for simplicity)</li>
</ol>
<p>Combining the above resources, here is the <a href=""http://jsfiddle.net/h5z1dttw/"" rel=""nofollow"">fiddle</a>.</p>
<p><div class=""snippet"" data-lang=""js"" data-hide=""false"">
<div class=""snippet-code"">
<pre class=""snippet-code-css lang-css prettyprint-override""><code>#color {
position: absolute;
width: 800px;
height: 130px;
background: -moz-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* ff3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ff0000), color-stop(25%, #2AA830), color-stop(50%, #05C1FF), color-stop(75%, #ffff00), color-stop(100%, #0808BF));
/* safari4+,chrome */
background: -webkit-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* safari5.1+,chrome10+ */
background: -o-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* opera 11.10+ */
background: -ms-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* ie10+ */
background: linear-gradient(90deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%);
/* w3c */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#0808BF', GradientType=1);
/* ie6-9 */
}
#text {
position: absolute;
width: 800px;
height: 130px;
background: url('http://i.stack.imgur.com/plKV4.png');
background-size: 100% 100%;
}
#slider {
position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 0%;
background: gray;
animation: slide forwards 5s linear;
}
@keyframes slide {
0% {
left: 0%;
}
100% {
left: 100%;
}
}</code></pre>
<pre class=""snippet-code-html lang-html prettyprint-override""><code><div id=""color"">
<div id=""slider""></div>
<div id=""text""></div>
</div></code></pre>
</div>
</div>
</p>
<p>I have used <a href=""http://www.w3schools.com/css/css3_animations.asp"" rel=""nofollow""><code>keyframes animation</code></a> to fill the color.<br>
It can be easily replaced by <code>jQuery</code></p>
"
"<p>Your code works fine on <a href=""http://jsfiddle.net/rzjrrer6/2/"" rel=""nofollow"">jsfiddle</a> when the JavaScript is included in <code><body></code></p>
<ul>
<li>Your code do not have <code><head></code> tag. Place your <code>CSS</code> inside <code><head></code> tag.</li>
<li>Move you JavaScript to end of the <code><body></code> tag.</li>
</ul>
<p>Here is your code which works perfectly.</p>
<pre><code><!DOCTYPE html>
<html>
<head>
<style type=""text/css"">
canvas {border: 1px solid #000;}
</style>
<link rel=""stylesheet"" href=""stylespacewars.css"" />
<script src=""jsspacewars.js""></script>
<script src=""jquery.js""></script>
<title></title>
</head>
<body onload=""popUpMessage()"">
<div id=""images""></div>
<canvas style=""margin:0;padding:0;position:relative;left:50px;top:50px;"" id=""imgCanvas"" width=""400"" height=""300"" onclick=""drawCircle(event)"" ondblclick=""changeColor(event)""></canvas>
<script type=""text/javascript"">
// popup message when page loads
function popUpMessage() {
alert(""Please click left top corner"");
}
var canvas = document.getElementById(""imgCanvas"");
var context = canvas.getContext(""2d"");
// click canvas
function clickCanvas(imageId) {
canvas.style.display = ""block"";
document.getElementById(""images"").style.overflowY = ""hidden"";
var img = new Image(400, 300);
img.src = document.getElementById(imageId).src;
context.drawImage(img, (0), (0)); //onload....
}
// draw red circle on click
function drawCircle(e) {
posx = 100;
posy = 100;
context.fillStyle = ""#FF0000"";
context.beginPath();
context.arc(posx, posy, 100, 0, 2 * Math.PI);
context.fill();
}
// change from red to blue on double click
function changeColor() {
posx = 100;
posy = 100;
context.fillStyle = ""#0000FF"";
context.beginPath();
context.arc(posx, posy, 100, 0, 2 * Math.PI);
context.fill();
}
window.drawCircle = drawCircle;
</script>
</body>
</html>
</code></pre>
"
"<p>Check out this <a href=""http://jsfiddle.net/rtndsmmb/"" rel=""nofollow"">fiddle</a>. (I have used jQuery)</p>
<ol>
<li>Get the innerHTML by the mehod <code>.html()</code>.</li>
<li>split it with regex <code>/\n/</code> (newLine).</li>
<li>Concatenate the substrings with additional <code>""Read""</code>.</li>
<li>Alert the final result.</li>
</ol>
<p>Here is the snippet.</p>
<p><div class=""snippet"" data-lang=""js"" data-hide=""false"">
<div class=""snippet-code"">
<pre class=""snippet-code-js lang-js prettyprint-override""><code>$('#click').click(function() {
var text = $('#targetTextArea').html();
var lines = text.split(/\n/);
var finalText = '';
for (i in lines) {
finalText = finalText + 'Read ' + lines[i] + '\n';
}
alert(finalText);
});</code></pre>
<pre class=""snippet-code-html lang-html prettyprint-override""><code><script src=""https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js""></script>
<textarea rows=""20"" cols=""50"" id=""targetTextArea"">How to
print each
line from
textarea using
innerHTML and
javascript</textarea>
<input type=""button"" value=""Click Me"" id=""click"" /></code></pre>
</div>
</div>
</p>
"
"<p>Check out this <a href=""http://jsfiddle.net/quf1q271/"" rel=""nofollow"">fiddle</a>.</p>
<p>I have used jQuery, which makes it very easy to implement.</p>
<p>Here is the snippet.</p>
<p><div class=""snippet"" data-lang=""js"" data-hide=""false"">
<div class=""snippet-code"">
<pre class=""snippet-code-js lang-js prettyprint-override""><code>$('.lunch').click(function() {
$('#food').show();
if ($(this).val() == 1) {
$('#food').removeAttr(""disabled"");
} else {
$('#food').attr(""disabled"", ""disabled"");
}
});</code></pre>
<pre class=""snippet-code-css lang-css prettyprint-override""><code>#food {
display: none;
}</code></pre>
<pre class=""snippet-code-html lang-html prettyprint-override""><code><script src=""https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js""></script>
Do you want Lunch ?
<br>
<input type=""radio"" name='lunch' value=""1"" class='lunch' />YES
<br>
<input type=""radio"" name='lunch' value=""0"" class='lunch' />NO
<br>
<select id='food'>
<option>PIZZA</option>
<option>BURGER</option>
<option>SAMOSA</option>
<option>KACHORI</option>
<option>POHE</option>
<option>DOSA</option>
</select></code></pre>
</div>
</div>
</p>
"
"<p>Check out this <a href=""http://jsfiddle.net/shrinivas93/h2u7e7cb/"" rel=""nofollow"">fiddle</a>.
You need to use <code>.css()</code> to change the style of any element.</p>
<p>Here is the snippet.</p>
<p><div class=""snippet"" data-lang=""js"" data-hide=""false"">
<div class=""snippet-code"">
<pre class=""snippet-code-js lang-js prettyprint-override""><code>var x;
$(""button"").click(function() {
x = $(""#width"").val();
$(""#square"").css(""width"", x);
});</code></pre>
<pre class=""snippet-code-css lang-css prettyprint-override""><code>#square {
position: absolute;
width: 20px;
height: 20px;
background: red;
}</code></pre>
<pre class=""snippet-code-html lang-html prettyprint-override""><code><script src=""https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js""></script>
<div id=""square""></div>
<br>
<br>
<input type=""number"" id=""width"" />
<button>Click</button></code></pre>
</div>
</div>
</p>
"
"<p>Check out this <a href=""http://jsfiddle.net/shrinivas93/yabyehq2/"" rel=""nofollow"">fiddle</a>.</p>
<p>The constructor <code>Date(milliseconds)</code> of <code>class Date</code> can be used here.</p>
<p>Here is the snippet.</p>
<p><div class=""snippet"" data-lang=""js"" data-hide=""false"">
<div class=""snippet-code"">
<pre class=""snippet-code-js lang-js prettyprint-override""><code>var now = new Date();
alert(now);
var milliseconds = new Date().getTime() + (1 * 60 * 60 * 1000);
var later = new Date(milliseconds);
alert(later);</code></pre>
</div>
</div>
</p>
"
"<p>Check out this <a href=""http://jsfiddle.net/shrinivas93/emt34tu2/"" rel=""nofollow"">fiddle</a>.</p>
<ol>
<li>obtain the <code>div</code> by <code>document.getElementById()</code> method.</li>
<li>Set value to its <code>innerHTML</code>.</li>
</ol>
<p>Here is the snippet.</p>
<p><div class=""snippet"" data-lang=""js"" data-hide=""false"">
<div class=""snippet-code"">
<pre class=""snippet-code-js lang-js prettyprint-override""><code>document.getElementById(""external"").innerHTML = ""<a href='http://www.google.com'> Google </a>"";</code></pre>
<pre class=""snippet-code-html lang-html prettyprint-override""><code><div id=""external"" data-wow-delay=""0.25s"" class=""clearfix service-list odd wow fadeInLeft animated"" style=""visibility: visible; animation-delay: 0.25s; animation-name: fadeInLeft;"">
<div class=""service-image"">
<img alt=""test 1"" src=""http://localhost/onyx/wp-content/themes/accesspress-parallax/images/no-image.jpg"">
</div>
<div class=""service-detail"">
<h3>test 1</h3>
<div class=""service-content"">
<p>https://it.wikipedia.or /wiki/Pagina_principale</p>
<p>and</p>
<p>https://www.google.it/</p>
<p>&nbsp;</p>
</div>
</div>
</div></code></pre>
</div>
</div>
</p>
"
"<p>Check out this <a href=""http://jsfiddle.net/shrinivas93/zewk17vL/"" rel=""nofollow"">fiddle</a>.</p>
<p>It uses <a href=""https://jquery.com/"" rel=""nofollow""><code>jQuery</code></a> which makes it much easier.</p>
<p>Here is the snippet.</p>
<p><div class=""snippet"" data-lang=""js"" data-hide=""false"">
<div class=""snippet-code"">
<pre class=""snippet-code-js lang-js prettyprint-override""><code>$(""#button"").click(function() {
$(""#fn"").show();
$(""#ln"").show();
});</code></pre>
<pre class=""snippet-code-html lang-html prettyprint-override""><code><script src=""https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js""></script>
<input id=""button"" type=""button"" value=""Click"">
<br>
<div id=""fn"" hidden>First Name :
<input type=""text"" />
</div>
<br>
<div id=""ln"" hidden>Last Name :
<input type=""text"" />
</div></code></pre>
</div>
</div>
</p>
"
"<p>Check out this <a href=""http://jsfiddle.net/shrinivas93/Lu4of1f1/1/"" rel=""nofollow"">fiddle</a>.</p>
<p>It uses <code>@keyframes-animation</code> to achieve the desired effect.</p>
<p>Its is not exactly what you want, but if given time this will help you to solve your problem.</p>
<p>Here is the snippet.</p>
<p><div class=""snippet"" data-lang=""js"" data-hide=""false"">
<div class=""snippet-code"">
<pre class=""snippet-code-js lang-js prettyprint-override""><code>var x = 0;
$(""#cookie"").click(function(e) {
x++;
$(""#cookie"").append('<div id=""x' + x + '"" hidden>+1.0</div>');
$(""#x"" + x).css(""top"", e.clientY);
$(""#x"" + x).css(""left"", e.clientX - 10);
$(""#x"" + x).css(""position"", ""absolute"");
$(""#x"" + x).css(""width"", ""25px"");
$(""#x"" + x).css(""height"", ""25px"");
$(""#x"" + x).css(""color"", ""white"");
$(""#x"" + x).css(""font-weight"", ""bold"");
$(""#x"" + x).css(""animation"", ""GoUp 2s forwards linear"");
$(""#x"" + x).show();
});</code></pre>
<pre class=""snippet-code-css lang-css prettyprint-override""><code>#cookie {
background: red;
width: 300px;
height: 300px;
}
@keyframes GoUp {
0% {
opacity: 1;
}
100% {
top: 0px;
opacity: 0;
}
}</code></pre>
<pre class=""snippet-code-html lang-html prettyprint-override""><code><script src=""https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js""></script>
<div id=""cookie"">
</div></code></pre>
</div>
</div>
</p>
"
"<p>You have placed the following code outside the <code>function onrendered()</code>.</p>
<pre><code>var dataURL = canvas.toDataURL();
console.log(dataURL);
</code></pre>
<p>Due to which it gets executed before the <code>canvas</code> is even rendered.</p>
<p>Place this code inside <code>onrendered()</code>.</p>
<p>Here is the updated <a href=""http://jsfiddle.net/shrinivas93/b7wgoL73/1/"" rel=""nofollow"">fiddle</a>.</p>
<p>Here is the snippet.</p>
<p><div class=""snippet"" data-lang=""js"" data-hide=""false"">
<div class=""snippet-code"">
<pre class=""snippet-code-js lang-js prettyprint-override""><code>function testScrnShot() {
html2canvas(document.getElementById(""testing""), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
var dataURL = canvas.toDataURL();
console.log(dataURL);
}
});
}</code></pre>
<pre class=""snippet-code-css lang-css prettyprint-override""><code>#testing {
font-family: Arial, sans-serif;
background: #000;
color: #fff;
display: inline-block;
padding: 1em;
border-radius: 2px;
cursor: pointer;
margin: 1em;
}
canvas {
float: right;
margin: 1em;
}</code></pre>
<pre class=""snippet-code-html lang-html prettyprint-override""><code><script src=""https://github.com/niklasvh/html2canvas/releases/download/0.5.0-alpha1/html2canvas.js""></script>
<div id=""testing"" onclick=""testScrnShot();""><strong>Hello</strong>, this is a test</div></code></pre>
</div>
</div>
</p>
<p>Prints the <code>data url</code> in the console now.</p>
"
"<p>The correct way to access the text of <code><a></code> tag is <code>.innerHTML</code> <strong>NOT</strong> <code>.value</code>.</p>
<p>Check out this <a href=""http://jsfiddle.net/shrinivas93/g6dhp19n/"" rel=""nofollow"">fiddle</a>.</p>
<p>Here is the snippet.</p>
<p><div class=""snippet"" data-lang=""js"" data-hide=""false"">
<div class=""snippet-code"">
<pre class=""snippet-code-js lang-js prettyprint-override""><code>function check() {
var inputs = document.getElementsByTagName('a');
for (var i = 0; i < inputs.length; i += 1) {
if (inputs[i].innerHTML == ""selected"") {
alert(inputs[i].id);
}
}
}</code></pre>
<pre class=""snippet-code-html lang-html prettyprint-override""><code><a href=""www.google.com"" id=""1"">selected</a>
<a href=""www.facebook.com"" id=""2"">select</a>
<a href=""www.gmail.com"" id=""3"">selected</a>
<button onclick=""check()"">Check!</button></code></pre>
</div>
</div>
</p>
"
"<p>Just set the <code>opacity</code> to <code>0</code></p>
<p>Check out this <a href=""http://jsfiddle.net/shrinivas93/qjwf4ukc/"" rel=""nofollow"">fiddle</a>.</p>
<p>Here is the snippet.</p>
<p><div class=""snippet"" data-lang=""js"" data-hide=""false"">
<div class=""snippet-code"">
<pre class=""snippet-code-css lang-css prettyprint-override""><code>#hide {
opacity: 0;
}</code></pre>
<pre class=""snippet-code-html lang-html prettyprint-override""><code><span class=""commandButtonsRight"">
<button id=""hide"" class=""k-button k-button-icontext"" data-bind=""click: save"">
<span class=""k-icon k-update""></span>Save
</button>
<button class=""k-button k-button-icontext"" data-bind=""click: cancel"">
<span class=""k-icon k-cancel""></span>Reset Form
</button>
</span></code></pre>
</div>
</div>
</p>
"
"<p>When you do <code>.brochureImg a img:nth-child(odd)</code>, you are saying ""Select odd <code>img</code> with <code>a</code> with <code>.brochureImg</code>"".</p>
<p>But that is <strong>NOT</strong> what you want to say.</p>
<p>Do this, <code>.brochureImg:nth-child(odd) a img</code> and you will be saying ""Select odd <code>.brochureImg</code> with <code>a</code> with <code>img</code>"".</p>
<p>Here is the <a href=""http://jsfiddle.net/shrinivas93/vwLh1ktr/"" rel=""nofollow"">fiddle</a>.</p>
<p>Here is the snippet.</p>
<p><div class=""snippet"" data-lang=""js"" data-hide=""false"">
<div class=""snippet-code"">
<pre class=""snippet-code-css lang-css prettyprint-override""><code>.brochureImg {
display: inline-block;
margin: 0 auto;
margin-top: -90px;
padding: 0 16px 150px 0;
position: relative;
z-index: 100;
}
.brochureImg img {
box-shadow: 3px 3px 8px #666666;
}
.brochureImg:nth-child(odd) a img {
margin-top: -120px;
}
.brochureImg:nth-child(even) a img {
margin-top: -60px;
}
.brochureImg.first {
margin-left: 125px;
}</code></pre>
<pre class=""snippet-code-html lang-html prettyprint-override""><code><div class=""brochureBrand"">
<ul>
<li class=""brochureName hrDots""><a href=""#"">GP & J Baker</a>
<li class=""brochureImg first"">
<a href=""#"">
<img src=""http://placehold.it/125x175"">
</a>
</li>
<li class=""brochureImg"">
<a href=""#"">
<img src=""http://placehold.it/125x175"">
</a>
</li>
<li class=""brochureImg"">
<a href=""#"">
<img src=""http://placehold.it/125x175"">
</a>
</li>
<li class=""brochureImg"">
<a href=""#"">
<img src=""http://placehold.it/125x175"">
</a>
</li>
<li class=""brochureImg"">
<a href=""#"">
<img src=""http://placehold.it/125x175"">
</a>
</li>
<li class=""brochureImg"">
<a href=""#"">
<img src=""http://placehold.it/125x175"">
</a>
</li>
<li class=""brochureImg"">
<a href=""#"">
<img src=""http://placehold.it/125x175"">
</a>
</li>
</li>
</ul>
</div></code></pre>
</div>
</div>
</p>
"
"<p>You can use <code>></code> to access the children.</p>
<p>Here is the <a href=""http://jsfiddle.net/shrinivas93/cqo4dz3r/2/"" rel=""nofollow"">fiddle</a>.</p>
<p>Here is the snippet.</p>
<p><div class=""snippet"" data-lang=""js"" data-hide=""false"">
<div class=""snippet-code"">
<pre class=""snippet-code-css lang-css prettyprint-override""><code>#dash > ul > li {
background: red;
}</code></pre>
<pre class=""snippet-code-html lang-html prettyprint-override""><code><div id=""dash"">
<ul>
<li><a href=""#"">home</a>
</li>
<li><a href=""#"">about</a>
</li>
</ul>
</div></code></pre>
</div>
</div>
</p>
"
"""##
let stringRange = NSRange(location: 0, length: testString.utf16.count)
let matches = regex.matches(in: testString, range: stringRange)
var result: [[String]] = []
for match in matches {
var groups: [String] = []
for rangeIndex in 1 ..< match.numberOfRanges {
let nsRange = match.range(at: rangeIndex)
guard !NSEqualRanges(nsRange, NSMakeRange(NSNotFound, 0)) else { continue }
let string = (testString as NSString).substring(with: nsRange)
groups.append(string)
}
if !groups.isEmpty {
result.append(groups)
}
}
print(result)
Please keep in mind that these code samples are automatically generated and are not guaranteed to work. If you find any syntax errors, feel free to submit a bug report. For a full regex reference for Swift 5.2, please visit: https://developer.apple.com/documentation/foundation/nsregularexpression