<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Tryit Editor v2.8</title>
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/trystyle.css">
<script type="text/javascript" src="/383DC215FD01488192E7BD1FE3D822AA/69DB8989-A08B-0B4B-B4E3-5C4476C84CA5/main.js" charset="UTF-8"></script><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-3855518-1', 'auto');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
<script type='text/javascript'>
// GPT slots
var gptAdSlots = [];
googletag.cmd.push(function() {
var leaderMapping = googletag.sizeMapping().
// Mobile ad
addSize([0, 0], [320, 50]).
// Vertical Tablet ad
addSize([468, 0], [468, 60]).
// Horizontal Tablet
addSize([728, 0], [728, 90]).
// Desktop and bigger ad
addSize([970, 0], [[728, 90], [970, 90]]).build();
// addSize([970, 0], [728, 90]).build();
gptAdSlots[0] = googletag.defineSlot('/16833175/TryitLeaderboard', [[728, 90], [970, 90]], 'div-gpt-ad-1428407818244-0').
// gptAdSlots[0] = googletag.defineSlot('/16833175/TryitLeaderboard', [728, 90], 'div-gpt-ad-1428407818244-0').
defineSizeMapping(leaderMapping).addService(googletag.pubads());
googletag.pubads().setTargeting("content","tryhtml");
googletag.enableServices();
});
</script>
<script>
if (window.addEventListener) {
window.addEventListener("resize", browserResize);
} else if (window.attachEvent) {
window.attachEvent("onresize", browserResize);
}
var xbeforeResize = window.innerWidth;
function browserResize() {
var afterResize = window.innerWidth;
if ((xbeforeResize < (970) && afterResize >= (970)) || (xbeforeResize >= (970) && afterResize < (970)) ||
(xbeforeResize < (728) && afterResize >= (728)) || (xbeforeResize >= (728) && afterResize < (728)) ||
(xbeforeResize < (468) && afterResize >= (468)) ||(xbeforeResize >= (468) && afterResize < (468))) {
xbeforeResize = afterResize;
googletag.cmd.push(function() {
googletag.pubads().refresh([gptAdSlots[0]]);
});
}
}
</script>
<script type="text/javascript">
function codecolorize(x, lang) {
var tagcolor = "blue";
var tagnamecolor = "brown";
var attributecolor = "red";
var attributevaluecolor = "blue";
var commentcolor = "green";
var cssselectorcolor = "brown";
var csspropertycolor = "red";
var csspropertyvaluecolor = "blue";
var cssdelimitercolor = "black";
var jscolor = "black";
var jskeywordcolor = "blue";
var jsstringcolor = "brown";
var phpcolor = "black";
var phpkeywordcolor = "blue";
var phpstringcolor = "brown";
var angularstatementcolor = "red";
if (!lang) {lang = "html"; }
if (lang == "html") {return htmlMode(x);}
if (lang == "css") {return cssMode(x);}
if (lang == "js") {return jsMode(x);}
if (lang == "php") {return phpMode(x);}
return x;
function htmlMode(txt) {
var rest = txt, done = "", startpos, endpos, note;
while (rest.indexOf("<") > -1) {
note = "";
startpos = rest.indexOf("<");
if (rest.substr(startpos, 7) == "<!--") {
endpos = rest.indexOf("-->", startpos);
if (endpos == -1) {endpos = rest.length;}
done += rest.substring(0, startpos);
done += commentMode(rest.substring(startpos, endpos + 6));
rest = rest.substr(endpos + 6);
} else if (rest.substr(startpos, 8) == "<?php") {
endpos = rest.indexOf("?>", startpos);
if (endpos == -1) {endpos = rest.length;}
done += rest.substring(0, startpos);
done += phpMode(rest.substring(startpos, endpos + 5));
rest = rest.substr(endpos + 5);
} else {
if (rest.substr(startpos, 9).toUpperCase() == "<STYLE") {note = "css";}
if (rest.substr(startpos, 10).toUpperCase() == "<SCRIPT") {note = "javascript";}
endpos = rest.indexOf(">", startpos);
if (endpos == -1) {endpos = rest.length;}
done += rest.substring(0, startpos);
done += tagMode(rest.substring(startpos, endpos + 4));
rest = rest.substr(endpos + 4);
}
if (note == "css") {
endpos = rest.indexOf("</style>");
if (endpos > -1) {
done += cssMode(rest.substring(0, endpos));
rest = rest.substr(endpos);
}
}
if (note == "javascript") {
endpos = rest.indexOf("</script>");
if (endpos > -1) {
done += jsMode(rest.substring(0, endpos));
rest = rest.substr(endpos);
}
}
}
rest = done + rest;
done = "";
while (rest.indexOf("{{") > -1) {
startpos = rest.indexOf("{{");
endpos = rest.indexOf("}}", startpos);
if (endpos == -1) {
done += rest.substring(0, startpos + 2);
rest = rest.substr(startpos + 2);
} else {
done += rest.substring(0, startpos);
done += angularMode(rest.substring(startpos, endpos + 2));
rest = rest.substr(endpos + 2);
}
}
return done + rest;
}
function tagMode(txt) {
var rest = txt, done = "", startpos, endpos, result;
while (rest.indexOf(" ") > -1) {
startpos = rest.indexOf(" ");
endpos = rest.indexOf(">");
if (endpos == -1) {endpos = rest.length;}
done += rest.substring(0, startpos);
done += attributeMode(rest.substring(startpos, endpos));
rest = rest.substr(endpos);
}
result = done + rest;
result = "<span style=color:" + tagcolor + "><</span>" + result.substring(4);
if (result.substr(result.length - 4, 4) == ">") {
result = result.substring(0, result.length - 4) + "<span style=color:" + tagcolor + ">></span>";
}
return "<span style=color:" + tagnamecolor + ">" + result + "</span>";
}
function attributeMode(txt) {
var rest = txt, done = "", startpos, endpos, result;
while (rest.indexOf("=") > -1) {
startpos = rest.indexOf("=");
singlefnuttpos = rest.indexOf("'", startpos);
doublefnuttpos = rest.indexOf('"', startpos);
spacepos = rest.indexOf(" ", startpos);
if (spacepos > -1 && (spacepos < singlefnuttpos || singlefnuttpos == -1) && (spacepos < doublefnuttpos || doublefnuttpos == -1)) {
endpos = rest.indexOf(" ", startpos);
} else if (doublefnuttpos > -1 && (doublefnuttpos < singlefnuttpos || singlefnuttpos == -1) && (doublefnuttpos < spacepos || spacepos == -1)) {
endpos = rest.indexOf('"', rest.indexOf('"', startpos) + 1);
} else if (singlefnuttpos > -1 && (singlefnuttpos < doublefnuttpos || doublefnuttpos == -1) && (singlefnuttpos < spacepos || spacepos == -1)) {
endpos = rest.indexOf("'", rest.indexOf("'", startpos) + 1);
}
if (!endpos || endpos == -1) {endpos = rest.length;}
done += rest.substring(0, startpos);
done += attributeValueMode(rest.substring(startpos, endpos + 1));
rest = rest.substr(endpos + 1);
}
result = done + rest;
return "<span style=color:" + attributecolor + ">" + result + "</span>";
}
function attributeValueMode(txt) {
return "<span style=color:" + attributevaluecolor + ">" + txt + "</span>";
}
function angularMode(txt) {
return "<span style=color:" + angularstatementcolor + ">" + txt + "</span>";
}
function commentMode(txt) {
var result = txt, patt;
patt = new RegExp("<span style=color:" + jsstringcolor + ">", "g");
result = result.replace(patt, "<span style=color:" + commentcolor + ">");
patt = new RegExp("<span style=color:" + jskeywordcolor + ">", "g");
result = result.replace(patt, "<span style=color:" + commentcolor + ">");
patt = new RegExp("<span style=color:" + phpstringcolor + ">", "g");
result = result.replace(patt, "<span style=color:" + commentcolor + ">");
patt = new RegExp("<span style=color:" + phpkeywordcolor + ">", "g");
result = result.replace(patt, "<span style=color:" + commentcolor + ">");
return "<span style=color:" + commentcolor + ">" + result + "</span>";
}
function cssMode(txt) {
var rest = txt, done = "", startpos, endpos;
while (rest.indexOf("{") > -1) {
startpos = rest.indexOf("{");
endpos = rest.indexOf("}", startpos);
if (endpos == -1) {endpos = rest.length;}
done += rest.substring(0, startpos);
done += cssPropertyMode(rest.substring(startpos, endpos + 1));
rest = rest.substr(endpos + 1);
}
rest = done + rest;
done = "";
while (rest.indexOf("/*") > -1) {
startpos = rest.indexOf("/*");
endpos = rest.indexOf("*/", startpos);
if (endpos == -1) {endpos = rest.length;}
done += rest.substring(0, startpos);
done += commentMode(rest.substring(startpos, endpos + 2));
rest = rest.substr(endpos + 2);
}
return "<span style=color:" + cssselectorcolor + ">" + done + rest + "</span>";
}
function cssPropertyMode(txt) {
var rest = txt, done = "", startpos, endpos, result;
while (rest.indexOf(":") > -1) {
startpos = rest.indexOf(":");
endpos = rest.indexOf(";", startpos);
if (endpos == -1) {endpos = rest.length;}
done += rest.substring(0, startpos);
done += cssPropertyValueMode(rest.substring(startpos, endpos + 1));
rest = rest.substr(endpos + 1);
}
result = done + rest;
result = "<span style=color:" + cssdelimitercolor + ">{</span>" + result.substring(1);
if (result.substr(result.length - 1, 1) == "}") {
result = result.substring(0, result.length - 1) + "<span style=color:" + cssdelimitercolor + ">}</span>";
}
return "<span style=color:" + csspropertycolor + ">" + result + "</span>";
}
function cssPropertyValueMode(txt) {
var result = txt;
result = "<span style=color:" + cssdelimitercolor + ">:</span>" + result.substring(1);
if (result.substr(result.length - 1, 1) == ";") {
result = result.substring(0, result.length - 1) + "<span style=color:" + cssdelimitercolor + ">;</span>";
} else if (result.substr(result.length - 1, 1) == "}") {
result = result.substring(0, result.length - 1) + "<span style=color:" + cssdelimitercolor + ">}</span>";
}
return "<span style=color:" + csspropertyvaluecolor + ">" + result + "</span>";
}
function jsMode(txt) {
var rest = jsKeywords(txt), done = "", singlefnuttpos, doublefnuttpos, startpos, endpos, result, i, jsArr = [];
while (rest.indexOf('"') > -1 || rest.indexOf("'") > -1) {
singlefnuttpos = rest.indexOf("'");
doublefnuttpos = rest.indexOf('"');
if (singlefnuttpos > -1 && (singlefnuttpos < doublefnuttpos || doublefnuttpos == -1)) {
startpos = singlefnuttpos;
endpos = rest.indexOf("'", startpos + 1);
} else {
startpos = doublefnuttpos;
endpos = rest.indexOf('"', startpos + 1);
}
if (endpos == -1) {endpos = rest.length;}
done += rest.substring(0, startpos);
done += jsStringMode(rest.substring(startpos, endpos + 1));
rest = rest.substr(endpos + 1);
}
rest = done + rest;
done = "";
while (rest.indexOf("/*") > -1) {
startpos = rest.indexOf("/*");
endpos = rest.indexOf("*/", startpos);
if (endpos == -1) {endpos = rest.length;}
done += rest.substring(0, startpos);
done += commentMode(rest.substring(startpos, endpos + 2));
rest = rest.substr(endpos + 2);
}
rest = done + rest;
done = "";
while (rest.indexOf("//") > -1) {
startpos = rest.indexOf("//");
endpos = rest.indexOf("<br>", startpos);
if (endpos == -1) {endpos = rest.length;}
done += rest.substring(0, startpos);
done += commentMode(rest.substring(startpos, endpos + 4));
rest = rest.substr(endpos + 4);
}
result = done + rest;
return "<span style=color:" + jscolor + ">" + result + "</span>";
}
function jsKeywords(txt) {
var i, rest, result = txt, done = "", words, patt;
words = ["abstract","arguments","boolean","break","byte","case","catch","char","class","const","continue","debugger","default","delete","do","double","else","enum","eval","export","extends","false","final","finally","float","for","function","goto","if","implements","import","in","instanceof","int","interface","let","long","native","new","null","package","private","protected","public","return","short","static","super","switch","synchronized","this","throw","throws","transient","true","try","typeof","var","void","volatile","while","with","yield"];
for (i = 0; i < words.length; i++) {
rest = result;
done = "";
while (rest.indexOf(words[i]) > -1) {
startpos = rest.indexOf(words[i]);
endpos = startpos + words[i].length;
patt = /\W/g;
if (rest.substr(endpos,1).match(patt) && rest.substr(startpos - 1,1).match(patt)) {
done += rest.substring(0, startpos);
done += jsKeywordMode(rest.substring(startpos, endpos));
rest = rest.substr(endpos);
} else {
done += rest.substring(0, endpos);
rest = rest.substr(endpos);
}
}
result = done + rest;
}
return result;
}
function jsStringMode(txt) {
var result = txt, patt;
patt = /<span style=color:" + jskeywordcolor + ">/g;
result = result.replace(patt, "<span style=color:" + jsstringcolor + ">");
return "<span style=color:" + jsstringcolor + ">" + result + "</span>";
}
function jsKeywordMode(txt) {
return "<span style=color:" + jskeywordcolor + ">" + txt + "</span>";
}
function phpMode(txt) {
var rest = txt, done = "", singlefnuttpos, doublefnuttpos, startpos, endpos, result, i, jsArr = [];
if (rest.indexOf('"') == -1 && rest.indexOf("'") == -1) {rest = phpKeywords(rest);}
while (rest.indexOf('"') > -1 || rest.indexOf("'") > -1) {
singlefnuttpos = rest.indexOf("'");
doublefnuttpos = rest.indexOf('"');
if (singlefnuttpos > -1 && (singlefnuttpos < doublefnuttpos || doublefnuttpos == -1)) {
startpos = singlefnuttpos;
endpos = rest.indexOf("'", startpos + 1);
} else {
startpos = doublefnuttpos;
endpos = rest.indexOf('"', startpos + 1);
}
if (endpos == -1) {endpos = rest.length;}
done += phpKeywords(rest.substring(0, startpos));
done += phpStringMode(rest.substring(startpos, endpos + 1));
rest = rest.substr(endpos + 1);
if (rest.indexOf('"') == -1 && rest.indexOf("'") == -1) {rest = phpKeywords(rest);}
}
rest = done + rest;
done = "";
while (rest.indexOf("/*") > -1) {
startpos = rest.indexOf("/*");
endpos = rest.indexOf("*/", startpos);
if (endpos == -1) {endpos = rest.length;}
done += rest.substring(0, startpos);
done += commentMode(rest.substring(startpos, endpos + 2));
rest = rest.substr(endpos + 2);
}
result = done + rest;
result = "<span style=color:" + tagcolor + "><" + result.substr(4, 4) + "</span>" + result.substring(8);
if (result.substr(result.length - 5, 5) == "?>") {
result = result.substring(0, result.length - 5) + "<span style=color:" + tagcolor + ">?></span>";
}
return "<span style=color:" + phpcolor + ">" + result + "</span>";
}
function phpKeywords(txt) {
var i, rest, result = txt, done = "", words, patt;
words = ["__halt_compiler","abstract","and","array","as","break","callable","case","catch","class","clone","const","continue","declare","default","die","do","echo","else","elseif","empty","enddeclare","endfor","endforeach","endif","endswitch","endwhile","eval","exit","extends","final","for","foreach","function","global","goto","if","implements","include","include_once","instanceof","insteadof","interface","isset","list","namespace","new","or","print","private","protected","public","require","require_once","return","static","switch","throw","trait","try","unset","use","var","while","xor"];
for (i = 0; i < words.length; i++) {
rest = result;
done = "";
while (rest.indexOf(words[i]) > -1) {
startpos = rest.indexOf(words[i]);
endpos = startpos + words[i].length;
patt = /\W/g;
if (rest.substr(endpos,1).match(patt) && rest.substr(startpos - 1,1).match(patt)) {
done += rest.substring(0, startpos);
done += phpKeywordMode(rest.substring(startpos, endpos));
rest = rest.substr(endpos);
} else {
done += rest.substring(0, endpos);
rest = rest.substr(endpos);
}
}
result = done + rest;
}
return result;
}
function phpStringMode(txt) {
return "<span style=color:" + phpstringcolor + ">" + txt + "</span>";
}
function phpKeywordMode(txt) {
return "<span style=color:" + phpkeywordcolor + ">" + txt + "</span>";
}
}
function submitTryit() {
var text = document.getElementById("textareaCode").value;
var ifr = document.createElement("iframe");
ifr.setAttribute("frameborder", "0");
ifr.setAttribute("id", "iframeResult");
document.getElementById("iframewrapper").innerHTML = "";
document.getElementById("iframewrapper").appendChild(ifr);
var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument;
ifrw.document.open();
ifrw.document.write(text);
ifrw.document.close();
//23.02.2016: contentEditable is set to true, to fix text-selection (bug) in firefox.
//(and back to false to prevent the content from being editable)
//(To reproduce the error: Select text in the result window with, and without, the contentEditable statements below.)
if (ifrw.document.body && !ifrw.document.body.isContentEditable) {
ifrw.document.body.contentEditable = true;
ifrw.document.body.contentEditable = false;
}
}
//horizontal = false;
function restack(horizontal) {
var tc, ic, t, i, c, f, height, flt, width;
// horizontal = !horizontal;
tc = document.getElementsByClassName("textareacontainer")[0];
ic = document.getElementsByClassName("iframecontainer")[0];
t = document.getElementsByClassName("textarea")[0];
i = document.getElementsByClassName("iframe")[0];
c = document.getElementsByClassName("container")[0];
f = document.getElementsByClassName("footerText")[0];
tc.className = tc.className.replace("horizontal", "");
ic.className = ic.className.replace("horizontal", "");
t.className = t.className.replace("horizontal", "");
i.className = i.className.replace("horizontal", "");
c.className = c.className.replace("horizontal", "");
f.className = f.className.replace("horizontal", "");
if (horizontal) {
tc.className = tc.className + " horizontal";
ic.className = ic.className + " horizontal";
t.className = t.className + " horizontal";
i.className = i.className + " horizontal";
c.className = c.className + " horizontal";
f.className = f.className + " horizontal";
}
}
</script>
<style>
textarea.textareaCC {
background-color:transparent !important;
z-index:2;
position:relative;
-webkit-text-fill-color: transparent;
}
.codecolorCC {
position:absolute;
font-family: consolas,"courier new",monospace;
font-size: 15px;
height: 100%;
width: 100%;
padding: 8px;
resize: none;
border: none;
z-index: 1;
overflow-y:auto;
word-wrap: break-word;
}
.headerText {
line-height:2.2;
}
.textareawrapper {
height:93%;
position:relative;
}
.iframewrapper {
height:93%;
}
.textareacontainer {
position:relative;
}
.textareacontainer,.iframecontainer{
transition:all ease 0.2s;
}
.textareacontainer.horizontal,.iframecontainer.horizontal{
height:48%;
float:none;
width:100%;
}
.textarea.horizontal{
height:98%;
padding-left:0.75%;
}
.iframe.horizontal{
padding-right:0.75%;
padding-bottom:0;
}
.container.horizontal{
min-width:260px;
min-height:550px;
}
.textarea, .iframe {
padding-top:0;
}
.textarea {
padding-left:1.5%;
padding-right:0.75%;
}
.iframe {
padding-left:0.75%;
padding-right:1.5%;
}
.footerText.horizontal{
display:none;
}
.seeResult {
line-height:2.2;
}
.stackcontainer {
padding-top:8px;
}
.stackcontainer input {
width:16px;
height:16px;
}
@media only screen and (max-device-width: 768px) {
.headerText {
line-height:1.5;
}
.seeResult {
font-size:12px;
line-height:1.5;
}
.textareawrapper, .iframewrapper {
height:97%;
}
@media screen and (orientation:portrait) {
.textareawrapper {
height:100%;
}
.iframewrapper {
height:98%;
}
.textarea, .iframe {
padding-left:1%;
padding-right:0;
}
}
}
</style>
</head>
<body>
<div id='tryitLeaderboard'>
<div id='div-gpt-ad-1428407818244-0'>
<script type='text/javascript'>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1428407818244-0'); });</script>
</div>
</div>
<div class="container">
<div class="textareacontainer">
<div class="textarea">
<div style="overflow:auto;">
<div class="headerText">Edit This Code:</div>
<button class="seeResult" type="button" onclick="submitTryit()">See Result »</button>
</div>
<div class="textareawrapper">
<div id="codecolor"></div>
<textarea autocomplete="off" class="code_input" id="textareaCode" wrap="logical" spellcheck="false"><!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
</textarea>
<form autocomplete="off" style="margin:0px;display:none;">
<input type="hidden" name="code" id="code" />
<input type="hidden" id="bt" name="bt" />
</form>
</div>
</div>
</div>
<div class="iframecontainer">
<div class="iframe">
<div style="overflow:auto;">
<div class="headerText">Result:</div>
<div class="stackcontainer">
<label for="stackhorizontally" title="Horizontally"><img src="/images/stack_horizontally.png"></label><input id="stackhorizontally" type="radio" onclick="restack(true)" name="stack" title="Horizontally" >
<label for="stackvertically" title="Vertically"><img src="/images/stack_vertically.png" style="margin-right:10px;"></label><input id="stackvertically" type="radio" onclick="restack(false)" name="stack" title="Vertically" checked>
</div>
</div>
<div id="iframewrapper" class="iframewrapper">
</div>
</div>
</div>
<div class="footerText">Try it Yourself - © <a href="http://www.w3schools.com">w3schools.com</a></div>
</div>
<script>
submitTryit()
if (navigator.userAgent.indexOf("WebKit") > -1) {
document.getElementById("codecolor").className += " codecolorCC";
document.getElementById("textareaCode").className += " textareaCC";
colorcoding();
if (document.getElementById("textareaCode").addEventListener) {
document.getElementById("textareaCode").addEventListener("input", colorcoding);
document.getElementById("textareaCode").addEventListener("scroll", syncscroll);
} else if (document.getElementById("textareaCode").attachEvent) {
document.getElementById("textareaCode").attachEvent("oninput", colorcoding);
document.getElementById("textareaCode").attachEvent("onscroll", syncscroll);
}
}
function syncscroll() {
document.getElementById("codecolor").scrollTop = document.getElementById("textareaCode").scrollTop;
}
function colorcoding() {
var text = document.getElementById("textareaCode").value;
text = text.replace(/&/g, "&");
text = text.replace(/\t/g, " ");
text = text.replace(/ /g, " ");
text = text.replace(/</g, "<");
text = text.replace(/>/g, ">");
text = text.replace(/(?:\r\n|\r|\n)/g, '<br>');
text = text.replace(/<br> /g, "<br> ");
text = codecolorize(text);
document.getElementById("codecolor").innerHTML = text + "<br><br>";
}
</script>
</body>
</html>